正文 

当前位置： 首页 > 技术 > java教程

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

webchang webchang     2022-12-08     812

关键词：

目录

电商后台管理系统

1. 功能

开发模式

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

技术选型

此项目中使用的是api地址是：http://timemeetyou.com:8889/api/private/v1/。如果发现该地址无法使用，可能服务器过期了，这样请自行下载后端源码使用本地的后端服务。

可以将后端源码下载下来跑通后使用本地的后端服务，此时需要修改src/network/request.js文件中的请求地址，也需要修改src/components/goods/listChildComponents/ListAdd.vue中上传图片的请求地址。

登录

  • 项目默认登录名：admin，密码：123456
  • 在登录页面输入用户名和密码
  • 调用后台接口进行验证
  • 通过验证之后,根据后台的响应状态跳转到项目主页

用户管理

系统用户列表

权限管理

通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。

角色列表

系统中角色列表。可以新增、编辑、删除、为角色分配权限。

权限列表

当前系统可以操作的权限。

商品管理

商品列表

所有商品的列表。可以添加、编辑、删除商品。

分类参数

展示或者设置某款商品的参数，如尺寸、板式、颜色等。

商品分类

商品分类用于在购物时，快速找到需要购买的商品，进行直观显示。

订单管理

当前系统中的所有订单。可以对订单进行编辑

数据统计

数据报表

2. 技术问题

登录功能

保存token

将登录成功之后的 token，保存到客户端的sessionStorage中。sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据会被清空

路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

// 在配置路由的文件中配置

// 添加全局前置导航守卫
router.beforeEach((to,from,next) => 
  // 如果访问的是登录页，直接放行
  if (to.path === '/login') return next();
  // 从sessionStorage中取出token值
  let token = sessionStorage.getItem('token');
  // 如果token不存在，说明没有登录，就强制跳转到登录页
  if (!token) 
    return next('/login');
  
  next();
);

退出功能

基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token ，必须重新登录生成一个新的token之后才可以访问页面。

通过axios 请求拦截器添加token

项目中除了登录之外的其他API接口，必须在登录之后才能访问，登录之后可以获得token。需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌。怎么做呢？

通过axios 请求拦截器添加token，保证拥有获取数据的权限。

// 拦截请求。请求在到达服务器之前会首先调用这个函数对请求做一些预处理
axios.interceptors.request.use(config => 
   console.log('拦截请求', config);
   // 为请求头对象添加Token验证的Authorization字段
   config.headers.Authorization = sessionStorage.getItem('token');
   return config;
)

其它

3. 项目预览

首页

用户管理

用户列表

添加用户

权限管理

角色列表

权限列表

商品管理

商品列表

分类参数

商品分类

添加商品

订单管理

数据统计

前端学习交流QQ群：862748629 点击加入

vue项目实战-电商后台管理系统(代码片段)

项目简介：该项目为电商后台的管理系统。设计了登录页面。管理人员需要通过输入正确的用户名和密码才能登录。登陆成功之后进入管理页面：管理页面由五个子模块组成：用户管理，权限管理，商品管理&#... 查看详情

vue后台管理系统

...P、移动Web、微信小程序等多种终端访问方式。2.电商后台管理系统的功能电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。3.电商后台管理系统的开发模式（前后端分离）电商后台管理系... 查看详情

基于vue2的尚品汇电商前后台项目

开发时间：2022.11.07-2022.12.07前台项目后台管理atguigu-store-frontendatguigu-store-backend文章目录一、快速开始二、系统概述2.1项目简介2.2技术选型三、功能展示3.1前台项目3.2后台管理一、快速开始二、系统概述2.1项目简介此项目为尚... 查看详情

vue电商后台管理系统项目第4篇-权限管理页面实现

优化之前的分配角色功能实现下拉列表的选项默认选中为下拉列表的v-model赋值一个id，这个id会对应着下拉列表的value，如果赋值了Value，那么就会让这个value数据所对应的字符串数据显示我们得先获取到这个用户的rid//分配角色... 查看详情

基于vue2的尚品汇电商前后台项目

...xff0c;前后端分离开发。前端项目包括前台应用系统及后台管理系统两大部分。前台项目基于Vue和前端三件套，后台项目基于vue-admin-template和element-ui组件库。采用模块化、组件化、工程化的模式开发，基于最新最热的前端... 查看详情

