vue项目简单的后台管理系统

车辆的后台管理系统实现对车辆信息的增删改查

登录界面，

登录界面我使用了组件的方式将login的路径作为默认跳转路径，用户登录系统，需要与数据库（这里我用的是mongodb数据库）的登录信息进行比照通过则可进入系统，同时管理员的姓名以及个人签名会展现在上方导航栏中，这里我使用了vuex来解决数据传递的问题

首页

这里我就使用element-ui建了一个轮播图

个人管理

设置个人信息也就是一个添加管理员的功能，登录可以使用新建的账号，点击提交将sizeFrom表单里面的数据通过axiso传递过去,接口进行接收，最终增加在数据库上

app.post('/loginAdd', urlencodedParser, (req, res) => {let {username,password,birthday,date,desc} = req.body.sizeFormconsole.log(username,password, birthday,date,desc);login.insert([{username: username,password: password,birthday: birthday,date: date,desc: desc}], (error, result) => {res.send('ok')})
})

 onSubmit() {alert("成功保存您的信息");axios.post("http://localhost:8080/api/loginAdd", { sizeForm: this.sizeForm }).then((value) => {if (value.data === "ok") {console.log("ok");}},(error) => {console.log(error);});this.sizeForm = {};},

用户管理和车辆管理

实现方法相同，只是所使用的表不同罢了我举一个例子，使用axios请求把数据拿到，v-for渲染，状态判断一下return Time=‘’？0：1 ，新增修改是一个方法获取唯一的carId来进行操作。这里有个更新的问题，如何操作结束后就展现新的表单？我首先想到的是钩子函数updated，但这样会使搜索出不来，每次搜索的内容停格时间较短，我又想到设置了一个定时器将每秒间隔设置为0，每次a添加都调用一次，但有一点要注意的是使用定时器在程序结束后一定要销毁定时器这样做的好处是避免内存泄漏和容易维护代码

 //新增车辆信息add() {axios.post("http://localhost:8080/api/addCarNum", { addForm: this.addForm }).then((value) => {console.log(value);}).catch((err) => {console.log(err);});this.addBool = false;this.setTime();this.addForm = {};},//定时器setTime() {this.timer = setTimeout(() => {console.log(111);axios.get("http://localhost:8080/api/car").then((response) => {this.tableData = response.data;response.data.forEach((element) => {this.element = element;});},(error) => {console.log("服务器获取数据失败" + error.message);});}, 0);},//销毁定时器beforeDestroy() {this.stopTime()},

图像展示

这里我使用了echars，从数据库拿到车辆信息，使用数组去重找出车辆的几种类型动态赋值给xdata，通过data属性来整个组件使用，再通过将每一种类型的车辆计算出数量来给ydata就可以达到最终的动态柱状图了，柱状图我就不多描述了，官网信息都有

mounted() {axios.get("http://localhost:8080/api/car").then((response) => {response.data.forEach((element) => {this.tData.push(element.type);});this.tData = this.sum(this.tData);this.tData.forEach((element) => {this.xData.push(element.split(":")[0]);this.sData.push(element.split(":")[1]);});this.echartsInit();},(error) => {console.log("错误啦" + error.message);});},

vue项目简单的后台管理系统相关推荐

Vue 项目飞鸟头条后台管理系统
文章目录项目场景: 一项目初始化: 1 prettier 与 eslint 的冲突 1.1 解决冲突的配置 1.2 eslint函数后空格冲突 2 git 错误 2.1 pathspec did ...
java入门-springboot+mybatis+vue实现简单的后台管理系统
源码地址:https://codechina.csdn.net/wwwzhouzy/vueadmin 注意:前后端在一个地址,vueClient是vue前端,zhouzyServer是后端一.效果图 ...
【JavaWeb】JavaWeb项目实战——品牌后台管理系统
JavaWeb项目实战--品牌后台管理系统项目概述功能介绍成果展示项目实现使用Maven构建项目 Maven介绍具体操作使用Mybatis封装对数据库的操作在Mysql中建表,并添加数 ...
一个简单的后台管理系统
一个简单的后台管理系统(1.0) 使用须知一.数据库 1.1关于数据库的设计(重点) 1.2具体表设计 1.2.1角色表 1.2.2用户表二.前端 1.关于需要注意的地方 2.新增注册页面三.后 ...
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术，前端使用vue2.6.0，后端使用.netcore3.1，支持跨平台、多租户
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台.多租户.支持MySQL/SQLServer/ ...
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue框架电商后台管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档
java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档 java计算机毕业设计Vue框架电商后台管理系统源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S架构开发语 ...
基于SpringBoot+VUE的宠物医院后台管理系统【源码开源】【建议收藏】
基于SpringBoot+VUE的宠物医院后台管理系统[源码开源][建议收藏] 今天给大家开源一个基于SpringBoot+VUE的宠物医院后台管理系统,系统基于脚手架工程,花了大概1周时间做出来的. ...
基于 vue + Element-ui 开发的后台管理系统
基于 vue + Element-ui 开发的后台管理系统引文思考快速上手项目结构介绍引入 ElementUI 登录功能设计项目演示地址:https://git.io/fp9UM 项目仓库 ...

vue项目简单的后台管理系统

vue项目简单的后台管理系统相关推荐

最新文章

热门文章