山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(5)

        又经过一段时间的努力，前端的方法已经基本完成。其实所谓前端的方法，除了一部分点击按钮或复选框等组件产生的页面跳转，返回与清空外，多数方法是通过路由连接到后端对应的方法。因此在这个问题上我们借鉴网上的一个做法，使用了一个比较麻烦但行之有效且不容易出bug的做法，我称之为“中间链接法”。

        该方法在前端的.vue文件中import时并不直接import后端的方法，而是按较大的分类（如入库，出库等）导入.js内的方法，而该.js文件的方法使用url连接到后端。

import {applyInStock, deleteCollect, fetchList,changeStatus} from '@/api/collect'
import {formatDate} from '@/utils/date';
import {deleteCollectDetail} from "@/api/collectDetail";
import {getCookie} from '@/utils/support';
import {getRole} from '@/api/order'

        然后使用js文件与后端连接

import request from '@/utils/request'

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

export function createCollectItem(data) {
  return request({
    url: '/collect/create',
    method: 'post',
    data: data
  })
}

export function applyInStock(data) {
  return request({
    url: '/collect/pda/relocation',
    method: 'post',
    data: data
  })
}

export function deleteCollect(params) {
  return request({
    url: '/collect/delete',
    method: 'post',
    params: params
  })
}

export function updateRelocationByCN(collectNo, data) {
  return request({
    url: '/collect/updateByCN/' + collectNo,
    method: 'post',
    data: data,
  })
}

export function deleteCollectByCoNo(params) {
  return request({
    url: '/collect/deleteByCoNo',
    method: 'post',
    params: {
      collectNo: params
    }
  })
}

export function getCollectDetail(id) {
  return request({
    url: '/collect/' + id,
    method: 'get'
  });
}
export function countCollect(params) {
  return request({
    url: '/collect/countCollect',
    method: 'get',
    params: params
  })
}

export function changeStatus(data) {
  return request({
    url: '/collect/changeStatus',
    method: 'post',
    data: data
  })
}

        关于前端自有的方法，与后端无关，比如上一篇中提到的页面中有“返回”按钮，可以直接调用写在前端的方法。

代码如下：

</div>
    <el-button style="margin-top: 20px" size="small" @click="back()">返回</el-button>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[50,100,200]"
        :total="total">
      </el-pagination>
    </div>
  </div>

back() {
      if (window.history.length <= 1) {
        this.$router.push({path: '/'})
        return false
      } else {
        this.$router.go(-1)
      }
    },

         而那些需要后端的方法，则有前面所说，利用中间节点。比如某处的删除操作

<el-button
              size="mini"
              type="danger"
              @click="handleDeleteInBill(scope.$index, scope.row)">删除
            </el-button>

        调用的方法如下： 

import {deleteInBill, fetchList, searchCodeList} from '@/api/inBill';
import {deleteInBillDetail} from "@/api/inBillDetail";
import {deleteInBillDetailItem} from "@/api/inBillItem";

handleDeleteInBill(index, row) {
      let ids = [];
      let billCodes = [];
      ids.push(row.id);
      billCodes.push(row.billCode);
      this.deleteInBill(ids, billCodes);
    },
    deleteInBill(ids, billCodes) {
      this.$confirm('是否要进行该删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params_id = new URLSearchParams();
        params_id.append("ids", ids);
        let params_code = new URLSearchParams();
        params_code.append("billCodes", billCodes);

        deleteInBill(params_id).then(response => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            duration: 1000
          });
          this.getList();
        });
        deleteInBillDetail(params_code);
        deleteInBillDetailItem(params_code);
      })
    },

        这样就比较方便的实现了方法的调用和与后端的连接。