目录
一、后台前端搭建
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/#功能
项目在线预览：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<String,Object> 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) 添加页面元素
<template>
<div class="app-container">
医院设置列表
<!-- alt + shift + f 格式化页面 -->
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="数据加载中"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="70" align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<!-- 字段名要与对象属性一致 -->
<el-table-column prop="hosname" label="医院名称" width="180" />
<el-table-column prop="hoscode" label="医院编号" width="160" />
<el-table-column prop="apiUrl" label="地址" width="200" />
<el-table-column prop="contactsName" label="联系人" />
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? "可用" : "不可用" }} <!-- === 比较类型也比较值 -->
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/yygh/hospset/edit/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"
>修改</el-button
>
</router-link>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeDataById(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>(2) JS实现
<script>
//导入 js文件
import hospsetApi from "@/api/yygh/hospset"
export default {
data () {
return {
listLoading:true,//表格加载状态
list:[],//表格数据
page:1,//当前页
limit:5,//每页记录数
searchObj:{}//查询条件
}
},
created () {
this.fetchData()
},
methods: {
fetchData(){
hospsetApi.pageQuery(this.page,this.limit,this.searchObj)
.then(response=>{
console.log(response)
this.list = response.data.pageModel.records
this.listLoading = false
})
}
}
}
</script>实现分页
(1) 添加组件
<!-- 分页 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="fetchData"
/>(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) 顶部添加页面元素
医院设置列表
<!--查询表单-->
<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="fetchData()"
>查询</el-button
>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>(2) 清空实现js
//清空
resetData() {
this.searchObj = {};
this.fetchData();
},四、删除医院设置
1. 添加api接口方法
//医院设置删除
removeById(id){
return request({
url: `${api_name}/${id}`,//插值表达式
method: 'delete'
})
},2. 页面实现js方法
//删除
removeDataById(id){
hospsetApi.removeById(id).then(response=>{
this.fetchData();
})
}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. 实现接口api
//新增医院设置
save(hospitalSet){
return request({
url: `${api_name}/save`,//插值表达式
method: 'post',
data:hospitalSet
})
},2. 实现页面 (新增与修改共用)
(1) 复制页面元素
<template>
<div class="app-container">
医院设置表单
<el-form label-width="120px">
<el-form-item label="医院名称">
<el-input v-model="hospset.hosname"/>
</el-form-item>
<el-form-item label="医院编号">
<el-input v-model="hospset.hoscode"/>
</el-form-item>
<el-form-item label="api地址">
<el-input v-model="hospset.apiUrl"/>
</el-form-item>
<el-form-item label="联系人">
<el-input v-model="hospset.contactsName"/>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="hospset.contactsPhone"/>
</el-form-item>
<el-form-item>
<!-- 防呆实现 disabled -->
<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>(2) js实现
注意：页面跳转用$router，获取元素用$route
<script>
import hospsetApi from "@/api/yygh/hospset";
export default {
data() {
return {
hospset: {}, //表单对象
saveBtnDisabled: false //按钮是否不可操作
};
},
created() {},
methods: {
//保存
saveOrUpdate() {
//新增
this.saveHospset();
},
//新增
saveHospset() {
hospsetApi.save(this.hospset).then(response => {
this.$message({
type: "success",
message: "新增成功!"
});
//路由页面跳转
this.$router.push({path:'/yygh/hospset/list'})
});
}
}
};
</script>六、医院设置修改实现
注意：修改与新增 共用一张表单
1. 确认入口
2. 添加隐藏路由
{
//占位符设置什么名字，取值时就用什么
path: 'edit/:id',
name: 'HospSetEdit',
component: () => import('@/views/yygh/hospset/add'),
meta: { title: '编辑医院设置', noCache: 'tree' },
hidden: true
}
3. 实现数据回显
(1) 添加api接口方法
//根据id进行查询
getById(id){
return request({
url: `${api_name}/getById/${id}`,//插值表达式
method: 'get'
})
},(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
})
}
},4. 实现修改保存
(1) 新增api接口
//修改医院设置
update(hospitalSet){
return request({
url: `${api_name}/update`,
method: 'post',
data: hospitalSet //用json
})
},(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'})
});
},
//新增七、医院设置批量删除
- 给表格添加复选框，可以拿到选择的对象
- 点击“批量删除”按钮，获取所有选择对象的id，存入集合
1、创建api接口方法
//批量删除医院设置
batchRemove(idList){
return request({
url: `${api_name}/batchRemove`,//插值表达式
method: 'delete',
data: idList
})
},2、实现页面改造 (参考官方文档)
<!-- 工具条 -->
<div>
<el-button type="danger" size="mini" @click="removeRows()"
>批量删除</el-button>
</div>
<!-- alt + shift + f 格式化页面 -->
<!-- 复选框 批量修改 @selection-change="handleSelectionChange" -->
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="数据加载中"
border
fit
highlight-current-row
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />3、实现复选框选择方法
data() {
return {
listLoading: true, //表格加载状态
list: [], //表格数据
page: 1, //当前页
limit: 5, //每页记录数
total: 0,
searchObj: {}, //查询条件
multipleSelection: [], // 批量选择中选择的记录列表(批量删除)
};
},
...
methods: {
....
//复选框选择方法
handleSelectionChange(selection) {
console.log(selection);
this.multipleSelection = selection;
},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: "已取消删除",
});
});
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
