vue相关的页面和js编写

server/2025/3/1 23:21:26/

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);}
文章来源:https://blog.csdn.net/m0_67814200/article/details/145399582
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/server/163818.html

相关文章

【长期更新】RN+expo 错误解决方案

Warning: Internal React error: Expected static flag was missing. Please notify the React team 复现的代码 import { useEffect, useRef } from react import React from react;const ModalShop ({ isVisible, onClose }) > {if (!isVisible) return null;const han…

使用 Intersection Observer 实现高效懒加载和滚动监听

在前端开发中&#xff0c;性能优化是提升用户体验的核心之一。随着网页内容的日益增多&#xff0c;如何高效地加载图片、视频等资源&#xff0c;以及如何监听用户的滚动行为&#xff0c;成为了前端开发者需要解决的难题。传统的滚动事件监听往往会带来性能瓶颈&#xff0c;尤其…

未来无线技术的发展方向

未来无线技术的发展趋势呈现出多样化、融合化的特点&#xff0c;涵盖速度、覆盖范围、应用领域、频段利用、安全性等多个方面。这些趋势将深刻改变人们的生活和社会的运行方式。 传输速度提升&#xff1a;Wi-Fi 技术迭代加快&#xff0c;如 Wi-Fi7 理论峰值速率达 46Gbps&#…

Python新春烟花

系列专栏 《Python趣味编程》《C/C趣味编程》《HTML趣味编程》《Java趣味编程》 系列文章 序号直达链接爱心系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python漂浮爱心代…

qt内部的特殊技巧【QT】

下面的代码实现一个进度条的功能&#xff1a; 代码一&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTimer> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJ…

大数据k-means聚类算法:基于k-means聚类算法+NLP微博舆情数据爬虫可视化分析推荐系统

文章目录 一、项目概述二、项目说明三、研究意义四、系统总体架构设计总体框架技术架构 五、K-means聚类算法部分模块六、 snownlp情感分析功能模块七、数据采集模块数据采集模块功能实现 八、数据管理模块九、项目截图十、结语 一、项目概述 当代社会&#xff0c;微博等社交媒…

three.js用粒子使用canvas生成的中文字符位图材质

three.js用粒子使用canvas生成中文字符材质 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Three.…

深度学习|表示学习|卷积神经网络|输出维度公式如何理解?|16

如是我闻&#xff1a; 当我们对输入图像进行卷积时&#xff0c;输出的宽度和高度可以通过以下公式计算&#xff1a; 输出大小 输入大小 − 卷积核大小 2 ⋅ 填充大小 步长 1 \text{输出大小} \frac{\text{输入大小} - \text{卷积核大小} 2 \cdot \text{填充大小}}{\text{步…