尚医通-前端列表（十一）

（1）搭建前端环境

（2）目录结构和登录改造

（3）医院设置前端-列表

（1）搭建前端环境

vue-element-admin

简介

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

安装

# 解压压缩包

# 进入目录

cd vue-element-admin-master

# 安装依赖

npm install

# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/

npm run dev

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

首先需要把前端模板下载下来，使用第一个解压：

把这个项目放到提前准备好的工作区中：

安装依赖：

则先执行下面的命令，再install

npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

启动：

（2）目录结构和登录改造

修改：

user.js：使它不调用接口登录：

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    name: '',
    avatar: '',
    roles: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const data = { 'token': 'admin' }
      setToken(data.token)
      commit('SET_TOKEN', data.token)
      // const username = userInfo.username.trim()
      // return new Promise((resolve, reject) => {
      //   login(username, userInfo.password).then(response => {
      //     const data = response.data
      //     setToken(data.token)
      //     commit('SET_TOKEN', data.token)
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      const data = { 'roles': 'admin', 'name': 'admin', 'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif' }
      if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)

      // return new Promise((resolve, reject) => {
      //   getInfo(state.token).then(response => {
      //     const data = response.data
      //     if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
      //       commit('SET_ROLES', data.roles)
      //     } else {
      //       reject('getInfo: roles must be a non-null array !')
      //     }
      //     commit('SET_NAME', data.name)
      //     commit('SET_AVATAR', data.avatar)
      //     resolve(response)
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 登出
    LogOut({ commit, state }) {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      // return new Promise((resolve, reject) => {
      //   logout(state.token).then(() => {
      //     commit('SET_TOKEN', '')
      //     commit('SET_ROLES', [])
      //     removeToken()
      //     resolve()
      //   }).catch(error => {
      //     reject(error)
      //   })
      // })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      //return new Promise(resolve => {
      commit('SET_TOKEN', '')
      removeToken()
      resolve()
      //})
    }
  }
}

export default user

修改request.js：改成token

（2）框架开发模块介绍

request.js给我们进行了封装，不用向原来在页面写axios进行调用，这个js给我们做了封装，在页面直接调用就可以了

（3）医院设置前端-列表

在router下index.js添加一份路由：

刷新页面：

创建目录hospset哈vue页面：

add.vue：

<template>
    <div class="app-container">
        医院设置添加
    </div>
</template>

list.vue：

<template>
    <div class="app-container">
        医院设置列表
    </div>
</template>

创建hospset.js：书写接口访问

hospset.js

import request from '@/utils/request'

// export function getList(params) {
//   return request({
//     url: '/table/list',
//     method: 'get',
//     params
//   })
// }

export default {
  getHospSetList(current,limit,searchObj) {
  return request({
    url: `${api_name}/findPageHospSet/${current}/${limit}`,
    method: 'post',
    data: searchObj //使用json
  })
  }
}

修改dev.env.js：

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
 // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  BASE_API: '"http://localhost:8201"',
})

测试侯后端分页查询接口：

HospConfig：配置类中加入分页插件

