Vue+element-plus+SpringBoot搭建管理系统
文章目录
目录
文章目录
前言
一、大致页面
二、工程结构
二、创建步骤
1.安装Vue
2.安装/引入element-plus
三、部分代码
1.main.js
2.App.vue
3.布局框架文件layout.vue
4.头部栏components/Header.vue
5.左侧导航栏components/Asid.vue
6.布局框架Layout.vue
7.路由配置router/index.js
8.封装axios工具 utils/reques.js
四、功能页面
1.登陆页面 views/LoginView.vue
2.注册页面views/RegisterView.vue
3.用户管理页面views/UserView.vue
五、一些技术点
1.前端解决跨域访问问题 vue.config.js文件
2.使用 element-puls icon图标
3.点击导航栏选项跳转视图页面
4.前端登录状态拦截 utils/reques.js 文件
六、后端工程
1.SpringBoot工程结构
2.Maven文件/依赖
3.application.yml配置文件
4.实体类User
5.封装统一返回对象Result
6.UserMapper层
7.UserController控制层
七、后端技术点
1.MybatisPlus分页插件配置
前言
Vue+element-plus的管理系统模板有很多，其开发步骤类似
一、大致页面
二、工程结构
二、创建步骤
1.安装Vue
全局安装@vue/cli（仅第一次执行）
注意：要以管理员的身份打开cmd1.如果出现下载缓慢可以先配置淘宝镜像：
npm config set registry https://registry.npm.taobao.orgnpm install -g @vue/cli
创建脚手架工程
在目录位置打开cmd，运行命令行：
vue create xxxx
选择Vue版本
运行项目:
1.先进入创建的文件夹的路径：
cd vue_text
2. 然后输入 ：npm run serve
2.安装/引入element-plus
在项目中打开cmd命令窗口，输入命令
npm install element-plus --save
安装成功，在main.js将其引入到自己的项目中
三、部分代码
1.main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'element-plus/dist/index.css'
import store from './store'
import '@/assets/css/global.css'
import ElementPlus from 'element-plus'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')2.App.vue
3.布局框架文件layout.vue
4.头部栏components/Header.vue
5.左侧导航栏components/Asid.vue
6.布局框架Layout.vue
用以控制各个组件在页面中的布局
7.路由配置router/index.js
// 路由
import { createRouter, createWebHistory } from 'vue-router'
import Layout from "../layout/Layout";
const routes = [
{
path: '/', //当访问根路径时，会转向访问Layout界面
name: 'Layout',
component: Layout,
redirect: 'user',//重定向,访问根目录重定向到/home
// 嵌套路由配置
children: [
{ path: 'user', name: 'User', component:()=>import("../views/UserView") },
{ path: 'book', name: 'Book', component:()=>import("../views/BookView") },
]
},
{
path: '/login',
name: 'Login',
component: ()=>import("../views/LoginView")
},
{
path: '/register',
name: 'Register',
component: ()=>import("../views/RegisterView")
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router
8.封装axios工具 utils/reques.js
// 封装axios
import axios from 'axios'
import router from "@/router";
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
//判断用户是否登录，没有登陆就跳转到login界面
let userJson = sessionStorage.getItem("user");
if(!userJson){
router.push("/login");
}
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据,如果返回的是String，就转换一下
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
四、功能页面
1.登陆页面 views/LoginView.vue
系统登录
登 录
注 册
2.注册页面views/RegisterView.vue
用户注册
确 认
3.用户管理页面views/UserView.vue
新增
导入
导出
编辑
删除
五、一些技术点
1.前端解决跨域访问问题 vue.config.js文件
// 解决跨域访问
// 跨域配置
module.exports = {
devServer: { //记住，别写错了devServer//设置本地默认端口 选填
port: 8089,
proxy: { //设置代理，必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:8090', //代理的目标地址
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}2.使用 element-puls icon图标
引入icon：
//{Location, Grid, Document, Setting,User}为所使用的icon图标名称
import {Location, Grid, Document, Setting,User} from '@element-plus/icons-vue' export default { name: "Aside", components: { Location, Grid, Document, Setting, User } }使用：
3.点击导航栏选项跳转视图页面
在导航栏属性加入 router
选项的 index值为配置好的路由
4.前端登录状态拦截 utils/reques.js 文件
六、后端工程
1.SpringBoot工程结构
2.Maven文件/依赖
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.6.7
com.example
demo
0.0.1-SNAPSHOT
springbootdemo
Demo project for Spring Boot
11
org.springframework.boot
spring-boot-starter-web
mysql
mysql-connector-java
runtime
org.projectlombok
lombok
true
org.mybatis.spring.boot
mybatis-spring-boot-starter
2.2.2
com.baomidou
mybatis-plus-boot-starter
3.4.3.1
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-maven-plugin
org.projectlombok
lombok
3.application.yml配置文件
server:
port: 8090
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/springboot-vue
username: root
password: 1234564.实体类User
package com.example.demo.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
/**
* 用户实体类
*/
@TableName("user")//与数据库表明对应
@Data//lombok 的Data注解,不用写get/set方法
public class User {
@TableId(type = IdType.AUTO)//主键id自动生成
private Integer id;
private String username;
private String password;
private String nickname;
private Integer age;
private String sex;
private String address;
}5.封装统一返回对象Result
package com.example.demo.pojo;
/**封装的统一返回对象
* @param
*/
public class Result {
private String code;
private String msg;
private T data;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
public Result() {
}
public Result(T data) {
this.data = data;
}
public static Result success() {
Result result = new Result<>();
result.setCode("0");
result.setMsg("成功");
return result;
}
public static Result success(T data) {
Result result = new Result<>(data);
result.setCode("0");
result.setMsg("成功");
return result;
}
public static Result error(String code, String msg) {
Result result = new Result();
result.setCode(code);
result.setMsg(msg);
return result;
}
public static Result error() {
Result result = new Result<>();
result.setCode("1");
result.setMsg("失败");
return result;
}
}
6.UserMapper层
package com.example.demo.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.pojo.User;
import org.springframework.stereotype.Controller;
/**
* User的持久层
*/
@Controller
//继承BaseMapper接口
public interface UserMapper extends BaseMapper {
}
7.UserController控制层
package com.example.demo.controller;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.mapper.UserMapper;
import com.example.demo.pojo.Result;
import com.example.demo.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.*;
/**
* User控制器
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
/**
* 登陆方法
* @param user
* @return
*/
@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","用户名或密码错误");
}else {
return Result.success(res);
}
}
/**
* 注册方法
* @param user
* @return
*/
@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","用户名重复");
}else {
userMapper.insert(user);
return Result.success(res);
}
}
/**
* 新增数据操作
*
* @param user
* @return
*/
@Transactional
@PostMapping
//@RequestBody注解，将传入的json数据转换为对象
public Result saveUser(@RequestBody User user) {
if (user.getId() != null) {
userMapper.updateById(user);
} else {
userMapper.insert(user);
}
return Result.success();
}
/**
* 根据ID删除数据
* @param
* @return
*/
@Transactional
@DeleteMapping("/{userId}")
public Result deleteUser(@PathVariable Integer userId){
userMapper.deleteById(userId);
return Result.success();
}
/**
* 分页查询User表
* 根据前端传来的搜索值进行模糊擦查询
*
* @param pageNum
* @param pageSize
* @param search
* @return
*/
@GetMapping
public Result findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(defaultValue = "") String search) {
// Wrappers.lambdaQuery().like(User::getNickname,search) 模糊查询，根据前端传来的search
Page page = userMapper.selectPage(new Page<>(pageNum, pageSize), Wrappers.lambdaQuery().like(User::getNickname, search));
return Result.success(page);
}
} 七、后端技术点
1.MybatisPlus分页插件配置
package com.example.demo.common.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* mybatis-plus 分页插件
*/
@Configuration
//扫描mapper文件包，加入ioc容器，不用在写@Mapper
@MapperScan("com.example.demo.mapper")
public class MybatisPlusConfig {
/**
* 分页插件
*/
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}