前端项目 电商后台管理系统

1.用于管理用户账户、商品分类、商品信息、订单、数据统计等业务功能

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc01.png“在此输入图片标题”)

_开发模式_

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

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc02.png“在此输入图片标题”)

_技术选择

前端项目技术堆栈_

某视频剪辑软件

Vue路由器

元素-用户界面

爱可信

展示

_后端项目技术堆栈_

Node.js

表达

智威汤逊广告公司

关系型数据库

续集

项目初始化

前端项目初始化步骤

安装Vue脚手架

通过Vue-Cli创建项目

配置Vue路由器

配置元素-用户界面组件库

配置Axios库

初始化git远程仓库

相关性-按需导入

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc03.png“在此输入图片标题”)

后端项目的环境安装配置

安装MySQL数据库

安装Node.js环境

配置项目相关信息

启动项目

使用phpstudy导入数据库并运行它

Npm初始化后端项目

节点。/app.js

使用邮递员测试后台项目界面是否正常

登录概述

登录业务流程

在登录页面上输入用户名和密码

调用后台接口进行验证

通过验证后，根据后台的响应状态跳转到项目首页

登录与业务相关的技术点

Http是无状态的

通过cookie记录客户端的状态

通过sesion记录服务器端的状态

通过令牌维护状态(不允许跨域使用)

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc04.png“在此输入图片标题”)

登录业务流程

登录页面的布局

通过元素界面组件实现布局

el形式

El-表单-项目

el输入

el按钮

字体图标

创建git分支

//创建并切换登录分支

git结帐-b登录

//登录分支合并为主分支

// 1.切换到主分支

git结账主界面

// 2.将分支合并到主节点

git合并登录

//将本地登录支行推送到github

git push -u origin登录

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

如果用户没有登录，而是直接通过网址访问特定页面，他需要再次导航到登录页面

//在路由对象的每个导航保护之前添加

router.beforeEach((to，from，next) = >;{

//如果用户访问的登录页面，会直接发布

if(to . path = = ' log in ')返回next()

//从sessionStorage获取保存的令牌值

const TokenStr = window . sessionStorage . GetItem('令牌')

//如果没有令牌，强行跳转到登录页面

if(！tokenStr)返回next('/login ')

下一个()

})

主页布局

通过界面获取菜单数据

要求拦截器通过axios添加令牌，确保获得数据的权利

// axios请求拦截

//为请求头对象添加令牌认证的授权字段

config . headers . authorization = window . session storage . getitem(' token ')

返回配置

})

权限管理

权限管理业务分析

权限管理模块控制不同用户可以执行的操作。具体来说，可以通过角色来控制，即每个用户分配一个特定的角色，该角色包含不同的功能权限

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc05.png“在此输入图片标题”)

_分类管理

商品分类概述_

商品分类用于在购物时快速找到要购买的商品并直观地显示出来

参数管理

参数管理概述

商品参数用于显示商品的特征信息，通过电子商务平台的详细页面可以直观的看到

项目中使用的依赖关系(vue系列存储桶未描述)

运行相关性

axios =>。发送请求（request to send的缩写）

echarts =>。图表

element-ui = >;元素ui组件

lodash =>。Js工具库，这个项目使用深度复制和对象合并

力矩= >;时间处理工具库

nprogress = & gt。进度条库

v-viewer = >图片预览工具库

vue-quill-editor = & gt；富文本编辑器

vue-table-with-tree-grid = >树形菜单/表格

发展依赖

巴别塔=>。Es6+语法转换

eslint/babel-eslint =>。语法检查

更少/更少-加载程序=>。语法少

babel-plugin-transform-remove-console = >拆下控制台插件

项目优化

项目优化策略

生成打包报告

以命令行参数的形式生成报告= >:vue-CLI-服务构建-报告

直接通过可视化用户界面面板(通过控制台和分析面板)查看报告

vue-cli 3.0工具生成的项目默认隐藏了webpack的所有配置项，旨在屏蔽项目的配置过程，让开发人员专注于具体功能和业务逻辑的实现

为开发模式和发布模式指定不同的打包条目

默认情况下，vue项目的开发和发布模式共享同一个打包的条目文件(src/main.js)。为了分离项目的开发过程和发布过程，可以为两种模式中的每一种指定打包的条目文件，即:

开发模式入口文件src/main-dev.js

发布模式条目文件src/main-prod.js。

方案:configureWebpack(以链式编程的形式)和chainWebpack(以操作数的形式)

//代码示例

module.exports = {

chainWebpack: config = >;{

//发布模式

config . when(process . ENV . NODE _ ENV = = ' production '，config = & gt{

config.entry('app ')。清除()。添加('。/src/main-prod.js ')

})

//开发模式

config . when(process . ENV . NODE _ ENV = = ' development '，config = & gt{

config.entry('app ')。清除()。添加('。/src/main-dev.js ')

})

}

}

