基于Vue的电子商务管理系统(1)前文暂时没有更新，正好这段时间在做电子商务管理系统的项目，总结一下吧。 该项目主要是电子商务公司后台管理系统，可以实现用户账户管理，即登录、注销、用户管理、权限管理等，商品管理，即商品分类、分类参数、商品信息、订单信息等以及数据统计。
前端项目是一个基于Vue的SPA项目，前端技术堆栈采用vuevuerouterelement-uiaxiosecharts，后端技术堆栈为Node.js Express Jwt (伪SSS 由于这个项目主要是练习相关的前端技术堆栈，所以后端使用现有的模板构建。
有关详细信息，请注意公共号码(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 :用于存储由软件包管理工具下载并安装的软件包的公共：用于存储静态资源文件的src:webpack不进行软件包处理。 用于存储项目的源文件assets :用于存储静态资源文件的组件：用于存储vue组件的pllick ent.jsrouter :用于存储路由文件的views :视图lufile main.js :项目核心文件. editorconfig :代码规范配置文件. gitignore:git忽略配置文件babel.config.js package-lock.JSON:PP
删除router/index.js中views文件夹中的文件导入和routes中的相关代码，并保留以下代码：
删除组件中的HelloWorld.vue文件，然后重新创建名为Home.vue的文件，如下所示：
删除APP.vue文件的多馀部分，并配置为：
预览首页。 如下图所示。
创建登录页面在components文件夹下创建登录组件Login.vue，以快速生成模板、脚本和样式骨架。
配置路由，进入router文件夹，导入Login组件，创建路由，然后将首页重定向到登录界面。 进入首页后，会自动跳转到登录页面。 如下构成。
安装Less相关性，返回项目仪表板首页，单击相关性，选择开发相关性，然后安装Less和less-loader相关性。
呈现登录界面。 因为只是使用了基本的html css，所以这里不详细说明。 绘制完成后，接口如下所示。
在实现登录功能并绑定帐户信息的脚本中创建表单数据绑定对象loginForm，设置username和password，然后在此赋值以测试效果。
在template中数据绑定login_form表单
刷新当前页面时，登录窗口会自动填写帐户和密码，并显示数据绑定成功。
验证帐户合法性是在发送登录请求之前验证输入的帐户信息的合法性，以减轻服务器压力。 在此，我们使用Element-UI组件实现。
在data中创建表单验证规则对象
表单绑定验证规则
测试将在输入不正确的帐户时提示
单击“实现重置功能”重置按钮后，帐户和密码输入框中的内容将为空。
在登录表单中注册浏览信息，添加重置按钮，单击事件，然后调用resetFields (以清空表单内容。
要实现登录功能，登录功能需要后端模块，因此导入后端模块并启动服务。
依赖于axios的安装
将axios模块导入main.js并设置基准地址。
如果将单击事件添加到登录按钮，并且用户单击登录按钮时当前输入的帐户信息正确，则为、
则允许向服务器发送登录请求，服务器根据请求信息检查当前账号是否正确，并返回响应信息，客户端通过返回的响应信息做出相应响应，即若账号密码错误则提示登陆失败，反之，登陆成功，将当前的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，若有则放行，反之，则强制跳转至登陆页面。