• 粤嵌实训医疗项目day02（Vue + SpringBoot）

    目录

    一、创建vue项目并运行

    二、vue-cli中的路由使用

    三、element-ui框架、实现页面布局以及vue-路由

    四、前端登录页面

    五、user登录后端接口完善【后端】

    六、user登录前端-请求工具-请求发起【前端】

    七、请求的跨域-访问策略

    八、完善项目的页面布局、导航菜单以及权限划分

    九、实现疫苗分类的查询及分析流程

    十、疫苗分类--页面完善、以及添加、修改及删除实现

    一、创建vue项目并运行

    --使用管理员身份运行VSCode,然后在终端打开dos命令行界面

    --设置国内的镜像

    1. #经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
    2. npm config set registry https://registry.npm.taobao.org

    --安装vue-cli的插件\全局安装

    1. npm install vue-cli -g
    2.  
    3. npm install -g @vue/cli-init  或者  npm install -g '@vue/cli-init'

    --安装webpack的插件\全局安装

    npm install -g webpack

    注意：shell命令策略设置【当命令执行失败时操作、没有问题就不用管、继续下一步即可】

    0

    1. 像这种都是策略问题，用管理员打开vscode，然后设置策略
    2. get-ExecutionPolicy
    3.  
    4. 执行set-ExecutionPolicy RemoteSigned  然后 get-ExecutionPolicy，显示RemoteSigned就是ok了
    5.  
    6. set-ExecutionPolicy RemoteSigned

    --通过vue-cli脚手架来创建一个项目 

    vue init webpack vaccinum-vue

    --切换到当前项目路径下、然后在启动vue项目测试【npm run dev】

    1. cd vaccinum-vue
    2.  
    3. npm run dev

    二、vue-cli中的路由使用

    路由主要是实现页面跳转【实际上是请求地址映射vue页面】

    --在components中创建两个vue页面文件

    1. <template>
    2.   <div class="hello">
    3.     <h2>Demo1111 Linksh2>
    4.   div>
    5. template>
    1. <template>
    2.   <div class="hello">
    3.     <h2>Demo222 Linksh2>
    4.   div>
    5. template>

    --在router路由配置文件中配置页面的访问地址

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. Vue.use(Router)
    5. export default new Router({
    6.   routes: [
    7.     {
    8.       path: '/',
    9.       name: 'HelloWorld',
    10.       component: HelloWorld
    11.     },
    12.     {
    13.       path: '/demo1',
    14.       name: 'demo1',
    15.       component: ()=>import('@/components/demo1')
    16.     },
    17.     {
    18.       path: '/demo2',
    19.       name: 'demo2',
    20.       component: ()=>import('@/components/demo2')
    21.     }
    22.   ]
    23. })

    --在App.vue中提供两个链接，然后测试

    2.     <router-link to="/demo1">demo1router-link>
    3.     <router-link to="/demo2">demo2router-link>
    4.    

    三、element-ui框架、实现页面布局以及vue-路由

     --布局效果图

    --element-ui网站【参考学习】

    https://element.eleme.cn/#/zh-CN/component/installation

    --ctrl+c 结束程序，然后执行命令下载element-ui依赖

    --添加elementui依赖

    --在vue项目目录下使用下面命令,添加ElementUI 依赖

    npm i element-ui -S

     --在src中的main.js中配置、导入element-ui组件及样式文件

    1. // 导入ElementUI
    2. import ElementUI from 'element-ui';
    3. import 'element-ui/lib/theme-chalk/index.css';
    4. Vue.use(ElementUI);//在vue使用ElementUI

    --创建页面

    --页面布局：在components下创建Layout.vue

    1. <template>
    2.   <div>
    3.     
    4.     <Header />
    5.     
    6.  
    7.     <div style="display: flex">
    8.       
    9.       <Aside />
    10.       
    11.       <router-view style="flex: 1" />
    12.     div>
    13.   div>
    14. template>
    15.     
    16.     
    17.     <script>
    18. // 导入组件
    19. import Header from "@/components/Header";
    20. import Aside from "@/components/Aside";
    21.  
    22. export default {
    23.   name: "Layout",
    24.   //  使用哪些组件
    25.   components: {
    26.     Aside,
    27.     Header,
    28.   },
    29. };
    30. script>

     --页面布局：在components下创建Header.vue文件

    1. <template>
    2.   <div
    3.     style="
    4.       height: 50px;
    5.       line-height: 50px;
    6.       border-bottom: 1px solid #ccc;
    7.       display: flex;
    8.     "
    9.   >
    10.     <div
    11.       style="
    12.         width: 200px;
    13.         padding-left: 30px;
    14.         font-weight: bold;
    15.         color: dodgerblue;
    16.       "
    17.     >
    18.       管理系统
    19.     div>
    20.     <div style="flex: 1">div>
    21.     <div style="width: 150px">
    22.       <el-dropdown @command="handleCommand">
    23.         <span class="el-dropdown-link">
    24.           <el-avatar
    25.             src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    26.           >el-avatar>
    27.           admin<i class="el-icon-arrow-down el-icon--right">i>
    28.         span>
    29.         <el-dropdown-menu slot="dropdown">
    30.           <el-dropdown-item command="a">个人信息el-dropdown-item>
    31.           <el-dropdown-item command="b">退出系统el-dropdown-item>
    32.         el-dropdown-menu>
    33.       el-dropdown>
    34.     div>
    35.   div>
    36. template>
    37.     
    38.     <script>
    39. import router from "@/router";
    40.  
    41. export default {
    42.   name: "Header",
    43.   data() {
    44.     return {
    45.       name: "未登录",
    46.     };
    47.   },
    48.   created() {},
    49.   methods: {
    50.     handleCommand(command) {},
    51.   },
    52. };
    53. script>

    --页面布局：在components下创建Aside.vue文件

    1. <template>
    2.   <div>
    3.     <el-menu
    4.       style="width: 250px; min-height: calc(100vh - 50px)"
    5.       default-active="2"
    6.       class="el-menu-vertical-demo"
    7.       @open="handleOpen"
    8.       @close="handleClose"
    9.       :default-openeds="[path]"
    10.       router
    11.     >
    12.       <el-submenu index="1">
    13.         <template slot="title">
    14.           <i class="el-icon-location">i>
    15.           <span>导航一span>
    16.         template>
    17.         <el-menu-item-group>
    18.           <template slot="title">分组一template>
    19.           <el-menu-item index="/list">选项1el-menu-item>
    20.           <el-menu-item index="1-2">选项2el-menu-item>
    21.         el-menu-item-group>
    22.         <el-menu-item-group title="分组2">
    23.           <el-menu-item index="1-3">选项3el-menu-item>
    24.         el-menu-item-group>
    25.         <el-submenu index="1-4">
    26.           <template slot="title">选项4template>
    27.           <el-menu-item index="1-4-1">选项1el-menu-item>
    28.         el-submenu>
    29.       el-submenu>
    30.       <el-menu-item index="2">
    31.         <i class="el-icon-menu">i>
    32.         <span slot="title">导航二span>
    33.       el-menu-item>
    34.       <el-menu-item index="3" disabled>
    35.         <i class="el-icon-document">i>
    36.         <span slot="title">导航三span>
    37.       el-menu-item>
    38.       <el-menu-item index="4">
    39.         <i class="el-icon-setting">i>
    40.         <span slot="title">导航四span>
    41.       el-menu-item>
    42.     el-menu>
    43.   div>
    44. template>
    45.       
    46.     <script>
    47. export default {
    48.   data() {
    49.     return {
    50.       //path变量
    51.       path: this.$route.path,
    52.     };
    53.   },
    54.   methods: {
    55.     handleOpen(key, keyPath) {
    56.       console.log(key, keyPath);
    57.     },
    58.     handleClose(key, keyPath) {
    59.       console.log(key, keyPath);
    60.     },
    61.   },
    62. };
    63. script>

     --把App.vue的图标注释掉

    --路由：在router下index.js修改请求映射

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. //导入局部的页面Layout
    4. import Layout from '@/components/Layout'
    5. Vue.use(Router)
    6. export default new Router({
    7.   routes: [
    8.     // 也就是--   / 映射到了 Layout的页面
    9.     {
    10.       path: '/',
    11.       name: 'Layout',
    12.       component: Layout
    13.     }
    14.   ]
    15. })

    --重新启动前端项目-访问即可

    四、前端登录页面

    --1、在components下创建Login.vue

    1. <template>
    2.   <div class="login">
    3.     
    4.     <div class="login-form">
    5.       
    6.       <el-row :gutter="20">
    7.         <el-col :span="12">
    8.           <div>
    9.             <img
    10.               src="../assets/logo.png"
    11.               alt=""
    12.               style="
    13.                 position: relative;
    14.                 left: -100px;
    15.                 width: 250px;
    16.                 height: 85px;
    17.               "
    18.             />
    19.           div>
    20.           <div style="position: relative; left: 50px">
    21.             <img src="../assets/icon-big.png" alt="" />
    22.           div>
    23.         el-col>
    24.         <el-col :span="2">el-col>
    25.         <el-col :span="10">
    26.           
    27.           <el-form
    28.             ref="loginForm"
    29.             :model="loginForm"
    30.             style="margin-left: 150px; margin-top: 150px"
    31.           >
    32.             <el-form-item>
    33.               <el-tabs
    34.                 v-model="roleType"
    35.                 @tab-click="selectRole"
    36.                 :stretch="true"
    37.               >
    38.                 <el-tab-pane label="用户登录" name="用户">el-tab-pane>
    39.                 <el-tab-pane label="医生登录" name="医生">el-tab-pane>
    40.                 <el-tab-pane label="管理员登录" name="管理员">el-tab-pane>
    41.               el-tabs>
    42.             el-form-item>
    43.             <el-form-item prop="name" v-if="roleType === '管理员'">
    44.               <el-input
    45.                 prefix-icon="el-icon-user"
    46.                 v-model="loginForm.name"
    47.                 type="text"
    48.                 placeholder="账号"
    49.               >
    50.               el-input>
    51.             el-form-item>
    52.             <el-form-item prop="phone" v-if="roleType !== '管理员'">
    53.               <el-input
    54.                 prefix-icon="el-icon-user"
    55.                 v-model="loginForm.phone"
    56.                 type="text"
    57.                 placeholder="账号"
    58.               >
    59.               el-input>
    60.             el-form-item>
    61.             <el-form-item prop="password">
    62.               <el-input
    63.                 prefix-icon="el-icon-lock"
    64.                 v-model="loginForm.password"
    65.                 autocomplete="off"
    66.                 show-password
    67.                 placeholder="密码"
    68.               >
    69.               el-input>
    70.             el-form-item>
    71.             <el-form-item prop="code" v-if="captchaEnabled">
    72.               <el-input
    73.                 v-model="loginForm.code"
    74.                 placeholder="请输入验证码"
    75.                 style="width: 63%"
    76.               >
    77.               el-input>
    78.               <div class="login-code">
    79.                 <el-avatar
    80.                   shape="square"
    81.                   style="width: 100px"
    82.                   :src="codeUrl"
    83.                 >el-avatar>
    84.               div>
    85.             el-form-item>
    86.             <el-form-item style="width: 100%">
    87.               <el-button
    88.                 size="medium"
    89.                 type="primary"
    90.                 style="width: 100%; background-color: rgb(77, 167, 252)"
    91.                 @click="doLogin()"
    92.               >
    93.                 <span style="font-size: 20px">登 录span>
    94.               el-button>
    95.             el-form-item>
    96.             <el-form-item style="width: 100%">
    97.               <el-button
    98.                 size="medium"
    99.                 type="primary"
    100.                 style="width: 100%; background-color: rgb(77, 167, 252)"
    101.                 v-if="roleType == '用户'"
    102.                 @click="registerFormVisible = true"
    103.               >
    104.                 <span style="font-size: 20px">注 册span>
    105.               el-button>
    106.             el-form-item>
    107.           el-form>
    108.           
    109.         el-col>
    110.       el-row>
    111.     div>
    112.     
    113.     <el-dialog
    114.       title="用户注册"
    115.       :visible.sync="registerFormVisible"
    116.       :close-on-click-modal="false"
    117.     >
    118.       <el-form
    119.         label-position="top"
    120.         :model="registerForm"
    121.         status-icon
    122.         ref="registerForm"
    123.         label-width="100px"
    124.         class="demo-registerForm"
    125.       >
    126.         
    127.         <el-form-item label="头像" prop="image">
    128.           <el-upload
    129.             class="avatar-uploader"
    130.             action="http://localhost:80/vaccinum/common/upload"
    131.             :show-file-list="false"
    132.             :on-success="handleAvatarSuccess"
    133.             :before-upload="beforeAvatarUpload"
    134.           >
    135.             <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    136.             <i v-else class="el-icon-plus avatar-uploader-icon">i>
    137.           el-upload>
    138.           
    139.           <input type="hidden" name="avatar" v-model="registerForm.image" />
    140.         el-form-item>
    141.         
    142.         <el-row :gutter="20">
    143.           <el-col :span="12">
    144.             <el-form-item label="用户名" prop="name">
    145.               <el-input
    146.                 type="text"
    147.                 v-model="registerForm.name"
    148.                 autocomplete="off"
    149.               >el-input>
    150.             el-form-item>
    151.           el-col>
    152.           <el-col :span="12">
    153.             <el-form-item label="性别" prop="sex">
    154.               <el-input
    155.                 type="text"
    156.                 v-model="registerForm.sex"
    157.                 autocomplete="off"
    158.               >el-input>
    159.             el-form-item>
    160.           el-col>
    161.         el-row>
    162.         
    163.         <el-row :gutter="20">
    164.           <el-col :span="12">
    165.             <el-form-item label="年龄" prop="age">
    166.               <el-input
    167.                 type="text"
    168.                 v-model="registerForm.age"
    169.                 autocomplete="off"
    170.               >el-input>
    171.             el-form-item>
    172.           el-col>
    173.           <el-col :span="12">
    174.             <el-form-item label="身份证号" prop="codeid">
    175.               <el-input
    176.                 type="text"
    177.                 v-model="registerForm.codeid"
    178.                 autocomplete="off"
    179.               >el-input>
    180.             el-form-item>
    181.           el-col>
    182.         el-row>
    183.         
    184.         <el-row :gutter="20">
    185.           <el-col :span="12">
    186.             <el-form-item label="密 码" prop="password">
    187.               <el-input
    188.                 type="password"
    189.                 v-model="registerForm.password"
    190.                 autocomplete="off"
    191.               >el-input>
    192.             el-form-item>
    193.           el-col>
    194.           <el-col :span="12">
    195.             <el-form-item label="确认密码" prop="password_check">
    196.               <el-input
    197.                 type="password"
    198.                 v-model="registerForm.password_check"
    199.                 autocomplete="off"
    200.               >el-input>
    201.             el-form-item>
    202.           el-col>
    203.         el-row>
    204.         
    205.         <el-row :gutter="20">
    206.           <el-col :span="12">
    207.             <el-form-item label="手机号" prop="phone">
    208.               <el-input
    209.                 type="text"
    210.                 v-model="registerForm.phone"
    211.                 autocomplete="off"
    212.               >el-input>
    213.             el-form-item>
    214.           el-col>
    215.           <el-col :span="12">
    216.             <el-form-item label="地址" prop="address">
    217.               <el-input
    218.                 type="text"
    219.                 v-model="registerForm.address"
    220.                 autocomplete="off"
    221.               >el-input>
    222.             el-form-item>
    223.           el-col>
    224.         el-row>
    225.         <el-form-item>
    226.           <el-button type="primary" @click="registerSumbit">提交el-button>
    227.           <el-button
    228.             @click="
    229.               registerFormVisible = false;
    230.               this.registerForm = {
    231.                 name: '',
    232.                 password: '',
    233.                 password_check: '',
    234.                 phone: '',
    235.               };
    236.             "
    237.             >取消
    238.           >
    239.         el-form-item>
    240.       el-form>
    241.     el-dialog>
    242.     
    243.     
    244.     <div class="el-login-footer">
    245.       <span>Copyright © 2018-2022 gec All Rights Reserved.span>
    246.     div>
    247.     
    248.   div>
    249. template>
    250.     <script>
    251. import router from "@/router";
    252. export default {
    253.   name: "Login",
    254.   data() {
    255.     return {
    256.       password_type: "password", //密码显示类型
    257.       imageUrl: "", //头像上传路径
    258.       codeUrl: "",
    259.       loginForm: {
    260.         //登录的表单数据
    261.         name: "12345678909",
    262.         phone: "12345678909",
    263.         password: "123",
    264.         code: "",
    265.       },
    266.       registerForm: {
    267.         //注册的表单数据
    268.         name: "",
    269.         sex: "",
    270.         age: "",
    271.         password: "",
    272.         password_check: "",
    273.         image: "",
    274.         codeid: "",
    275.         phone: "",
    276.         address: "",
    277.       },
    278.       loading: false,
    279.       captchaEnabled: true,
    280.       register: true,
    281.       registerFormVisible: false,
    282.       roleType: "用户",
    283.     };
    284.   },
    285.   created() {},
    286.   methods: {
    287.     //修改密码显示类型
    288.     cho() {
    289.       this.password_type = this.password_type == "text" ? "password" : "text";
    290.     }, //选择哪个用户类型就显示那个类型
    291.     selectRole() {
    292.       console.log(this.roleType); // this.roleType = command;
    293.     },
    294.     //登录的处理函数
    295.     doLogin() {
    296.       if (this.loginForm.phone=="12345678909"&&this.loginForm.password=="123") {
    297.         this.$message.success("登录成功！"); 
    298.         //跳转到Layout页面【首页】
    299.         router.push("/Layout");
    300.       } else {
    301.         //登录失败提示信息
    302.         this.$message.error("登录失败！");
    303.       }
    304.     }, //注册函数
    305.     registerSumbit() {
    306.       //发起了异步请求
    307.       request
    308.         .post("register", this.registerForm) //回调函数
    309.         .then((res) => {
    310.           if (res.flag == true) {
    311.             this.$message.success("注册成功！");
    312.             this.registerFormVisible = false;
    313.             this.registerForm = {
    314.               name: "",
    315.               sex: "",
    316.               age: "",
    317.               password: "",
    318.               password_check: "",
    319.               image: "",
    320.               codeid: "",
    321.               phone: "",
    322.               address: "",
    323.             };
    324.             this.imageUrl = "";
    325.           } else {
    326.             //注册失败提示信息
    327.             this.$message.error(res.message);
    328.           }
    329.         });
    330.     }, //在上传成功后处理函数中，获取服务端返回的图片文件名或URL
    331.     handleAvatarSuccess(res, file) {
    332.       this.registerForm.image = res.fileName;
    333.       this.imageUrl = URL.createObjectURL(file.raw);
    334.     }, // 在上传之前，清空旧图片信息
    335.     beforeAvatarUpload(file) {
    336.       this.registerForm.image = "";
    337.       this.imageUrl = "";
    338.       const isJPG = file.type === "image/jpeg";
    339.       const isLt2M = file.size / 1024 / 1024 < 2;
    340.       if (!isJPG) {
    341.         this.$message.error("上传头像图片只能是 JPG 格式!");
    342.       }
    343.       if (!isLt2M) {
    344.         this.$message.error("上传头像图片大小不能超过 2MB!");
    345.       }
    346.       return isJPG && isLt2M;
    347.     },
    348.   },
    349. };
    350. script>
    351.        
    352.     <style>
    353. .el-dialog {
    354.   border-radius: 45px;
    355. }
    356. .login {
    357.   position: absolute;
    358.   width: 100%;
    359.   height: 100%;
    360.   overflow: hidden;
    361.   background-image: url("../assets/1.png");
    362.   background-size: 100% 100%;
    363.   background-repeat: no-repeat;
    364. }
    365. .title {
    366.   margin: 0px auto 30px auto;
    367.   text-align: center;
    368.   color: #707070;
    369. }
    370. .login-form {
    371.   margin: 150px auto;
    372.   background-image: url("../assets/beijing.png");
    373.   border-radius: 45px;
    374.   background-position: -35px, -35px;
    375.   width: 1240px;
    376.   height: 657px;
    377.   /* padding: 25px 25px 5px 25px; */
    378. }
    379. .el-input {
    380.   height: 38px;
    381. }
    382. input {
    383.   height: 38px;
    384. }
    385. .input-icon {
    386.   height: 39px;
    387.   width: 14px;
    388.   margin-left: 2px;
    389. }
    390. .login-tip {
    391.   font-size: 13px;
    392.   text-align: center;
    393.   color: #bfbfbf;
    394. }
    395. .login-code {
    396.   width: 33%;
    397.   height: 38px;
    398.   float: right;
    399. }
    400. .el-login-footer {
    401.   height: 40px;
    402.   line-height: 40px;
    403.   position: fixed;
    404.   bottom: 0;
    405.   width: 100%;
    406.   text-align: center;
    407.   /* color: #fff; */
    408.   font-family: Arial;
    409.   font-size: 12px;
    410.   letter-spacing: 1px;
    411. }
    412. .login-code-img {
    413.   height: 38px;
    414. }
    415. .avatar-uploader .el-upload {
    416.   /* border: 1px dashed #d9d9d9; */
    417.   border: 1px solid black;
    418.   border-radius: 6px;
    419.   cursor: pointer;
    420.   position: relative;
    421.   overflow: hidden;
    422. }
    423. .avatar-uploader .el-upload:hover {
    424.   border-color: #409eff;
    425. }
    426. .avatar-uploader-icon {
    427.   font-size: 28px;
    428.   color: #8c939d;
    429.   width: 178px;
    430.   height: 178px;
    431.   line-height: 178px;
    432.   text-align: center;
    433. }
    434. .avatar {
    435.   width: 178px;
    436.   height: 178px;
    437.   display: block;
    438. }
    439. style>

    --2、在路由index.js中配置根目录访问登录页面、然后修改首页的

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. //导入局部的页面Layout
    4. import Layout from '@/components/Layout'
    5. import Login from '@/components/Login'
    6. Vue.use(Router)
    7. export default new Router({
    8.   routes: [
    9.     // 也就是--   / 映射到了 Login的页面
    10.     {
    11.       path: '/',
    12.       name: 'Login',   
    13.       component: Login
    14.     },
    15.     {
    16.       path: '/Layout',
    17.       name: 'Layout',   
    18.       component: Layout
    19.     }
    20.   ]
    21. })

     --3、替换src中的assets文件中的图片

    五、user登录后端接口完善【后端】

    --1、在UserController中提供登录的处理方法、接收数据，响应json格式的数据

    1. //json 的解析工具
    2. ObjectMapper jsonTool = new ObjectMapper();
    3.  
    4. // http://localhost:8085/user/loginUser?phone=sdfsdf&password=xxxx
    5. //    定义user的登录查询的请求接口【根据手机号码和密码进行登录】
    6. @RequestMapping("/loginUser")
    7. public String loginUser(String phone,String password) throws JsonProcessingException {
    8.     // map集合-结果集
    9.     HashMap result =new HashMap();
    10.     //調用业务层的查询方法，根据手机号码和密码进行查询
    11.     QueryWrapper wrapper = new QueryWrapper<>();
    12.     wrapper.eq("phone",phone).eq("password",password);
    13.     //条件查询，获取一个对象
    14.     User user = userService.getOne(wrapper);
    15.     //业务逻辑的判断
    16.     if(user!=null){//登录成功
    17.         result.put("flag",true);
    18.         result.put("user",user);
    19.          result.put("role","user");
    20.     }else{//登录失败
    21.         result.put("flag",false);
    22.         result.put("message","用戶名或密碼錯誤！！！");
    23.     }
    24.     //返回json格式的数据
    25.     return jsonTool.writeValueAsString(result);
    26. }

    --2、启动项目然后测试

    http://localhost:8085/user/loginUser?phone=123451645602&password=123sdfsdfsdfsd

    六、user登录前端-请求工具-请求发起【前端】

    --结束前端程序ctrl+c

    --执行命令、安装axios和cookie依赖

    1. npm install axios --save
    2. npm install --save js-cookie

    --在src下创建utils文件夹、并创建request.js文件

    1. import axios from 'axios'
    2. import router from "@/router";
    3. import qs from "qs"
    4. import Cookies from "js-cookie";
    5. axios.defaults.withCredentials=true //让ajax请求携带cookie
    6. //1、目的是封装请求对象  2、目的对请求和响应数据进行格式
    7. // 创建对象
    8. const request = axios.create({
    9.     baseURL: 'http://localhost:8085',  // 注意！！ 这里是全局统一加上了 baseURL 前缀，
    10.     timeout: 5000
    11. })
    12.  
    13. // request 拦截器
    14. request.interceptors.request.use(
    15.     config => {
    16.       //对请求的数据进行处理
    17.       if (config.method != 'get') {
    18.         config.data = qs.stringify(config.data);
    19.       }
    20.       // post请求方式的content格式
    21.       config.headers['content-Type'] = 'application/x-www-form-urlencoded';//允许通过访问
    22.       return config;
    23.     },
    24.     error => {
    25.       console.log('err' + error) // for debug
    26.       return Promise.reject(error)
    27.     }
    28. )
    29.  
    30. // response 拦截器
    31. // 可以在接口响应后统一处理结果
    32. request.interceptors.response.use(
    33.     response => {
    34.         let res = response.data;
    35.         // 如果是返回的文件
    36.         if (response.config.responseType === 'blob') {
    37.             return res
    38.         }
    39.         // 兼容服务端返回的字符串数据
    40.         if (typeof res === 'string') {
    41.             res = res ? JSON.parse(res) : res
    42.         }
    43.         return res;
    44.     },
    45.     error => {
    46.         console.log('err' + error) // for debug
    47.         return Promise.reject(error)
    48.     }
    49. )
    50.  
    51. export default request

    --修改Login.vue中的登录请求处理函数、发起异步请求

    1. //注意导入请求工具类和cookie
    2. import Cookies from "js-cookie";
    3. import request from "@/utils/request.js";

    1. doLogin() {
    2.       //通过请求对象发起一个异步请求操作【axios】
    3.       request
    4.         .post("/user/loginUser", this.loginForm) //第一个参数是请求地址、第二个参数提交的数据 //回调函数\获取服务器响应的结果
    5.         .then((res) => {
    6.           //如果成功flag
    7.           if (res.flag == true) {
    8.             this.$message.success("登录成功！"); //把user信息、角色信息存放在cookie中
    9.             Cookies.set("user", JSON.stringify(res.user), { expires: 0.3 });
    10.             Cookies.set("role", res.role, { expires: 0.3 }); 
    11.             //通过路由跳转、登录成功后跳转到首页
    12.             router.push("/Layout");
    13.           } else {
    14.             //登录失败提示信息
    15.             this.$message.error(res.message);
    16.           }
    17.         });
    18.     },

    --点击登录按钮进行测试、请求是成功发起的，但是发现跨域拦截:

    七、请求的跨域-访问策略

    --后端项目中创建config包，然后创建配置类提供跨域访问策略：

    1. import org.springframework.stereotype.Component;
    2.  
    3. import javax.servlet.*;
    4. import javax.servlet.http.HttpServletResponse;
    5. import java.io.IOException;
    6.  
    7. //定义拦截器允许跨域访问
    8. @Component
    9. public class UrlCorsConfiguration implements Filter {
    10.  
    11.     public void doFilter(ServletRequest req, ServletResponse res,
    12.                          FilterChain chain) throws IOException, ServletException {
    13.  
    14.         HttpServletResponse response = (HttpServletResponse) res;
    15.         //        允许跨域访问的地址【前端项目部署的地址】
    16.         response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
    17.         //允许跨域的请求方法GET, POST, HEAD 等
    18.         response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
    19.         //重新预检验跨域的缓存时间 (s)
    20.         response.setHeader("Access-Control-Max-Age", "3600");
    21.         //允许跨域的请求头
    22.         response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
    23.         //是否携带cookie
    24.         response.setHeader("Access-Control-Allow-Credentials", "true");
    25.         // 设置响应的类型及字符集编码
    26.         response.setContentType("text/json;charset=utf-8");
    27.         //设置响应的中文编码
    28.         chain.doFilter(req, res);
    29.     }
    30.  
    31.     public void init(FilterConfig filterConfig) {
    32.     }
    33.  
    34.     public void destroy() {
    35.     }
    36.  
    37. }

    --重启后端项目，然后发起请求查看

    八、完善项目的页面布局、导航菜单以及权限划分

    --替换Aside.vue后端项目

    1. <template>
    2.   <div>
    3.     <el-menu
    4.       style="width: 250px; min-height: calc(100vh - 50px);padding-top: 10px;"
    5.       default-active="2"
    6.       class="el-menu-vertical-demo"
    7.       @open="handleOpen"
    8.       @close="handleClose"
    9.       :default-openeds="[path]"
    10.       router
    11.     >
    12.       <el-submenu index="1" v-if="role == 'manager'">
    13.         <template slot="title">
    14.           <i class="el-icon-s-management">i>
    15.           
    16.           <span style="font-size: 17px; font-weight: bold;font-family:'苹方'">管理员模块span>
    17.         template>
    18.         <el-menu-item-group>
    19.           <el-menu-item index="/Layout/adminList"
    20.             ><i class="el-icon-link">i>管理员列表
    21.           >
    22.         el-menu-item-group>
    23.       el-submenu>
    24.       <el-submenu index="2">
    25.         <template slot="title">
    26.           <i class="el-icon-first-aid-kit">i>
    27.           <span style="font-size: 17px; font-weight: bold;font-family:'苹方'">医生模块span>
    28.         template>
    29.         <el-menu-item-group>
    30.           
    31.           <el-menu-item index="/Layout/doctorList"
    32.             ><i class="el-icon-link">i> 医生列表
    33.           >
    34.           <el-menu-item
    35.             index="/Layout/registration"
    36.             v-if="role == 'manager' || role == 'doctor' || role == 'user'"
    37.             ><i class="el-icon-link">i>挂号记录
    38.           >
    39.           <el-menu-item index="/Layout/vaccineRecord" v-if="role != 'doctor'"
    40.             ><i class="el-icon-link">i>接种记录
    41.           >
    42.         el-menu-item-group>
    43.       el-submenu>
    44.       <el-submenu index="3" v-if="role == 'manager' || role == 'user'">
    45.         <template slot="title">
    46.           <i class="el-icon-user">i>
    47.           <span style="font-size: 17px; font-weight: bold;font-family:'苹方'">用户模块span>
    48.         template>
    49.         <el-menu-item-group>
    50.           <el-menu-item index="/Layout/userList" v-if="role == 'manager'"
    51.             ><i class="el-icon-link">i>用户列表
    52.           >
    53.           <el-menu-item index="/Layout/userRegis" v-if="role == 'user'"
    54.             ><i class="el-icon-link">i>预约挂号
    55.           >
    56.         el-menu-item-group>
    57.       el-submenu>
    58.       <el-submenu index="4">
    59.         <template slot="title">
    60.           <i class="el-icon-office-building">i>
    61.           <span style="font-size: 17px; font-weight: bold;font-family:'苹方'">医院模块span>
    62.         template>
    63.         <el-menu-item-group>
    64.           <el-menu-item index="/Layout/hosList"
    65.             ><i class="el-icon-link">i>医院列表
    66.           >
    67.           <el-menu-item index="/Layout/deptList"
    68.             ><i class="el-icon-link">i>科室列表
    69.           >
    70.         el-menu-item-group>
    71.       el-submenu>
    72.       <el-submenu index="5">
    73.         <template slot="title">
    74.           <i class="el-icon-office-building">i>
    75.           <span style="font-size: 17px; font-weight: bold;font-family:'苹方'">疫苗模块span>
    76.         template>
    77.         <el-menu-item-group>
    78.           <el-menu-item index="/Layout/vaccineType"
    79.             ><i class="el-icon-link">i>疫苗种类
    80.           >
    81.           <el-menu-item index="/Layout/vaccine"
    82.             ><i class="el-icon-link">i>疫苗信息
    83.           >
    84.           <el-menu-item index="/Layout/appVaccineList"
    85.             ><i class="el-icon-link">i>可预约疫苗
    86.           >
    87.         el-menu-item-group>
    88.       el-submenu>
    89.     el-menu>
    90.   div>
    91. template>
    92. <style>
    93. .icon1 {
    94.   display: inline-block;
    95.   width: 50px;
    96.   height: 50px;
    97.   background-image: url("../assets/BUTTON_NOOPEN.png");
    98.   background-position: center center;
    99.   background-repeat: no-repeat;
    100. }
    101. .icon_line {
    102.   display: block;
    103.   width: 20px;
    104.   height: 20px;
    105.   background-image: url("../assets/line1.png");
    106.   position: relative;
    107.   left: 75px;
    108.   background-repeat: no-repeat;
    109. }
    110. style>
    111.       
    112. <script>
    113. import Cookies from "js-cookie";
    114. import request from "@/utils/request";
    115. export default {
    116.   data() {
    117.     return {
    118.       //path变量
    119.       path: this.$route.path,
    120.       role: "",
    121.       userId: "",
    122.       timer: null,
    123.     };
    124.   },
    125.   //生命周期【当页面对象创建成功，触发的函数】
    126.   created() {
    127.     //获取manager信息
    128.     var userJson = JSON.parse(Cookies.get("user"));
    129.     this.role = Cookies.get("role");
    130.     console.log("this.role="+this.role);
    131.     this.userId = userJson.id;
    132.     // 启动定时器，每5秒钟检查一次
    133.     this.timer = setInterval(this.checkDatabaseChanges, 5000);
    134.   },
    135.   methods: {
    136.     //获取数据库最新数据，持续更新cookie
    137.     checkDatabaseChanges() {
    138.       //判断是哪种用户
    139.       let url =
    140.         this.role == "manager"
    141.           ? "/manager/selectById"
    142.           : this.role == "doctor"
    143.           ? "/doctor/selectById"
    144.           : "/user/selectById";
    145.       // 通过请求获取最新的数据
    146.       request
    147.         .get(url, {
    148.           params: {
    149.             id: this.userId,
    150.           },
    151.         })
    152.         //回调函数
    153.         .then((res) => {
    154.           if (res.flag == true) {
    155.             //更新Cookie值
    156.             Cookies.set("user", JSON.stringify(res.user), { expires: 0.3 });
    157.           }
    158.         });
    159.     },
    160.     handleOpen(key, keyPath) {
    161.       console.log(key, keyPath);
    162.       console.log("打开");
    163.     },
    164.     handleClose(key, keyPath) {
    165.       console.log(key, keyPath);
    166.       console.log("关闭");
    167.     },
    168.   },
    169.   beforeDestroy() {
    170.     // 销毁定时器
    171.     clearInterval(this.timer);
    172.   },
    173. };
    174. script>

    --替换Header.vue

    1. <template>
    2.   <div
    3.     style="
    4.       height: 65px;
    5.       line-height: 65px;
    6.       border-bottom: 1px solid #ccc;
    7.       background-color: #254175;
    8.       display: flex;
    9.     "
    10.   >
    11.     <div
    12.       style="
    13.         width: 200px;
    14.         padding-left: 30px;
    15.         font-weight: bold;
    16.         color: dodgerblue;
    17.       "
    18.     >
    19.       <img
    20.         src="../assets/logo-06.png"
    21.         style="width: 200px; height: 50px; padding-top: 5px"
    22.         alt=""
    23.       />
    24.     div>
    25.     <div style="flex: 1">div>
    26.     <div style="width: 250px">
    27.       <el-dropdown @command="handleCommand">
    28.         <span class="el-dropdown-link">
    29.           <el-row :gutter="5">
    30.             <el-col :span="12"  style="padding-top: 9px;"><el-avatar :src="image" shape="square" :size="50">el-avatar>el-col>
    31.             <el-col :span="9" style="color:#fff;font-weight: bold;">{{ name }}el-col>
    32.             <el-col :span="3" style="color:#fff;font-weight: bold;"><i class="el-icon-arrow-down el-icon--right">i>el-col>
    33.           el-row>
    34.         span>
    35.         <el-dropdown-menu slot="dropdown">
    36.           <el-dropdown-item command="a" v-if="role !== 'manager'"
    37.             >个人信息
    38.           >
    39.           <el-dropdown-item command="b">退出系统el-dropdown-item>
    40.         el-dropdown-menu>
    41.       el-dropdown>
    42.     div>
    43.   div>
    44. template>
    45.     
    46.     <script>
    47. import router from "@/router";
    48. import Cookies from "js-cookie";
    49. export default {
    50.   name: "Header",
    51.   data() {
    52.     return {
    53.       name: "未登录",
    54.       image: "",
    55.       role: "",
    56.     };
    57.   },
    58.   created() {
    59.     //获取登录用户信息
    60.     var userJson = JSON.parse(Cookies.get("user"));
    61.     this.name = userJson.name;
    62.     this.image = userJson.image;
    63.     this.role = Cookies.get("role");
    64.   },
    65.   methods: {
    66.     handleCommand(command) {
    67.       if (command == "b") {
    68.         Cookies.remove("user");
    69.         //跳转到登录
    70.         router.push("/login");
    71.       } else {
    72.         //跳转到个人信息
    73.         router.push("/Layout/personalInfo");
    74.       }
    75.     },
    76.   },
    77. };
    78. script>

    --修改后端UserController中-的登录请求要返回user的对象数据、用户的角色

    1. // 在结果集中保存user对象以及角色信息
    2. result.put("user", user);
    3. result.put("role", "user");

     --登录页面的登录函数中存储user和role角色信息

    --重新登录测试即可

    九、实现疫苗分类的查询及分析流程

    --后端：VaccineType实体类中添加主键变量

    1. /**
    2.  * 主键
    3.  */
    4. @TableId(type = IdType.AUTO)
    5. private Integer id;

    --后端：VaccineTypeController中定义查询请求接口

    1. @RestController
    2. @RequestMapping("/vaccinetype")
    3. public class VaccineTypeController {
    4.  
    5.     //json
    6.     ObjectMapper json = new ObjectMapper();
    7.  
    8.     //service
    9.     @Autowired
    10.     IVaccineTypeService typeService;
    11.  
    12.     // 测试 http://localhost:8085/vaccinetype/query
    13.     //查询分类、响应json数据【键值对的数据】
    14.     @RequestMapping("/query")
    15.     public String query() throws JsonProcessingException {
    16.         //结果的存放集合
    17.         HashMap result = new HashMap();
    18.         //    1\调用业务层方法执行查询操作
    19.         List list = typeService.list();
    20.         //    2\在结果集中存放list集合
    21.         result.put("list", list);
    22.         //   返回json数据
    23.         return json.writeValueAsString(result);
    24.     }
    25.  
    26. }

    --前端：在src下创建type文件夹，然后创建TypeList.vue

    --前端：从element-ui中获取组件代码、提供请求操作和修改table中的字段名

    1. <template>
    2.   <el-table :data="tableData" stripe style="width: 100%">
    3.     <el-table-column prop="id" label="编号"> el-table-column>
    4.     <el-table-column prop="name" label="名称"> el-table-column>
    5.     <el-table-column prop="remark" label="描述"> el-table-column>
    6.   el-table>
    7. template>
    8.   
    9.   <script>
    10. import request from "@/utils/request.js";
    11. export default {
    12.   data() {
    13.     return {
    14.       tableData: [],
    15.     };
    16.   },
    17.   // 页面中的vue对象创建成功后触发
    18.   created() {
    19.     //发起查询请求
    20.     request
    21.       .get("/vaccinetype/query") //第一个参数是请求地址、第二个参数提交的数据 //回调函数\获取服务器响应的结果
    22.       .then((res) => {
    23.         this.tableData = res.list;
    24.       });
    25.   },
    26. };
    27. script>

    --前端：修改路由、在Layout路径下配置子url的映射【router中的index.js文件】

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. //导入局部的页面Layout
    4. import Layout from '@/components/Layout'
    5. import Login from '@/components/Login'
    6. Vue.use(Router)
    7. export default new Router({
    8.   routes: [
    9.     // 也就是--   / 映射到了 Login的页面
    10.     {
    11.       path: '/',
    12.       name: 'Login',
    13.       component: Login
    14.     },
    15.     // 页面布局的映射
    16.     {
    17.       path: '/Layout',
    18.       name: 'Layout',
    19.       component: Layout,
    20.       children: [
    21.         {
    22.           path: 'vaccineType',//   --> /Layout/vaccineType
    23.           name: 'vaccineType',
    24.           component: ()=>import('@/type/TypeList')
    25.         },
    26.       ],
    27.     }
    28.   ]
    29. })

    十、疫苗分类--页面完善、以及添加、修改及删除实现

    --后端：在VaccineTypeController中提供删除、添加和修改的请求接口

    1. @RestController
    2. @RequestMapping("/vaccinetype")
    3. public class VaccineTypeController {
    4.  
    5.     //依賴VaccineType业务层对象
    6.     @Autowired //自动注入
    7.     IVaccineTypeService typeService;
    8.  
    9.     //json 的解析工具
    10.     ObjectMapper jsonTool = new ObjectMapper();
    11.  
    12.     // http://localhost:8085/vaccinetype/query
    13.     //    定义查询的请求接口
    14.     @RequestMapping("/query")
    15.     public String query(String phone,String password) throws JsonProcessingException {
    16.         // map集合-结果集
    17.         HashMap result =new HashMap();
    18.         //調用业务层的查询方法
    19.         List list = typeService.list();
    20.         result.put("list",list);
    21.         //返回json格式的数据
    22.         return jsonTool.writeValueAsString(result);
    23.     }
    24.  
    25.     // http://localhost:8085/vaccinetype/update
    26.     //    定义修改的请求接口
    27.     @RequestMapping("/update")
    28.     public String update(VaccineType type) throws JsonProcessingException {
    29.         // map集合-结果集
    30.         HashMap result =new HashMap();
    31.         //調用业务层的查询方法
    32.         boolean update = typeService.updateById(type);
    33.         result.put("flag",update);
    34.         //返回json格式的数据
    35.         return jsonTool.writeValueAsString(result);
    36.     }
    37.  
    38.     // http://localhost:8085/vaccinetype/insert
    39.     //    定义添加的请求接口
    40.     @RequestMapping("/insert")
    41.     public String insert(VaccineType type) throws JsonProcessingException {
    42.         // map集合-结果集
    43.         HashMap result =new HashMap();
    44.         //調用业务层的查询方法
    45.         boolean insert = typeService.save(type);
    46.         result.put("flag",insert);
    47.         //返回json格式的数据
    48.         return jsonTool.writeValueAsString(result);
    49.     }
    50.  
    51.     // http://localhost:8085/vaccinetype/insert
    52.     //    定义刪除的请求接口
    53.     @RequestMapping("/delete")
    54.     public String delete(Integer id) throws JsonProcessingException {
    55.         // map集合-结果集
    56.         HashMap result =new HashMap();
    57.         //調用业务层的查询方法
    58.         boolean delete = typeService.removeById(id);
    59.         result.put("flag",delete);
    60.         //返回json格式的数据
    61.         return jsonTool.writeValueAsString(result);
    62.     }
    63.  
    64. }

    --替换TypeList.vue页面即可、效果如下：

    1. <template>
    2.   <div style="width: 100%">
    3.     <div class="top_div">
    4.       
    5.       <el-form
    6.         :inline="true"
    7.         class="demo-form-inline"
    8.         style="padding-top: 22px"
    9.       >
    10.         
    11.         <el-form-item v-if="role == 'manager' || role == 'nurse'">
    12.           <el-popconfirm
    13.             title="删除后无法恢复，确定吗？"
    14.             icon-color="red"
    15.             @confirm="batch_delete()"
    16.           >
    17.             <el-button slot="reference" plain type="danger">批量删除el-button>
    18.           el-popconfirm>
    19.         el-form-item>
    20.         <el-form-item>
    21.           <el-input
    22.             v-model="name"
    23.             placeholder="请输入疫苗种类名关键字"
    24.           >el-input>
    25.         el-form-item>
    26.         <el-form-item>
    27.           <el-button
    28.             type="primary"
    29.             style="background-color: #254175"
    30.             @click="selectPage"
    31.             >查询
    32.           >
    33.           <el-button
    34.             type="primary"
    35.             style="background-color: #254175"
    36.             @click="addOperate"
    37.             >新增
    38.           >
    39.         el-form-item>
    40.       el-form>
    41.     div>
    42.     <div class="botoom_div">
    43.       
    44.       <el-table
    45.         :data="tableData"
    46.         style="width: 100%"
    47.         @selection-change="handleSelectionChange"
    48.       >
    49.         
    50.         <el-table-column
    51.           type="selection"
    52.           width="55"
    53.           v-if="role == 'manager' || role == 'nurse'"
    54.         >el-table-column>
    55.         <el-table-column prop="id" label="种类编号"> el-table-column>
    56.         <el-table-column prop="name" label="种类名称" sortable>
    57.         el-table-column>
    58.         <el-table-column prop="remark" label="介绍">
    59.           <template #default="scope">
    60.             <el-popover
    61.               placement="top-start"
    62.               width="100"
    63.               trigger="click"
    64.               :content="scope.row.remark"
    65.             >
    66.               <el-button slot="reference" class="ellipsis-button">{{
    67.                 scope.row.remark
    68.               }}el-button>
    69.             el-popover>
    70.           template>
    71.         el-table-column>
    72.         
    73.         <el-table-column prop="status" label="状态">
    74.           <template #default="scope">
    75.             <el-tag type="success" v-if="scope.row.status == 1">正常el-tag>
    76.             <el-tag type="danger" v-if="scope.row.status == 0">禁用el-tag>
    77.           template>
    78.         el-table-column>
    79.         
    80.         <el-table-column label="管理">
    81.           <template #default="scope">
    82.             <el-button
    83.               size="small"
    84.               v-if="scope.row.status == 1"
    85.               type="danger"
    86.               @click="updateStatus(scope.row)"
    87.               >禁用
    88.             >
    89.             <el-button
    90.               size="small"
    91.               v-if="scope.row.status == 0"
    92.               type="success"
    93.               @click="updateStatus(scope.row)"
    94.               >启用
    95.             >
    96.           template>
    97.         el-table-column>
    98.         
    99.         <el-table-column label="操作">
    100.           <template #default="scope">
    101.             <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
    102.               >修改
    103.             >
    104.             <el-popconfirm
    105.               title="删除后无法恢复，确定吗？"
    106.               icon-color="red"
    107.               @confirm="handleDelete(scope.$index, scope.row)"
    108.             >
    109.               <el-button slot="reference" size="small" type="danger"
    110.                 >删除
    111.               >
    112.             el-popconfirm>
    113.           template>
    114.         el-table-column>
    115.       el-table>
    116.       
    117.       <el-dialog
    118.         :title="!vaccineType.id ? '疫苗种类-添加' : '疫苗种类-修改'"
    119.         :visible.sync="formVisible"
    120.         :close-on-click-modal="false"
    121.       >
    122.         <el-form
    123.           :model="vaccineType"
    124.           status-icon
    125.           :rules="rules"
    126.           ref="addType"
    127.           label-width="50px"
    128.           class="demo-vaccineType"
    129.         >
    130.           <el-form-item label="编号" prop="id" v-if="vaccineType.id">
    131.             <el-input v-model="vaccineType.id" disabled>el-input>
    132.           el-form-item>
    133.           <el-form-item label="种类名" prop="name">
    134.             <el-input
    135.               type="text"
    136.               v-model="vaccineType.name"
    137.               autocomplete="off"
    138.             >el-input>
    139.           el-form-item>
    140.           <el-form-item label="介绍" prop="remark">
    141.             <el-input
    142.               type="textarea"
    143.               v-model="vaccineType.remark"
    144.               autocomplete="off"
    145.             >el-input>
    146.           el-form-item>
    147.           <el-form-item>
    148.             <el-button type="primary" @click="submitForm('addType')"
    149.               >提交
    150.             >
    151.             <el-button @click="formVisible = false">取消el-button>
    152.           el-form-item>
    153.         el-form>
    154.       el-dialog>
    155.     div>
    156.   div>
    157. template>
    158.     <script>
    159. //导入request工具
    160. import request from "@/utils/request";
    161. import Cookies from "js-cookie";
    162. export default {
    163.   data() {
    164.     return {
    165.       role: "",
    166.       name: "", //模糊查询数据 //表格数据
    167.       tableData: [],
    168.       ids: [], //根据id批量删除存放的容器
    169.       vaccineType: {
    170.         id: "",
    171.         name: "",
    172.         remark: "",
    173.       },
    174.       rules: {
    175.         name: [
    176.           { required: true, message: "请输入疫苗种类名称", trigger: "blur" },
    177.         ],
    178.         remark: [
    179.           { required: true, message: "请输入疫苗种类介绍", trigger: "blur" },
    180.         ],
    181.       },
    182.       formVisible: false,
    183.     };
    184.   }, //当vue创建后，发起请求查询数据
    185.   created() {
    186.     if (Cookies.get("user")) {
    187.       //获取登录用户角色
    188.       var userJson = JSON.parse(Cookies.get("user"));
    189.       this.role = userJson.role;
    190.     }
    191.     this.selectPage();
    192.   },
    193.   methods: {
    194.     //分页-模糊查询函数
    195.     selectPage() {
    196.       //发送请求
    197.       request
    198.         .get("/vaccinetype/query", {
    199.           params: {
    200.             name: this.name,
    201.           },
    202.         })
    203.         .then((res) => {
    204.           //处理响应
    205.           if (res.flag == false) {
    206.             //查询失败
    207.             this.$message.error(res.message);
    208.           } else {
    209.             this.$message.success("查询成功"); //将查询到的数据赋值到当前tableData中
    210.             this.tableData = res.list;
    211.           }
    212.         });
    213.     }, //当复选框状态改变时，自动调用该函数，将复选框选中的行的数据id存入ids数组中
    214.     handleSelectionChange(selection) {
    215.       //遍历selection数组，存储id值
    216.       this.ids = selection.map((item) => item.id);
    217.     }, //批量删除函数
    218.     batch_delete(index, row) {
    219.       if (this.ids != "") {
    220.         request
    221.           .get("/vaccinetype/batchDelete", {
    222.             params: {
    223.               ids: this.ids.toString(),
    224.             },
    225.           })
    226.           .then((res) => {
    227.             //处理响应
    228.             if (res.flag == false) {
    229.               //删除失败
    230.               this.$message.error(res.message);
    231.             } else {
    232.               this.$message.success("删除成功");
    233.               this.selectPage();
    234.             }
    235.           });
    236.       } else {
    237.         this.$message.error("请先选择需要删除的数据！");
    238.       }
    239.     }, //删除函数
    240.     handleDelete(index, row) {
    241.       request
    242.         .get("/vaccinetype/delete", {
    243.           params: {
    244.             //参数
    245.             id: row.id,
    246.           },
    247.         })
    248.         .then((res) => {
    249.           //处理响应
    250.           if (res.flag == false) {
    251.             //删除失败
    252.             this.$message.error(res.message);
    253.           } else {
    254.             this.$message.success("删除成功");
    255.             this.selectPage();
    256.           }
    257.         });
    258.     }, //每页展示多少条
    259.     handleSizeChange(val) {
    260.       this.pageSize = val;
    261.       this.selectPage();
    262.     }, //当前页为多少页
    263.     handleCurrentChange(val) {
    264.       this.currentPage = val;
    265.       this.selectPage();
    266.     }, //打开添加表单
    267.     addOperate() {
    268.       this.formVisible = true; //对该表单项进行移除校验结果
    269.       this.$refs.addType.resetFields();
    270.       this.vaccineType = {
    271.         id: "",
    272.         name: "",
    273.         remark: "",
    274.       };
    275.     }, //修改-添加表单提交函数
    276.     submitForm(formName) {
    277.       //validate校验代码
    278.       this.$refs[formName].validate((valid) => {
    279.         // ok--通过校验
    280.         if (valid) {
    281.           if (this.vaccineType.id) {//id存在则是进行修改操作
    282.             request
    283.               .post("/vaccinetype/update", this.vaccineType)
    284.               .then((res) => {
    285.                 if (res.flag == false) {
    286.                   //修改失败
    287.                   this.$message.error(res.message);
    288.                   // 查询方法
    289.                   this.selectPage();
    290.                 } else {
    291.                   //修改成功
    292.                   this.formVisible = false;
    293.                   this.$message.success("修改成功");
    294.                   this.vaccineType = {
    295.                     id: "",
    296.                     name: "",
    297.                     remark: "",
    298.                   };
    299.                   this.selectPage();
    300.                 }
    301.               });
    302.           } else {//id不存在则是进行添加操作
    303.             //发送请求
    304.             request
    305.               .post("/vaccinetype/insert", this.vaccineType)
    306.               .then((res) => {
    307.                 //处理响应
    308.                 if (res.flag == false) {
    309.                   //添加失败
    310.                   this.$message.error(res.message);
    311.                 } else {
    312.                   this.$message.success("添加成功"); //关闭模态框
    313.                   this.formVisible = false; //清空数据
    314.                   this.vaccineType = {
    315.                     id: "",
    316.                     name: "",
    317.                     remark: "",
    318.                   }; //重新查询数据
    319.                   this.selectPage();
    320.                 }
    321.               });
    322.           }
    323.         }
    324.       });
    325.     }, // 打开修改表单函数
    326.     handleEdit(index, row) {
    327.       //打开嵌套表单的修改对话框
    328.       this.formVisible = true; //将数据进行回显
    329.       this.vaccineType.id = row.id;
    330.       this.vaccineType.name = row.name;
    331.       this.vaccineType.remark = row.remark; //对该表单项进行移除校验结果 // this.$refs.addType.clearValidate();
    332.     },
    333.   },
    334. };
    335. script>
    336.     <style>
    337. .top_div {
    338.   border-radius: 15px;
    339.   box-shadow: rgba(0, 0, 0, 0.32) 0px 2px 5px;
    340.   margin-bottom: 50px;
    341.   background-color: #fff;
    342. }
    343. .botoom_div {
    344.   border-radius: 15px;
    345.   padding-top: 25px;
    346.   padding-bottom: 25px;
    347.   box-shadow: rgba(0, 0, 0, 0.32) 0px 2px 5px;
    348.   margin-bottom: 50px;
    349.   background-color: #fff;
    350. }
    351. .ellipsis-button {
    352.   white-space: nowrap;
    353.   overflow: hidden;
    354.   text-overflow: ellipsis;
    355.   height: 50px;
    356.   max-width: 200px;
    357.   /* 假设按钮最大宽度为100px，根据需要进行调整 */
    358. }
    359. style>

    --重启后端服务进行测试、建议可以先新增一些数据，然后再测试修改和删除的操作

  • 相关阅读:
    通过股票数据接口如何看懂Level-2行情？
    Spring5.3学习——from 官网 day1-1
    2023 年《网络建设与运维》赛题解析
    python开发MYSQL代理服务器
    汽车IVI中控开发入门及进阶（二十四）：杰发科技AC8015
    30-cookie和session模式
    datax使用笔记
    各扫描方法原理及特点总结
    spring boot 1.封装分页插件pagehelp并做统一做返回值 2.封装SQL 3.redis在mybatis里面使用（大综合）
    7.20日 ksjsb上车说明及注意事项
  • 原文地址：https://blog.csdn.net/dogxixi/article/details/133977509