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

创建文件，如上图

创建好文件后去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")
    }
  })
};

是不是太太太简单了。

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

关于数据传输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
    })
}