首页 > 编程语言 >尚医通-day02【医院设置前端详细步骤】（内附源码）

尚医通-day02【医院设置前端详细步骤】（内附源码）

时间：2023-06-12 19:22:17浏览次数：56  
标签：vue 尚医通 day02 hospset id api syt 源码 路由

页面预览

列表页面

image-20230210195246393

新增页面

image-20230210195318317

编辑页面

image-20230210195345178

第01章-项目中的路由

1、引入路由

1.1、路由模块中定义路由

src/router/index.js 关键代码

import Vue from 'vue' //引入vue模块
import Router from 'vue-router' //引入路由模块

Vue.use(Router) //挂载路由功能到vue框架中

export const constantRoutes = [
  ......
]
export default new Router({
  ......
  routes: constantRoutes
})

1.2、入口文件中调用路由

src/main.js 关键代码

......
import router from './router' //引入路由模块
......
new Vue({
  el: '#app',
  router, //将路由模块配置到vue对象上下文
  store,
  render: h => h(App)
})

2、医院设置页面组件

2.1、创建vue组件

在src/views文件夹下创建以下文件夹和文件

image-20230315105040811

2.2、form.vue

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

2.3、list.vue

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

3、医院设置路由

3.1、方式一：静态路由的引入

最简单的引入路由的方式就是在src/router/index.js文件中配置路由节点：将医院管理节点定义在constantRoutes数组中

// 医院管理
{
    path: '/syt/hospset',
    component: Layout,
    redirect: '/syt/hospset/list',
    name: 'HospSet',
    meta: { title: '医院管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'list',
        name: 'HospSetList',
        component: () => import('@/views/syt/hospset/list'),
        meta: { title: '医院设置列表', icon: 'el-icon-s-unfold' }
      },
      {
        path: 'create',
        name: 'HospSetCreate',
        component: () => import('@/views/syt/hospset/form'),
        meta: { title: '添加医院设置', icon: 'el-icon-tickets' }
      },
      {
        path: 'edit/:id',
        name: 'HospSetEdit',
        component: () => import('@/views/syt/hospset/form'),
        meta: { title: '编辑医院设置', noCache: true },
        hidden: true
      }
    ]
},

3.2、方式二：动态路由的引入

也可以在之前的权限系统的菜单管理功能中添加动态的菜单和菜单项：

添加菜单：

image-20230315113845347

image-20230315114743302

添加菜单项：

image-20230315111025774

image-20230315113256423

最后添加后的结果如下：

image-20230315113641113

注意：系统中admin用户无需分配权限，默认拥有全部权限

image-20230315120100323

第02章-列表

1、代理配置

前端访问多个后端service模块，可通过前端代码请求服务器端接口，配置如下：

更改文件：vue.config.js

