使用vue-admin-template搭建简单增删改查导入导出项目及CentOs服务器部署
1. Vue-admin-template
1. 简介
vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
根据用户角色来动态生成侧边栏的分支：https://github.com/PanJiaChen/vue-admin-template/tree/permission-control
2. 安装和运行
# 首先使用git下载源码
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 将文件夹修改成我们自己的项目名称 如 vue-demo
# 使用git窗口修改，强化linux命令
mv vue-admin-template vue-demo
# 使用cmd或者IDE打开文件夹 如 vscode webstorm
# 下载安装项目所需的依赖 此步需要有node
npm install
#运行
npm run dev
#前端打包
npm run build:prod
2. 前端相关配置
1. 禁用EsLint
在
vue.config.js第30行禁用ESLint语法检查
lintOnSave: false,
2. 修改页面标题
在
src/setting.js第三行处修改页面标题
module.exports = {title: 'vue测试系统',
}
3. 国际化设置
在
src/main.js第7行处修改语言
import locale from 'element-ui/lib/locale/lang/zh-CN' //lang i18n
4. 下拉菜单修改
5. 登录页修改
在
src/views/login/index.vue修改登录页面标题和登录按钮等
3. 定义api
在
src/api下创建文件夹report
1. 导出整个对象
此方法只导出一个
default对象,使用的时候可以将一阵个文件导入成为一个对象来使用。在
report文件夹下创建reportApi.js
import request from '@/utils/request'export default {/*** 分页查询* @param data 查询参数* @returns {AxiosPromise}*/fetchReportList(data) {return request({url: `/manager/report/page`,method: 'get',params: data})},/*** 根据id获取数据* @param data 要查询的id* @returns {AxiosPromise}*/getReportById(data) {return request({url: `/manager/report/${data}`,method: 'get'})},/*** 新增或更新方法， 后端判断，如果有id则更新没有id则创建，* 也可以直接使用MybatisPlus的saveOrUpdate方法简化操作* @param data 表单数据* @returns {AxiosPromise}*/saveOrUpdateReport(data) {return request({url: '/manager/report/saveOrUpdate',method: 'post',data})},/*** 根据id删除数据，逻辑删除* 实体类删除属性上添加 @TableLogic即可标记 使用MybatisPlus的removeById即可* @param data* @returns {AxiosPromise}*/removeReportById(data) {return request({url: `/manager/report/${data}`,method: 'delete'})},getReportErrorPage() {return request({url: '/manager/report/errorPage',method: 'get'})},/*** 文件上传 批量* @param url 要上传的文件地址* @param file 文件数组* @returns {AxiosPromise}*/upload(url, file) {// 创建 FormData对象let data = new FormData()// 将文件放置到data里，files对应后端MultipartFile 的变量名file.forEach(everyFile => {data.append("files", everyFile.raw)})return request({//这里可以直接写url,url: url,method: 'post',data})}
}
使用的时候直接导出整个对象
<template></template>
<script>import reportApi from "@/api/report/reportApi";export default {name: 'reportList',data(){return{}},created() {},methods:{fetchList(data){reportApi.fetchReportList(data).then(resp => {})} }}
</script>
2. 单独导出每个方法
在
src/api/report下创建report.js
import request from '@/utils/request'export function fetchReportList(data){return request({url: `/manager/report/page`,method: 'get',params:data})
}export function getReportById(data){return request({url: `/manager/report/${data}`,method:'get'})
}export function importExcel(data){return request({url: '/manager/report/importBatch',method:'post',data})
}export function export2Excel(data){return request({url: '/manager/report/export',method:'get'})
}export function saveOrUpdateReport(data){return request({url: '/manager/report/saveOrUpdate',method:'post',data})
}export function removeReportById(data){return request({url : `/manager/report/${data}`,method:'delete'})
}export function getReportErrorPage(){return request({url: '/manager/report/errorPage',method:'get'})
}export function upload(url,file){let data = new FormData()file.forEach(everyFile => {data.append("files",everyFile.raw)})return request({url:url,method:'post',data})
}
使用的时候按需引入即可，不需要都引入
<srcipt>
import {fetchReportList,removeReportById,upload} from '@/api/report/report'export default {name: 'reportList',data(){return{reportList:[],}},created(){this.fetchList();},methods:{clearSearchForm(){this.searchForm = {}this.fetchList()},fetchList() {let data = {name:this.searchForm.name,phone:this.searchForm.phone,idCard:this.searchForm.idCard,testingResult:this.searchForm.testingResult,queryStartTime:this.searchForm.queryStartTime,queryEndTime:this.searchForm.queryEndTime,pageNum:this.pageNum,pageSize:this.pageSize}fetchReportList(data).then(resp => {this.reportList = resp.data.listthis.total = resp.data.totalthis.pageSize = resp.data.pageSizethis.pageNum = resp.data.pageNum})}}
</srcipt>
3. 总结
我自己是使用第二种方式的，可能也是受到了身边前端同时的影响，第一种可以有效的避免方法名重复我觉得哈哈哈
使用vue-admin-template搭建简单增删改查导入导出项目及CentOs服务器部署相关推荐
- ext2 grid 封装 （包含增删改查 导入导出等操作）
最近项目又用到ext 比较杯具的是ext版本使用2.0 初步封装了一下grid(还在完善中) ext技术交流群:164648099 取一行所有信息通用函数 Ext.overr ...
- 【无标题】vue 简单增删改查表格
<template><div><h2>table简单增删改查</h2><input type="text" v-model=& ...
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- 【Vue】MyClassroom.vue 使用组件方法实现增删改查-20221226
MyClassroom.vue 使用组件方法实现增删改查. <template><div class="container"><div class=& ...
- java调用oracle删除,使用IDEA对Oracle数据库进行简单增删改查操作
1.1 java中的数据存储技术 在java中,数据库存取技术可分为如下几类: 1.jdbc直接访问数据库 2.jdo(java data object)是java对象持久化的新的规范,也是一个用于存 ...
- python数据库教程_Python连接mysql数据库及简单增删改查操作示例代码
1.安装pymysql 进入cmd,输入 pip install pymysql: 2.数据库建表 在数据库中,建立一个简单的表,如图: 3.简单操作 3.1查询操作 #coding=utf-8 #连 ...
- Springboot+vue 增删改查的小项目
Springboot+vue 增删改查的小项目 文章目录 Springboot+vue 增删改查的小项目 前言 源码 1. 介绍 2.核心功能 3.软件架构 3.1 目录结构 4.项目流程 4.1导入 ...
- mysql创建数据表列子,MySQL 创建数据库及简单增删改查
MySQL 创建数据库及简单增删改查 我们可以在登陆 MySQL 服务后,使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 登入: Enter passwor ...
- python操作数据库教程_Python连接mysql数据库及简单增删改查操作示例代码
1.安装pymysql 进入cmd,输入 pip install pymysql: 2.数据库建表 在数据库中,建立一个简单的表,如图: 3.简单操作 3.1查询操作 #coding=utf-8 #连 ...
最新文章
- 数据结构与算法（2-1）线性表之顺序存储（顺序表）
- 原来，程序的世界远比我想象的精彩
- 今日头条告今日油条赔 200 万，各大公司表示不服
- C语言中 sscanf 的用法
- [转帖]好技术领导，差技术领导
- java生成flash_针对 Flash 开发者的最新 Capuchin 计划资源
- java ftc 68是什么意思_机器人比赛；FTC项目介绍与院校简介
- android自定义悬浮控件
- .Net MVC中SelectList绑定默认值失效的解决办法
- 替代传统C/S和B/S技术的下一代客户/服务器编程技术
- 腾讯云短信申请与使用
- 洛谷-UVA12676 Inverting Huffman(反转树)
- WIN7系统做NTP服务器,大师教您win7系统搭建ntp服务器的图文技巧
- docker学习--数据卷
- 小米手机连接电脑（Mac）刷miui12开发版的操作指南
- 小米nfc怎么复制门禁卡
- 设置wsl2桥接模式和设置ip
- 小孟网站被黑客攻击，已经哭晕在厕所……
- cvRound cvFloor cvCei 和 int
- python基础：廖雪峰的官方网站Python（部分）笔记
热门文章