devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+element-plus+SpringBoot搭建管理系统_基于spring boot + mybatis plus + vue & element的支持各种图

作者：小小林熬夜学编程 | 2024-05-07 13:27:57

赞

踩

基于spring boot + mybatis plus + vue & element的支持各种图表与组件的后台管理

文章目录

目录

文章目录

前言

一、大致页面

二、工程结构

二、创建步骤

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（仅第一次执行）
注意：要以管理员的身份打开cmd

1.如果出现下载缓慢可以先配置淘宝镜像：

npm config set registry https://registry.npm.taobao.org
npm 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

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import 'element-plus/dist/index.css'
  5. import store from './store'
  6. import '@/assets/css/global.css'
  7. import ElementPlus from 'element-plus'
  8. createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

2.App.vue

  1. <template>
  2.     <div>
  3.         <el-config-provider :locale="locale">
  4.             <router-view />
  5.         </el-config-provider>
  6.     </div>
  7. </template>
  8.  
  9. <script>
  10.     import locale from "element-plus/lib/locale/lang/zh-cn";
  11.     export default {
  12.         name: 'App',
  13.         components: {
  14.         },
  15.         setup() {
  16.             return { locale };
  17.         }
  18.     }
  19. </script>
  20.  
  21. <style>
  22.  
  23. </style>

3.布局框架文件layout.vue

  1. <!--用作框架-->
  2. <template>
  3.     <div>
  4.         <el-config-provider :locale="locale">
  5.             <!--    头部-->
  6.             <Header/>
  7.             <!--    主体-->
  8.             <div style="display: flex">
  9.                 <!--          侧边栏-->
  10.                 <Aside/>
  11.                 <!--          主体内容区域-->
  12.                 <router-view style="flex: 1"/>
  13.             </div>
  14.         </el-config-provider>
  15.     </div>
  16. </template>
  17.  
  18. <script>
  19.     import Header from "../components/Header";
  20.     import Aside from "../components/Aside";
  21.     import locale from "element-plus/lib/locale/lang/zh-cn";
  22.     export default {
  23.         name: "Layout",
  24.         components:{
  25.             Header,
  26.             Aside,
  27.         },
  28.         setup() {
  29.             return { locale };
  30.         }
  31.     }
  32. </script>
  33.  
  34. <style scoped>
  35.  
  36. </style>

4.头部栏components/Header.vue

  1. <!--头部导航栏-->
  2. <template>
  3.     <div class="topNavigation">
  4.         <div class="headerMenu">后台管理</div>
  5.         <div style="flex: 1"></div>
  6.         <div style="width: 100px">
  7.             <el-dropdown>
  8.                 <el-button>{{user.nickname}}<el-icon><arrow-down /></el-icon></el-button>
  9.                 <template #dropdown>
  10.                     <el-dropdown-menu>
  11.                         <el-dropdown-item>个人信息</el-dropdown-item>
  12.                         <el-dropdown-item @click="quit">退出系统</el-dropdown-item>
  13.                     </el-dropdown-menu>
  14.                 </template>
  15.             </el-dropdown>
  16.         </div>
  17.     </div>
  18. </template>
  19. <script>
  20.     import { ArrowDown  } from '@element-plus/icons-vue'
  21.     import router from "../router";
  22.     export default {
  23.         name: "Header",
  24.         components:{
  25.             ArrowDown
  26.         },
  27.         data(){
  28.           return{
  29.               user:{},
  30.           }
  31.         },
  32.         created() {
  33.             this.user = JSON.parse(sessionStorage.getItem("user")||"{}");
  34.         },
  35.         methods:{
  36.             quit(){
  37.                 sessionStorage.clear();
  38.                 router.push("/login");
  39.             },
  40.         }
  41.     }
  42. </script>
  43.  
  44. <style>
  45.     .topNavigation {
  46.         height: 50px;
  47.         line-height: 50px;
  48.         border-bottom: 1px solid #f6eaff;
  49.         display: flex;
  50.     }
  51.  
  52.     .headerMenu {
  53.         width: 200px;
  54.         padding-left: 30px;
  55.         font-weight: bold;
  56.         color: dodgerblue;
  57.     }
  58.  
  59. </style>

