2、前后端对接，vue-admin-template前端的操作

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 // 跨域）。