山东大学项目实训开发日志——基于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);
})
},这样就比较方便的实现了方法的调用和与后端的连接。
全部评论 (0)
还没有任何评论哟~