elementui，请求后端数据的方法封装

最近遇到一个前端，请求参数不是按照json来搞的，给我整迷了，而且她还比较倔强。因为后端框架是统一按照json的格式接收和返回数据的（例外的除外），接下来就下一个请求后端的方法，大家可以参考一下：

前端先写一个js，请求客户列表数据的方法：

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="客户名称" prop="name"><el-inputv-model="queryParams.name"placeholder="请输入客户名称"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="客户编号" prop="accountNo"><el-inputv-model="queryParams.accountNo"placeholder="请输入客户编号"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="证件类型" prop="identitytype"><el-select v-model="queryParams.identitytype" placeholder="请选择证件类型" clearable size="small"><el-optionv-for="dict in dict.type.identitytype":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-form-item><el-form-item label="证件号码" prop="identityno"><el-inputv-model="queryParams.identityno"placeholder="请输入证件号码"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="客户状态" prop="state"><el-inputv-model="queryParams.state"placeholder="请输入客户状态"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['system:account:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="success"plainicon="el-icon-edit"size="mini":disabled="single"@click="handleUpdate"v-hasPermi="['system:account:edit']">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['system:account:remove']">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="handleExport"v-hasPermi="['system:account:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="accountList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="实体主键" align="center" prop="objid" /><el-table-column label="负责人" align="center" prop="ownerid" /><el-table-column label="客户名称" align="center" prop="name" /><el-table-column label="客户编号" align="center" prop="accountNo" /><el-table-column label="证件类型" align="center" prop="identitytype"><template slot-scope="scope"><dict-tag :options="dict.type.identitytype" :value="scope.row.identitytype"/></template></el-table-column><el-table-column label="证件号码" align="center" prop="identityno" /><el-table-column label="客户状态" align="center" prop="state" /><el-table-column label="财汇企业代码" align="center" prop="itcode" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['system:account:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['system:account:remove']">删除</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 添加或修改客户管理对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="客户名称" prop="name"><el-input v-model="form.name" placeholder="请输入客户名称" /></el-form-item><el-form-item label="客户编号" prop="account_no"><el-input v-model="form.account_no" placeholder="请输入客户编号" /></el-form-item><el-form-item label="证件类型" prop="identitytype"><el-select v-model="form.identitytype" placeholder="请选择证件类型"><el-optionv-for="dict in dict.type.identitytype":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item><el-form-item label="证件号码" prop="identityno"><el-input v-model="form.identityno" placeholder="请输入证件号码" /></el-form-item><el-form-item label="客户状态" prop="state"><el-input v-model="form.state" placeholder="请输入客户状态" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import { listAccount, getAccount, delAccount, addAccount, updateAccount } from "@/api/system/account";export default {name: "Account",dicts: ['identitytype'],data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 客户管理表格数据accountList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,createtimestamp: null,updatetimestamp: null,version: null,entityname: null,createdby: null,updateby: null,ownerid: null,name: null,accountNo: null,grade: null,category: null,categoryA: null,categoryB: null,identitytype: null,identityno: null,parentid: null,groupid: null,accountLevel: null,state: null,itcode: null,ftName: null,engName: null,manager: null,tAccountLevel0: null,area: null,area0: null,area1: null,area2: null,area3: null,area4: null},// 表单参数form: {},// 表单校验rules: {name: [{ required: true, message: "客户名称不能为空", trigger: "blur" }],identitytype: [{ required: true, message: "证件类型不能为空", trigger: "blur" }],identityno: [{ required: true, message: "证件号码不能为空", trigger: "blur" }],state: [{ required: true, message: "客户状态不能为空", trigger: "blur" }],account_no: [{ required: true, message: "客户编号不能为空", trigger: "blur" }],}};},created() {this.getList();},methods: {/** 查询客户管理列表 */getList() {this.loading = true;listAccount(this.queryParams).then(response => {this.accountList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {objid: null,createtimestamp: null,updatetimestamp: null,version: null,entityname: null,createdby: null,updateby: null,ownerid: null,name: null,accountNo: null,grade: null,category: null,categoryA: null,categoryB: null,identitytype: null,identityno: null,parentid: null,groupid: null,accountLevel: null,state: null,itcode: null,ftName: null,engName: null,manager: null,tAccountLevel0: null,area: null,area0: null,area1: null,area2: null,area3: null,area4: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.objid)this.single = selection.length!==1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加客户管理";},/** 修改按钮操作 */handleUpdate(row) {this.reset();const objid = row.objid || this.idsgetAccount(objid).then(response => {this.form = response.data;this.open = true;this.title = "修改客户管理";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.objid != null) {updateAccount(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addAccount(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const objids = row.objid || this.ids;this.$modal.confirm('是否确认删除客户管理编号为"' + objids + '"的数据项？').then(function() {return delAccount(objids);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},/** 导出按钮操作 */handleExport() {this.download('system/account/export', {...this.queryParams}, `account_${new Date().getTime()}.xlsx`)}}
};
</script>

