1、前端对接后端提供的接口功能,
在src/api中定义
url:访问后端方法的路径以及对应的参数,路径参数需要使用${}定义
method:请求方式
data:参数类型是对象
import request from "@/utils/request";
const api = '/admin/hosp/hospitalSet'
export default {
// 获取所有医院设置列表
getPageList(current, limit, searchObj) {
return request({
url: `${api}/findPageHospSet/${current}/${limit}`,
method: 'post',
data: searchObj
})
}
}
2、在src/router中定义路由规则
alwaysShow:如果这个模块只有一个子菜单,需要使用alwaysShow:true,可以显示父级列表。不使用这个语句就会只显示子列表菜单,而不显示父菜单。
{
path: '/hosp',
component: Layout,
redirect: '/hosp/list',
name: '医院管理',
meta: { title: '医院管理', icon: 'table' },
alwaysShow: true,
children: [
{
path: 'list',
name: '医院设置列表',
component: () =>import('@/views/hosp/list'),
meta: { title: '医院设置列表' }
}
]
}
3、在views下定义路由的页面
views/hosp/list.vue
<template>
<div class="app-container">
<!-- 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="联系人手机"/>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '可用' : '不可用' }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import hospApi from "@/api/hosp/hospitalSet";
export default {
data() {
return {
list: [],
searchObj: {}
}
},
created() {
this.getList()
},
methods: {
getList(page = 1) {
hospApi.getPageList(1, 5, this.searchObj).then(result => {
console.log(result.data)
this.list = result.data.records
result.data
}).catch(error => {
console.log(error)
})
}
}
}
</script>
4、在命令窗口使用npm run dev 命令运行前端项目
5、可能出现的问题
跨域问题:浏览器对于javascript的同源策略的限制 。
以下情况都属于跨域:
如果域名和端口都相同,但是请求路径不同,不属于跨域,如:
www.jd.com/item
www.jd.com/goods
http和https也属于跨域
解决方案:
Spring早就给我们提供了解决方案,我们只需要在对应controller上添加一个注解就可以了(@CrossOrigin // 跨域)。