先写后端接口:(接口文档规范自己百度)
登录:Post
…/login
用户对象->一个token字符串
注册:Post
…/register
用户对象->ok
根据字符串token获取用户信息 get
…/getMemberInfo
token->用户对象
注册发送短信接口 get
…/send/{phone}
电话字符串->ok
主要服务类
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.StringUtils;
import pri.ydy.commonUtils.JwtUtils;
import pri.ydy.commonUtils.MD5;
import pri.ydy.educenter.entity.UcenterMember;
import pri.ydy.educenter.entity.vo.RegisterVo;
import pri.ydy.educenter.mapper.UcenterMemberMapper;
import pri.ydy.educenter.service.UcenterMemberService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
import pri.ydy.serviceBase.exceptionhandler.GuliException;
@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {
@Autowired
private RedisTemplate<String ,String > redisTemplate;
@Override//登录方法
public String login(UcenterMember member) {
String mobile=member.getMobile();
String password=member.getPassword();
//手机号和密码非空判断
if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)){
throw new GuliException(20001,"账号或密码为空,登录失败");
}
//判断数据库中手机号是否存在
QueryWrapper<UcenterMember> wrapper=new QueryWrapper<>();
wrapper.eq("mobile",mobile);
UcenterMember mobileMember = baseMapper.selectOne(wrapper);
//判断手机号是否为空
if (StringUtils.isEmpty(mobileMember)){
throw new GuliException(20001,"登录失败(手机号不存在)");
}
//密码是否正确
if (!MD5.encrypt(password).equals(mobileMember.getPassword())){
throw new GuliException(20001,"登录失败(密码错误)");
}
//用户是否禁用
if (mobileMember.getIsDisabled()){
throw new GuliException(20001,"登录失败(用户禁用)");
}
//登录成功,根据规则jwt生成token字符串。
String token= JwtUtils.getJwtToken(mobileMember.getId(),mobileMember.getNickname());
return token;
}
//注册
@Override
public void register(RegisterVo registerVo) {
//获取注册数据
String code=registerVo.getCode();
String mobile=registerVo.getMobile();
String nickname = registerVo.getNickname();
String password = registerVo.getPassword();
//判断非空
if (StringUtils.isEmpty(code)||StringUtils.isEmpty(mobile)||StringUtils.isEmpty(nickname)||StringUtils.isEmpty(password)){
throw new GuliException(20001,"注册失败(存在空元素)");
}
//判断验证码
//获取Redis中的验证码
String redisCode=redisTemplate.opsForValue().get(mobile);
//TODO 修改验证码为redisCode
if (!code.equals("1111")){
throw new GuliException(20001,"注册失败(验证码错误)");
}
//手机号是否重复
QueryWrapper<UcenterMember> wrapper=new QueryWrapper<>();
wrapper.eq("mobile",mobile);
Integer integer = baseMapper.selectCount(wrapper);
if (integer>0){
throw new GuliException(20001,"注册失败(手机号已存在)");
}
//添加到数据库,注册成功
UcenterMember member=new UcenterMember();
member.setMobile(mobile);
member.setPassword(MD5.encrypt(password));
member.setNickname(nickname);
member.setIsDisabled(false);//不禁用
member.setAvatar("https://edu-ydy01.oss-cn-chengdu.aliyuncs.com/2020/12/19/654ee8b0b1844577af51101057cfa71dfile.png");//设置默认头像
baseMapper.insert(member);
}
}
前端:
前端思路:
登录和登录成功之后首页面显示数据实现过程分析
1.调用接口登录返回token字符串
2.把第一步返回token字符串放到cookie里面
3.创建前端拦截器
判断cookie里面是否有token字符串,有则将token字符串梵高header(请求头中)
4.根据token值,调用接口,根据token获取用户信息,为了首页面显示
5.根据4获得的用户信息,在首页面进行显示
submitLogin(){
//1.调用接口进行登录,返回token字符串
loginApi.submitLogin(this.user).then(response => {
if(response.data.success){
//2.把token存在cookie中、也可以放在localStorage中,第3步在request.js中
//cookie名称,cookie值,domin作用范围
cookie.set('guli_token', response.data.data.token, { domain: 'localhost' })
//4. 登录成功根据token获取用户信息
loginApi.getLoginInfo().then(response => {
this.loginInfo = response.data.data.userInfo
//将用户信息记录cookie
cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' })
//跳转页面
window.location.href = "/";
})
}
})
},
在request.js中配置拦截器
request.js
import axios from 'axios'
import cookie from 'js-cookie'
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:9001', // api的base_url
timeout: 20000 // 请求超时时间
})
// 第三步 http request 拦截器
service.interceptors.request.use(
config => {
//debugger
if (cookie.get('guli_token')) {
//把获取的cookie值放到header里面去
config.headers['token'] = cookie.get('guli_token');
}
return config
},
err => {
return Promise.reject(err);
})
// http response 拦截器
export default service
在首页面中增加初始化方法showInfo,通过cookie进行数据回显。
登出则将cookie清空。
methods: {
showInfo() {
//从cookie获取用户信息
var jsonStr = cookie.get("guli_ucenter");
//把字符串转换为json对象
if (jsonStr) {
this.loginInfo = JSON.parse(jsonStr);
}
},
logout() {
//清空cookie
cookie.set("guli_ucenter", "", { domain: "localhost" });
cookie.set("guli_token", "", { domain: "localhost" });
//跳转页面
window.location.href = "/";
},
},