4.前端环境搭建

前端环境搭建

一、vue-element-admin

1. 解压文件到项目工作区
2. 根据package.json下载需要的依赖npm install
3. 然后运行npm run dev

二、登录改造

..\src\store\modules\user.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Login({ commit }, userInfo) {
  const data = {'token':'admin'}
  setToken(data.token)
  commit('SET_TOKEN', data.token)
},

// 获取用户信息
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)
},

// 登出
LogOut({ commit, state }) {
  commit('SET_TOKEN', '')
  commit('SET_ROLES', [])
  removeToken()
},

三、框架开发过程

1. 添加路由
2. 设置要跳转的页面路径
3. 在api文件中创建js文件，定义接口路径
4. 在页面中引入js文件，使用axios进行接口调用，把接口返回数据在页面显示

四、医院设置前端开发

1. 添加医院设置路由

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   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' } } ]

2. 创建跳转页面，设置跳转路径

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   <template> <div class="app-container"> 医院设置添加 <el-form label-width="120px"> <el-form-item label="医院名称"> <el-input v-model="hospitalSet.hosname"/> </el-form-item> <el-form-item label="医院编号"> <el-input v-model="hospitalSet.hoscode"/> </el-form-item> <el-form-item label="api基础路径"> <el-input v-model="hospitalSet.apiUrl"/> </el-form-item> <el-form-item label="联系人姓名"> <el-input v-model="hospitalSet.contactsName"/> </el-form-item> <el-form-item label="联系人手机"> <el-input v-model="hospitalSet.contactsPhone"/> </el-form-item> <el-form-item> <el-button type="primary" @click="saveOrUpdate">保存</el-button> </el-form-item> </el-form> </div> </template>

3. 在api中创建js文件

   1 2 3 4 5 6 7 8 9

   export default { //医院设置列表 getHospSetList(current,limit,searchObj) { return request ({ url: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`, method: 'post', data: searchObj //使用json形式进行传递 }) }

4. //引入接口定义的js文件
   import hospset from '@/api/hospset'
   export default {
      //定义变量和初始值
      data() {
         return {
            current:1, //当前页
            limit:3, //每页显示记录数
            searchObj:{}, //条件封装对象
            list:[], //每页数据集合
            total:0, //总记录数
            multipleSelection: [] // 批量选择中选择的记录列表
         }
      },
      created() { //在页面渲染之前执行
         //一般调用methods定义的方法，得到数据
         this.getList()
      },
      methods: {//定义方法，进行请求接口调用
         //医院设置列表
         getList(page=1) { //添加当前页参数
            this.current = page
            hospset.getHospSetList(this.current,this.limit,this.searchObj)
               .then(response => { //请求成功  response是接口返回数据
                  //返回集合赋值list
                  this.list = response.data.records
                  //总记录数
                  this.total = response.data.total
               })
               .catch(error => {//请求失败
                  console.log(error)
               })
         }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   
   **跨域问题**：三个地方，任何一个不相同都会产生跨域问题
   
   1. 访问协议：http https
   2. 访问地址：192.168.1.1 172.11.1.1
   3. 端口号：9528 8201
   
   **解决方案**：在controller中加上`@CrossOrigin`注解
   
   **分页操作**：
   
   ```vue
   	 <!-- 分页 -->
         <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"/>
   
   

删除医院

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//删除医院设置的方法
      removeDataById(id) {
         this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => { //确定执行then方法
            //调用接口
            hospset.deleteHospSet(id)
               .then(response => {
                  //提示
                  this.$message({
                     type: 'success',
                     message: '删除成功!'
                  })
                  //刷新页面
                  this.getList(this.current)
               })
         })
      }

批量删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//批量删除
     removeRows() {
        this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
        }).then(() => { //确定执行then方法
           var idList = []
           //遍历数组得到每个id值，设置到idList里面
           for(var i=0;i<this.multipleSelection.length;i++) {
              var obj = this.multipleSelection[i]
              var id = obj.id
              idList.push(id)
           }
           //调用接口
           hospset.batchRemoveHospSet(idList)
              .then(response => {
                 //提示
                 this.$message({
                    type: 'success',
                    message: '删除成功!'
                 })
                 //刷新页面
                 this.getList(this.current)
              })
        })
     },	

判断用户是否点击选择：:disabled="multipleSelection.length === 0"

选择其他页时，之前页选的的框依然存在：:reserve-selection="true"

锁定

使用el-switch实现：

1
2
3

<el-switch v-model="scope.row.status" :active-value="1" 
               :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" 
               @change="lockHostSet(scope.row.id,scope.row.status)"></el-switch>

1
2
3
4
5
6
7

//锁定和取消锁定
     lockHostSet(id,status) {
        hospset.lockHospSet(id,status)
           .then(response => {
              //刷新
              this.getList(this.current)            })
     },

添加医院设置

1
2
3
4
5
6
7
8
9
10
11
12
13

//添加
     save() {
        hospset.saveHospSet(this.hospitalSet)
           .then(response => {
              //提示
              this.$message({
                 type: 'success',
                 message: '添加成功!'
              })
              //跳转列表页面，使用路由跳转方式实现
              this.$router.push({path:'/hospSet/list'})
           })
     },

修改

隐藏路由：

1
2
3
4
5
6
7

{
     path: 'edit/:id',
     name: 'EduTeacherEdit',
     component: () =>import('@/views/hospset/add'),
     meta: { title: '编辑', noCache: true },
     hidden: true
},

1
2
3

<router-link :to="'/hospSet/edit/'+scope.row.id">
       <el-button type="primary" size="mini" icon="el-icon-edit" title="编辑"></el-button>
</router-link>

1
2
3
4
5
6
7
8
9

//获取路由id值
//调用接口得到医院设置信息
if(this.$route.params && this.$route.params.id) {
     const id = this.$route.params.id
     this.getHostSet(id)
 } else {
     //表单数据清空
     this.hospitalSet = {}
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//根据id查询
getHostSet(id) {
   hospset.getHospSet(id) 
      .then(response => {
         this.hospitalSet = response.data
      })
},
//修改
update() {
   hospset.updateHospSet(this.hospitalSet)
      .then(response => {
         //提示
         this.$message({
            type: 'success',
            message: '修改成功!'
         })
         //跳转列表页面，使用路由跳转方式实现
         this.$router.push({path:'/hospSet/list'})
      })
},
saveOrUpdate() {
   //判断添加还是修改
   if(!this.hospitalSet.id) { //没有id，做添加
      this.save();
   }else {//修改
      this.update()
   }
}

组件重用问题

问题：vue-router导航切换时，如果两个路由都渲染同一个组件，组建的生命周期方法（created或者mounted）不会被再次调用，组件会被重用，显示上一个路由渲染出来的自建

解决方法：可以简单的在router-view上加一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

在src\views\layout\components\AppMain.vue中

1

<router-view :key="key"></router-view>

1
2
3
4
5

computed: {
   key() {
     return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
   }
}