2024年1月Java项目开发指南13：登录注册实现

创建文件，如上图

创建好文件后去router.index.js配置路由

import { createRouter, createWebHistory } from 'vue-router';

// 定义路由
const routes = [
    {
        path: '/',
        name: 'ControlCenter',
        component: () => import('../views/ControlView.vue'),

    },
    {
        path: '/register',
        name: 'register',
        component: () => import('../components/UserSign/Register.vue'),
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('../components/UserSign/Login.vue'),
    },

    // 其他路由...
];

// 创建路由实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

先去写注册吧。

页面无非就是一个表单，输入账号，输入密码，输入昵称啥的，还有个按钮用来提交

界面设计请查阅AntDesignVue文档，利用它们的UI组件进行设计，我主要讲一下业务代码怎么写。

编写接口文件

在apis文件夹下创建UserApi.js，里面用来放关于用户操作的各种接口

多用户查询

根据id查询

更新

删除

登录

新增

好，我把UserApi.js这个文件完整代码贴出来参考

import { get, post, put, deleteRequest } from "./api.js";

export function user_get_list(){
    return get("/users")
}
export function user_get_by_id(){
    return get(`/users/${userId}`)
}
export function user_update(data){
    return put("/users",data)
}
export function user_delete_by_id(){
    return deleteRequest(`/users/${userId}`)
}
export function user_login(userAccount,userPassword){
    return post("/users/login",{
        "userAccount":userAccount,
        "userPassword":userPassword
    })
}
export function user_add(data){
    return post("/users",data)
}

注册

注册页面自己设计，例如我的表单数据是存放在formState中的，

const formState = reactive({
  userNickname: '',
  userAccount:'',
  userPassword: '',
  remember: true,
});

注意，这些参数的名字要和后端POJO中的名字一致哦，不然匹配不上，就自动获取不了。

引入新增用户的api

import {user_add} from "../../apis/UserApi.js";

编写请求

//点击登录按钮执行onFinish这个函数
const onFinish = values => {
  console.log("values",values)
  //调用user_add()这个接口，then里面的res表示返回结果

  user_add(values).then((res)=>{
    let code = res["code"]
    let msg=res["msg"]
    //
    notification.open({
      message: '通知',
      description:msg,
      icon: () =>
          h(SmileOutlined, {
            style: 'color: #108ee9',
          }),
    });
	//如果注册成功就跳转到登录界面
    if(code===1){
      router.push("/login")
    }
  })
};

是不是太太太简单了。

那么，我们继续完成登录吧

登录

登录页面同样自己设计（利用AntDesignVue）

登录成功，我们要做什么呢？

登陆成功意味着账号密码正确，但是这个号的状态可能是处于冻结状态对吧，因此我们要判断一下账号是否处于冻结状态（当然这个事情交给后端做会更好，我们现在就现在前端判断吧）

要是没问题的话，那是不是该把登录信息保存到缓存。

现在我们一般保存到localStorage中

关于localStorage，推荐看看我的这篇笔记：

【前端】【H5 API】Web存储 Web Storage

保存这个数据我使用base64编码，有个细节问题要注意，请看我这篇博客

【前端】2024年 前端Base64编码的中文处理问题

保存好后，就可以跳转到主页或者其他你想跳转的页面了

我们将用户数据保存在本地的目的是：

0.判断用户有没有登录

1.访问各个页面时判断用户有没有权限访问这个页面

2.需要用户数据时方便提取

3.发送操作请求时能知道是哪个用户在操作

……

我们在保存的时候肯定都是会保存一个时间的，因为用户登录过一次后不可能永远就处于登录状态。

我们记录了登录时间，就可以知道他是什么时候登录的，什么时候提示他过期，需要重新登录。

关于数据传输param和body的问题

在我的这个例子中，登录接口是以post的方式接收param参数

而我们在api.js里面配置的post请求函数是 以post方式发送body参数

显然对不上，那么就算我们填写了数据，后端也接受不到数据

这时候，我们需要在编写一个以post的方式发送param参数的方法

如下

// 统一的post请求方法
// 统一的post请求方法，发送数据在请求体中
export function post(url, data = {}) {
    return axiosInstance.post(url, data);
}

// 统一的post请求方法，发送数据在查询参数中
export function postWithParams(url, params = {}) {
    return axiosInstance.post(url, null, { params });
}

export function user_login(userAccount,userPassword){
    return postWithParams("/users/login",{
        "userAccount":userAccount,
        "userPassword":userPassword
    })
}

ok,问题解决