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）进入工程目录，根据配置文件下载依赖：npm install

（3）运行命令启动：npm run dev

已经下好依赖方式

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

（2）运行命令启动：npm run dev

修改总配置文件中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);
    }

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' }
      }
    ]
  },

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方式传递数据
          })
    }
}

4. 实现页面

(1) 添加页面元素