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

image

创建文件,如上图

创建好文件后去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,里面用来放关于用户操作的各种接口

多用户查询

image

根据id查询
image

更新
image

删除
image

登录
image

新增
image

好,我把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)
image

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

image

要是没问题的话,那是不是该把登录信息保存到缓存。
现在我们一般保存到localStorage中

关于localStorage,推荐看看我的这篇笔记:
【前端】【H5 API】Web存储 Web Storage

image

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

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

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

我们将用户数据保存在本地的目的是:
0.判断用户有没有登录
1.访问各个页面时判断用户有没有权限访问这个页面
2.需要用户数据时方便提取
3.发送操作请求时能知道是哪个用户在操作
……

我们在保存的时候肯定都是会保存一个时间的,因为用户登录过一次后不可能永远就处于登录状态。
我们记录了登录时间,就可以知道他是什么时候登录的,什么时候提示他过期,需要重新登录。

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

image

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

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

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

这时候,我们需要在编写一个以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
    })
}

image

ok,问题解决

posted @ 2024-01-25 23:44  萌狼蓝天  阅读(18)  评论(0编辑  收藏  举报