vue后台管理系统

zcy9838 zcy9838     2022-12-06     237

关键词:

1. 项目概述:

根据不同的应用场景,电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式。

技术图片

2. 电商后台管理系统的功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

技术图片

3. 电商后台管理系统的开发模式(前后端分离)

电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于 Vue 技术栈的 SPA 项目

前后端分离模式:后端负责写接口,前端负责调用接口的开发模式

技术图片

4. 电商后台管理系统的技术选型

① 前端项目技术栈

  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts

② 后端项目技术栈

  • Node.js
  • Express
  • Jwt
  • Mysql
  • Sequelize

5. 项目初始化

① 前端项目初始化步骤

  • 安装 Vue 脚手架
  • 通过 Vue 脚手架创建项目
  • 配置 Vue 路由
  • 配置 Element-UI 组件库
  • 配置 axios
  • 初始化 git 远程仓库
  • 将本地项目托管到 Github 码云

使用Vue 脚手架快速生成 Vue 项目基础架构:打开cmd,输入vue ui命令进入图形化界面创建vue项目:

技术图片

技术图片

安装Babel、Router、Linter/Formatter、配置文件

技术图片

技术图片

技术图片

创建好项目之后,再安装需要的插件,安装ElementUI

技术图片

技术图片

技术图片

安装项目需要的依赖:配置axios

技术图片

技术图片

初始化好项目后,需要申请一个码云账号,方便以后将项目代码上传到云端:

网址:https://gitee.com/

注意:申请过程必须要设置SSH公钥:怎样设置公钥

技术图片

技术图片

技术图片

技术图片

将本地项目托管到码云上:

技术图片

创建完成之后打开终端,执行下面这两行全局设置命令:

技术图片

根据是否有仓库分别选择所要执行的命令:

技术图片

我们已经创建过了vue项目,所以使用的是第二种方式。 

首先找到刚才创建的vue项目所在的文件夹,按住shift+右键,打开一个powershell终端,使用git status命令检查一下项目状态:

技术图片

会发现这里面有些文件还需要提交一下,使用git add .命令将所有文件都提交一下,添加到暂存区

然后使用git commit -m ‘add files‘命令先在本地做一次提交

当提交完成之后,再使用git status检查一下项目状态:

技术图片

当前所做的操作只是在本地操作仓库,如果要把该仓库上传到码云中,该怎么做呢?

执行下面这两句命令,将本地仓库与云端仓库做一下关联:

技术图片

第一次提交会弹出一个命令窗口验证你的身份:

技术图片

提交完成:

技术图片

② 后台项目的环境安装配置

  • 安装 MySQL 数据库
  • 安装 Node.js 环境
  • 配置项目相关信息
  • 启动项目
  • 使用 Postman 测试后台项目接口是否正常

将后台接口代码的db文件夹中的mydb.sql文件导入到MySQL数据库中:navicat如何导入并执行.sql文件

然后将config文件夹下的default.son配置文件修改一下连接数据库的信息:

技术图片

技术图片

打开后台接口项目,shift+右键打开一个powershell终端,输入npm install命令安装所有的依赖包

安装完成之后,就可以启动该项目了,输入node app.js命令将api接口项目运行起来:

出现类似这种页面就表示启动成功

技术图片

接下来根据该后台管理系统的模块分为7个部分来分别介绍:

  • 登录/退出功能
  • 主页布局
  • 用户管理模块
  • 权限管理模块
  • 商品管理模块
  • 订单管理模块
  • 数据统计模块

前端代码码云地址:vue_shop

后台接口代码码云地址:vue_api_server

vue2后台管理系统解决方案

Vue2后台管理系统解决方案linshuai1天前基于Vue.js2.x系列+ElementUI的后台管理系统解决方案。github地址:lin-xin/manage-systemdemo地址:manage-system前言之前在公司用了Vue+Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库... 查看详情

vue开发后台管理系统小结

最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定。我们金融性质的网站所以就不将代码贴出来哈一、项目概述首先工作需求是... 查看详情

vue2.0+elementui后台管理系统

vue2.0和elementui 搭建的一个后台管理系统概述:  这是一个用vuejs2.0和element搭建的后台管理界面。 技术栈:  vue2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。  element ui:基于vue2.0... 查看详情

