本章目的：调用API实现页面功能一、安装axiosnpm install --save axiosView Code 二、封装axios调用方法 js/api.jsimport axios from axios;import Vue from vue;let base = http://localhost:8022;axios.def...
本章目的：调用API实现页面功能
一、安装axios
npm install --save axiosView Code
二、封装axios调用方法
js/api.js
import axios from 'axios';
import Vue from 'vue';
let base = 'http://localhost:8022';
axios.defaults.timeout = 20000
// 自定义判断元素类型JS
function toType(obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull(o) {
for (var key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
}
}
return o
}
axios.interceptors.request.use(
config => {
return config
},
err => {
return Promise.reject(err);
}
);
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
// 超时请求处理
var originalRequest = error.config;
if (error.code == 'ECONNABORTED' && error.message.indexOf('timeout') != -1 && !originalRequest._retry) {
Vue.prototype.$message({
message: '请求超时！',
type: 'error'
});
originalRequest._retry = true
return null;
}
if (error.response) {
if (error.response.status == 401) {
//需要授权
}
// 403 无权限
if (error.response.status == 403) {
Vue.prototype.$message({
message: '失败！该操作无权限',
type: 'error'
});
return null;
}
// 429 ip限流
if (error.response.status == 429) {
Vue.prototype.$message({
message: '刷新次数过多，请稍事休息重试！',
type: 'error'
});
return null;
}
}
return ""; // 返回接口返回的错误信息
}
);
// 角色管理
export const getRoleListPage = params => {
return axios.get(`${base}/api/role/get`, { params: params });
};
export const removeRole = params => {
return axios.delete(`${base}/api/role/delete`, { params: params });
};
export const editRole = params => {
return axios.put(`${base}/api/role/put`, params);
};
export const addRole = params => {
return axios.post(`${base}/api/role/post`, params );
};
View Code
三、页面代码
角色页面 views/User/Roles.vue
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" @submit.native.prevent>
<el-form-item>
<el-input v-model="filters.name" placeholder="请输入内容"></el-input>
</el-form-item>
<el-button type="primary" @click="getRoles">查询</el-button>
<el-button type="primary" @click="handleAdd">新增</el-button>
<el-button type="primary" @click="handleEdit">修改</el-button>
<el-button type="danger" @click="handleDel">删除</el-button>
</el-form>
</el-col>
<!--列表-->
<el-table :data="datalist"
highlight-current-row
v-loading="listLoading"
@current-change="selectCurrentRow"
style="width: 100%;">
<el-table-column type="index" width="80"></el-table-column>
<el-table-column prop="RoleName" label="角色名" width sortable></el-table-column>
<el-table-column prop="Description" label="说明" width sortable></el-table-column>
<el-table-column prop="CreateTime" label="创建时间" :formatter="formatCreateTime" width sortable></el-table-column>
<el-table-column prop="Enabled" label="状态" width="200" sortable>
<template slot-scope="scope">
<el-tag :type="scope.row.Enabled ? 'success' : 'danger'"
disable-transitions>{{scope.row.Enabled ? "正常":"禁用"}}</el-tag>
</template>
</el-table-column>
</el-table>
<VuePagination ref="vuePagination"
:current-page="pagination.currentPage"
:pageSize="pagination.pageSize"
:totals="pagination.totals"
@size-change="handleSizeChange"
@current-change="handleCurrentChange" />
<!--编辑界面-->
<el-dialog title="编辑"
:visible.sync="editFormVisible"
v-model="editFormVisible"
:close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="角色名" prop="RoleName">
<el-input v-model="editForm.RoleName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="状态" prop="Enabled">
<el-select v-model="editForm.Enabled" placeholder="请选择角色状态">
<el-option v-for="item in statusList"
:key="item.value"
:label="item.name"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="说明" prop="Description">
<el-input v-model="editForm.Description" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增"
:visible.sync="addFormVisible"
v-model="addFormVisible"
:close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="角色名" prop="RoleName">
<el-input v-model="addForm.RoleName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="状态" prop="Enabled">
<el-select v-model="addForm.Enabled" placeholder="请选择角色状态">
<el-option label="激活" value="true"></el-option>
<el-option label="禁用" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item label="说明" prop="Description">
<el-input v-model="addForm.Description" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import util from "../../js/date";
import { getRoleListPage, removeRole, editRole, addRole } from "../../js/api";
import VuePagination from '@/components/Pager'
export default {
name: 'Users',
components: { "VuePagination": VuePagination },
data() {
return {
filters: {
name: ""
},
datalist: [],
statusList: [
{ name: "激活", value: "true" },
{ name: "禁用", value: "false" }
],
total: 0,
page: 1,
listLoading: false,
sels: [], //列表选中列
currentRow: null,
addDialogFormVisible: false,
editFormVisible: false, //编辑界面是否显示
editLoading: false,
editFormRules: {
RoleName: [{ required: true, message: "请输入角色名", trigger: "blur" }],
Enabled: [{ required: true, message: "请选择状态", trigger: "blur" }]
},
//编辑界面数据
editForm: {
Id: 0,
CreateBy: "",
RoleName: "",
Description: "",
Enabled: false
},
addFormVisible: false, //新增界面是否显示
addLoading: false,
addFormRules: {
RoleName: [{ required: true, message: "请输入角色名", trigger: "blur" }],
Enabled: [{ required: true, message: "请选择状态", trigger: "blur" }]
},
//新增界面数据
addForm: {
CreateBy: "",
CreateId: 0,
RoleName: "",
Description: "",
Enabled: true
},
pagination: {
pageSize: 2, // 显示的条数
totals: 0, // 总数
currentPage: 1 // 当前第几页
},
};
},
methods: {
// 改变每页的显示数量
handleSizeChange(val) {
this.pagination.pageSize = val.pageSize;
this.getRoles()
},
// 翻页
handleCurrentChange(val) {
val.totals = this.pagination.totals;
this.pagination = {
...val,
};
this.getRoles()
},
selectCurrentRow(val) {
this.currentRow = val;
},
formatCreateTime: function (row, column) {
return !row.CreateTime || row.CreateTime == ""
? ""
: util.formatDate.format(new Date(row.CreateTime), "yyyy-MM-dd");
},
//获取列表
getRoles() {
let _this = this;
let para = {
page: _this.pagination.currentPage,
intPageSize: _this.pagination.pageSize,
key: this.filters.name
};
this.listLoading = true;
getRoleListPage(para).then(res => {
this.total = res.data.response.dataCount;
this.datalist = res.data.response.data;
this.pagination.totals = res.data.response.dataCount;
this.pagination.currentPage = res.data.response.data;
this.listLoading = false;
});
},
//删除
handleDel() {
let row = this.currentRow;
if (!row) {
this.$message({
message: "请选择要删除的一行数据！",
type: "error"
});
return;
}
this.$confirm("确认删除该记录吗?", "提示", {
type: "warning"
})
.then(() => {
this.listLoading = true;
let para = { id: row.Id };
removeRole(para).then(res => {
if (util.isEmt.format(res)) {
this.listLoading = false;
return;
}
this.listLoading = false;
if (res.data.success) {
this.$message({
message: "删除成功",
type: "success"
});
} else {
this.$message({
message: res.data.msg,
type: "error"
});
}
this.getRoles();
});
})
.catch(() => { });
},
//显示编辑界面
handleEdit() {
let row = this.currentRow;
if (!row) {
this.$message({
message: "请选择要编辑的一行数据！",
type: "error"
});
return;
}
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
this.editForm.Enabled = this.editForm.Enabled ? "true" : "false";
},
//显示新增界面
handleAdd() {
this.addFormVisible = true;
this.addForm = {
CreateBy: "",
RoleName: "",
Enabled: ""
};
},
//编辑
editSubmit: function () {
this.$refs.editForm.validate(valid => {
if (valid) {
this.$confirm("确认提交吗？", "提示", {}).then(() => {
this.editLoading = true;
let para = Object.assign({}, this.editForm);
para.Enabled = para.Enabled === 'true';
editRole(para).then(res => {
if (util.isEmt.format(res)) {
this.editLoading = false;
return;
}
if (res.data.success) {
this.editLoading = false;
this.$message({
message: res.data.msg,
type: "success"
});
this.$refs["editForm"].resetFields();
this.editFormVisible = false;
this.getRoles();
} else {
this.$message({
message: res.data.msg,
type: "error"
});
}
});
});
}
});
},
//新增
addSubmit: function () {
let _this = this;
this.$refs.addForm.validate(valid => {
if (valid) {
this.$confirm("确认提交吗？", "提示", {}).then(() => {
this.addLoading = true;
let para = Object.assign({}, this.addForm);
//var user = JSON.parse(window.localStorage.user);
//if (user && user.uID > 0) {
para.CreateId = 1;
para.CreateBy = "";
/
沃梦达教程
本文标题为：（十一）.netcore+vue axios实现页面功能
猜你喜欢
- 作为iOS开发,这道面试题你能答出来,说明你基础很OK! 2023-09-14
- Android实现轮询的三种方式 2023-02-17
- iOS 对当前webView进行截屏的方法 2023-03-01
- 最好用的ios数据恢复软件：PhoneRescue for Mac 2023-09-14
- SurfaceView播放视频发送弹幕并实现滚动歌词 2023-01-02
- Android实现监听音量的变化 2023-03-30
- Android MaterialButton使用实例详解(告别shape、selector) 2023-06-16
- Android studio实现动态背景页面 2023-05-23
- Flutter实现底部和顶部导航栏 2022-08-31
- 详解flutter engine 那些没被释放的东西 2022-12-04
