Day105.尚医通 后台前端搭建、Elementui、增删改查、分页条件查询、批量删除

目录

一、后台前端搭建

前台开发步骤：

二、登录改造

1、后端添加方法

2、修改前端

三、医院设置列表基本实现

实现分页?

分页条件查询实现

四、删除医院设置

五、新增医院设置

六、医院设置修改实现

七、医院设置批量删除

---

一、后台前端搭建

1、确认前端所在位置

2、前端工程选型：Elementui

而 vue-element-admin 是基于element-ui的一套后台管理系统集成方案。

饿了么UI：Elementui

官网：Element - The world’s most popular Vue UI framework

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

3、工程搭建

标准方式

（1）工程包解压后复制到工程目录，重命名为yygh-admin

（2）进入工程目录，根据配置文件下载依赖：n****pminstall

（3）运行命令启动：npmrundev

已经下好依赖方式

（1）工程包解压后复制到工程目录，重命名为yygh-admin

（2）运行命令启动：npmrundev

修改总配置文件中30行，语法检查

4、项目目录介绍

├── build // 构建脚本
├── mock // 所有模拟数据
├── node_modules // 项目依赖模块

├── public // 通用页面元素
├── src //项目源代码
└── tests //测试目录

env.development：开发环境配置

env.production：运行时配置文件(生产环境)

vue.config.js：总配置文件

src
├── api // 前后端对接接口方法目录
├── assets // 静态资源目录(图片等)
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons // 小图标

├── layout // 页面布局
├── router // 路由表，路由配置目录
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 前端所有页面组件，视图目录
├── App.vue //***项目顶层组件***
├── main.js //***项目入口文件***
└── permission.js //认证入口

前台开发步骤：

二、登录改造

1、后端添加方法

