Springboot+Vue实现登录注册

创建登录的视图页面

在views里创建一个LoginView.vue，且配置一下路由

<template>
  <div>
    这是登录页面
  </div>
</template>

<script>

export default {
  name: "LOGIN",
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

import LoginView from '../views/LoginView.vue'
{
  path: '/login',
  name: 'login',
  component: LoginView
},

使用/login路由请求一下登录页面，会发现很奇怪：它不是一个独立的登录页面，而是嵌入在这个后台管理系统框架内部，这明显不是我们想要的。

将路由分级，一级路由和二级路由

1. 首先我们需要把App.vue里的内容移出去，比如我创建一个Layout.vue文件，把所有内容移到Layout.vue文件里

<template>
  <div>
    <el-container>
      <el-header style="background-color: #4c535a">
        <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px;">
        <span style="font-size: 20px; margin-left: 15px; color: white">手拉手带小白做毕设</span>
      </el-header>
    </el-container>
    <el-container>
      <el-aside style="overflow: hidden; min-height: 100vh; background-color: #545c64; width: 250px">
        <el-menu :default-active="$route.path" router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i><span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin">管理员信息</el-menu-item>
              <el-menu-item index="2-2">用户信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i><span>信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">xxx信息</el-menu-item>
              <el-menu-item index="3-2">yyy信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Layout"
}
</script>

<style>
.el-menu{
  border-right: none !important;
}
</style>

1. App.vue文件里，写上

<template>
  <div id="app">
    <router-view />
  </div>
</template>

1. 修改路由，把一级路由定义在Layout，然后菜单那些路由，定义在children里，作为子路由，这样的话就可以把login放在一级路由了。

const routes = [
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [ // 子路由
      {
        path: '',
        name: 'home',
        component: HomeView
      },
      {
        path: 'admin',
        name: 'admin',
        component: () => import('../views/AdminView.vue')
      }
    ]
  },

]

登录页面的设计

<div>
  <div style="width: 400px; height: 350px; margin: 150px auto; background-color:rgba(107,149,224,0.5); border-radius: 10px">
    <div style="width: 100%; height: 100px; font-size: 30px; line-height: 100px; text-align: center; color: #4a5ed0">欢迎登录</div>
    <div style="margin-top: 25px; text-align: center; height: 320px;">
      <el-form :model="admin">
        <el-form-item>
          <el-input v-model="admin.name" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="admin.password" prefix-icon="el-icon-lock" style="width: 80%" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 80%; margin-top: 10px" type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</div>

<script>

import request from "@/utils/request";

export default {
  name: "Login",
  data() {
    return {
      admin: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    login() {
      request.post("/admin/login", this.admin).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

登录后台逻辑

1. AdminController

@PostMapping("/login")
public Result login(@RequestBody Admin admin) {
    Admin loginUser = adminService.login(admin);
    return Result.success(loginUser);
}

1. AdminService

public Admin login(Admin admin) {
    // 1. 进行一些非空判断
    if (admin.getName() == null || "".equals(admin.getName())) {
        throw new CustomException("用户名不能为空");
    }
    if (admin.getPassword() == null || "".equals(admin.getPassword())) {
        throw new CustomException("密码不能为空");
    }
    // 2. 从数据库里面根据这个用户名和密码去查询对应的管理员信息，
    Admin user = adminDao.findByNameAndPassword(admin.getName(), admin.getPassword());
    if (user == null) {
        // 如果查出来没有，那说明输入的用户名或者密码有误，提示用户，不允许登录
        throw new CustomException("用户名或密码输入错误");
    }
    // 如果查出来了有，那说明确实有这个管理员，而且输入的用户名和密码都对；
    return user;
}

1. AdminDao.java

@Select("select * from admin where name = #{name} and password = #{password} limit 1")
Admin findByNameAndPassword(@Param("name") String name, @Param("password") String password);

异常捕获与自定义异常

1. GlobalExceptionHandler

package com.example.exception;

import com.example.common.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

@ControllerAdvice(basePackages="com.example.controller")
public class GlobalExceptionHandler {

    private static final Logger log = LoggerFactory.getLogger(GlobalExceptionHandler.class);

    //统一异常处理@ExceptionHandler,主要用于Exception
    @ExceptionHandler(Exception.class)
    @ResponseBody
    public Result error(HttpServletRequest request, Exception e){
        log.error("异常信息：",e);
        return Result.error("系统异常");
    }

    @ExceptionHandler(CustomException.class)
    @ResponseBody
    public Result customError(HttpServletRequest request, CustomException e){
        return Result.error(e.getMsg());
    }
}

1. 自定义异常：CustomException

package com.example.exception;

public class CustomException extends RuntimeException {
    private String msg;

    public CustomException(String msg) {
        this.msg = msg;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

注册功能的实现

1. 注册页面：LoginView.vue

<template>
  <div>
    <div style="width: 400px; height: 350px; margin: 150px auto; background-color:rgba(165,190,234,0.5); border-radius: 10px">
      <div style="width: 100%; height: 100px; font-size: 30px; line-height: 100px; text-align: center; color: #4a5ed0">欢迎注册</div>
      <div style="margin-top: 25px; text-align: center; height: 320px;">
        <el-form :model="admin">
          <el-form-item>
            <el-input v-model="admin.name" prefix-icon="el-icon-user" style="width: 80%" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="admin.password" prefix-icon="el-icon-lock" style="width: 80%" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 80%; margin-top: 10px" type="primary" @click="register()">注册</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      admin: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    register() {
      request.post("/admin/register", this.admin).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '注册成功',
            type: 'success'
          });
          this.$router.push("/login");
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

1. 添加一下路由

import RegisterView from "@/views/RegisterView";

{
  path: '/register',
  name: 'Register',
  component: RegisterView
},

1. AdminController.java

@PostMapping("/register")
public Result register(@RequestBody Admin admin) {
    adminService.add(admin);
    return Result.success();
}