大家好,又见面了,我是你们的朋友全栈君。
基于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组件进行实现。
- 在data中创建表单验证规则对象
- 表单绑定验证规则
- 测试,当输入非法账户时,进行提示
重置功能实现
当点击重置按钮时,账号和密码输入框的内容将会清空。
给登录表单注册引用信息,添加重置按钮点击事件,调用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账号...