5.左侧导航栏components/Asid.vue

  1. <!--左侧边栏-->
  2. <template>
  3.     <nav>
  4.         <el-row class="tac">
  5. <!--            加入outer实现导航栏点击跳转,index项值为对应的路由-->
  6.             <el-menu
  7.                     router
  8.                     style="width: 200px ; min-height: 90vh"
  9.                     active-text-color="#ffd04b"
  10.                     class="el-menu-vertical-demo"
  11.                     default-active="user"
  12.                     text-color="black"
  13.                     :default-openeds="['数据管理']"
  14.             >
  15.                 <el-sub-menu index="系统管理">
  16.                     <template #title>
  17.                         <el-icon>
  18.                             <user/>
  19.                         </el-icon>
  20.                         <span>系统管理</span>
  21.                     </template>
  22.                     <el-menu-item index="user">用户管理</el-menu-item>
  23.                     <el-menu-item index="book">图书管理</el-menu-item>
  24.                 </el-sub-menu>
  25.                 <el-sub-menu index="数据管理">
  26.                     <template #title>
  27.                         <el-icon>
  28.                             <grid/>
  29.                         </el-icon>
  30.                         <span>登录与注册</span>
  31.                     </template>
  32.                     <el-menu-item index="login">登录</el-menu-item>
  33.                     <el-menu-item index="register">注册</el-menu-item>
  34.                 </el-sub-menu>
  35.             </el-menu>
  36.         </el-row>
  37.     </nav>
  38. </template>
  39. <script>
  40.     import {Location, Grid, Document, Setting,User} from '@element-plus/icons-vue'
  41.  
  42.     export default {
  43.         name: "Aside",
  44.         components: {
  45.             Location,
  46.             Grid,
  47.             Document,
  48.             Setting,
  49.             User
  50.         }
  51.     }
  52. </script>
  53.  
  54. <style scoped>
  55.  
  56. </style>

6.布局框架Layout.vue

用以控制各个组件在页面中的布局

  1. <!--用作框架-->
  2. <template>
  3.     <div>
  4.         <el-config-provider :locale="locale">
  5.             <!--    头部-->
  6.             <Header/>
  7.             <!--    主体-->
  8.             <div style="display: flex">
  9.                 <!--          侧边栏-->
  10.                 <Aside/>
  11.                 <!--          主体内容区域-->
  12.                 <router-view style="flex: 1"/>
  13.             </div>
  14.         </el-config-provider>
  15.     </div>
  16. </template>
  17.  
  18. <script>
  19.     import Header from "../components/Header";
  20.     import Aside from "../components/Aside";
  21.     import locale from "element-plus/lib/locale/lang/zh-cn";
  22.     export default {
  23.         name: "Layout",
  24.         components:{
  25.             Header,
  26.             Aside,
  27.         },
  28.         setup() {
  29.             return { locale };
  30.         }
  31.     }
  32. </script>
  33.  
  34. <style scoped>
  35.  
  36. </style>

7.路由配置router/index.js

  1. // 路由
  2. import { createRouter, createWebHistory } from 'vue-router'
  3. import Layout from "../layout/Layout";
  4.  
  5. const routes = [
  6.   {
  7.     path: '/', //当访问根路径时，会转向访问Layout界面
  8.     name: 'Layout',
  9.     component: Layout,
  10.     redirect: 'user',//重定向,访问根目录重定向到/home
  11.     // 嵌套路由配置
  12.     children: [
  13.       { path: 'user', name: 'User', component:()=>import("../views/UserView") },
  14.       { path: 'book', name: 'Book', component:()=>import("../views/BookView") },
  15.     ]
  16.   },
  17.   {
  18.     path: '/login',
  19.     name: 'Login',
  20.     component: ()=>import("../views/LoginView")
  21.   },
  22.   {
  23.     path: '/register',
  24.     name: 'Register',
  25.     component: ()=>import("../views/RegisterView")
  26.   }
  27. ];
  28. const router = createRouter({
  29.   history: createWebHistory(process.env.BASE_URL),
  30.   routes
  31. });
  32.  
  33. export default router

8.封装axios工具 utils/reques.js

  1. // 封装axios
  2. import axios from 'axios'
  3. import router from "@/router";
  4.  
  5. const request = axios.create({
  6.     baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
  7.     timeout: 5000
  8. })
  9.  
  10. // request 拦截器
  11. // 可以自请求发送前对请求做一些处理
  12. // 比如统一加token，对请求参数统一加密
  13. request.interceptors.request.use(config => {
  14.     config.headers['Content-Type'] = 'application/json;charset=utf-8';
  15.     // config.headers['token'] = user.token;  // 设置请求头
  16.  
  17.     //判断用户是否登录，没有登陆就跳转到login界面
  18.     let userJson = sessionStorage.getItem("user");
  19.     if(!userJson){
  20.         router.push("/login");
  21.     }
  22.  
  23.     return config
  24. }, error => {
  25.     return Promise.reject(error)
  26. });
  27.  
  28. // response 拦截器
  29. // 可以在接口响应后统一处理结果
  30. request.interceptors.response.use(
  31.     response => {
  32.         let res = response.data;
  33.         // 如果是返回的文件
  34.         if (response.config.responseType === 'blob') {
  35.             return res
  36.         }
  37.         // 兼容服务端返回的字符串数据,如果返回的是String，就转换一下
  38.         if (typeof res === 'string') {
  39.             res = res ? JSON.parse(res) : res
  40.         }
  41.         return res;
  42.     },
  43.     error => {
  44.         console.log('err' + error) // for debug
  45.         return Promise.reject(error)
  46.     }
  47. )
  48.  
  49.  
  50. export default request

四、功能页面