我把请求客户查询的方法单独摘出来：

 /** 查询客户管理列表 */getList() {this.loading = true;listAccount(this.queryParams).then(response => {this.accountList = response.rows;this.total = response.total;this.loading = false;});},

会发现有一个东西“listAccount”需要引入：

import { listAccount, getAccount, delAccount, addAccount, updateAccount } from "@/api/system/account";

然后带大家去看这个路径里面的方法是啥：
往下看了一下代码，哦？原来是针对客户列表数据做“增删改查”操作的js。

import request from '@/utils/request'// 查询客户管理列表
export function listAccount(query) {return request({url: '/system/account/list',method: 'get',params: query})
}// 查询客户管理详细
export function getAccount(objid) {return request({url: '/system/account/' + objid,method: 'get'})
}// 新增客户管理
export function addAccount(data) {return request({url: '/system/account',method: 'post',data: data})
}// 修改客户管理
export function updateAccount(data) {return request({url: '/system/account',method: 'put',data: data})
}// 删除客户管理
export function delAccount(objid) {return request({url: '/system/account/' + objid,method: 'delete'})
}// 导出客户管理
export function exportAccount(query) {return request({url: '/system/account/export',method: 'get',params: query})
}

大家会发现每一个方法里面都有一个“request”:
// 查询客户管理列表
export function listAccount(query) {
return request({
url: ‘/system/account/list’,
method: ‘get’,
params: query
})
}

没办法，继续看为啥要因引入这个方法了：

import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'let downloadLoadingInstance;axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 10000
})// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}return config
}, error => {console.log(error)Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use(res => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二进制数据则直接返回if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){return res.data}if (code === 401) {let doms = document.getElementsByClassName('el-message-box')[0]if(doms === undefined){MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {store.dispatch('LogOut').then(() => {location.href = '/index';})}).catch(() => {});}return Promise.reject('无效的会话，或者会话已过期，请重新登录。')} else if (code === 500) {Message({message: msg,type: 'error'})return Promise.reject(new Error(msg))} else if (code !== 200) {Notification.error({title: msg})return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";}else if (message.includes("timeout")) {message = "系统接口请求超时";}else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}Message({message: message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)// 通用下载方法
export function download(url, params, filename) {downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })return service.post(url, params, {transformRequest: [(params) => { return tansParams(params) }],headers: { 'Content-Type': 'application/x-www-form-urlencoded' },responseType: 'blob'}).then(async (data) => {const isLogin = await blobValidate(data);if (isLogin) {const blob = new Blob([data])saveAs(blob, filename)} else {Message.error('无效的会话，或者会话已过期，请重新登录。');}downloadLoadingInstance.close();}).catch((r) => {console.error(r)Message.error('下载文件出现错误，请联系管理员！')downloadLoadingInstance.close();})
}export default service

这个里面的内容就丰富了，其中就引入了这么两个东西：

import axios from ‘axios’
import { Notification, MessageBox, Message, Loading } from ‘element-ui’

哈哈，学到了！！！！！！！！！！
经过这么一看，后端接收的可以是json。

elementui，请求后端数据的方法封装相关推荐

前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...
浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...
vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据需要引用vue-resource 安装 ...
本地主机作服务器解决AJAX跨域请求访问数据的方法
本地主机作服务器解决AJAX跨域请求访问数据的方法参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...
Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
前后端数据交互方法和原理
对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前后端实现数据交互,在没有指导的情况下,可能大多数人都会一头雾水,往往都会有以下的疑问. 目 ...
vue如何请求后端数据
在vue中,我们如何通过请求接口来访问后端的数据呢?在这里简单总结了一个小示例: 主要问题:如果不封装的话,在每次请求的时候都要书写一遍下面的代码,造成代码冗余. 1.在src目录下创建一个utils ...

elementui，请求后端数据的方法封装

没办法，继续看为啥要因引入这个方法了：

elementui，请求后端数据的方法封装相关推荐

最新文章

热门文章