vue和后端调用
1 前端vue的查询接口（在src下的api中的对应目录编写调用后端的请求方法）
dispord.js文件
import request from '@/utils/request' //封装了ajaxconst api_name = '/pms/dispord' //对应后端controller上面的公共的请求路径 -- 到nginx中了
//生产管理系统 - 生产调度 - 调度指令库管理
export default {//根据条件进行分页查询 - 调度指令库 - 参数和后端要对应query(pageNo,pageSize,dispOrdQuery) {return request({url: `${api_name}/${pageNo}/${pageSize}`,// url: api_name + pageNo + pageSize,method: 'post',data: dispOrdQuery //给后端传的数据//就等价于// params: {// menuName: undefined,// visible: undefined// },})},// 页面调用这个保存方法saveDispOrd(dispOrd) {return request({// 直接在模板字符串中加后面的saveDispOrd就行url: `${api_name}/saveDispOrd`,method: 'post',data: dispOrd // data是给后端传过去的数据})},
2 前端的vue页面文件
在views下的对应文件中编写页面信息
<template><!-- 调度指令管理--调度指令库管理页面 --><!-- 必须用一个div套起来，组件模板应该只包含一个根元素 --><div><!-- 动态查询条件 可以:model="queryParams" 也可以没有<el-form :model="queryParams" ref="queryRef" :inline="true"> --><el-form :inline="true" class="demo-form-inline"><!-- el-form-item中的prop属性有的话必须与el-input校验的表单属性一致 --><el-form-item label="优先级"><!-- 下拉列表 select 双向绑定--><el-select v-model="dispOrdQuery.priority" placeholder="请选择">
<!-- <el-option label="一级" value="shanghai"></el-option>-->
<!-- <el-option label="二级" value="beijing"></el-option>--></el-select></el-form-item><el-form-item label="专业类型"><el-select v-model="dispOrdQuery.specType" placeholder="请选择">
<!-- <el-option label="一级" value="shanghai"></el-option>-->
<!-- <el-option label="二级" value="beijing"></el-option>--></el-select></el-form-item><el-form-item label="指令名称"><el-input v-model="dispOrdQuery.orderName" placeholder="请选择"></el-input></el-form-item><el-form-item label="创建时间"><el-date-pickerv-model="dispOrdQuery.beginDate"type="dattime"placeholder="选择开始时间"value-format="yyyy-MM-dd HH:mm:ss"default-time="00:00:00"/></el-form-item><el-form-item label="截止时间"><el-date-pickerv-model="dispOrdQuery.endDate"type="dattime"placeholder="选择截止时间"value-format="yyyy-MM-dd HH:mm:ss"default-time="00:00:00"/></el-form-item><el-form-item><!-- 当点击导入按钮 打开对话框 --><el-button type="primary" @click="excelDialogVisible = true">导入</el-button><el-button type="primary" @click="exportExcel()">导出</el-button><el-button type="primary" @click="query()" >查询</el-button><el-button type="primary" @click="reset()">重置</el-button></el-form-item></el-form>
2 编写js方法 （引入api文件下的调用后端的js文件）
<script>// 引入api中的接口api
import dispord from "@/api/pms/dispord";export default {// data是返回到api的dispOrd.js中的data 页面上要用的data() {return {// total pageNo pageSize等dispOrdList: null, // 数据列表 -- 不是后端的类 可以给一个数组类型 []里面是对象dispOrdQuery: {}, //查询条件封装对象 可以将属性都写出来total: 0, // 总记录数pageNo: 1, // 页码pageSize: 2, // 每页显示记录数multipleSelection: [], // 记录表格复选框选中的值dialogVisible: false, // 控制创建对话框的开与关dispOrd: {}, // 新增窗口 绑定实体类中的属性 可以不加入对应的属性值 -- 后端需要是一个对象实体类型的saveBtnDisabled: false, //控制新增页面的保存按钮是否禁用 不禁用BASE_API: process.env.VUE_APP_BASE_API, //接口API地址 取到前端访问后端的地址 导入 导出做准备excelDialogVisible: false, //导入Excel窗口,false为关闭 导入对话框中importBtnDisabled: false //按钮是否禁用，false为不禁用}},created() { // 页面渲染之前this.query()},// 里面是axios调用的方法 （不刷新vue页面） -- 调用dispOrd.js中写的api中的方法methods: {// pageNo是从分页组件那里传过来的 -- 需要用this.来取query(pageNo = 1) {// 将分页组件点击到的页数--传给data中的this.pageNo = pageNo;dispord.query(this.pageNo,this.pageSize,this.dispOrdQuery) //传参传给api中的接口方法.then(response => { // response相当于代表后端返回过来的Result对象 {code: 20000, message: "调用成功!", success: true, data: {…}}// 调用js中api接口成功的回调函数-后端// 由于request.js拦截了一个data 已经request = response.data 已经取过一层了this.dispOrdList = response.data.items;this.total = response.data.total;}).catch()},// 记录选中的复选框的值handleSelectionChange(val) {this.multipleSelection = val;},
</script><style scoped></style>
3 后端查询接口
@Slf4j //lombok依赖的注解 配合log.debug("--------to main--------") log.error("..............................总数:{}",total);
@RestController
@Api(tags = "调度指令库管理")
@RequestMapping("/pms/dispord")
@CrossOrigin // 防止前端调用后台接口 产生跨域现象---spring mvc的注解 跨域可能是域名 协议 端口 / 请求地址是否出错 或者 传参问题
public class DispOrdController {/*** 根据条件进行分页查询 - 调度指令库* @param pageNo* @param pageSize* @param dispOrdQuery* @return*/@ApiOperation("根据条件进行分页查询 - 调度指令库")@PostMapping("{pageNo}/{pageSize}")public Result findByPage(@ApiParam(name = "pageNo",value = "页码",required = true)@PathVariable("pageNo") Long pageNo,@ApiParam(name = "pageSize",value = "每页最大条数",required = true)@PathVariable("pageSize") Long pageSize,@ApiParam(name = "dispOrdQuery",value = "查询条件封装对象",required = false) //查询条件不是必填的@RequestBody(required = false) DispOrdQuery dispOrdQuery){Page<DispOrd> dispOrdPage = new Page<>(pageNo,pageSize);// 给逻辑层传入page类型和查询条件封装类 pagesize pageNodispOrdService.findByPage(dispOrdPage, dispOrdQuery);//相当于从上面page中的东西long total = dispOrdPage.getTotal();List<DispOrd> dispOrdList = dispOrdPage.getRecords();// result对象调用方法return Result.OK().data("items",dispOrdList).data("total",total);}
