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、后端添加方法

根据请求信息，添加方法

<