1.登陆页面 views/LoginView.vue

  1. <template>
  2.     <div class="contanier">
  3.         <div class="loginArea">
  4.             <h2 style="text-align: center;padding: 10px 0">系统登录</h2>
  5.             <el-form :model="loginForm" :rules="rules" ref="ruleForm">
  6.                 <el-form-item label="用户名:" prop="username">
  7.                     <el-input v-model.trim="loginForm.username" clearable></el-input>
  8.                 </el-form-item>
  9.                 <el-form-item label="密 码:" prop="password">
  10.                     <el-input type="password" v-model.trim="loginForm.password" show-password clearable></el-input>
  11.                 </el-form-item>
  12.                 <el-form-item>
  13.                     <el-button @click="loginBut('ruleForm')" style="width: 40%" type="primary">登 录</el-button>
  14.                     <el-button @click="registerBut" style="width: 40%;margin-left: 80px" type="primary">注 册</el-button>
  15.                 </el-form-item>
  16.             </el-form>
  17.         </div>
  18.     </div>
  19. </template>
  20.  
  21. <script>
  22.     import {User, Key, Lock} from '@element-plus/icons-vue'
  23.     import request from "../utils/reques";
  24.  
  25.     export default {
  26.         name: "LoginView",
  27.         components: {
  28.             User, Key, Lock
  29.         },
  30.         data() {
  31.             return {
  32.                 loginForm: {
  33.                     username: '',
  34.                     password: '',
  35.                 },
  36.                 // 表单校验
  37.                 rules: {
  38.                     username: [
  39.                         {required: true, message: '请输入账号', trigger: 'blur'},
  40.                         {min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  41.                     ],
  42.                     password: [
  43.                         {required: true, message: '请输入密码', trigger: 'blur'},
  44.                         {min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  45.                     ]
  46.                 }
  47.             }
  48.         },
  49.         methods: {
  50.             //登录按钮
  51.             loginBut(formName) {
  52.                 /**
  53.                  * 配置axios请求,请求的url和请求参数
  54.                  * .then（）链式操作，前一步完成后，结果传入
  55.                  */
  56.                 //表单校验
  57.                 this.$refs[formName].validate((valid) => {
  58.                     if (valid) {
  59.                         request.post("/user/login", this.loginForm).then(res => {
  60.                             if (res.code == "0") {
  61.                                 this.$message({
  62.                                     message: '登录成功o(*￣▽￣*)ブ',
  63.                                     type: 'success'
  64.                                 });
  65.                                 //缓存用户信息，将登录的用户信息存入到sessionStorage
  66.                                 sessionStorage.setItem("user",JSON.stringify(res.data));
  67.                                 //登陆成功页面跳转,跳转到到根目录
  68.                                 this.$router.push("/")
  69.                             } else {
  70.                                 this.$message({
  71.                                     message: "登录失败,,ԾㅂԾ,,"+res.msg,
  72.                                     type: 'error'
  73.                                 });
  74.                             }
  75.                         });
  76.                     } else {
  77.                         this.$message({
  78.                             message: '请确认信息(ˉ▽ˉ；)...',
  79.                             type: 'warning'
  80.                         });
  81.                         return false;
  82.                     }
  83.                 });
  84.             },
  85.             //注册按钮
  86.             registerBut() {
  87.                 this.$router.push("/register")
  88.             },
  89.         }
  90.     }
  91. </script>
  92.  
  93. <style scoped>
  94.     .contanier {
  95.         width: 100%;
  96.         height: 100%;
  97.         overflow: hidden;
  98.     }
  99.  
  100.     .loginArea {
  101.         width: 400px;
  102.         border-radius: 30px;
  103.         background-clip: border-box;
  104.         margin: 200px auto;
  105.         padding: 15px 35px 15px 35px;
  106.         background: #d6e8ee;
  107.         border: 3px solid #e6fffc;
  108.         box-shadow: 0 0 30px #c5c7ff;
  109.     }
  110. </style>

2.注册页面views/RegisterView.vue

  1. <template>
  2.     <div class="contanier">
  3.         <div class="loginArea">
  4.             <h2 style="text-align: center;padding: 10px 0">用户注册</h2>
  5.             <el-form :model="registerForm" :rules="rules" ref="ruleForm">
  6.                 <el-form-item label="用户名:" prop="username">
  7.                     <el-input v-model.trim="registerForm.username" clearable></el-input>
  8.                 </el-form-item>
  9.                 <el-form-item label="密 码:" prop="password">
  10.                     <el-input type="password" v-model.trim="registerForm.password" show-password clearable></el-input>
  11.                 </el-form-item>
  12.                 <el-form-item label="确认密码:" prop="againPassword">
  13.                     <el-input type="password" v-model.trim="registerForm.againPassword" show-password
  14.                               clearable></el-input>
  15.                 </el-form-item>
  16.                 <el-form-item label="昵 称:" prop="nickname">
  17.                     <el-input type="text" v-model.trim="registerForm.nickname" clearable></el-input>
  18.                 </el-form-item>
  19.                 <el-form-item label="年 龄:" prop="age">
  20.                     <el-input type="number" v-model.trim="registerForm.age" clearable></el-input>
  21.                 </el-form-item>
  22.                 <el-form-item label="性 别:" prop="sex">
  23.                     <el-checkbox-group v-model="registerForm.sex">
  24.                         <el-radio label="男" v-model="registerForm.sex"/>男
  25.                         <el-radio label="女" v-model="registerForm.sex"/>女
  26.                         <el-radio label="未知" v-model="registerForm.sex"/>未知
  27.                     </el-checkbox-group>
  28.                 </el-form-item>
  29.                 <el-form-item label="地 址:" prop="address">
  30.                     <el-input v-model.lazy="registerForm.address" type="textarea"></el-input>
  31.                 </el-form-item>
  32.                 <el-form-item>
  33.                     <el-button @click="registerSure('ruleForm')" style="width: 100%" type="primary">确 认</el-button>
  34.                 </el-form-item>
  35.             </el-form>
  36.         </div>
  37.     </div>
  38. </template>
  39.  
  40. <script>
  41.     import {User, Key, Lock} from '@element-plus/icons-vue'
  42.     import request from "../utils/reques";
  43.  
  44.     export default {
  45.         name: "RegisterView",
  46.         components: {
  47.             User, Key, Lock
  48.         },
  49.         data() {
  50.             return {
  51.                 registerForm: {
  52.                     username: '',
  53.                     password: '',
  54.                     againPassword: '',
  55.                     nickname: '',
  56.                     age: '',
  57.                     sex: '',
  58.                     address: ''
  59.                 },
  60.                 // 表单校验
  61.                 rules: {
  62.                     username: [
  63.                         {required: true, message: '请输入账号', trigger: 'blur'},
  64.                         {min: 2, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  65.                     ],
  66.                     password: [
  67.                         {required: true, message: '请输入密码', trigger: 'blur'},
  68.                         {min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  69.                     ],
  70.                     againPassword: [
  71.                         {required: true, message: '请再次输入密码', trigger: 'blur'},
  72.                         {min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  73.                     ],
  74.                     nickname: [
  75.                         {required: true, message: '请输入昵称', trigger: 'blur'},
  76.                         {min: 2, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  77.                     ],
  78.                     age: [
  79.                         {required: true, message: '请输入年龄', trigger: 'blur'},
  80.                         {min: 1, max: 3, message: '长度在 3 到 5 个字符', trigger: 'blur'}
  81.                     ],
  82.                     sex: [
  83.                         {required: true, message: '请选择性别', trigger: 'change'}
  84.                     ],
  85.                     address: [
  86.                         {required: true, message: '请输入地址', trigger: 'blur'},
  87.                         {min: 2, message: '长度要大于2个字符', trigger: 'blur'}
  88.                     ]
  89.                 }
  90.             }
  91.         },
  92.         methods: {
  93.             //登录按钮
  94.             registerSure(formName) {
  95.                 if (this.registerForm.password != this.registerForm.againPassword) {
  96.                     this.$message({
  97.                         message: '两次密码不一致(ˉ▽ˉ；)..',
  98.                         type: 'warning'
  99.                     });
  100.                     return;
  101.                 }
  102.                 /**
  103.                  * 配置axios请求,请求的url和请求参数
  104.                  * .then（）链式操作，前一步完成后，结果传入
  105.                  */
  106.                 //表单校验
  107.                 this.$refs[formName].validate((valid) => {
  108.                     if (valid) {
  109.                         request.post("/user/register", this.registerForm).then(res => {
  110.                             if (res.code == "0") {
  111.                                 this.$message({
  112.                                     message: '注册成功o(*￣▽￣*)ブ',
  113.                                     type: 'success'
  114.                                 });
  115.                                 //注册成功，跳转到登陆界面
  116.                                 this.$router.push("/login")
  117.                             } else {
  118.                                 this.$message({
  119.                                     message: "注册失败,,ԾㅂԾ,," + res.msg,
  120.                                     type: 'error'
  121.                                 });
  122.                             }
  123.                         });
  124.                     } else {
  125.                         this.$message({
  126.                             message: '请确认信息(ˉ▽ˉ；)...',
  127.                             type: 'warning'
  128.                         });
  129.                         return false;
  130.                     }
  131.                 });
  132.             },
  133.         }
  134.     }
  135. </script>
  136.  
  137. <style scoped>
  138.     .contanier {
  139.         width: 100%;
  140.         height: 100%;
  141.         overflow: hidden;
  142.     }
  143.  
  144.     .loginArea {
  145.         width: 400px;
  146.         border-radius: 30px;
  147.         background-clip: border-box;
  148.         margin: 200px auto;
  149.         padding: 15px 35px 15px 35px;
  150.         background: #d6e8ee;
  151.         border: 3px solid #e6fffc;
  152.         box-shadow: 0 0 30px #c5c7ff;
  153.     }
  154. </style>

3.用户管理页面views/UserView.vue

  1. <template>
  2.     <div style="width: 100%">
  3.         <!--    操作区域-->
  4.         <div style="margin: 10px 5px">
  5.             <el-button type="primary" @click="addUser">新增</el-button>
  6.             <el-button type="primary" @click="importUser">导入</el-button>
  7.             <el-button type="primary" @click="exportUser">导出</el-button>
  8.         </div>
  9.         <!--    搜索区域-->
  10.         <div style="margin: 10px 5px">
  11.             <el-input v-model="search" clearable type="text" placeholder="请输入关键字" style="width: 200px"></el-input>
  12.             <el-button @click="load" type="primary" style="margin: 0 5px">
  13.                 <el-icon>
  14.                     <search/>
  15.                 </el-icon>
  16.             </el-button>
  17.         </div>
  18.         <el-table v-model:data="tableData"
  19.                   stripe
  20.                   border
  21.                   style="width: 100%"
  22.         >
  23.             <el-table-column prop="id" label="id"/>
  24.             <el-table-column prop="username" label="用户名"/>
  25.             <el-table-column prop="nickname" label="昵称"/>
  26.             <el-table-column prop="age" label="年龄"/>
  27.             <el-table-column prop="sex" label="性别"/>
  28.             <el-table-column prop="address" label="地址"/>
  29.             <el-table-column label="操作">
  30.                 <template #default="scope">
  31.                     <el-button size="mini" @click="updateUser(scope.row)">编辑</el-button>
  32.                     <el-popconfirm title="你确定要删除该数据吗?" @confirm="deleteUser(scope.row.id)">
  33.                         <template #reference>
  34.                             <el-button size="mini" type="danger">删除</el-button>
  35.                         </template>
  36.                     </el-popconfirm>
  37.                 </template>
  38.             </el-table-column>
  39.         </el-table>
  40.         <div class="demo-pagination-block">
  41.             <el-pagination
  42.                     v-model:currentPage="currentPage"
  43.                     v-model:page-size="pageSize"
  44.                     :page-sizes="[5, 10, 20]"
  45.                     :small="small"
  46.                     :disabled="disabled"
  47.                     :background="background"
  48.                     layout="total, sizes, prev, pager, next, jumper"
  49.                     :total="totals"
  50.                     @size-change="handleSizeChange"
  51.                     @current-change="handleCurrentChange"
  52.             />
  53.         </div>
  54.         <div>
  55.             <el-dialog
  56.                     v-model="dialogVisible"
  57.                     title="新增数据"
  58.                     width="60%">
  59.                 <el-form :model="form" :rules="rules" ref="ruleForm" label-width="140px">
  60.                     <el-form-item label="用户名:" prop="username">
  61.                         <el-input v-model.trim="form.username" style="width: 80%"/>
  62.                     </el-form-item>
  63.                     <el-form-item label="昵  称:" prop="nickname">
  64.                         <el-input v-model.trim="form.nickname" style="width: 80%"/>
  65.                     </el-form-item>
  66.                     <el-form-item label="密  码:" prop="password">
  67.                         <el-input type="password" show-password v-model.trim="form.password" style="width: 80%"/>
  68.                     </el-form-item>
  69.                     <el-form-item label="年  龄:" prop="age">
  70.                         <el-input type="number" v-model.trim="form.age" style="width: 80%"/>
  71.                     </el-form-item>
  72.                     <el-form-item label="性  别:" prop="sex">
  73.                         <el-checkbox-group v-model="form.sex">
  74.                             <el-radio label="男" v-model="form.sex"/>男
  75.                             <el-radio label="女" v-model="form.sex"/>女
  76.                             <el-radio label="未知" v-model="form.sex"/>未知
  77.                         </el-checkbox-group>
  78.                     </el-form-item>
  79.                     <el-form-item label="地址:" prop="address">
  80.                         <el-input v-model.lazy="form.address" type="textarea" style="width: 80%"></el-input>
  81.                     </el-form-item>
  82.                 </el-form>
  83.                 <template #footer>
  84.                   <span class="dialog-footer">
  85.                     <el-button @click="dialogVisible = false">取消</el-button>
  86.                     <el-button type="primary" @click="addFormSave('ruleForm')">确定</el-button>
  87.                   </span>
  88.                 </template>
  89.             </el-dialog>
  90.         </div>
  91.     </div>
  92. </template>
  93. <script>
  94.     import {Search} from '@element-plus/icons-vue'
  95.     import request from "../utils/reques";
  96.  
  97.     export default {
  98.         name: 'HomeView',
  99.         components: {
  100.             Search
  101.         },
  102.         data() {
  103.             return {
  104.                 search: '',
  105.                 totals: 0,
  106.                 currentPage: '',
  107.                 pageSize: 10,
  108.                 dialogVisible: false,
  109.                 tableData: [],
  110.                 form: {
  111.                     username: '',
  112.                     password: '',
  113.                     nickname: '',
  114.                     age: 0,
  115.                     sex: '',
  116.                     address: '',
  117.                 },
  118.                 // 表单校验
  119.                 rules: {
  120.                     username: [
  121.                         { required: true, message: '请输入用户名', trigger: 'blur' },
  122.                         { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  123.                     ],
  124.                     nickname: [
  125.                         { required: true, message: '请输入昵称', trigger: 'blur' },
  126.                         { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  127.                     ],
  128.                     password: [
  129.                         { required: true, message: '请输入密码', trigger: 'blur' },
  130.                         { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  131.                     ],
  132.                     age: [
  133.                         { required: true, message: '请输入年龄', trigger: 'blur' }
  134.                     ],
  135.                     sex: [
  136.                         {required: true, message: '请选择性别', trigger: 'change' }
  137.                     ],
  138.                     address: [
  139.                         { required: true, message: '请输入地址', trigger: 'blur' },
  140.                     ]
  141.                 }
  142.             }
  143.         },
  144.         created() {
  145.             this.load()
  146.         },
  147.         methods: {
  148.             // 加载初始数据
  149.             load(){
  150.                 request.get("user/",{
  151.                     params:{
  152.                         pageNum: this.currentPage,
  153.                         pageSize: this.pageSize,
  154.                         search: this.search
  155.                     }
  156.                 }).then(res => {
  157.                     this.tableData = res.data.records;
  158.                     this.totals = res.data.total;
  159.                 })
  160.             },
  161.             //新增数据按钮
  162.             addUser() {
  163.                 this.dialogVisible = true;
  164.                 this.form = {};
  165.             },
  166.             // 点击新增按钮后在弹出的表单点击确定按钮
  167.             addFormSave(formName) {
  168.                 /**
  169.                  * 配置axios请求,请求的url和请求参数
  170.                  * .then（）链式操作，前一步完成后，结果传入
  171.                  */
  172.                 //表单校验
  173.                 this.$refs[formName].validate((valid) => {
  174.                     if (valid) {
  175.                         request.post("/user",this.form).then(res=>{
  176.                             if (res.code=="0"){
  177.                                 this.$message({
  178.                                     message: '操作成功o(*￣▽￣*)ブ',
  179.                                     type: 'success'
  180.                                 });
  181.                                 this.dialogVisible = false;
  182.                                 this.load();
  183.                             }else {
  184.                                 this.$message({
  185.                                     message: '操作失败,,ԾㅂԾ,,',
  186.                                     type: 'error'
  187.                                 });
  188.                                 this.dialogVisible = false;
  189.                             }
  190.                         });
  191.                     } else {
  192.                         this.$message({
  193.                             message: '请确认表单(ˉ▽ˉ；)...',
  194.                             type: 'warning'
  195.                         });
  196.                         return false;
  197.                     }
  198.                 });
  199.             },
  200.             //删除数据按钮
  201.             deleteUser(userId) {
  202.                 request.delete("user/"+userId,).then(res =>{
  203.                     if (res.code=="0"){
  204.                         this.$message({
  205.                             message: '操作成功o(*￣▽￣*)ブ',
  206.                             type: 'success'
  207.                         });
  208.                         this.load();
  209.                     }else {
  210.                         this.$message({
  211.                             message: '操作失败,,ԾㅂԾ,,',
  212.                             type: 'error'
  213.                         });
  214.                     }
  215.                 });
  216.             },
  217.             //编辑信息按钮
  218.             updateUser(row) {
  219.                 this.form = JSON.parse(JSON.stringify(row));
  220.                 this.dialogVisible = true;
  221.                 this.load();
  222.             },
  223.             //导出数据按钮
  224.             exportUser() {
  225.                 this.load();
  226.             },
  227.             //导入数据按钮
  228.             importUser() {
  229.  
  230.             },
  231.             // 改变当前每页数据个数触发
  232.             handleSizeChange() {
  233.                 this.load();
  234.             },
  235.             // 改变当前页码触发
  236.             handleCurrentChange() {
  237.                 this.load();
  238.             }
  239.         }
  240.     }
  241. </script>

 五、一些技术点

1.前端解决跨域访问问题 vue.config.js文件

  1. // 解决跨域访问
  2. // 跨域配置
  3. module.exports = {
  4.     devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
  5.         port: 8089,
  6.         proxy: {                 //设置代理，必须填
  7.             '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
  8.                 target: 'http://localhost:8090',     //代理的目标地址
  9.                 changeOrigin: true,              //是否设置同源，输入是的
  10.                 pathRewrite: {                   //路径重写
  11.                     '/api': ''                     //选择忽略拦截器里面的内容
  12.                 }
  13.             }
  14.         }
  15.     }
  16. }

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
    }
}

使用：

<el-icon>
    <user/>
</el-icon>

3.点击导航栏选项跳转视图页面

在导航栏属性加入 router

选项的 index值为配置好的路由

4.前端登录状态拦截 utils/reques.js 文件

六、后端工程

1.SpringBoot工程结构

2.Maven文件/依赖

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.6.7</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>demo</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>springbootdemo</name>
  15.     <description>Demo project for Spring Boot</description>
  16.     <properties>
  17.         <java.version>11</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <!--        web-->
  21.         <dependency>
  22.             <groupId>org.springframework.boot</groupId>
  23.             <artifactId>spring-boot-starter-web</artifactId>
  24.         </dependency>
  25.         <!--mysql-->
  26.         <dependency>
  27.             <groupId>mysql</groupId>
  28.             <artifactId>mysql-connector-java</artifactId>
  29.             <scope>runtime</scope>
  30.         </dependency>
  31.         <!--        lombok-->
  32.         <dependency>
  33.             <groupId>org.projectlombok</groupId>
  34.             <artifactId>lombok</artifactId>
  35.             <optional>true</optional>
  36.         </dependency>
  37.         <!--        mybatis-->
  38.         <dependency>
  39.             <groupId>org.mybatis.spring.boot</groupId>
  40.             <artifactId>mybatis-spring-boot-starter</artifactId>
  41.             <version>2.2.2</version>
  42.         </dependency>
  43.         <!--        MybatisPlus依赖-->
  44.         <dependency>
  45.             <groupId>com.baomidou</groupId>
  46.             <artifactId>mybatis-plus-boot-starter</artifactId>
  47.             <version>3.4.3.1</version>
  48.         </dependency>
  49.         <dependency>
  50.             <groupId>org.springframework.boot</groupId>
  51.             <artifactId>spring-boot-starter-test</artifactId>
  52.             <scope>test</scope>
  53.         </dependency>
  54.     </dependencies>
  55.  
  56.     <build>
  57.         <plugins>
  58.             <plugin>
  59.                 <groupId>org.springframework.boot</groupId>
  60.                 <artifactId>spring-boot-maven-plugin</artifactId>
  61.                 <configuration>
  62.                     <excludes>
  63.                         <exclude>
  64.                             <groupId>org.projectlombok</groupId>
  65.                             <artifactId>lombok</artifactId>
  66.                         </exclude>
  67.                     </excludes>
  68.                 </configuration>
  69.             </plugin>
  70.         </plugins>
  71.     </build>
  72.  
  73. </project>

3.application.yml配置文件

  1. server:
  2.   port: 8090
  3. spring:
  4.   datasource:
  5.     driver-class-name: com.mysql.cj.jdbc.Driver
  6.     url: jdbc:mysql://localhost:3306/springboot-vue
  7.     username: root
  8.     password: 123456

4.实体类User

  1. package com.example.demo.pojo;
  2.  
  3. import com.baomidou.mybatisplus.annotation.IdType;
  4. import com.baomidou.mybatisplus.annotation.TableId;
  5. import com.baomidou.mybatisplus.annotation.TableName;
  6. import lombok.Data;
  7.  
  8. /**
  9.  * 用户实体类
  10.  */
  11. @TableName("user")//与数据库表明对应
  12. @Data//lombok 的Data注解,不用写get/set方法
  13. public class User {
  14.     @TableId(type = IdType.AUTO)//主键id自动生成
  15.     private Integer id;
  16.     private String username;
  17.     private String password;
  18.     private String nickname;
  19.     private Integer age;
  20.     private String sex;
  21.     private String address;
  22. }

5.封装统一返回对象Result

  1. package com.example.demo.pojo;
  2.  
  3. /**封装的统一返回对象
  4.  * @param <T>
  5.  */
  6. public class Result<T> {
  7.     private String code;
  8.     private String msg;
  9.     private T data;
  10.  
  11.     public String getCode() {
  12.         return code;
  13.     }
  14.  
  15.     public void setCode(String code) {
  16.         this.code = code;
  17.     }
  18.  
  19.     public String getMsg() {
  20.         return msg;
  21.     }
  22.  
  23.     public void setMsg(String msg) {
  24.         this.msg = msg;
  25.     }
  26.  
  27.     public T getData() {
  28.         return data;
  29.     }
  30.  
  31.     public void setData(T data) {
  32.         this.data = data;
  33.     }
  34.  
  35.     public Result() {
  36.     }
  37.  
  38.     public Result(T data) {
  39.         this.data = data;
  40.     }
  41.  
  42.     public static Result success() {
  43.         Result result = new Result<>();
  44.         result.setCode("0");
  45.         result.setMsg("成功");
  46.         return result;
  47.     }
  48.  
  49.     public static <T> Result<T> success(T data) {
  50.         Result<T> result = new Result<>(data);
  51.         result.setCode("0");
  52.         result.setMsg("成功");
  53.         return result;
  54.     }
  55.  
  56.     public static Result error(String code, String msg) {
  57.         Result result = new Result();
  58.         result.setCode(code);
  59.         result.setMsg(msg);
  60.         return result;
  61.     }
  62.     public static Result error() {
  63.         Result result = new Result<>();
  64.         result.setCode("1");
  65.         result.setMsg("失败");
  66.         return result;
  67.     }
  68. }

6.UserMapper层

  1. package com.example.demo.mapper;
  2.  
  3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  4. import com.example.demo.pojo.User;
  5. import org.springframework.stereotype.Controller;
  6.  
  7. /**
  8.  * User的持久层
  9.  */
  10. @Controller
  11. //继承BaseMapper接口
  12. public interface UserMapper extends BaseMapper<User> {
  13.  
  14. }

7.UserController控制层

  1. package com.example.demo.controller;
  2.  
  3. import com.baomidou.mybatisplus.core.toolkit.Wrappers;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5. import com.example.demo.mapper.UserMapper;
  6. import com.example.demo.pojo.Result;
  7. import com.example.demo.pojo.User;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.transaction.annotation.Transactional;
  10. import org.springframework.web.bind.annotation.*;
  11.  
  12.  
  13.  
  14. /**
  15.  * User控制器
  16.  */
  17. @RestController
  18. @RequestMapping("/user")
  19. public class UserController {
  20.  
  21.     @Autowired
  22.     private UserMapper userMapper;
  23.  
  24.  
  25.     /**
  26.      * 登陆方法
  27.      * @param user
  28.      * @return
  29.      */
  30.     @PostMapping("/login")
  31.     public Result login(@RequestBody User user){
  32.         //在数据库中查询与传来的用户名和密码系统的数据
  33.         User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()).eq(User::getPassword,user.getPassword()));
  34.         if (res==null){
  35.             return Result.error("-1","用户名或密码错误");
  36.         }else {
  37.             return Result.success(res);
  38.         }
  39.     }
  40.  
  41.     /**
  42.      * 注册方法
  43.      * @param user
  44.      * @return
  45.      */
  46.     @PostMapping("/register")
  47.     public Result Register(@RequestBody User user){
  48.         //在数据库中查询与传来的用户名和密码系统的数据
  49.         User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()));
  50.         if (res!=null){
  51.             return Result.error("-1","用户名重复");
  52.         }else {
  53.             userMapper.insert(user);
  54.             return Result.success(res);
  55.         }
  56.     }
  57.  
  58.  
  59.     /**
  60.      * 新增数据操作
  61.      *
  62.      * @param user
  63.      * @return
  64.      */
  65.     @Transactional
  66.     @PostMapping
  67.     //@RequestBody注解，将传入的json数据转换为对象
  68.     public Result saveUser(@RequestBody User user) {
  69.         if (user.getId() != null) {
  70.             userMapper.updateById(user);
  71.         } else {
  72.             userMapper.insert(user);
  73.         }
  74.         return Result.success();
  75.     }
  76.  
  77.     /**
  78.      * 根据ID删除数据
  79.      * @param
  80.      * @return
  81.      */
  82.     @Transactional
  83.     @DeleteMapping("/{userId}")
  84.     public Result deleteUser(@PathVariable Integer userId){
  85.         userMapper.deleteById(userId);
  86.         return Result.success();
  87.     }
  88.  
  89.     /**
  90.      * 分页查询User表
  91.      * 根据前端传来的搜索值进行模糊擦查询
  92.      *
  93.      * @param pageNum
  94.      * @param pageSize
  95.      * @param search
  96.      * @return
  97.      */
  98.     @GetMapping
  99.     public Result findPage(@RequestParam(defaultValue = "1") Integer pageNum,
  100.                            @RequestParam(defaultValue = "10") Integer pageSize,
  101.                            @RequestParam(defaultValue = "") String search) {
  102.         // Wrappers.<User>lambdaQuery().like(User::getNickname,search) 模糊查询，根据前端传来的search
  103.         Page<User> page = userMapper.selectPage(new Page<>(pageNum, pageSize), Wrappers.<User>lambdaQuery().like(User::getNickname, search));
  104.         return Result.success(page);
  105.     }
  106.  
  107. }

七、后端技术点

1.MybatisPlus分页插件配置

  1. package com.example.demo.common.config;
  2.  
  3. import com.baomidou.mybatisplus.annotation.DbType;
  4. import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
  5. import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
  6. import org.mybatis.spring.annotation.MapperScan;
  7. import org.springframework.context.annotation.Bean;
  8. import org.springframework.context.annotation.Configuration;
  9.  
  10. /**
  11.  *  mybatis-plus 分页插件
  12.  */
  13. @Configuration
  14. //扫描mapper文件包，加入ioc容器，不用在写@Mapper
  15. @MapperScan("com.example.demo.mapper")
  16. public class MybatisPlusConfig {
  17.  
  18.     /**
  19.      * 分页插件
  20.      */
  21.     @Bean
  22.     public MybatisPlusInterceptor mybatisPlusInterceptor() {
  23.         MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
  24.         interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
  25.         return interceptor;
  26.     }
  27.  
  28. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/549464
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号