接口
刚刚好ā
当地小名气的程序猿 多小呢只有我自己知道~
展开
-
vue前端登录接口对接
实现目标:实现登录接口的对接,并将接口返回的token存至本地localStorage中。接口信息:api的js文件中:import axios from 'axios';export function loginD(params) { return axios.get(`${g_config.base__URL}/xxxx/${params.username}/${params.password}`);}其中,g_config.base__URL已在global.co原创 2022-05-18 16:44:31 · 1934 阅读 · 0 评论 -
Cesium中将wkt数据转化为geoJSON格式后渲染至地球上
实现目标:点击显示按钮,调用后端传递来的接口接收wkt数据,在vscode中将wkt数据转化为geoJSON格式,并渲染至地球上。点击关闭按钮,渲染效果移除。实现方法:一.调用后端接口1.后端Swagger中:2.api的js文件中:export function getAllData() { return request({ url: '/xxxx/xxxx/all', method: 'get', });}3.vue文件中:原创 2022-05-10 17:16:38 · 2179 阅读 · 0 评论 -
vue中文件的上传功能el-upload的实现,新增和编辑中实现文件上传,文件格式只能为word和pdf,且上传功能与后端接口对接
实现目标:1.新增文件:点击新增按钮,出现弹窗,点击上传文件,选择文件后,点击确定按钮,实现文件的上传,且限制文件格式只能为word和pdf格式。2.编辑文件:点击重新上传按钮,出现弹窗,点击上传文件,选择文件后,点击确定按钮,实现文件的上传,且限制文件格式只能为word和pdf格式。实现效果:1.新增文件:2.编辑文件:实现方法:1.后端的swagger中:2.api的js文件中:上传文件:(新增接口必须与该接口结合使用)exp...原创 2022-05-08 08:30:00 · 10023 阅读 · 0 评论 -
vue中文件下载功能通过与后端对接接口实现
实现目标:点击下载按钮,浏览器下方出现下载的文件,word文件将下载为word文件格式,不会进行pdf的转换。实现效果:实现方法:1.后端swagger中:2.api的js文件中:export function planDownloadById(param) { return request({ url: '/xxxx/xxxx/download', method: 'post', data: param, .原创 2022-05-07 19:00:00 · 2607 阅读 · 1 评论 -
vue文件以pdf的形式展现预览功能实现,与后端接口对接实现预览功能
实现目标:点击预览按钮,浏览器出现新的窗口,展示为附件的pdf的格式呈现,此功能与后端进行接口对接。实现效果:实现方法:(与后端对接口实现,后端将word格式转化为pdf格式)1.后端的swagger中2.api的js文件中export function previewFileById(param) { return request({ url: '/xxxx/xxxx/preview', method: 'post', .原创 2022-05-07 14:09:54 · 1709 阅读 · 0 评论 -
vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮,调用接口的处理方式(一)--- 同一个vue页面
实现目标:点击新增和编辑按钮时出现同一个弹窗,但展示信息不同,分别对接新增和编辑接口。直观效果:前端页面中的新增和编辑按钮点击新增按钮出现的弹框:点击编辑出现的弹框:新增和编辑均是通过确定按钮来对接接口。后端swagger:api下的js文件:// 新增export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .原创 2022-04-20 18:00:32 · 9207 阅读 · 3 评论 -
生成el-tree,勾选叶子节点后cesium在地球上同时添加多个图标,点击图标出现对应弹窗,与后端对接获取相应数据(并设置了只有叶子节点可以勾选)
实现目标:获取监控树,其中监控树只有叶子节点才有多选框,点击多选框在地球上添加多个图标,左击不同的图标出现对应的实时监控画面。监控树的数据以及实时监控的画面都是通过与后端对接接口获取的。添加一个图标上图并点击出现弹窗可参考:Cesium添加图标后点击该图标出现弹窗的具体实现方法_刚刚好ā的博客-CSDN博客_cesium同时添加多个图标的重点是:获取到数组后,将数组传递给cesium添加图标的方法,并对其进行处理,获取对应的经纬度,进而上图。vue文件的template中:监控树:&l原创 2022-03-19 11:15:00 · 953 阅读 · 1 评论 -
vue实现输入框的模糊查询,与后端对接接口
实现目标:在输入框中输入相关字符,列表会模糊查询与其有关的信息。实现效果:后端的swagger中:api的js文件中:// 根据名称模糊查询export function selectByName(param) { return request({ url: "/xxxx/selectByName", method: "get", params: { name: param } .原创 2022-03-14 19:10:14 · 5247 阅读 · 0 评论 -
vue弹框初始时查询状态并显示,对接后端的查询接口
实现目标:在已完成添加到右端的接口的前提下,若将数据添加至右边,再次点击该弹框时,已添加到右边的数据显示。若没有添加至右边的数据,默认全都显示在左侧。实现效果:后端swagger:实现方法:在vue文件点击弹窗的按钮处调用接口:async filesBatchAuth() { this.authDialogTitle = "授权"; this.isBatchAuth = true; let cameraId = []; thi原创 2022-03-14 18:46:55 · 1336 阅读 · 0 评论 -
vue中播放m3u8格式实时监控画面(取流)--调用后端接口
实现目标:点击按钮,出现弹窗,弹窗中为m3u8格式的监控实时画面。实现效果:1.index.html文件中:<!-- 取流 --> <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/video.js/6.6.2/video.j..原创 2022-03-10 16:27:19 · 2624 阅读 · 1 评论 -
vue 利用json文件调试接口之级联选择器的使用
后端接口由于某种原因无法调试,可先行在json文件中调试,将后端返回的F12中的数据右键复制为Object形式,粘贴至VSCode的json文件中。目标:将json文件中的数据回显至级联选择器中。1.vue文件的template中:v-model:选中的选项options:json(后端)中传递的所有选项props:下拉列表props指定change-on-select:是否允许选择任意一级的选项,默认为true@change:选项发生改变的事件show-all-levels原创 2022-03-09 16:26:44 · 1128 阅读 · 0 评论 -
Element-分页按钮-对接接口
实现目标:共几条是后端统计的数据,每几条切换时上面的表格出现相应的数据。template中:<!--分页--> <div class="pagination"> <el-pagination background :current-page="currentPage" @current-change="handleCurrentChange" ..原创 2022-02-17 08:30:00 · 521 阅读 · 0 评论 -
vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮,调用接口的处理方式(二)---父子vue页面
目标:点击增加按钮出现弹窗,弹窗中多选框的名称是通过其他接口获取的;点击编辑按钮出现弹窗,且该行的数据已被传递到该弹窗中,增加和编辑接口均是点击弹窗中的确定按钮进行调用的。1.api的js接口文件中:// 编辑export function rulesUpdate(param) { return request({ url: "/xxx/xxxx/update", method: "post", headers: {原创 2022-02-23 18:53:34 · 5060 阅读 · 0 评论 -
vue中switch按钮的接口对接,传true(flase)和1(0)的两种方式
1.传true和flase的方式:vue文件中: <template slot-scope="scope"> <el-switch v-model="scope.row.active" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus($event,scope.row,scope.$in转载 2022-02-23 15:53:51 · 3228 阅读 · 0 评论 -
接口总结--vue前后端接口对接,传递数值的不同形式(表单formData\json\拼接url等)
后端一般要求的传递方式:get 和 post1.传递的为普通参数(get)2.传递数组对象形式3.传递表单形式.......原创 2022-02-23 12:00:37 · 13138 阅读 · 0 评论 -
Echarts中的柱状图--与后台接口对接
使用Echarts,与后台接口对接,图表中所展示的值为后端传来的实时值。1.tempalte中的样式<div class="content-bottom-right"> <LittleTitle name="服务概况" /> <div class="server-left"> <div class="server-left-box"> <原创 2022-01-24 11:23:39 · 5525 阅读 · 0 评论 -
Echarts折线图两条折线叠加--与后端接口对接
实现效果:点击对比前:显示一条折线信息,折线信息为后端传递值点击对比后:显示两条折线信息,折线信息为后端传递值实现步骤:1.setCharts.js中:将两个折线数据分别写let seriesOne = { name: "", type: "line", stack: "Total", symbol: "none", //拐点样式 areaStyle: { normal: { //颜色渐变函数 前四原创 2022-01-25 18:16:31 · 3705 阅读 · 0 评论 -
前后端接口对接--新增表单数据
1.配置后端给的端口地址和token(参考登录接口对接文章)2.在public-src-api的相应js文件中//表单数据添加export function addFormData(param) { return request({ url: "/smartcity-datamanagement/cimFormData/addFormData", method: "post", headers: { "Content原创 2022-01-26 12:18:34 · 1940 阅读 · 0 评论 -
前端接口对接--登录接口对接,获取token
1.现在public目录下的global.config.js文件中配置后端地址后端地址是由后端同事提供的2.在public-src-api目录下新建login.js文件,将接口请求写入该文件中相应的代码段,方便复制import axios from 'axios';export function login (params) { return axios.post(`${g_config.base_URL}/xxxxxxxx/dologin`, params);}其中,ba原创 2022-01-14 16:15:08 · 3387 阅读 · 0 评论 -
前后端接口对接--删除表单数据
后端swaggerpublic-src-api下对应的js文件中://表单数据删除export function delFormData(param) { return request({ url: "/smartcity-datamanagement/cimFormData/delFormData", method: "get", params: { ids: param.ids, ta原创 2022-01-26 20:00:00 · 2077 阅读 · 0 评论 -
前后端接口对接--根据关键字查询搜索
要实现的内容:在右上角选择列名后,查询对应列名后的数据,点击查询图标,即可查询到相关信息。如:创建人列里,输入创建2字,即可显示与创建相关内容实现方法:1.后端swagger中:2.public-src-api下的相关js文件中:// 表单数据根据关键字查询-分页export function queryByKeyWord(param) { return request({ url: "/smartcity-datamanagement..原创 2022-01-27 08:00:00 · 2396 阅读 · 0 评论 -
前后端接口对接--编辑接口
点击编辑按钮出现弹窗,此时弹窗里含有这一行的数据,对其编辑,点击确定按钮提交,页面更新。增加和编辑都是通过确定按钮来实现的,这里需要在确定按钮处做个判断是增加操作还是编辑操作。后端swagger中:1.public-src-api页面中:// 表单数据编辑export function updateFormData(param) { return request({ url: "/smartcity-datamanagement/cimForm..原创 2022-01-27 17:41:57 · 1407 阅读 · 0 评论 -
获取表数据--前后端接口对接-vue
后端swagger:template中:<div class="approvalForm"> <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F7F7F7', textAlign: 'center' }" :cell-style="{ textAlign: 'ce原创 2022-02-15 17:37:49 · 2969 阅读 · 2 评论 -
审核接口对接 - - vue
点击审核按钮,弹出弹窗,可输入审核意见,点击通过按钮通过审核,点击驳回按钮不通过审核。与后端对接,后端的swagger:前端写接口的api文件://审批请示--数据审批export function approval(param) { return request({ url: "/xxxx/xxxx/approval", method: "post", headers: { "Content-Typ原创 2022-02-16 14:37:12 · 1317 阅读 · 0 评论