Springboot+vue后台管理系统-登陆注册功能的实现

首先说一下怎样写登陆注册功能：

我们之前是直接在Home.vue里面直接写主题代码，在APP.vue里面直接引入全部主题，但是显然这样是不符合实际情况的！所以我们需要写新的路由：

我们新的APP.vue：

然后我们新建一个框架层：也就是上面APP.vue引入的

接下来我们写登陆界面：

注册界面：

后端代码：

 
    @PostMapping("/login")
    public Result login(@RequestBody User user){
        User res = userMapper.selectOne(Wrappers.lambdaQuery().eq(User::getUsername, user.getUsername()).eq(User::getPassword, user.getPassword()));

        if (res ==null){
            return  Result.error("-1","用户名或密码错误");
        }
        return Result.success();
    }

    
    @PostMapping("/register")
    public Result register(@RequestBody User user){
        User res = userMapper.selectOne(Wrappers.lambdaQuery().eq(User::getUsername, user.getUsername()));
        if (res!=null){
            return Result.error("-1","用户名重复");
        }
        if (user.getPassword()==null){
            user.setPassword("123456");
        }
        userMapper.insert(user);
        return Result.success();
    }

前端路由：

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '../layout/Layout.vue'

const routes = [

  {
    path: '/layout',
    name: 'Layout',
    component: Layout,
    //重定向实现路由自动跳转：
    redirect:"/home",
    // 嵌套路由
    children:[
        {
      path: '/home',
      name: 'Home',
      component: () => import("@/views/Home"),
    }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import("@/views/Login")
  },
  {
    path: '/',
    redirect:"/login",
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import("@/views/Register")
  }
]

const router = createRouter({
  history: createWebHistory(process.env.base_URL),
  routes
})

export default router

验证码插件：

完结

Springboot+vue后台管理系统-登陆注册功能的实现

Java相关栏目本月热门文章