一、管理平台前端搭建
1、项目名称
解压vue-admin-template-master.zip，项目重命名：yygh-admin
2、修改package.json
{
"name": "yygh-admin",
"version": "3.8.0",
"license": "MIT",
"description": "尚明医管理平台系统",
"author": "codeming2000@gamil.com",
}
3、如果需要修改端口号
config/index.js中修改
port: 9528
4、项目的目录结构
├── build // 构建脚本
├── config // 全局配置
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置
src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口
5、运行项目
npm insall
npm run dev
6、登录页修改
将登陆相关请求接口改为静态数据，不请求接口
修改文件：\src\store\modules\user.js
注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：
actions: {
// 登录
Login({ commit }, userInfo) {
const data = { 'token': 'admin' }
setToken(data.token)
commit('SET_TOKEN', data.token)
// const username = userInfo.username.trim()
// return new Promise((resolve, reject) => {
// login(username, userInfo.password).then(response => {
// const data = response.data
// setToken(data.token)
// commit('SET_TOKEN', data.token)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
},
// 获取用户信息
GetInfo({ commit, state }) {
const data = { 'roles': 'admin', 'name': 'admin', 'avatar': 'https://codeming2000.github.io/assets/img/headphoto.jpg' }
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
// return new Promise((resolve, reject) => {
// getInfo(state.token).then(response => {
// const data = response.data
// if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
// commit('SET_ROLES', data.roles)
// } else {
// reject('getInfo: roles must be a non-null array !')
// }
// commit('SET_NAME', data.name)
// commit('SET_AVATAR', data.avatar)
// resolve(response)
// }).catch(error => {
// reject(error)
// })
// })
},
// 登出
LogOut({ commit, state }) {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
// return new Promise((resolve, reject) => {
// logout(state.token).then(() => {
// commit('SET_TOKEN', '')
// commit('SET_ROLES', [])
// removeToken()
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
},
// 前端 登出
FedLogOut({ commit }) {
//return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
//})
}
}
说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注
修改\src\util\request.js
config.headers['token'] = getToken()
打开 config/index.js，配置是否开启语法检查
useEslint: false,
src/utils/request.js
if(res.code!==200){}
7、路由分析
7.1 入口文件中调用路由
src/main.js
...
import router from './router'//引入路由模块
...
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
7.2 路由模块中定义路由
src/router/index.js
...
export const constantRouterMap = [
...
{ path: '*', redirect: '/404', hidden: true }
]
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
说明：我们后续菜单路由就在此配置
二、医院设置管理
1、项目开发流程
1.1 定义路由模块
src/router/index.js
{
path: '/hospSet',
component: Layout,
redirect: '/hospSet/list',
name: '医院设置管理',
meta: { title: '医院设置管理', icon: 'example' },
children: [
{
path: 'list',
name: '医院设置列表',
component: () => import('@/views/hospset/list'),
meta: { title: '医院设置列表', icon: 'table' }
},
{
path: 'add',
name: '医院设置添加',
component: () => import('@/views/hospset/add'),
meta: { title: '医院设置添加', icon: 'tree' }
},
{
path: 'edit/:id',
name: 'EduTeacherEdit',
component: () =>import('@/views/hospset/add'),
meta: { title: '编辑', noCache: true },
hidden: true
}
]
},
1.2 定义api模块
创建文件 src/api/hospSet.js
import request from '@/utils/request'
export default {
//医院设置列表
getHospSetList(current,limit,searchObj) {
return request ({
url: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
method: 'post',
data: searchObj //使用json
})
},
//删除医院设置
deleteHospSet(id) {
return request ({
url: `/admin/hosp/hospitalSet/${id}`,
method: 'delete'
})
},
//批量删除
batchRemoveHospSet(idList) {
return request ({
url: `/admin/hosp/hospitalSet/batchRemove`,
method: 'delete',
data: idList
})
},
//锁定和取消锁定
lockHospSet(id,status) {
return request ({
url: `/admin/hosp/hospitalSet/lockHospitalSet/${id}/${status}`,
method: 'put'
})
},
//添加医院设置
saveHospSet(hospitalSet) {
return request ({
url: `/admin/hosp/hospitalSet/saveHospitalSet`,
method: 'post',
data: hospitalSet
})
},
//院设置id查询
getHospSet(id) {
return request ({
url: `/admin/hosp/hospitalSet/getHospSet/${id}`,
method: 'get'
})
},
//修改医院设置
updateHospSet(hospitalSet) {
return request ({
url: `/admin/hosp/hospitalSet/updateHospitalSet`,
method: 'post',
data: hospitalSet
})
}
}
1.3 定义页面组件脚本
src/views/hospset/list.vue
<template>
<div class="app-container">
医院设置列表
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.hosname" placeholder="医院名称" />
</el-form-item>
<el-form-item>
<el-input v-model="searchObj.hoscode" placeholder="医院编号" />
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()"
>查询</el-button
>
</el-form>
<!-- 工具条 -->
<div>
<el-button type="danger" size="mini" @click="removeRows()"
>批量删除</el-button
>
</div>
<el-table
:data="list"
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" width="50" label="序号" />
<el-table-column prop="hosname" label="医院名称" />
<el-table-column prop="hoscode" label="医院编号" />
<el-table-column prop="apiUrl" label="api基础路径" width="200" />
<el-table-column prop="contactsName" label="联系人姓名" />
<el-table-column prop="contactsPhone" label="联系人手机" />
<el-table-column label="状态" width="80">
<template slot-scope="scope">
{{ scope.row.status === 1 ? "可用" : "不可用" }}
</template>
</el-table-column>
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>删除</el-button
>
<el-button
v-if="scope.row.status == 1"
type="primary"
size="mini"
icon="el-icon-delete"
@click="lockHostSet(scope.row.id, 0)"
>锁定</el-button
>
<el-button
v-if="scope.row.status == 0"
type="danger"
size="mini"
icon="el-icon-delete"
@click="lockHostSet(scope.row.id, 1)"
>取消锁定</el-button
>
<router-link :to="'/hospSet/edit/' + scope.row.id">
<el-button
type="primary"
size="mini"
icon="el-icon-edit"
></el-button>
</router-link>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="current"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center"
layout="total, prev, pager, next, jumper"
@current-change="getList"
/>
</div>
</template>
<script>
//引入接口定义的js文件
import hospset from "@/api/hospset";
export default {
//定义变量和初始值
data() {
return {
current: 1, //当前页
limit: 3, //每页显示记录数
searchObj: {}, //条件封装对象
list: [], //每页数据集合
total: 0, //总记录数
multipleSelection: [], // 批量选择中选择的记录列表
};
},
created() {
//在页面渲染之前执行
//一般调用methods定义的方法，得到数据
this.getList();
},
methods: {
//定义方法，进行请求接口调用
//锁定和取消锁定
lockHostSet(id, status) {
hospset.lockHospSet(id, status).then((response) => {
//刷新
this.getList();
});
},
//获取选择复选框的id值
handleSelectionChange(selection) {
this.multipleSelection = selection;
},
//批量删除
removeRows() {
this.$confirm("此操作将永久删除医院是设置信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//确定执行then方法
var idList = [];
//遍历数组得到每个id值，设置到idList里面
for (var i = 0; i < this.multipleSelection.length; i++) {
var obj = this.multipleSelection[i];
var id = obj.id;
idList.push(id);
}
//调用接口
hospset.batchRemoveHospSet(idList).then((response) => {
//提示
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList(1);
});
});
},
//医院设置列表
getList(page = 1) {
//添加当前页参数
this.current = page;
hospset
.getHospSetList(this.current, this.limit, this.searchObj)
.then((response) => {
//请求成功response是接口返回数据
//返回集合赋值list
this.list = response.data.records;
//总记录数
this.total = response.data.total;
})
.catch((error) => {
//请求失败
console.log(error);
});
},
//删除医院设置的方法
removeDataById(id) {
this.$confirm("此操作将永久删除医院是设置信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//确定执行then方法
//调用接口
hospset.deleteHospSet(id).then((response) => {
//提示
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList(1);
});
});
},
},
};
</script>
2、分页查询
2.1 定义页面组件脚本
yygh-admin\src\views\hospset\list.vue
<script>
//引入接口定义的js文件
import hospset from "@/api/hospset";
export default {
//定义变量和初始值
data() {
return {
current: 1, //当前页
limit: 3, //每页显示记录数
searchObj: {}, //条件封装对象
list: [], //每页数据集合
total: 0, //总记录数
multipleSelection: [], // 批量选择中选择的记录列表
};
},
created() {
//在页面渲染之前执行
//一般调用methods定义的方法，得到数据
this.getList();
},
methods: {
//定义方法，进行请求接口调用
//医院设置列表
getList(page = 1) {
//添加当前页参数
this.current = page;
hospset
.getHospSetList(this.current, this.limit, this.searchObj)
.then((response) => {
//请求成功response是接口返回数据
//返回集合赋值list
this.list = response.data.records;
//总记录数
this.total = response.data.total;
})
.catch((error) => {
//请求失败
console.log(error);
});
}
},
};
</script>
2.2 定义页面组件模板
在table组件下面添加分页组件
<!-- 分页 -->
<el-pagination
:current-page="current"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center"
layout="total, prev, pager, next, jumper"
@current-change="getList"
/>
2.3 表单查询
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.hosname" placeholder="医院名称" />
</el-form-item>
<el-form-item>
<el-input v-model="searchObj.hoscode" placeholder="医院编号" />
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()"
>查询</el-button >
</el-form>
3、删除
3.1 定义api模块
yygh-admin\src\api\hospset.js
//批量删除
batchRemoveHospSet(idList) {
return request ({
url: `/admin/hosp/hospitalSet/batchRemove`,
method: 'delete',
data: idList
})
}
3.2 定义页面组件模板
在table组件中添加删除列
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope">
<el-button type="danger" size="mini"
icon="el-icon-delete" @click="removeDataById(scope.row.id)"> </el-button>
</template>
</el-table-column>
3.3 定义页面组件脚本
//删除医院设置的方法
removeDataById(id) {
this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //确定执行then方法
//调用接口
hospset.deleteHospSet(id)
.then(response => {
//提示
this.$message({
type: 'success',
message: '删除成功!'
})
//刷新页面
this.getList(1)
})
})
}
4、axios响应拦截器
4.1 关于code===200
if (res.code !== 200) {
return Promise.reject('error')
}
4.2 关于response
code===200时放行，前端页面接收到response.data的值，而不是response
if (res.code !== 200) {
return Promise.reject('error')
}
4.3 关于error
统一处理错误结果，显示错误消息
5、批量删除
5.1 定义api模块
在 src/api/hosp/hospitalSet.js添加方法
//批量删除
batchRemoveHospSet(idList) {
return request ({
url: `/admin/hosp/hospitalSet/batchRemove`,
method: 'delete',
data: idList
})
}
5.2 定义页面组件模板
在table组件上添加批量删除
<!-- 工具条 -->
<div>
<el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
</div>
在table组件上添加复选框
<el-table
:data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
5.3 定义页面组件脚本
1，Data定义数据
multipleSelection: [] // 批量选择中选择的记录列表
2，定义方法
// 当表格复选框选项发生变化的时候触发
handleSelectionChange(selection) {
this.multipleSelection = selection
},
3，定义删除方法
//批量删除
removeRows() {
this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //确定执行then方法
var idList = []
//遍历数组得到每个id值，设置到idList里面
for(var i=0;i<this.multipleSelection.length;i++) {
var obj = this.multipleSelection[i]
var id = obj.id
idList.push(id)
}
//调用接口
hospset.batchRemoveHospSet(idList)
.then(response => {
//提示
this.$message({
type: 'success',
message: '删除成功!'
})
//刷新页面
this.getList(1)
})
})
}
6、锁定与取消锁定
6.1 定义api模块
在 src/api/hosp/hospitalSet.js添加方法
//锁定和取消锁定
lockHospSet(id,status) {
return request ({
url: `/admin/hosp/hospitalSet/lockHospitalSet/${id}/${status}`,
method: 'put'
})
}
6.2 定义页面组件模板
在table组件上添加按钮
<el-table-column label="操作" width="280" align="center">
<template slot-scope="scope">
<el-button type="danger" size="mini"
icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
<el-button v-if="scope.row.status==1" type="primary" size="mini"
icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
<el-button v-if="scope.row.status==0" type="danger" size="mini"
icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>
</template>
</el-table-column>
6.3 定义页面组件脚本
//锁定和取消锁定
lockHostSet(id,status) {
hospset.lockHospSet(id,status)
.then(response => {
//刷新
this.getList()
})
},
7、添加医院设置
7.1 定义api模块
在 src/api/hosp/hospitalSet.js添加方法
//添加医院设置
saveHospSet(hospitalSet) {
return request ({
url: `/admin/hosp/hospitalSet/saveHospitalSet`,
method: 'post',
data: hospitalSet
})
}
7.2 定义页面组件脚本
src/views/hosp/hospitalSet/form.vue，完善data定义
export default {
data() {
return {
hospitalSet:{}
}
}
7.3 定义页面组件模板
src/views/hosp/hospitalSet/form.vue
<template>
<div class="app-container">
医院设置添加
<el-form label-width="120px">
<el-form-item label="医院名称">
<el-input v-model="hospitalSet.hosname"/>
</el-form-item>
<el-form-item label="医院编号">
<el-input v-model="hospitalSet.hoscode"/>
</el-form-item>
<el-form-item label="api基础路径">
<el-input v-model="hospitalSet.apiUrl"/>
</el-form-item>
<el-form-item label="联系人姓名">
<el-input v-model="hospitalSet.contactsName"/>
</el-form-item>
<el-form-item label="联系人手机">
<el-input v-model="hospitalSet.contactsPhone"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveOrUpdate">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
7.4 实现新增功能
<script>
import hospset from '@/api/hospset'
export default {
data() {
return {
hospitalSet:{}
}
},
created() {
},
methods: {
//添加
saveOrUpdate() {
hospset.saveHospSet(this.hospitalSet)
.then(response => {
//提示
this.$message({
type: 'success',
message: '添加成功!'
})
//跳转列表页面，使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
}
}
}
</script>
8、显示医院设置
8.1 定义api模块
在 src/api/hosp/hospitalSet.js添加方法
//院设置id查询
getHospSet(id) {
return request ({
url: `/admin/hosp/hospitalSet/getHospSet/${id}`,
method: 'get'
})
},
8.2 定义页面组件脚本
src/views/hosp/hospitalSet/form.vue，methods中定义回显方法
//根据id查询
getHostSet(id) {
hospset.getHospSet(id)
.then(response => {
this.hospitalSet = response.data
})
},
页面渲染成功后获取数据
因为已在路由中定义如下内容：path: ‘edit/:id’，因此可以使用 this.$route.params.id 获取路由中的id
created() {//页面渲染之前执行
//获取路由id值 调用接口得到医院设置信息
if(this.$route.params && this.$route.params.id) {
const id = this.$route.params.id
this.getHostSet(id)
}
},
8.3 定义页面组件模板
src/views/hosp/hospitalSet/list.vue
<router-link :to="'/hospSet/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
</router-link>
9、更新医院设置
9.1 定义api模块
在 src/api/hosp/hospitalSet.js添加方法
//修改医院设置
updateHospSet(hospitalSet) {
return request ({
url: `/admin/hosp/hospitalSet/updateHospitalSet`,
method: 'post',
data: hospitalSet
})
}
9.2 定义页面组件脚本
src/views/hosp/hospitalSet/form.vue，methods中定义updateData
//修改
update() {
hospset.updateHospSet(this.hospitalSet)
.then(response => {
//提示
this.$message({
type: 'success',
message: '修改成功!'
})
//跳转列表页面，使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
},
完善saveOrUpdate方法
saveOrUpdate() {
//判断添加还是修改
if(!this.hospitalSet.id) { //没有id，做添加
this.save();
} else {//修改
this.update()
}
}
10、组件重用问题
**问题：**vue-router导航切换 时，如果两个路由都渲染同个组件，
组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建
**解决方案：**可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。
修改 src/views/layout/components/AppMain.vue 文件如下：
<router-view:key="key"></router-view>
computed: {
key() {
returnthis.$route.name !== undefined? this.$route.name + +newDate(): this.$route + +newDate()
}
}
，methods中定义updateData
```js
//修改
update() {
hospset.updateHospSet(this.hospitalSet)
.then(response => {
//提示
this.$message({
type: 'success',
message: '修改成功!'
})
//跳转列表页面，使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
},
完善saveOrUpdate方法
saveOrUpdate() {
//判断添加还是修改
if(!this.hospitalSet.id) { //没有id，做添加
this.save();
} else {//修改
this.update()
}
}
10、组件重用问题
**问题：**vue-router导航切换 时，如果两个路由都渲染同个组件，
组件的生命周期方法（created或者mounted）不会再被调用, 组件会被重用，显示上一个路由渲染出来的自建
**解决方案：**可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。
修改 src/views/layout/components/AppMain.vue 文件如下：
<router-view:key="key"></router-view>
computed: {
key() {
returnthis.$route.name !== undefined? this.$route.name + +newDate(): this.$route + +newDate()
}
}
扫一扫
1873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
