- 使用ui项目包,使用npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
- npm install下载node_modules依赖模块
- 使用npm run dev启动服务器
医院(分页+条件)查询功能
这里出现import xxx from ‘@/…’ 报错无法引入js文件的问题
在webStorm中Setting->Languages->Webpack指定项目中的build包下的webpack.dev.js文件,得以解决。
- 在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' }
}
]
},
- 在api包中设置功能接口
getPageAndCondition(current,limit,searchObj){
return request({
url:`/admin/hosp/hospitalSet/findPageHospSet/{current}/{limit}`,
method: 'post',
data: searchObj // 使用json传递给服务器
})
}
- 修改config包中的dev.env.js中协议ip端口号为 主机下
BASE_API: ‘“http://localhost:8081”’, // 这个接口地址必须注意配置
- 编写前端vue代码,调用api方法,展现服务器响应的数据时,出现跨域问题
解决方案:
出现报错异常
MethodArgumentTypeMismatchException: Failed to convert value of type ‘java.lang.String’ to required type ‘long’; nested exception is java.lang.NumberFormatException: For input string: “{current}”
注意:必须使用模板字符串(反引号),和表达式${current}进行参数传递。否则你就去拼接字符串,相对麻烦。
url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`
- vue数据渲染。使用Element框架-ui组件
list.vue
methods: {
getListOfPageAndCondition(page = 1) {
this.current = page // 必须传参于1,分页的下一页才会生效
// 调用api中的方法,进行axios请求链式调用
hospset.getPageAndCondition(this.current, this.limit, this.searchObj)
.then(response => { // 请求成功调用
console.log(response)
// 取了再存
this.list = response.date.records // 将集合赋值给在data中定义的list,以便前端页面进行显示。
this.total = response.date.total // 总记录数
})
.catch(error => {
console.log(error)
})
},
api/hostset.js
import request from '@/utils/request'
export default {
/**
* 分页+条件查询 api方法
* @param current 当前页
* @param limit 每页数据条数
* @param searchObj 条件查询对象
*/
getPageAndCondition(current,limit,searchObj){
return request({
url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
method: 'post',
data: searchObj // 使用json传递给服务器
})
},
条件查询组件
<!-- 条件查询 -->
<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="getListOfPageAndCondition()">查询</el-button>
</el-form>
分页组件
<!-- 分页 -->
<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="getListOfPageAndCondition"
/>
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="getListOfPageAndCondition()">查询</el-button>
</el-form>
<!-- banner列表 -->
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column type="index" width="50"/>
<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="联系人手机"/>
<!-- 每行状态根据01判断可不可用-->
<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="removeHospById(scope.row.id)"></el-button>
</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="getListOfPageAndCondition"
/>
</div>
</template>
<script>
import hospset from '@/api/hospset'
export default {
data() {
return {
current: 1,
limit: 2,
searchObj: {}, // 条件查询对象
list: [], // 分页组集合信息
total: 0 // 总记录数
}
},
created() {
this.getListOfPageAndCondition() // 必要用this当前vue域文件间调用
// 页面创建之后自动调用
},
methods: {
getListOfPageAndCondition(page = 1) {
this.current = page // 必须传参于1,分页的下一页才会生效
// 调用api中的方法,进行axios请求链式调用
hospset.getPageAndCondition(this.current, this.limit, this.searchObj)
.then(response => { // 请求成功调用
console.log(response)
// 取了再存
this.list = response.date.records // 将集合赋值给在data中定义的list,以便前端页面进行显示。
this.total = response.date.total // 总记录数
})
.catch(error => {
console.log(error)
})
},
removeHospById(id) { // 传id,scope.row.id
this.$confirm('此操作将逻辑删除该医院, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { // 点击确定后执行
hospset.deleteHospById(id)
.then(response => {
// 自动提示框成功
this.$message({
type: 'success',
message: '删除成功!'
})
// 刷新,重新一次新查询
this.getListOfPageAndCondition(1)
})
})
// .catch()点击取消后,默认什么都不发生
}
}
}
</script>