【项目实战】基于Avue的前端框架实现一个简单CRUD

一、Avue是什么？

Avue 是一个基于前端ElementUI框架实现的低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升开发效率。

二、Avue如何引入项目中

见文章：

【项目】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue

三、基于Avue实现一个简单CRUD的功能

3.1 需求描述

对后端传过来的业务数据（异常RAM内存+CPU事件记录）进行分页展示，支持增删改查

实现效果大致如下

3.2 需求实现的具体步骤

Step1、定义API文件

import ajaxRequest from '../ajaxRequest'export function getPage(query) {return ajaxRequest({url: '/event/abnormalmemoryprofile/page',method: 'get',params: query})
}export function addObj(obj) {return ajaxRequest({url: '/event/abnormalmemoryprofile',method: 'post',data: obj})
}export function getObj(id) {return ajaxRequest({url: '/event/abnormalmemoryprofile/' + id,method: 'get'})
}export function delObj(id) {return ajaxRequest({url: '/event/abnormalmemoryprofile/' + id,method: 'delete'})
}export function putObj(obj) {return ajaxRequest({url: '/event/abnormalmemoryprofile',method: 'put',data: obj})
}

Step2、新建业务文件夹，编写主index.vue

<template><div class="execution"><avue-crud ref="crud":page.sync="page":data="tableData":table-loading="tableLoading":option="tableOption"@on-load="getPage"@refresh-change="refreshChange"@row-update="handleUpdate"@row-save="handleSave"@row-del="handleDel"@sort-change="sortChange"@search-change="searchChange"></avue-crud></div>
</template><script>
import {addObj, delObj, getPage, putObj} from '@/api/event/abnormalMemoryProfile'
import {tableOption} from '@/constant/event/abnormalMemoryProfile'export default {name: 'abnormalMemoryProfile',data() {return {tableData: [],page: {total: 0, // 总页数pageNum: 1, // 当前页数pageSize: 10, // 每页显示多少条ascs: [],//升序字段descs: 'create_time'//降序字段},paramsSearch: {},tableLoading: false,tableOption: tableOption}},created() {},mounted: function () {},computed: {},methods: {searchChange(params, done) {params = this.filterForm(params)this.paramsSearch = paramsthis.page.currentPage = 1this.getPage(this.page, params)done()},sortChange(val) {let prop = val.prop ? val.prop.replace(/([A-Z])/g, "_$1").toLowerCase() : '';if (val.order == 'ascending') {this.page.descs = []this.page.ascs = prop} else if (val.order == 'descending') {this.page.ascs = []this.page.descs = prop} else {this.page.ascs = []this.page.descs = []}this.getPage(this.page)},getPage(page, params) {this.tableLoading = truegetPage(Object.assign({current: page.currentPage,size: page.pageSize,descs: this.page.descs,ascs: this.page.ascs,}, params, this.paramsSearch)).then(response => {this.tableData = response.data.recordsthis.page.total = response.data.totalthis.page.currentPage = page.currentPage,this.page.pageSize = page.pageSize,this.tableLoading = false}).catch(() => {this.tableLoading = false})},/*** @title 数据删除* @param row 为当前的数据* @param index 为当前删除数据的行数***/handleDel: function (row, index) {var _this = thisthis.$confirm('是否确认删除此数据', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function () {return delObj(row.id)}).then(data => {_this.$message({showClose: true,message: '删除成功',type: 'success'})this.getPage(this.page)}).catch(function (err) {})},/*** @title 数据更新* @param row 为当前的数据* @param index 为当前更新数据的行数* @param done 为表单关闭函数***/handleUpdate: function (row, index, done, loading) {putObj(row).then(data => {this.$message({showClose: true,message: '修改成功',type: 'success'})done()this.getPage(this.page)}).catch(() => {loading()})},/*** @title 数据添加* @param row 为当前的数据* @param done 为表单关闭函数***/handleSave: function (row, done, loading) {addObj(row).then(data => {this.$message({showClose: true,message: '添加成功',type: 'success'})done()this.getPage(this.page)}).catch(() => {loading()})},/*** 刷新回调*/refreshChange(page) {this.getPage(this.page)}}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/commonCss.scss";
</style>

Step3、定义tableOption

export const tableOption = {dialogDrag: true,border: true,indexLabel: '序号',stripe: true,menuAlign: 'center',align: 'center',menuType: 'text',searchShow: false,excelBtn: false,printBtn: false,addBtn: false,editBtn: false,delBtn: false,viewBtn: true,menu: true,selection: true,searchMenuSpan: 6,column: [{label: 'ID',prop: 'id',search: true,slot: true,headerslot: true},{label: '事件ID',prop: 'eventId',search: false,slot: true,headerslot: true},{label: 'UID',prop: 'uid',search: false,slot: true,headerslot: true},{label: '结果',prop: 'result',search: true,slot: true,headerslot: true,type: 'select',dicData: [{label: '失败',value: '0'}, {label: '成功',value: '1'} ]},{label: 'VIN码',prop: 'vin',search: true,slot: true,headerslot: true},{label: 'CPU使用',prop: 'cpuUsage',search: true,slot: true,headerslot: true},{label: 'RAM使用',prop: 'ramMemoryUsage',search: true,slot: true,headerslot: true},{label: '进程ID',prop: 'processId',search: true,slot: true,headerslot: true},{label: '进程名称',prop: 'processName',search: true,slot: true,headerslot: true},{label: '创建时间',prop: 'createTime',display: false,rules: [{required: true,message: '请输入创建时间',trigger: 'blur'},],format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',},{label: '异常时间',prop: 'time',display: false,rules: [{required: true,message: '请输入异常产生时间',trigger: 'blur'},],format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',}]
}

Step4、其他：定义网络请求的方法类，做统一的Token拦截等

import { showSpin, hideSpin } from '@/utils/baseTool'
import axios from 'axios'
import store from '../store'
import { getToken, removeToken } from '../utils/cookie'// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: '/api/',// 超时timeout: 100000,headers: {get: {'Content-Type': 'application/json;charset=utf-8'}}
})// request拦截器
service.interceptors.request.use(config => {// 登录界面if (config.url.indexOf('/login') !== -1) {config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'config.headers.Accept = 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'} else if (getToken()) {config.headers.Authorization = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}showSpin()return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(res => {hideSpin()const code = res.data.resultCodeif (code) {if (code === 401) {store.dispatch('LogOut').then(() => {location.href = '/#/login' // 为了重新实例化vue-router对象 避免bug})} else if (code === 1005) { // 用户未登录removeToken()location.href = '/#/login'} else if (code !== 0) {const errorMsg = res.data.resultDescreturn Promise.reject(new Error(errorMsg))}} else {return res.data}},error => {hideSpin()return Promise.reject(error)}
)export default service

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！