SpringBoot+MybatisPlus+Vue实现页面登录 |
您所在的位置：网站首页 › vue微信登陆 › SpringBoot+MybatisPlus+Vue实现页面登录 |
SpringBoot+MybatisPlus+Vue实现页面登录
|
1.绘制前端页面 外卖服务端 .body{ min-width: 1366px; }
登录
登录中...
new Vue({
el: '#login-app',
//data 用于定义属性
data() {
return {
loginForm:{
username: '',
password: ''
},
loading: false
}
},
computed: {
/*
* validator函数
*rule：指向该条规则对象。
value：新的值，用于参与运算、对比。
callback：执行回调，使用方法是：callback('...');。
如果不传参：表示验证通过，一般不必专门强调。
如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。比如callback('嘻嘻嘻');跟message: '哈哈哈'同时存在，则会提示哈哈哈。
* */
loginRules(){
const validUserName = (rule, value, callback) => {
//判断是否输入用户名
if(value.length < 1 ){
callback(new Error('请输入用户名'));
}else{
callback();
}
}
const validPassword = (rule, value, callback) => {
if(value.length < 6 ){
callback(new Error('密码必须在6位以上'));
}else{
callback();
}
}
return {
'username': [{ 'validator': validUserName, 'trigger': 'blur' }],
'password': [{ 'validator': validPassword, 'trigger': 'blur' }]
}
}
},
methods: {
async handleLogin(){
// 这个valid 表示的是验证是否通过输出回是一个布尔类型的值
this.$refs.loginForm.validate(async (valid) => {
if(valid){
this.loading = true;
let res = await loginApi(this.loginForm);
if (String(res.code) === '1') {
//将登录的用户信息存储在浏览器上面
localStorage.setItem('userInfo',JSON.stringify(res.data));
//页面跳转
window.location.href= '../index.html'
} else {
this.$message.error(res.msg);
this.loading = false
}
}
})
}
}
})
页面显示效果：  2.编写Java端代码 2.1首先写入一个启动类 package com.ruiji; import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @Slf4j @SpringBootApplication public class RuijiSpringBootAppliaction { public static void main(String[] args) { SpringApplication.run(RuijiSpringBootAppliaction.class,args); log.info("项目启动成功"); } }2.2配置文件 server: port: 8080 spring: application: name: reggie_take_out datasource: druid: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/ruiji?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true username: root password: root mybatis-plus: configuration: #在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射 map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: ASSIGN_ID2.3Mapper package com.ruiji.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.ruiji.entry.Employee; import org.apache.ibatis.annotations.Mapper; @Mapper public interface EmployeeMapper extends BaseMapper { }2.4Service package com.ruiji.service; import com.baomidou.mybatisplus.extension.service.IService; import com.ruiji.entry.Employee; import org.springframework.stereotype.Service; @Service public interface EmployeeService extends IService { }2.5ServiceImpl package com.ruiji.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.ruiji.entry.Employee; import com.ruiji.mapper.EmployeeMapper; import com.ruiji.service.EmployeeService; import org.springframework.stereotype.Service; @Service public class EmployeeServiceImpl extends ServiceImpl implements EmployeeService { }2.6Controller package com.ruiji.controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.ruiji.common.R; import com.ruiji.entry.Employee; import com.ruiji.service.EmployeeService; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.util.DigestUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; @Slf4j @RestController @RequestMapping("/employee") public class EmployeeController { @Autowired private EmployeeService employeeService; @RequestMapping("/login") public R userLogin(HttpServletRequest httpServletRequest,@RequestBody Employee employee){ //1.根据传进来的user名进行查询，存在继续，不存在退出 LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper(); queryWrapper.eq(Employee::getUsername,employee.getUsername()); Employee userInfo = employeeService.getOne(queryWrapper); //2.判断数据库里面是否存在登录user if("".equals(userInfo.getUsername()) && null == userInfo.getUsername()){ return R.error("当前用户不存在"); } //3.判断登录的密码是否一致 //密码进行MD5转换 //获取到前端输入的密码 String password = employee.getPassword(); String md5Password = DigestUtils.md5DigestAsHex(password.getBytes()); if (!md5Password.equals(userInfo.getPassword())){ return R.error("用户名和密码不一致"); } //4.验证通过之后，判断当前用户状态是否可用 if (userInfo.getStatus() == 0){ return R.error("当前用户失效，请联系管理员"); } //5.登录成功，将登录信息存储在session里面 httpServletRequest.getSession().setAttribute("employeeID",employee.getId()); return R.success(userInfo); } } |
【本文地址】