vue相关的页面和js编写

vue和后端调用

1 前端vue的查询接口（在src下的api中的对应目录编写调用后端的请求方法）

dispord.js文件

import request from '@/utils/request'   //封装了ajax

const 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-picker
        v-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-picker
        v-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 pageNo
        dispOrdService.findByPage(dispOrdPage, dispOrdQuery);
        //相当于从上面page中的东西
        long total = dispOrdPage.getTotal();
        List<DispOrd> dispOrdList = dispOrdPage.getRecords();
        // result对象调用方法
        return Result.OK().data("items",dispOrdList).data("total",total);
    }