SpringBoot+Vue+element-ui实现登录

首先创建个SpringBoot项目

pom.xml依赖:

 <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><mybatis-plus.version>3.2.0</mybatis-plus.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--添加Springmvc依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- mybatis--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.4</version></dependency><!-- mybatis 分页插件  pagehelper-spring-boot-starter--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.5</version></dependency><!-- springboot测试--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId></dependency><!-- 数据连接池 druid--><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.2</version></dependency><!--mysql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.49</version></dependency><!-- 工具类--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.5.4</version></dependency><!-- excel导出 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId></dependency><!--POI报表--><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.14</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>3.14</version></dependency><dependency><groupId>org.apache.poi</groupId><artifactId>poi-examples</artifactId><version>3.14</version></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.1.0</version></dependency><!-- fastjson --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.76</version></dependency></dependencies>

yml：

#配置改变端口号
server:port: 8090#配置数据库链接
spring:datasource:driver-class-name: com.mysql.jdbc.Driverusername: rootpassword: 123456url: jdbc:mysql://localhost:3306/cosmetic?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8type: com.alibaba.druid.pool.DruidDataSource   # 指定 德鲁伊连接池jpa:generate-ddl: falsehibernate:ddl-auto: none         # 属性参数的校验main:allow-circular-references: true   #因循环引用导致启动时报错mvc:view:suffix: .html#配置mybatis
mybatis:mapper-locations: classpath:mapper/*.xml   #  mapper所在的位置type-aliases-package: com.yzx.boot.entity   #配别名#控制台输出SQL语句,log4j
logging:level:com:yzx:boot:mapper: debug

后台:

控制层 controller:

package com.yzx.boot.controller;import com.yzx.boot.entity.User;
import com.yzx.boot.service.login.LoginService;
import com.yzx.boot.util.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;
import javax.servlet.http.HttpSession;/*** @program: SpringBoot_xiangmu* @description: 登录* @author: yzx* @create: 2021-12-29 20:48**/@Controller
@RequestMapping("/login")
public class LoginController {@ResourceLoginService  loginService;//登录@PostMapping("/login")@ResponseBodypublic  Object  login(@RequestBody User user, HttpSession  session) {
//        System.out.println(user);user = loginService.login(user);if (user != null) {session.setAttribute("user", user);return Result.success(user);}return   null;}

实体类:entity

package com.yzx.boot.entity;import java.util.Date;
import java.util.List;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class  User {/** */private Integer id;/** 姓名*/private String name;/** 用户名*/private String username;/** 密码*/private String password;/** 邮箱*/private String email;/** 手机号*/private String phone;/** 头像*/private String avatar;/** 权限*/private String role;/** 部门*/private String department;/** 职位*/private String position;private List<Permission> permission;}

mapper:

package com.yzx.boot.mapper;import com.yzx.boot.entity.User;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface LoginMapper {List<User>  login(User  user);}

service层:

package com.yzx.boot.service.login;import com.yzx.boot.entity.User;public interface LoginService {User login(User user);}

impl：

package com.yzx.boot.service.login;import com.alibaba.fastjson.JSONArray;
import com.yzx.boot.entity.Permission;
import com.yzx.boot.entity.Role;
import com.yzx.boot.entity.User;
import com.yzx.boot.mapper.LoginMapper;
import com.yzx.boot.mapper.RoleMapper;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;/*** @program: SpringBoot_xiangmu* @description:* @author: yzx* @create: 2021-12-29 20:59**/
@Service
public class LoginServiceimpl implements LoginService{@ResourceLoginMapper  loginMapper;@ResourceRoleMapper  roleMapper;@Overridepublic User login(User user) {List<User> list=loginMapper.login(user);System.out.println(user);if(list!=null&&list.size()>0){user=list.get(0);
//            getPermission(user);return user;}else{return null;}}}

配置默认访问页面：

package com.yzx.boot.config;import com.yzx.boot.interceptor.AuthInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;import javax.annotation.Resource;/*** @program: SpringBoot_xiangmu* @description: 配置授权拦截器* @author: yzx* @create: 2021-12-29 20:24**/@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter implements WebMvcConfigurer {//配置默认访问页面@Overridepublic void addViewControllers(ViewControllerRegistry registry) {registry.addViewController("/").setViewName("/page/end/login");registry.setOrder(Ordered.HIGHEST_PRECEDENCE);super.addViewControllers(registry);}
}

前台:html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="../../css/base.css"><link rel="stylesheet" href="../../css/element.css">
</head>
<body style="background:url('../../images/bg1.jpg') no-repeat; background-size: cover;"><div id="wrapper"><div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px"><div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">欢迎登录后台管理系统</div><div style="margin-top: 25px; width: 100%; height: 320px;"><div style="width: 60%; margin: 0 auto"><!--1--><input v-model="user.username" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%" placeholder="请输入账号"><input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%; margin-top: 25px" placeholder="请输入密码"><div style="margin-top: 25px; line-height: 40px"><input v-model="user.code" type="text" style="border: 1px solid #ccc; padding: 10px; width: 65%; " placeholder="请输入验证码"><div id="picyzm" style="display: inline-block; height: 35px; vertical-align: middle;"></div></div><button @click="login" style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">登录</button><a style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: darkblue" href="/page/end/register.html">还没账号？去注册</a></div></div></div></div><script src="../../js/jquery.min.js"></script><script src="../../js/vue.min.js"></script><script src="../../js/element.js"></script><script src="../../js/gVerify.js"></script><script>//初始化验证码let  verifyCode;new Vue({el: "#wrapper",data: {user: {}},mounted() {verifyCode = new GVerify({id: "picyzm",type: "blend"});},methods: {login() {if (!this.user.username) {this.$message({message: "请输入用户名",type: "error"});return;}if (!this.user.password) {this.$message({message: "请输入密码",type: "error"});return;}if (!this.user.code) {this.$message({message: "请输入验证码",type: "error"});return;}let res = verifyCode.validate(this.user.code);if (!res) {this.$message({message: "验证码错误",type: "error"});return;}$.ajax({url: "/login/login",type: "POST",contentType: "application/json",data: JSON.stringify(this.user)}).then(res => {console.log(this.user)if (res.code =200) {this.$message({message: "登录成功",type: "success"});sessionStorage.setItem("user", JSON.stringify(res.data));setTimeout(() => {location.href= "/page/end/item.html"}, 1000)} else {this.$message({message: res.msg,type: "error"})}})}}})</script>
</body>
</html>

SpringBoot+Vue+element-ui实现登录相关推荐

实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
SpringBoot+Vue实现第三方QQ登录(二)
1. 准备工作_OAuth2.0(官网地址:开发流程) 本步骤的作用: 接入QQ登录前,网站需首先进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权. 1. ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

SpringBoot+Vue+element-ui实现登录

yml：

后台:

SpringBoot+Vue+element-ui实现登录相关推荐

最新文章

热门文章