基于Vue的电商后台管理系统[通俗易懂]

基于Vue的电商后台管理系统[通俗易懂]前端项目是基于Vue的SPA项目,前端技术栈采用Vue+VueRouter+Element-UI+Axios+Echarts。目前完成进度:登陆界面、登录和退出功能、导航守卫功能

大家好,又见面了,我是你们的朋友全栈君。

基于Vue的电商管理系统(1)

前言

​ 已经有一段时间没有更新了,正好这段时间在做一个电商管理系统的项目,借此总结一下。该项目主要是一个电商的后台管理系统,可实现管理用户账号,即登录、退出、用户管理、权限管理等,商品管理,即商品分类、分类参数、商品信息,订单信息等以及数据统计。

​ 前端项目是基于Vue的SPA项目,前端技术栈采用Vue+VueRouter+Element-UI+Axios+Echarts,后端技术栈采用Node.js+Express+Jwt(模拟session)+Mysql+Sequelize组成。由于此项目主要练习相关前端技术栈,故后端采用已有模板进行搭建。

更多详情可关注公众号(Cs Max):在这里插入图片描述

项目初始化

安装Vue脚手架

通过vue ui命令启动可视化窗口对Vue脚手架进行配置(需事先安装好Vue),命令键入成功后,会自动弹出配置页面,选择手动配置,勾选Babel(将高级JS语法转换为低级语法)、Router(路由)、Linter(拼写检查)进行配置,选择标准配置,创建好项目后可能会需要一段时间的加载。

vue ui

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装依赖插件

点击右上角添加插件,搜索vue-cli-plugin-elemen,点击插件图标然后点击最下方安装按钮,安装成功点击下方完成安装。

在这里插入图片描述

预览初始页面

点击左侧边栏选择任务->serve->运行,预编译成功后点击启动app,将自动跳转至http://localhost:8080/#/,即搭建成功。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目结构

用vscode打开刚刚创建的Vue脚手架,项目结构如下:

在这里插入图片描述

  • node_modules:用于存放用包管理工具下载安装了的包
  • public:用于存放静态资源文件(不会经过webpack的打包处理)
  • src:用于存放项目的源码文件
    • assets:用于存放静态资源文件(会经过webpack的打包处理)
    • components:用于存放vue组件
    • plugins:用于存放element.js
    • router:用于存放路由文件
    • views:用于存放视图文件
    • APP.vue:项目入口文件
    • main.js:项目的核心文件
  • .editorconfig:代码规范配置文件
  • .gitignore:git忽略配置文件
  • babel.config.js:babel配置文件
  • package.json:项目配置文件
  • package-lock.json:项目包管控文件
  • README.md:说明文件

删除多余文件

删除view文件夹,即删除view内的所有文件及view文件夹。

删除router/index.js 内的views文件夹内文件的导入,以及routes内的相关代码,留下以下代码:

在这里插入图片描述

删除components内的HelloWorld.vue文件,并重新创建名为Home.vue的文件,配置如下:

在这里插入图片描述

删除APP.vue文件中的多余部分,配置如下:

在这里插入图片描述

预览首页,如下图所示:

在这里插入图片描述

搭建登录页面

在components文件夹下创建登录组件,Login.vue,并快速生成template、script和style骨架。

在这里插入图片描述

配置路由,进入router文件夹,导入Login组件,创建路由并重定向首页为登录界面,进入首页时会自动跳转至登录页面,配置如下:

在这里插入图片描述

安装Less依赖,回到项目仪表盘首页,点击依赖,选择开发依赖,安装less和less-loader依赖。

在这里插入图片描述

绘制登录界面(由于仅仅使用到了最基本的html+css 这里就不详细讲解了),绘制完毕后,界面如下:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

实现登录功能

绑定账户信息

在script中创建表单数据绑定对象loginForm,并设置username和password,为了测试效果,这里将其进行赋值。

在这里插入图片描述

在template中将login_form表单进行数据绑定

在这里插入图片描述

刷新当前页面,发现登录窗口中自动填写了账号及密码,说明数据绑定成功。

在这里插入图片描述

账户合法性验证

为了减轻服务器压力,在发送登录请求前,将先对输入的账户信息合法性进行验证。这里我们使用Element-UI组件进行实现。

  1. 在data中创建表单验证规则对象

在这里插入图片描述

  1. 表单绑定验证规则

在这里插入图片描述

  1. 测试,当输入非法账户时,进行提示