第三方库支持CDN

通过外部上传外部cdn资源

默认情况下，通过导入语法导入的第三方依赖包最终会打包合并到同一个文件中，导致打包成功后单个文件过大的问题= >:Chunk-厂商太大

为了解决上述问题，可以通过webpack的externals节点配置加载外部cdn资源，不会打包任何在externals中声明的第三方依赖包

步骤1

module.exports = {

chainWebpack: config = >;{

config . when(process . ENV . NODE _ ENV = = ' production '，config = & gt{

config.entry('app ')。清除()。添加('。/src/main-prod.js ')

//在vue.config.js中配置如下

config.set('externals '，{

vue: 'Vue '，

vue-router': 'VueRouter '，

axios: 'axios '，

lo dash:“_”，

电子艺术:“电子艺术”，

' n进度:' n进度'，

vue-quill-editor:“‘VueQuillEditor’

})

})

config . when(process . ENV . NODE _ ENV = = ' development '，config = & gt{

config.entry('app ')。清除()。添加('。/src/main-dev.js ')

})

}

}

步骤2

在public/index.html文件的头中，删除main-prod中配置的导入(样式表)，并用cdn导入替换

步骤3

在public/index.html文件的头部，删除main-prod中配置好的导入(js文件)，替换为cdn导入

cdn加速前后的比较(块供应商打包文件)

解析大小2.6m = >: 596.9kB

使用cdn优化elementui封装

具体操作流程

在main-prod.js中，注释掉element-ui按需加载的代码

在index.html的头部区域，通过cdn加载元素ui的js和css样式

主页内容定制

在不同的包装环境下，主页的内容可能会有所不同，可以通过插件的方式进行定制

config.plugin('html ')。tap(args = >;{

参数[0]。ispod = true或false

返回参数

})

Index.html修订版

Css | js在这里

元素用户界面组件是按需加载的

路由延迟加载

在打包建设项目时，javascript包会变得很大，影响页面加载。如果能把不同路由对应的组件分成不同的代码块，然后在访问路由的时候加载对应的组件，效率会更高

安装@ babel/plugin-语法-动态-导入包

将工艺路线更改为按需装载

//示例:

const Foo = () = >导入(/* WebPACKchunk name:“group-foo”*/)。/Foo.vue ')

const Bar = () = >;导入(/* WebPACKchunk name:“group-foo”*/)。/Bar.vue ')

const Baz = () = >导入(/* WebPACKchunk name:“group-foo”*/)。/Baz.vue ')

//从“”导入登录../components/Logon . vue '

常量登录= () = >;导入(/* WebPACKchunk name:" log in _ home _ welcome " */'../components/Logon . vue ')

//从导入主页'../components/Home.vue '

const Home =()= & gt；导入(/* WebPACKchunk name:" log in _ home _ welcome " */'../components/Home.vue ')

//从“”导入欢迎../components/Welcome.vue '

const Welcome =()= & gt；导入(/* WebPACKchunk name:" log in _ home _ welcome " */'../components/Welcome.vue ')

...

有关详细信息，请参考文章底部的链接

在线项目

通过节点创建web服务器

创建一个新的节点项目，安装express，通过express快速创建一个web服务器，托管vue生成的dist文件夹作为静态资源。密钥代码如下

// 1.npm init -y

// 2.npm i express -S

// 3.将打包的dist放入节点项目中

// 4.

const express = require('express ')

const app = express()

app.use(express.static('。/dist '))

app.listen(80，()= >;{

console.log('服务器运行于http://127.0.0.1 ')

})

// 5.启动项目的节点app.js

打开g配置

文件大小减少了g，这使得传输速度更快

在服务器端，express用于g压缩，配置如下

// 1.npm安装压缩-S

// 2.导入包

const compression = require(' compression ')

// 3.启用中间件

app.use(compression())

配置https服务

为什么启用https服务

传统http协议传输的数据是纯文本，不安全

传输的数据通过https协议加密，可以防止数据被中间人窃取，使用更加安全

申请ssl证书(https://freessl.org)= >；普通企业仍然使用收费ssh(默认情况下http协议运行在端口80，默认情况下https运行在端口443)

使用pm2管理应用程序

1.npm i pm2 -g //全球安装

2.pm2启动脚本(如。/app . js)-命名自定义名称//启动项目

3.查看服务器运行的项目

4.pm2重启自定义名称//重启项目

5.pm2停止自定义名称//停止项目

6.pm2删除自定义名称//删除项目

！[输入图片说明](https://gitee . com/wbekvam/vue-shop-admin/raw/master/image/mall _ desc06.png“在此输入图片标题”)