vue 前端项目带条件查询的分页列表开发实战

一 添加医院设置路由

修改文件 E:\vue-sdgt\src\router\index.js

  {
    path: '/hospital',
    component: Layout,
    redirect: '/hospital/list',
    name: 'hospital',
    meta: { title: '医院管理', icon: 'table' },
    children: [
      {
        path: 'list',
        name: '医院列表',
        component: () => import('@/views/hospital/list'),
        meta: { title: '医院列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院添加',
        component: () => import('@/views/hospital/add'),
        meta: { title: '医院添加', icon: 'table' }
      }
    ]
  },

二 页面部分

修改文件 E:\vue-sdgt\src\views\hospital\list.vue

三 在 api 创建 js 文件，定义接口路径

修改文件 E:\vue-sdgt\src\api\hospital.js

import request from '@/utils/request'

export default {
    getHospitalList(current, limit, searchObj) {
        return request({
            url: `/admin/hospital/findPageHospital/${current}/${limit}`,
            method: 'post',
            data: searchObj // 使用 json 进行参数传递
        })
    }
}

四 修改接口ip和端口号

修改文件 E:\vue-sdgt\config\dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8201"',
})

五 修改 request 拦截器

修改文件 E:\vue-sdgt\src\utils\request.js

按实际情况配置，这里修改为200。

六 注意跨预问题

需要在后端代码加上 @CrossOrigin 注解，否则访问不通。

七 测试