package com.atguigu.yygh.hosp.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan("com.atguigu.yygh.hosp.mapper")
public class HospConfig {
    /**
     * 分页插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }

}

接口测试正确：

编写 list.vue

<template>
    <div class="app-container">
        医院设置列表
    </div>
</template>
<script>
//引入接口定义的js文件
import hospset from '@/api/hospset'

export default {
    // data: {

    // }
    //定义一些变量和初始值
    data() {
        return {
            current: 1,//当前页
            limit: 3,//每页显示记录数
            searchObj: {}, //条件封装对象
            list:[] //每页数据集合
        }
    },
    created() {//在页面渲染之前执行
        //一般调用methods定义的方法，得到数据
        this.getList();
    },
    methods: {//定义方法进行请求接口的调用
        //医院设置列表方法
        getList() {
            hospset.getHospSetList(this.current, this.limit, this.searchObj)
                .then(response => {
                    //response接口返回数据
                    console.log(response);

                }) //请求成功之后调用
                .catch(error => {
                    console.log(error);
                })//请求失败调用
        }
    }   
}
</script>

报错：因为产生了跨域问题：前端端口9528 后端接口8201

解决办法：

一种是在控制器上加注解

@CrossOrigin  //跨域访问注解

在封装的request.js跨域访问成功返回20000改为200

list.vue：

<template>
    <div class="app-container">
        医院设置列表
    </div>
</template>
<script>
//引入接口定义的js文件
import hospset from '@/api/hospset'

export default {
    // data: {

    // }
    //定义一些变量和初始值
    data() {
        return {
            current: 1,//当前页
            limit: 3,//每页显示记录数
            searchObj: {}, //条件封装对象
            list: [], //每页数据集合
            total:0 //总记录数
        }
    },
    created() {//在页面渲染之前执行
        //一般调用methods定义的方法，得到数据
        this.getList();
    },
    methods: {//定义方法进行请求接口的调用
        //医院设置列表方法
        getList() {
            hospset.getHospSetList(this.current, this.limit, this.searchObj)
                .then(response => {//response接口返回数据
                    //返回集合赋值给list
                    this.list = response.data.records
                    //总记录数
                    this.total=response.data.total
                    console.log(response);

                }) //请求成功之后调用
                .catch(error => {
                    console.log(error);
                })//请求失败调用
        }
    }   
}
</script>

进入element-ui官网：

复制代码

<template>
    <div class="app-container">
        医院设置列表
        <el-table :data="list" stripe style="width: 100%">
        
            <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>

    </div>
</template>
<script>
//引入接口定义的js文件
import hospset from '@/api/hospset'

export default {
    // data: {

    // }
    //定义一些变量和初始值
    data() {
        return {
            current: 1,//当前页
            limit: 3,//每页显示记录数
            searchObj: {}, //条件封装对象
            list: [], //每页数据集合
            total:0 //总记录数
        }
    },
    created() {//在页面渲染之前执行
        //一般调用methods定义的方法，得到数据
        this.getList();
    },
    methods: {//定义方法进行请求接口的调用
        //医院设置列表方法
        getList() {
            hospset.getHospSetList(this.current, this.limit, this.searchObj)
                .then(response => {//response接口返回数据
                    //返回集合赋值给list
                    this.list = response.data.records
                    //总记录数
                    this.total=response.data.total
                    console.log(response);

                }) //请求成功之后调用
                .catch(error => {
                    console.log(error);
                })//请求失败调用
        }
    }   
}
</script>

下面做分页：

使用elemrnt-ui中的分页插件：

添加一个表单查询：

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="getList()">查询</el-button>
        </el-form>


        <el-table :data="list" stripe style="width: 100%">
        
            <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>
        <!-- 分页 -->
        <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>
<script>
//引入接口定义的js文件
import hospset from '@/api/hospset'

export default {
    // data: {

    // }
    //定义一些变量和初始值
    data() {
        return {
            current: 1,//当前页
            limit: 3,//每页显示记录数
            searchObj: {}, //条件封装对象
            list: [], //每页数据集合
            total:0 //总记录数
        }
    },
    created() {//在页面渲染之前执行
        //一般调用methods定义的方法，得到数据
        this.getList();
    },
    methods: {//定义方法进行请求接口的调用
        //医院设置列表方法
        getList(page = 1) {//添加当前页的参数
            this.current = page
            //调用hospset.js中的getHospSetList方法
            hospset.getHospSetList(this.current, this.limit, this.searchObj)
                .then(response => {//response接口返回数据
                    //返回集合赋值给list
                    this.list = response.data.records
                    //总记录数
                    this.total=response.data.total
                    console.log(response);

                }) //请求成功之后调用
                .catch(error => {
                    console.log(error);
                })//请求失败调用
        }
    }   
}
</script>