下载
https://gitee.com/panjiachen/vue-admin-template.git
运行
- 将下载的代码解压然后用vscode打开
- 在确保安装了node.js的情况下 使用npm install 安装好vue-admin-template 的依赖包
3. 使用npm run dev 运行模板 得到如下
项目文件描述:
vue-admin-template
├── build // 构建脚本
├── mock // 使用mock.js产生的用于测试的数据
├── node_modules // 项目依赖模块
├── src //项目源代码
├── tests // 测试环境
└── package.jspon // 项目信息和依赖配置
src
├── api // 连接后端提供的各种接口
├── assets // 图片等资源
├── components // 各种公共组件,非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具,非公共工具,在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口
到此,最基本的运行环节结束,接下来修改路由做增删查改
修改数据接口的路径:修改为后端项目的地址
注意:此处设置了后端接口的位置 需要在后端的控制器上加上@CrossOrigin注解避免跨域问题
修改路由
src/router/index.js 中代码对应位置
修改为后端对应的接口地址:
功能实现流程:
- 创建组件
- list.vue
<template>
<div class="app-container">
<!-- 表单查询 -->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="queryObj.hosname" placeholder="医院名称"/>
</el-form-item>
<el-form-item>
<el-input v-model="queryObj.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>
<!-- banner列表 -->
<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" style="margin-left:10px" 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>
- add.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>
- 创建路由
- 创建调用接口hospset.js 中提供了访问后端数据的接口
- 在组件中调用接口方法
查询
getList(page=1){//添加当前页参数
this.current = page
hospset.getHospSetList(this.current,this.limit,this.queryObj)
.then(response => {
this.list = response.data.records
this.total = response.data.total
})
.catch(error => {
console.log(error)
})
},
删除
//删除医院设置的方法
removeDataById(id){
this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//确定执行此方法
//调用接口的方法
hospset.removeHospSetById(id)
.then(response =>{
//删除成功后提示信息
this.$message({
type: 'success',
message: '删除成功!'
});
//更新列表
this.getList(this.current)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//批量删除医院设置方法
removeRows(){
var idList = []
//遍历数组中的所有被选中的记录,取出id放入idList
for (let i = 0; i < this.multipleSelection.length; i++) {
const obj = this.multipleSelection[i]
idList.push(obj.id)
}
this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//确定执行此方法
//调用接口的方法
hospset.batchRemoveHospSet(idList)
.then(response =>{
//删除成功后提示信息
this.$message({
type: 'success',
message: '删除成功!'
});
//更新列表
this.getList(this.current)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//批量选择记录
handleSelectionChange(selection){
this.multipleSelection = selection
},
添加和修改
//添加
saveOrUpdate() {
//判断是否有id,有就是修改,没有就是添加
if(this.hospitalSet.id){
this.update()
}else{
this.save()
}
},
//根据id查询医院设置信息
getHospSet(id){
hospset.getHospSet(id)
.then(response => {
//回显医院信息
this.hospitalSet = response.data
})
},
//添加医院设置信息
save(){
hospset.saveHospSet(this.hospitalSet)
.then(response => {
//提示
this.$message({
type: 'success',
message: '添加成功!'
})
//跳转列表页面,使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
},
//修改医院设置信息
update(){
hospset.updateHospSet(this.hospitalSet)
.then(response => {
//提示
this.$message({
type: 'success',
message: '修改成功!'
})
//跳转列表页面,使用路由跳转方式实现
this.$router.push({path:'/hospSet/list'})
})
}
}
组件重用问题的解决
关键代码:
export default {
name: 'AppMain',
computed: {
key() {
// return this.$route.path
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
}