电商后台管理系统的前端技术栈-----vue

...种大小的项目，react更偏向于大型的项目；4.在搭建后台管理系统上，大家都明白的基本上是不需要太多ui图的，我们采用了ui库（iview），这个iview是跟element对比后，做出的选择，因为iview的功能更全，组件ui样式更多一些；5.项... 查看详情

vue电商后台管理系统项目第5篇-角色列表的增删改查&&角色授权

角色列表的增删改查1.添加角色先根据API文档编写接口；//添加角色exportconstaddRolesApi=(data)=>{returnaxios({method:‘post‘,url:‘roles‘,data})}在角色组件内引用，然后给 添加角色 按钮绑定一个点击事件addRolesClick；<!--添加角... 查看详情

实战项目：基于vue第三方库element-ui实现的金融后台管理系统

...2-element-touzi-admin项目是vue2.0+element-ui+node+mongodb构建的后台管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功能。前端：vue2+vuex+vue-router+webpack2.0+ES6/... 查看详情

vue2.x实战之后台管理系统开发(代码片段)

2.开发前须知我的后台管理系统项目运用了如下框架/插件：Vue2.x——项目所使用的js框架，我所使用的版本是：2.1.10vue-router2——Vue2.x配套路由，我所使用的版本是：2.3.0Element——UI框架，饿了么出品，我所使用的版本是：1.2.8Echa... 查看详情

「免费开源」基于vue和quasar的前端spa项目crudapi后台管理系统实战之文件上传(代码片段)

本文主要介绍了文件上传功能，包括普通上传模式和大文件切片上传模式，大文件切片上传模式通过优化后很容易支持断点续传和秒传，后续会根据需求优化文件上传功能。基于Vue和Quasar的前端SPA项目实战之文件上传（十）回顾... 查看详情

「免费开源」基于vue和quasar的前端spa项目crudapi后台管理系统实战之excel数据导入(代码片段)

本文主要介绍了介绍业务数据批量导入功能，不同的业务表单都可以自动生成模板文件，通过配置的方式可以零代码实现业务数据的批量导入功能。基于Vue和Quasar的前端SPA项目实战之数据导入（九）回顾通过之前一篇文章基于Vue... 查看详情

vue2电商实战项目(代码片段)

...翻译官,比如ES6语法转换成ES5语法脚手架使用-命令行创建项目:vuecreate项目名称-node_modules:放置项目依赖的地方-public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面-src：开发者... 查看详情

vue后台管理系统实践方案总结(代码片段)

这个是一个电商管理系统的前端项目的笔记，这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类管理模块、参数管理模块、商品管理模块、订单管理模块等功能，我把里面部分的功能进行... 查看详情

可下载！vue3+.net6实战系列：通用管理后台

...不学了！好好看下这套《Vue3+.NET6前后端分离电商实战》免费教程，完整的源码+视频+课件全部打包在百度云上，下图扫码(或加微信zha 查看详情

最火的13个springboot实战开源项目推荐！总有一款适合你

...nbsp;：mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现。mall-swarm :mall-swarm是一套微服务商城系统，采用了SpringCloudGreenwich、SpringBoot2、MyBatis、Docker、Elasticsearch等核心技术，同时提供了基于... 查看详情

打通前后端全栈开发node+vue进阶课程学习系统项目实战详细讲解：后台路由，导航，首页，退出登录

第二章建议学习时间8小时   总项目预计10章 学习方式：详细阅读，并手动实现相关代码（如果没有node和vue基础，请学习前面的vue和node基础博客【共10章】演示地址：后台：demoback.lalalaweb.com 前台：demo.lalalaweb.c... 查看详情

电商后台管理项目d01(代码片段)

电商后台管理项目d011、项目技术栈2、项目初始化3、`Element-UI`的按需引入。4、路由配置：5、`Axios`的封装6、实现登录功能7、完成首页部分8、用户管理用户列表9、权限管理1、角色管理4、权限列表1、项目技术栈VueVue-RouterElement-UI... 查看详情

关于vue项目管理项目的架构管理平台(代码片段)

关于vue项目管理项目的架构管理平台https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq31.4k 次浏览完整项目地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系... 查看详情