彤医通前端项目环境搭建与分页条件查询功能和前后端分离跨域问题

最新推荐文章于 2022-12-18 16:44:18 发布

程序彤

最新推荐文章于 2022-12-18 16:44:18 发布

阅读量158

点赞数

分类专栏：彤医通微服务架构项目文章标签： vue java spring boot

本文链接：https://blog.csdn.net/m0_47119598/article/details/115596188

版权

彤医通微服务架构项目专栏收录该内容

20 篇文章 1 订阅

订阅专栏

使用ui项目包，使用npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm install下载node_modules依赖模块
使用npm run dev启动服务器

医院（分页+条件）查询功能

这里出现import xxx from ‘@/…’ 报错无法引入js文件的问题
在webStorm中Setting->Languages->Webpack指定项目中的build包下的webpack.dev.js文件，得以解决。

在src/router/index.js中设置路由

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

在api包中设置功能接口

  getPageAndCondition(current,limit,searchObj){
    return request({
      url:`/admin/hosp/hospitalSet/findPageHospSet/{current}/{limit}`,
      method: 'post',
      data: searchObj // 使用json传递给服务器
    })
  }

修改config包中的dev.env.js中协议ip端口号为主机下

BASE_API: ‘“http://localhost:8081”’, // 这个接口地址必须注意配置

编写前端vue代码，调用api方法，展现服务器响应的数据时，出现跨域问题
解决方案：

出现报错异常

MethodArgumentTypeMismatchException: Failed to convert value of type ‘java.lang.String’ to required type ‘long’; nested exception is java.lang.NumberFormatException: For input string: “{current}”

注意：必须使用模板字符串（反引号），和表达式${current}进行参数传递。否则你就去拼接字符串，相对麻烦。

url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`

vue数据渲染。使用Element框架-ui组件

list.vue

methods: {
      getListOfPageAndCondition(page = 1) {
        this.current = page // 必须传参于1，分页的下一页才会生效
        // 调用api中的方法，进行axios请求链式调用
        hospset.getPageAndCondition(this.current, this.limit, this.searchObj)
          .then(response => { // 请求成功调用
            console.log(response)
            // 取了再存
            this.list = response.date.records // 将集合赋值给在data中定义的list，以便前端页面进行显示。
            this.total = response.date.total // 总记录数
          })
          .catch(error => {
            console.log(error)
          })
      },

api/hostset.js

import request from '@/utils/request'

export default {
  /**
   * 分页+条件查询 api方法
   * @param current 当前页
   * @param limit 每页数据条数
   * @param searchObj 条件查询对象
   */
  getPageAndCondition(current,limit,searchObj){
    return request({
      url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
      method: 'post',
      data: searchObj // 使用json传递给服务器
    })
  },

条件查询组件

<!-- 条件查询 -->
	<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="getListOfPageAndCondition()">查询</el-button>
    </el-form>

分页组件

<!-- 分页 -->
    <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="getListOfPageAndCondition"
    />

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

    <!-- 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="联系人手机"/>
      <!--      每行状态根据01判断可不可用-->
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '可用' : '不可用' }}
        </template>
      </el-table-column>
      <!--      每行删除功能-->
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="removeHospById(scope.row.id)"></el-button>
        </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="getListOfPageAndCondition"
    />


  </div>
</template>

<script>
  import hospset from '@/api/hospset'

  export default {
    data() {
      return {
        current: 1,
        limit: 2,
        searchObj: {}, // 条件查询对象
        list: [], // 分页组集合信息
        total: 0 // 总记录数
      }
    },
    created() {
      this.getListOfPageAndCondition() // 必要用this当前vue域文件间调用
      // 页面创建之后自动调用
    },
    methods: {
      getListOfPageAndCondition(page = 1) {
        this.current = page // 必须传参于1，分页的下一页才会生效
        // 调用api中的方法，进行axios请求链式调用
        hospset.getPageAndCondition(this.current, this.limit, this.searchObj)
          .then(response => { // 请求成功调用
            console.log(response)
            // 取了再存
            this.list = response.date.records // 将集合赋值给在data中定义的list，以便前端页面进行显示。
            this.total = response.date.total // 总记录数
          })
          .catch(error => {
            console.log(error)
          })
      },
      removeHospById(id) { // 传id，scope.row.id
        this.$confirm('此操作将逻辑删除该医院, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定后执行
          hospset.deleteHospById(id)
            .then(response => {
              // 自动提示框成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 刷新，重新一次新查询
              this.getListOfPageAndCondition(1)
            })
        })
        // .catch()点击取消后，默认什么都不发生
      }
    }
  }
</script>

程序彤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
彤医通前端项目环境搭建与分页条件查询功能和前后端分离跨域问题

使用ui项目包，使用npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/npm install下载node_modules依赖模块使用npm run dev启动服务器医院（分页+条件）查询功能这里出现import xxx from ‘@/…’ 报错无法引入js文件的问题在webStorm中Setting->Languages->Webpack指定项目中的build包下的webp.
复制链接

扫一扫