在这里插入图片描述

重置功能实现

当点击重置按钮时,账号和密码输入框的内容将会清空。

给登录表单注册引用信息,添加重置按钮点击事件,调用resetFields()清空表单内容。

在这里插入图片描述

在这里插入图片描述

实现登录功能

由于登录功能需要用到后端模块,我们将后端模块导入,并启动服务器。

安装axios依赖

在这里插入图片描述

在main.js中导入axios模块,并设置基准地址。

在这里插入图片描述

给登录按钮添加点击事件,当用户点击登录按钮时,如果当前所输入的账号信息合法,则允许向服务器发送登录请求,服务器根据请求信息检查当前账号是否正确,并返回响应信息,客户端通过返回的响应信息做出相应响应,即若账号密码错误则提示登陆失败,反之,登陆成功,将当前的token存储至session并跳转至后台主页。

在这里插入图片描述

实现退出功能

当用户登录后进入后台,点击退出按钮即可实现退出功能。

即在Home.vue中添加一个退出按钮,并为其添加点击事件,当用户点击时,删除当前存储在session中的token信息,并且跳转至登录页面。

在这里插入图片描述

实现导航守卫功能

至此,登录功能基本实现,但存在一个bug,即在用户未登录的情况下,在地址栏输入http://localhost:8080/#/home地址时,也可以跳转至后台。

为了解决此bug,我们在router里挂载一个导航守卫路由,即在用户每次跳转前,验证用户所要跳转的地址,若为login页面则放行,若为其他页面,则查询当前session中是否有对应的token,若有则放行,反之,则强制跳转至登陆页面。

航守卫功能

至此,登录功能基本实现,但存在一个bug,即在用户未登录的情况下,在地址栏输入http://localhost:8080/#/home地址时,也可以跳转至后台。

为了解决此bug,我们在router里挂载一个导航守卫路由,即在用户每次跳转前,验证用户所要跳转的地址,若为login页面则放行,若为其他页面,则查询当前session中是否有对应的token,若有则放行,反之,则强制跳转至登陆页面。

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130696.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java读写锁实现原理_java可重入锁原理

    java读写锁实现原理_java可重入锁原理一、synchronized和ReentrantLock的对比到现在,看到多线程中,锁定的方式有2种:synchronized和ReentrantLock。两种锁定方式各有优劣,下面简单对比一下:1、synchronized是关键字,就和if…else…一样,是语法层面的实现,因此synchronized获取锁以及释放锁都是Java虚拟机帮助用户完成的;ReentrantLock是类层面的…

  • 51单片机试题及答案c语言版_只会c语言毕业设计能做什么

    51单片机试题及答案c语言版_只会c语言毕业设计能做什么51单片机毕业设计题目51单片机毕业设计题目篇一:51单片机毕业设计题目2  1、基于51单片机温湿度检测的设计  1、设计要求  1、采用51单片机(STC89C52RC)+LCD12864+SHT10设计。  2、湿度范围:0-100%RH温度:0-100摄氏度  3、4个发光二级管实现报警:高温报警、低温报警、高湿度报警、低湿度报警共8种报警状态。  4、3个按键实现温湿度上下限报警值的…

  • spring aop实例讲解_java swing 教程

    spring aop实例讲解_java swing 教程1.SpringAOP是什么?AspectOrientedProgramming:面向切面编程什么时候会出现面向切面编程的需求?按照软件重构的思想,如果多个类中出现重复的代码,就应该考虑定义一个共同的抽象类,将这些共同的代码提取到抽象类中,比如Teacher,Student都有username,那么就可以把username及相关的get、set方法抽取到SysUser中,这种情况,我们称…

  • 深信服SCSA认证过程记录

    深信服SCSA认证过程记录本次主要是记录一下深信服SCSA认证的全过程。由于本人是公司安排培训,所以可能跟自主报名的部分流程不一致。首先是考前测试部分。考前会进行一次简单测试。内容大致如下:1、报名之后会受到链接,需要先确认是否能参加考试,不会立即进入考试界面,确认之后可以自主选时间参加测试。2、测试是在牛客网上进行的,一共100题,需在100分钟内完成作答,答对60%即可过关,还是比较简单的。3…

  • ionic react-native和native开发移动app到底那个好

    ionic react-native和native开发移动app到底那个好

  • GBDT算法

    GBDT算法

    2021年11月19日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号