基于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/130697.html原文链接:https://javaforall.cn

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

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

(0)
blank

相关推荐

  • originpro 2021 附安装教程

    originpro 2021 附安装教程近日新推出了origin系列的最新版本:origin2021,是一款非常实用的科学绘图与数据分析软件,并且该版本可以和2018——2021版本共享设置,若你拥有这些版本中的任何一个,则只需安装并运行新版本即可。不仅如此,它为了带给用户最佳的使用体验,进行了全方面的新增和优化,现如今能够使用新的颜色管理器创建自己的颜色列表或调色板,其中包括通过颜色选择和颜色插值,还在工作表上添加了新的公式栏,轻松编辑复杂的公式,具有调整公式栏字体大小的选项,以便于阅读,而且Origin中的嵌入式Python环境也得到了极大的

  • linux的rwx权限解读

    linux的rwx权限解读linux的rwx权限解读:我们输入指令:ls-l会看到类似我这样的语句drwx-xr-x-我们可以这样解读:首字母:文件类型d:d开头的是文件夹-:文件l:连接(快捷方式)c:硬件设备然后是三组rwx:第一组rwx:创建着权限。第二组rwx:创建者所属组权限。第三组rwx:访客权限。r:可读(4)w:可写(2)x:可执…

  • 利用ESP定律的upx脱壳实践

    利用ESP定律的upx脱壳实践利用ESP定律的upx脱壳实践背景:除了命令行upx-d脱壳,还有手动脱壳。ESP定律的本质是堆栈平衡,又称堆栈平衡定律,是应用频率最高的脱壳方法之一,脱壳的目的就是找到真正的OEP(源文件的EP代码)方法:从pushad到popad是一段解压缩代码(解压UPX壳),这段代码执行后,紧跟在popad后的第一个JMP指令可跳转到OEP实践:1:查壳2:OD打开3:F8//对于寄存器,指令执行后发生改变的寄存器会用红色显示.此处ESP和EIP的值发生改变,因为执行pushad指令,将8个

  • 第十七节:织梦做自定义表单在线预约的方法

    第十七节:织梦做自定义表单在线预约的方法

  • 图片懒加载原理及实现(java懒加载原理)

    一,前置知识1,为什么要图片懒加载懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助,页面图片多时,在首次载入时一次性加载会耗费时间长,使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。如下图:随着滚轮滚动,底部的图片会被不断地加载,从而显示在页面上,也就是说懒加载其实就是按需加载,当页面需要显示图片的时候才进行加载,否则不加载

  • (毕业设计资料)基于单片机SPWM逆变器电源系统设计

    (毕业设计资料)基于单片机SPWM逆变器电源系统设计输出:正弦波频率:可调;幅值:可调;逆变原理:51单片机SPWM驱动H桥+后级滤波;调节方式:频率加按键、频率减按键、幅值加按键、幅值减按键;频率调节范围:10hz、20hz、30hz、40hz、50hz、60hz、70hz、80hz、100hz;幅值调节范围:0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%;(输出峰值占输入电压百分比)输出最大电流:2A;过流打嗝保护:过流保护值2A,过流时切断,5秒后尝试恢复输出;输入电压范围:

发表回复

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

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