根据请求信息，添加方法

    //实现模拟登录
    @ApiOperation(value = "模拟登录")
    @PostMapping("login")//注意请求方式
    // {"code":20000,"data":{"token":"admin-token"}}
    public R login(){
        return R.ok().data("token","admin-token");
    }
    @ApiOperation(value = "模拟获取用户信息")
    @GetMapping("info")
    //{"code":20000,"data":{"roles":["admin"],
    //"introduction":"I am a super administrator",
    //"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
    //"name":"Super Admin"}}
    public R info(){
        Map map = new HashMap<>();
        map.put("roles","admin");
        map.put("introduction","I am a super administrator");
        map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");//头像
        map.put("name","Super Admin");
        return R.ok().data(map);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、修改前端

1. 修改env.development 请求路径

VUE_APP_BASE_API = ‘http://localhost:8201/’

2. 修改api接口方法 请求路径

原因：工具类中进行了封装，根据启动指令读取配置文件

3、测试

分析：跨域问题
1. 请求路径拼错了(排除)

2. 跨域问题：在访问中、协议、ip地址、端口号中有一个发生变化，就会发生跨域问题

出于浏览器的同源策略限制：同源策略是一种约定,它是浏览器最核心也是最基本的安全功能

同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互

跨域请求出现错误的条件：浏览器同源策略 && 请求是ajax类型

解决：controller 类上添加@CrossOrigin 注解

成功

三、医院设置列表基本实现

1. 添加路由设置菜单 router

  {
    path: '/yygh/hospset',
    component: Layout,
    redirect: '/yygh/hospset/list',
    name: 'hosp',
    meta: { title: '医院管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/yygh/hospset/list'),
        meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院设置表单',
        component: () => import('@/views/yygh/hospset/add'),
        meta: { title: '添加医院设置', icon: 'tree' }
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.创建页面，修改路由

3. api 方法搭建

import request from '@/utils/request'
//提取请求路径
const api_name = '/admin/hosp/hospitalSet'

export default{
    //分页条件查询医院设置
    pageQuery(page,limit,searchObj){
        return request({
            url: `${api_name}/pageQuery/${page}/${limit}`,//插值表达式
            method: 'post',
            data:searchObj  //使用json方式传递数据
          })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. 实现页面

(1)添加页面元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

(2) JS实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

实现分页

(1) 添加组件

    
    
1
2
3
4
5
6
7
8
9

(2) 改造JS (实现分页)

data() {
    return {
      listLoading: true, //表格加载状态
      list: [], //表格数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total:0,//总记录数
      searchObj: {} //查询条件
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //分页条件查询 添加默认传参 es6新特性
    fetchData(page=1) {
        this.page = page
      hospsetApi
        .pageQuery(this.page, this.limit, this.searchObj)
        .then(response => {
          console.log(response);
          this.list = response.data.pageModel.records;
          this.total = response.data.pageModel.total
          this.listLoading = false;
        });
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

分页条件查询实现

(1) 顶部添加页面元素

           医院设置列表
        
        
            
                
            

            
                
            

            查询
            清空
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(2) 清空实现js

        //清空
        resetData() {
            this.searchObj = {};
            this.fetchData();
        },
1
2
3
4
5

四、删除医院设置

1. 添加api接口方法

    //医院设置删除
    removeById(id){
        return request({
            url: `${api_name}/${id}`,//插值表达式
            method: 'delete'
            })
    },
1
2
3
4
5
6
7

2. 页面实现js方法

    //删除
    removeDataById(id){
        hospsetApi.removeById(id).then(response=>{
            this.fetchData();
        })
    }
1
2
3
4
5
6

3.优化删除 (确认提示框)

        //删除
        removeDataById(id) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                    //删除
                    hospsetApi.removeById(id).then((response) => {
                        this.fetchData();
                    });

                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

五、新增医院设置

1. 实现接口api

    //新增医院设置
    save(hospitalSet){
        return request({
            url: `${api_name}/save`,//插值表达式
            method: 'post',
            data:hospitalSet
            })
    },
1
2
3
4
5
6
7
8

2. 实现页面 (新增与修改共用)

(1) 复制页面元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

(2)js实现

注意：页面跳转用$router，获取元素用$route

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

六、医院设置修改实现

注意：修改与新增共用一张表单

1. 确认入口

2. 添加隐藏路由

      {
        //占位符设置什么名字，取值时就用什么
        path: 'edit/:id',
        name: 'HospSetEdit',
        component: () => import('@/views/yygh/hospset/add'),
        meta: { title: '编辑医院设置', noCache: 'tree' },
        hidden: true
      }
1
2
3
4
5
6
7
8

3.实现数据回显

(1) 添加api接口方法

    //根据id进行查询
    getById(id){
        return request({
            url: `${api_name}/getById/${id}`,//插值表达式
            method: 'get'
            })
    },
1
2
3
4
5
6
7

(2) js实现

    created () {
        //通过路由获取id(占位符)，判断id数据是否存在
        if(this.$route.params&&this.$route.params.id){
            //注意，获取参数用route，不是router
            //console.log(this.$route.params.id);
            //数据回显
            hospsetApi.getById(this.$route.params.id).then(response=>{
                this.hospset = response.data.hospitalSet
            })
        }

    },
1
2
3
4
5
6
7
8
9
10
11
12

4.实现修改保存

(1) 新增api接口

    //修改医院设置
    update(hospitalSet){
        return request({
            url: `${api_name}/update`,
            method: 'post',
            data: hospitalSet  //用json
            })
    },
1
2
3
4
5
6
7
8

(2) 页面js实现

        methods: {
        //保存
        saveOrUpdate(){
            //新增与修改的区别:vu对象是否存在id
            this.saveBtnDisabled = true
            if (!this.hospset.id) {
                //新增
                this.saveHospset()
            } else {
                //编辑
                this.updateHospset()
            }

        },
        //修改
        updateHospset(){
            hospsetApi.update(this.hospset).then(response=>{
                this.$message({
                    type: "success",
                    message: "修改成功!",
                });
                //页面跳转，用router
                this.$router.push({path:'/yygh/hospset/list'})
            });
        },
        //新增
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

七、医院设置批量删除

1. 给表格添加复选框，可以拿到选择的对象
2. 点击“批量删除”按钮，获取所有选择对象的id，存入集合

1、创建api接口方法

    //批量删除医院设置
    batchRemove(idList){
        return request({
            url: `${api_name}/batchRemove`,//插值表达式
            method: 'delete',
            data: idList
            })
    },
1
2
3
4
5
6
7
8

2、实现页面改造 (参考官方文档)

        
        

            批量删除
        

        
        
           
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、实现复选框选择方法

    data() {
        return {
            listLoading: true, //表格加载状态
            list: [], //表格数据
            page: 1, //当前页
            limit: 5, //每页记录数
            total: 0,
            searchObj: {}, //查询条件
            multipleSelection: [], // 批量选择中选择的记录列表(批量删除)
        };
    },
    ...
    methods: {
        ....
        //复选框选择方法
        handleSelectionChange(selection) {
            console.log(selection);
            this.multipleSelection = selection;
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4、批量删除js实现

//批量删除
        removeRows() {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //1.创建参数对象idList
                    let idList = [];
                    //2.遍历multipleSelection对象，取出id
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let hospset = this.multipleSelection[i];
                        let id = hospset.id;
                        //3.存入idList
                        idList.push(id);
                    }
                    console.log(idList);

                    //4.调接口进行批量删除
                    hospsetApi.batchRemove(idList).then((response) => {
                        this.fetchData();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