Vue + Spring Boot 项目实战:人事管理系统——(1)登录页面及方法实现
这里写目录标题
- 登录页面及效果实现：
-
- 前端代码：
-
- 新建Vue项目
- 后端代码实现：
-
- 实体类(1.User)
- 实体类(2.Token)
- 工具类(3.ResultUtil)
- 控制层(AuthController)
- 服务层(UserService)
- Dao层(UserMapper)
- Mapper文件：
登录页面及效果实现：
- 实现登录的功能
前端代码：
新建Vue项目
新建vue项目网上有很多教程，就不再这里举例了，不清楚的可以百度康康教程。这里我采用的vue脚手架，在cmd命令行首先切换你想要新建项目的路径(cd xx盘)，然后输入vue ui命令，可以通过vue -V命令查看vue的版本！(一定要vue3.0版本才能使用图形化页面，否则会报错)。
- 新建项目
- 随后设置项目名字，根据自己的需要来制定
- 点击手动配置
- 勾选Babel、Router、 CSS、使用配置文件这四个组件。
- 新建项目后，下载依赖和插件
项目目录
- 通过vscode打开新建好的项目，项目目录如下
在APP.vue文件中更改以下配置
<template>
<div id="app">
<router-view>router-view>
div>
template>
<script>
script>
<style>
style>
在router.js文件中配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../views/login/index" //引入Login的组件
`const routes = [
{
path: "/",
redirect: "/login",//重定向到登录页面
},
{
path: "/login",
component: Login,
hiddren: true,
name: 'login'
},
const router = new VueRouter({
routes
})
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
export default router//暴露出去
- 在main.js文件中按需导入需要的依赖，减小项目的资源(导入方法如下)
//仅仅是举例子，真正情况按照自己的项目需要的项目导入。
import {
Pagination,
Dialog,
} from 'element-ui';
Vue.use(Pagination)
Vue.use(Dialog)
- 挂载axios实例
新建一个util文件夹，新建一个request.js，新建axios实例
import axios from 'axios'//导入axios组件
// 对axios的全局配置
// 全局请求拦截器配置
// axios.interceptors.request.use(
// config => {
// return config
// }
// )
// 创建axios实例
const service = axios.create(
{
// baseURL:'/api', // 域名地址，需要加request url
// baseURL: '/api',
baseURL:"http://localhost:9000",
timeout: 5000 // 默认超时5秒
}
)
// 请求拦截器，只跟用service实例发起请求的请求有关
service.interceptors.request.use(
config => {
// 对需要token的api进行调用
// config.headers['Access-Control-Allow-Origin'] = '*'
// config.headers['X-Token']
let accessToken = sessionStorage.getItem("token");
//console.log(accessToken)
config.headers['token'] = accessToken;
return config;
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// service的响应拦截器
service.interceptors.response.use(
response => {
// 在需要的时候，可以直接把data值放进res
const res = response.data
// 判断返回的code 200
// if(res.code !== 200) {
// console.log('error')
// 判断检查是否登陆，是否有toke
// 返回出错误状态
// return Promise.reject('error')
// }else{
// return res
// }
return res
},
error => {
console.log('err')
return Promise.reject(error)
}
)
export default service
- 新建一个api文件夹，用于与后端端口进行交互的请求。接着新建一个
import request from '../../util/request.js'
//登录方法实现
export function login(params) {
return request({
url: '/auth/user/login',//http://127.0.0.1:9000/api/auth/login
method: 'post',
params
})
}
//注销方法实现
export function logout() {
return request({
url: '/auth/user/logout',//http://127.0.0.1:9000/api/auth/login
method: 'get'
})
}
- 新建login文件夹，新建一个index.vue文件
- 页面布局
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../../assets/images/管理.png" alt="" />
div>
<el-form
:model="LoginForm"
:rules="LoginForm_Rule"
ref="LoginFormRef"
label-width="0px"
class="login_form"
>
<el-form-item prop="username">
<el-input v-model="LoginForm.username" prefix-icon="el-icon-user">
el-input
>
el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="LoginForm.password"
prefix-icon="el-icon-lock"
>
el-input
>
el-form-item>
<div class="btn">
<el-form-item class="btns">
<el-button type="primary" @click="submitForm">登录el-button>
<el-button type="info" @click="resetLoginForm">重置el-button>
el-form-item>
div>
el-form>
div>
<div class="login-footer">
<span>Copyright © 2021-05-10 kk楷楷 All Rights Reserved.span>
div>
div>
template>
- css样式(这里用到的图片可以一定去网上找噢)
<style Lang="less" scoped>
/* 设置主布局 */
.login_container {
background: url("../../assets/images/login-backgroud.jpg"); /* 引入图片资源 */
background-repeat: no-repeat; /* 设置图片不重复 */
background-size: 100% 100%;
width: 100%;
position: fixed; /* 充满全屏 */
height: 100%;
}
/* 设置登录盒子布局 */
.login_box {
/* 盒子居中的方法：①margin：0 auto ②弹性布局 ③相对布局 ④transform */
width: 450px;
height: 300px;
background-color: white; /* 设置背景颜色为白色 */
border-radius: 5px; /* 设置盒子的边框为圆形 */
position: absolute; /* 位置设置为绝对定位，进行位移 */
left: 50%; /* 向左占百分之50 */
top: 50%; /* 向右占百分之50 */
transform: translate(-50%, -50%); /* 横轴移动，中轴移动 */
}
/* 设置头像区域样式 */
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee; /* 设置盒子的边框 */
border-radius: 50%; /* 将盒子边框圆形弧度 */
padding: 10px; /* 设置上下左右内边距为10px */
box-shadow: 0 0 10px #ddd; /* 设置盒子的阴影，css3新增属性 */
position: absolute; /* 设置盒子布局为绝对定位 */
left: 50%; /* 向左移动自己宽度的50% */
transform: translate(-50%, -50%); /* 后面的50%是按照高度来进行集散的 */
background-color: #fff;
}
/* 设置图片样式 */
img {
width: 100%; /* 设置图片和主布局大小一致 */
height: 100%;
border-radius: 50%; /* 设置圆角弧度 */
background-color: #eee;
}
.login_form {
position: absolute;
bottom: 0px;
width: 100%;
padding: 0px 20px; /* 两个参数代表：第一个0代表上下，第二个元素代表左右 */
box-sizing: border-box; /*盒子溢出处理，不使用该配置的话，盒子会向右突出 */
/* border-box：以边界为界限调整边距，content-box以内容为边界表调整 */
}
.btns {
display: flex; /* 弹性布局 */
justify-content: flex-end;
}
.btn {
text-align: center;
float: left;
padding-left: 130px;
}
/* 设置底部样式 */
.login-footer {
position: fixed;
bottom: 0px;
height: 50px;
width: 100%;
text-align: center;
color: #fff;
}
style>
- 在命令行输入npm run build命令
- 效果实现(在浏览器中输入localhost:8080)
后端代码实现：
实体类(1.User)
用户实体类，使用以下注解需要下载Lombok插件以及在pom文件中引入依赖！
@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class User {
private Integer id;//角色id
private String username;//用户名
private String password;//用户密码
private String email;//用户邮箱
private String role;//用户角色
private Boolean state;//用户状态，判断是否能够进入后台
}
实体类(2.Token)
/**
* 用户凭证
*/
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class Token {
/**
* 键
*/
private String tokenKey;
/**
* 有效期 2小时-7200s
*/
private Long expire;
/**
* 创建时间
*/
private Date createDate;
}
工具类(3.ResultUtil)
/**
* 结果工具类
*/
public class ResultUtil {
public static ObjectResult okObjectResult(Object data){
ObjectResult result=new ObjectResult();
result.setCode(200);
result.setMsg("ok");
result.setSuccess("success");
result.setResultType("object");
result.setData(data);
return result;
}
public static ObjectResult failObjectResult(String message){
ObjectResult result=new ObjectResult();
result.setCode(200);
result.setMsg(message);
result.setSuccess("fail");
result.setResultType("object");
return result;
}
控制层(AuthController)
@RestController
@RequestMapping(value = "/auth/user")//前端请求的路径
public class AuthController {
@Resource
private UserService userService;
@Resource
private RedisManager redisManager;
@RequestMapping(value = "/login")
public ObjectResult<Token> login(@RequestParam(value = "username") String username,
@RequestParam(value = "password") String password){
//调用userService来完成登录的业务功能
Token token = userService.login(username, password);
if (token!=null){
return ResultUtil.okObjectResult(token);
}
return ResultUtil.failObjectResult("用户或密码不正确！！！");
}
服务层(UserService)
public interface UserService {
/**
* 登录
* @param username
* @param password
* @return
*/
Token login(String username, String password);
服务实现类(UserServiceImpl)
@Override
public Token login(String username, String password) {
//调用dao,查数据库
User user = userMapper.login(username);
if (user!=null && user.getPassword().equals(password)){
//用户名和密码是正确
//生成
Token token = tokenService.generateToken(user);
//保存redis
tokenService.saveToken(token,user);
return token;
}
return null;
}
Dao层(UserMapper)
/**
*
*
* 用户dao
*/
public interface UserMapper {
/**
* 用户登录
* 使用用户名查数据，速度
* @param username 用户名
* @return 用户
*/
User login(@Param("username") String username);
Mapper文件：
<mapper namespace="com.kk.system.dao.UserMapper">
<select id="login" resultType="User">
select * from sys_user where username=#{username}
</select>
</mapper>