基于vue实现的新闻后台管理系统-一

基于VUE实现的新闻后台管理系统前段时间拿到一个关于新闻后台的API,测试数据库使用SQLite,Restful服务是用Go写的,只要运行特定环境下的脚本(run.*)就会启动一个服务,依次后台为接口,进行新闻后台的开发。?目录结构|--Small-C... 查看详情

基于vue实现后台系统权限控制

原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处。 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了数据交互更频繁以外,还有一个特别的需求就是对用... 查看详情

vue项目实战:电商后台管理系统(vue+vuerouter+axios+element)(代码片段)

目录电商后台管理系统1.功能开发模式技术选型登录用户管理权限管理角色列表权限列表商品管理商品列表分类参数商品分类订单管理数据统计2.技术问题登录功能保存token路由导航守卫控制访问权限退出功能通过axios请求拦截器... 查看详情

后台管理系统模板

1:vue-element-adminGithub地址:https://github.com/PanJiaChen/vue-element-admindemo预览体验地址:https://panjiachen.github.io/vue-element-admin/#/dashboard一个基于vue2.0和Eelement的控制面板UI框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板 查看详情

java之springboot+springsecurity+vue实现后台管理系统的开发三系统权限(代码片段)

Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【一、前端】跳转Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【二、后端】跳转Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【三、系统权限... 查看详情

一步步带你做vue后台管理框架——登录功能

系列教程《一步步带你做vue后台管理框架》第三课 github地址:vue-framework-wz线上体验地址:立即体验 《一步步带你做vue后台管理框架》第一课:介绍框架《一步步带你做vue后台管理框架》第二课:上手使用   认证... 查看详情

vue+elementui搭建后台项目(代码片段)

...言之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做;看过一个不错的... 查看详情

vue后台管理系统模板(代码片段)

推荐一些Vue常用后台管理系统模板前言Vue.js是一个目前比较流行的前端框架,已经到了前端人人都会的地步,今天这里为大家罗列一下基于Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vu... 查看详情

java之springboot+springsecurity+vue实现后台管理系统的开发二后端(代码片段)

Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【一、前端】跳转Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【二、后端】跳转Java之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【三、系统权限... 查看详情

又一款接​私活神器!springboot+vue通用后台管理系统,真香!!

参考:https://el-admin.vip/guide/又一款接私活神器,统一后台系统,前后端分离,别再乱找了!这是一款基于SpringBoot2.1.0、Jpa、SpringSecurity、redis、Vue的前后端分离的后台管理系统,项目采用分模块开发方式,权限控制采 查看详情

vue+element搭建后台管理系统(代码片段)

技术基础开发之前,请先熟悉下面的4个文档vue.js2.0中文,项目所使用的js框架vue-router,vue.js配套路由vuex,状态管理Element,UI框架开发环境NodeJS(npm)VisualStudioCode(前端IDE)安装VisualStudioCode下载地址: 官网下载地址VisualStudioCod... 查看详情

vueadmin-基于vue&bulma后台管理面板

... VueAdmin是一个基于Vue2.0&Bulma0.3 的后台管理面板(管理系统),相当于是Vue版本的Bootstrap 管理系统,提供了一组通用的后台界面UI和组件,其中还有丰富的图表组件,开箱即用。赶紧来体验一下吧。   在线... 查看详情

前端vue+elementui案例:通用后台管理系统-项目总结(代码片段)

...链接参考视频:VUE项目,VUE项目实战,vue后台管理系统,前端面试,前端面试项目案例链接【前端】Vue+ElementUI案例:通用后台管理系统-导航栏(视频p1-16)https://blog.csdn.net/karshey/article/details/12764... 查看详情

vue+element搭建后台管理系统(代码片段)

接口请求格式定义前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。接口定义遵循几个规范:1.接口按功能模块划分。系统登录:登录相关接口用户管理:用户管理相关接口机构... 查看详情

vue2+koa2实现后台管理系统

看了些koa2与Vue2的资料,模仿着做了一个基本的后台管理系统,包括增、删、改、查与图片上传。工程目录:由于用到了asyncawait语法,node的版本需要至少7.0,我目前用的是 7.9.0 1.根据package.json安装好依赖:{"name":"vue2.x-koa... 查看详情