例如：

  • service-system模块：

    • 端口：8800、访问路径规则：/admin/system/**

  • service-hosp模块端口

    • 端口：8201、访问路径规则：/admin/hosp/**

配置：

proxy: {
  '/dev-api/admin/system': { // 匹配所有以 '/dev-api/admin/system'开头的请求路径
    target: 'http://localhost:8800',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  },
  '/dev-api/admin/hosp': { // 匹配所有以 '/dev-api/admin/hosp'开头的请求路径
    target: 'http://localhost:8201',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  }
}

2、定义api

创建文件 src/api/syt/hospset.js

import request from '@/utils/request'
const apiName = '/admin/hosp/hospitalSet'
export default {
  //医院设置列表
  getPageList(page, limit, searchObj) {
    return request({
      url: `${apiName}/${page}/${limit}`,
      method: 'get',
      params: searchObj
    })
  },
}

3、初始化vue组件

src/views/syt/hospset/list.vue

<template>
  <div class="app-container">
    医院设置列表
  </div>
</template>
<script>
import hospsetApi from '@/api/syt/hospset'
export default {
  data() {// 定义数据
      return {}
  },
    
  created() { // 当页面加载时获取数据
    this.fetchData()
  },
    
  methods: {
    fetchData() { // 调用api层获取数据库中的数据
      console.log('加载列表')
    },
  }
}
</script>

4、定义data

  data() {// 定义数据
    return {
      listLoading: true, // 是否显示loading信息
      list: null, // 数据列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      searchObj: {}// 查询条件
    }
  },

5、定义methods

  methods: {
    fetchData() {
      // 调用api层获取数据库中的数据
      console.log('加载列表')
      this.listLoading = true
      hospsetApi.getPageList(this.page, this.limit, this.searchObj).then(response => {
          //  debugger //设置断点调试
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
    },
  },

6、表格渲染

<!-- 医院设置列表 -->
<el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="数据加载中"
          border>
    <el-table-column
                     label="序号"
                     width="70"
                     align="center">
        <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
    </el-table-column>
    <el-table-column prop="hosname" label="医院名称" width="150" />
    <el-table-column prop="hoscode" label="医院编号" width="100" />
    <el-table-column prop="apiUrl" label="地址" width="200"/>
    <el-table-column prop="contactsName" label="联系人"/>
    <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
            {{ scope.row.status===1?'可用':'不可用' }}
        </template>
    </el-table-column>
    <el-table-column label="操作" width="260" align="center">
        <template slot-scope="scope">
            <router-link :to="'/syt/hospset/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button style="margin-left:5px" type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            <el-button v-if="scope.row.status==1" type="danger" size="mini" 
             	icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>
      		<el-button v-if="scope.row.status==0" type="success" size="mini" 
         		icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">解锁</el-button>
        </template>
    </el-table-column>
</el-table>

7、添加路由按钮

在菜单管理中，为修改按钮添加一条记录，因为此按钮是路由形式的按钮，必须配置动态路由，才能正确的加载到前端页面中。

image-20230315140120374

image-20230315135956794

第03章-分页

1、定义页面组件模板

在table组件下面添加分页组件

    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[2, 5, 10]"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
    />

2、改变每页条数

为组件注册事件

@size-change="changePageSize"

定义事件脚本

// 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
changePageSize(size) {
    this.limit = size
    this.fetchData()
},

3、翻页

为组件注册事件

@current-change="changeCurrentPage"

定义事件脚本

// 改变页码，page：回调参数，表示当前选中的“页码”
changeCurrentPage(page) {
    this.page = page
    this.fetchData()
},

第04章-查询表单

1、html

在table组件上面添加查询表单

<!--查询表单-->
<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="searchData()" :loading="listLoading">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
</el-form>

2、查询方法

//查询数据
searchData() {
    this.page = 1
    this.fetchData()
},

3、清空方法

//清空查询
resetData() {
    this.page = 1//重置页码
    this.searchObj = {}//清空查询条件
    this.fetchData()//重置列表数据
},

第05章-删除

1、定义api

src/api/syt/hospset.js

removeById(id) {
    return request({
        url: `${apiName}/${id}`,
        method: 'delete'
    })
},

2、定义methods

src/views/syt/hospset/list.vue

使用MessageBox 弹框组件

removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        type: 'warning',
    }).then(() => {
        hospsetApi.removeById(id).then(response => {
            this.fetchData()
            this.$message.success(response.message)
        })
    }).catch(() => {
        this.$message.info('已取消删除')
    })
},

第06章-新增

1、定义api

src/api/syt/hospset.js

save(hospset) {
    return request({
        url: apiName + '/saveHospSet',
        method: 'post',
        data: hospset
    })
},

2、初始化组件

src/views/syt/hospset/form.vue

html

<!--医院设置表单-->
<el-form label-width="120px">
    <el-form-item label="医院名称">
        <el-input v-model="hospset.hosname"/>
    </el-form-item>
    <el-form-item label="医院编号">
        <el-input v-model="hospset.hoscode"/>
    </el-form-item>
    <el-form-item label="api地址">
        <el-input v-model="hospset.apiUrl"/>
    </el-form-item>
    <el-form-item label="联系人">
        <el-input v-model="hospset.contactsName"/>
    </el-form-item>
    <el-form-item label="电话">
        <el-input v-model="hospset.contactsPhone"/>
    </el-form-item>
    <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
    </el-form-item>
</el-form>

js

<script>
export default {
  data() {
    return {
      hospset: {},
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  methods: {
    saveOrUpdate() {
      this.saveBtnDisabled = true
      this.saveData()
    },
    // 保存
    saveData() {
    }
  }
}
</script>

3、实现新增功能

引入api模块

import hospsetApi from '@/api/syt/hospset'

完善save方法

// 保存
saveData() {
    hospsetApi.save(this.hospset).then(response => {
        this.$message.success(response.message)
        this.$router.push({ path: '/syt/hospset/list' })
    })
},

思考：优化后端接口的错误处理（处理编号重复）

@ApiOperation(value = "新增医院设置")
@PostMapping("saveHospSet")
public Result save(
    @ApiParam(value = "医院设置对象", required = true)
    @RequestBody HospitalSet hospitalSet){

    try {
        //设置状态 1可用 0锁定
        hospitalSet.setStatus(1);
        //生成签名秘钥
        Random random = new Random();
        hospitalSet.setSignKey(MD5.encrypt(System.currentTimeMillis()+""+random.nextInt(1000)));
        boolean result = hospitalSetService.save(hospitalSet);
        if(result){
            return Result.ok().message("添加成功");
        }else{
            return Result.fail().message("添加失败");
        }

    } catch (DuplicateKeyException e) {
        throw new GuiguException(ResultCodeEnum.HOSCODE_EXIST, e);
    } catch (Exception e) {
        throw new GuiguException(ResultCodeEnum.FAIL, e);
    }
}

第07章-回显

1、定义api

src/api/syt/hospset.js

getById(id) {
    return request({
        url: `${apiName}/getHospSet/${id}`,
        method: 'get'
    })
},

2、组件中调用api

methods中定义fetchDataById：

// 根据id查询记录
fetchDataById(id) {
    hospsetApi.getById(id).then(response => {
        this.hospset = response.data
    })
},

3、调用fetchDataById

定义生命周期方法：

created() {
    console.log('created')
    if (this.$route.params.id) {
        this.fetchDataById(this.$route.params.id)
    }
},

第08章-更新

1、定义api

updateById(hospset) {
    return request({
        url: `${apiName}/updateHospSet`,
        method: 'put',
        data: hospset
    })
},

2、组件中调用api

methods中定义updateData

// 根据id更新记录
updateData() {
    hospsetApi.updateById(this.hospset).then(response => {
        this.$message.success(response.message)
        this.$router.push({ path: '/syt/hospset/list' })
    })
},

3、完善saveOrUpdate方法

saveOrUpdate() {
    this.saveBtnDisabled = true
    if (!this.hospset.id) {
        this.saveData()
    } else {
        this.updateData()
    }
},

第09章-批量删除

1、定义api

src/api/syt/hospset.js

removeRows(idList) {
    return request({
        url: `${apiName}/batchRemove`,
        method: 'delete',
        data: idList
    })
},

2、批量删除按钮

src/views/syt/hospset/list.vue

在列表页的table组件上方添加 批量删除 按钮

<!-- 工具条 -->
<div style="margin-bottom:5px;">
   <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
</div>

3、定义复选框和事件

在table组件上添加@selection-change 和 复选框列

<el-table ...
   @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55"/>

data定义数据

multipleSelection: [], // 批量选择中选择的记录列表

4、实现批量删除

完善方法

    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    //批量删除
    removeRows() {
        
      if(this.multipleSelection.length == 0){
        this.$message.warning('请选择要删除的记录')
        return
      }   
        
      this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
        type: 'warning',
      }).then(() => {
          //确定执行then方法
          var idList = []
          this.multipleSelection.forEach((item) => {
            idList.push(item.id)
          })
          //调用接口
          hospsetApi.removeRows(idList).then((response) => {
            //提示
            this.$message.success(response.message),
            //刷新页面
            this.fetchData()
          })
       }).catch(() => {
          this.$message.info('已取消删除')
       })
    },

第10章-锁定和解锁

1、定义api

src/api/syt/hospset.js

//锁定和取消锁定
lockHospSet(id, status) {
    return request({
        url: `${apiName}/lockHospitalSet/${id}/${status}`,
        method: 'put'
    })
},

2、编写调用方法

在list.vue页面添加方法：

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

源码：https://gitee.com/dengyaojava/guigu-syt-parent

标签：vue,尚医通,day02,hospset,id,api,syt,源码,路由
From： https://www.cnblogs.com/deyo/p/17475897.html

相关文章

  • 尚医通day09-【用户平台搭建详细步骤】（内附源码）
    页面预览首页医院详情第01章-服务器端渲染和客户端渲染1、搜索引擎优化1.1、什么是搜索引擎优化SEO是网站为了获得更多的流量，对网站的结构及内容进行调整和优化，以便搜索引擎（百度，google等）更好抓取到网站的内容，提高自已的网站排名。1.2、搜索引擎工作流程1.3、简单的S......
  • 社交app源码技术屏幕的两大实用功能
    在这个大部分人都是独生子的时代，很多人都会因为没有朋友或是在外地、亲人不在身边而孤独，这时候，很多人就会去选择去社交app软件，这也促使了社交app源码搭建平台的火爆，但是要想搭建出一个令用户满意的社交app平台，就要去了解用户需要什么样的社交app源码技术功能，今天我要讲的也是用户需......
  • 视频直播网站源码，vue tabs标签页 点击才加载
    视频直播网站源码，vuetabs标签页点击才加载tabs标签页，默认加载显示第1个tab； <el-tabsv-model="tTab"type="card"style="height:100%"@tab-click="tTabClick">  <el-tab-panelabel="Jupyter"name="Jupyter">   ......
  • std::string源码探秘和性能分析
    std::string源码探秘和性能分析2016年05月05日22:15:15std::string源码探秘和性能分析本文主要讲c++标准库的string的内部实现，以及对象拷贝的性能分析。文中采用的源码版本为gcc-4.9，测试环境为centos7，x86_64，涉及到指针等数据类型的大小也假定是在64环境位下。stl源码可以在......
  • dubbo源码深度分析：62个文档+中文注释+流程图+思维导图
    你好，我是田哥为满足群里大部分同学的需求，国庆期间，我重新对Dubbo源码进行梳理，一共7个内容：1、Dubbo核心知识总结2、Dubbo源码分析指南3、Dubbo服务发布流程4、Dubbo服务调用流程5、Dubbo中文版注释6、共62节Dubbo文档7、看Dubbo源码必备的知识点咱们话不多说，直接看内容。Dubbo核心知......
  • springboot+vue留守儿童爱心网站，附源码+数据库+论文+PPT，远程包安装运行
    1、项目介绍留守儿童爱心网站采用了B/S结构，JAVA作为开发语言，数据库采用了B/S结构，Mysql数据库进行开发。该系统包括前台操作，后台由管理员和用户两个部分，一方面，为用户提供首页、宣传新闻、志愿活动、爱心捐赠、个人中心、后台管理等功能；另一方面，为管理员提供首页、个人中心、用户管......
  • 家居购买管理系统（含源码）
    家居购买管理系统源码地址：https://pan.baidu.com/s/1UWQTntNOIiJ5xlaby6R60Q?pwd=cwq6提取码：cwq6开发工具：IDEA2021负责模块：主要负责管理员的订单管理、商品管理和用户的订单管理、购物车管理、首页、登录功能、后端的接口设计和实现。技术选型：java+jsp+MySQL+servlet1.模拟......
  • 从JDK源码级深入剖析main方法的运行机制
    如果你是一名Java应用开发工程师，你应该对“publicstaticvoidmain(String[]args)”这段代码再熟悉不过了，然而你是否了解main方法是如何调用的，为什么我们运行java.exe，就能启动应用程序？下面，让我们来一探究竟吧！首先，聊一聊，java.exe文件是怎么来的如果你下载了OpenJDK源码，在源码目......
  • Python modbus_tk 库源码分析
    modbus_tk源代码分析前言modbus_tcp协议是工业项目中常见的一种基于TCP/IP协议的设备数据交互协议。作为TCP/IP协议的上层协议，modbus_tcp协议涉及到两个概念：client和server。但更标准的叫法应该是master和slave。Slave：TCP/IP协议中的server方Master：TCP/IP协......
  • spring-mvc3 源码分析
    1,进入sevlet的service方法publicvoidservice(ServletRequestreq,ServletResponseres)throwsServletException,IOException{HttpServletRequestrequest;HttpServletResponseresponse;try{request=(HttpServletRequest)req;......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99