电商后台管理系统

项目初始化

前端项目初始化

首先安装node

安装vue脚手架

控制面板执行 npm install -g @vue/cli

查看版本是否正确 vue --version
通过vue脚手架创建项目

vue create vue-shop 也可以创建

vue ui进入vue管理页面

手动创建项目选择功能
- Babel
- Router
- 使用配置文件
配置vue路由
插件Element-UI组件库

此组件暂时不支持vue3.0

添加插件 vue-cli-plugin-element

配置 Import on demand
依赖axios库

安装依赖 axios
初始化git远程仓库
将本地项目托管到github

后台项目初始化

安装MySQL
安装Node.js环境
配置相关信息
启动项目
使用postman测试后台接口是否正常
- 接口地址 http://timemeetyou.com:8889/api/private/v1/
- http://www.ysqorz.top:8888/api/private/v1/

使用Git开发项目

git status 先查看当前目录下是否干净

git checkout -b login 创建分支

git branch 查看分支

创建vue_shop之后可以将无用的文件删除

HelloWorld.vue
About.vue
Home
App.vue中的框架

登录/退出功能

创建登陆组件

安装开发依赖less 和 less-loader 这样才能够使用

或者使用命令行npm install -g less

全局样式表

入口js导入

绘制头像

表单区域

带icon的input输入框

实现表单的数据绑定

表单数据验证

表单的重置功能

表单预验证

配置axios发出登录请求

配置message全局弹窗组件

登录之后的操作

路由导航守卫控制页面访问权限

只有在登录状态下才能够访问home对应页面

若出现了**Uncaught TypeError: Cannot read property 'beforeEach' of undefined**

则参照上面方式修改

实现退出功能

修改element组件按需导入形式

将本地代码提交

git status 查看修改状态
git add . 添加
git status 查看提交状态
git commit -m "完成了登录功能" 提交的本地仓库
git branch 查看分支
git checkout master 切换分支
git branch 查看分支
git merge login 合并分支
git push 上传master到云端
git checkout login 切回login分支
git branch 查看分支
git push -u origin login 上传login到云端

主页布局

实现基本主页布局

导航菜单基本结构

通过axios拦截器添加token验证

获取左侧菜单

通过双层for循环渲染左侧菜单

为选中的项设置字体颜色并添加分类图标

每次只能打开一个菜单项及边框问题

侧边栏的折叠与展开效果

实现首页路由的重定向

实现侧边栏路由由链接的改造

用户列表

通过路由的形式展示用户列表组件

在sessionStorage中保存左侧菜单的激活状态

绘制用户列表组件的基础布局结构

获取用户列表数据

使用el-table组件渲染基本的用户列表

为表格添加索引列

自定义状态列的显示效果

作用域插槽渲染操作列

实现分页效果

修改用户状态

实现搜索功能

添加用户

渲染添加用户对话框

渲染添加用户的表单

自定义邮箱和手机号的校验规则

添加变得的重置操作

添加用户前的表单预验证

调用API接口完成添加用户的操作

修改用户

展示修改用户对话框

根据id查询对应的用户信息

渲染修改用户的表单

实现修改用户表单的重置操作

完成提交修改之前的表单预验证

提交表单完成用户信息的修改

删除用户

弹窗询问用户是否确认删除数据

调用API完成删除用户的操作

权限管理

权限列表

创建rights子分支

git branch 查看当前分支
git checkout -b rights 创建rights分支
git branch 查看当前分支
git push -u origin rights

通过路由展示权限列表组件

绘制面包屑导航和卡片视图

调用API获取权限列表数据

渲染权限列表UI结构

角色列表

通过路由展示角色列表组件

绘制基本布局结构并获取列表数据

渲染角色列表数据

通过第一层for循环渲染一级权限

美化一级权限的UI结构

通过二层for循环渲染二级权限

通过第三层for循环渲染三级权限

美化角色下权限的UI结构

点击删除权限按钮弹出确认框提示

完成删除角色下指定的权限功能

分配权限

弹出分配权限对话框并请求权限数据

初步配置并使用el-tree树形控件

优化树形控件的展示效果

分析已有权限默认勾选的实现思路

加载当前角色已有的权限

在关闭对话框时重置defKeys数组

调用API完成分配权限功能

渲染分配角色的对话框并请求角色列表数据

渲染角色列表的select下拉菜单

完成分配角色的功能

提交本地代码到Git仓库

git branch
git add .
git commit -m "完成了权限功能的开发"
git push
git checkout master
git merge rights
git branch
git push

分类管理

商品分类

创建good_cate子分支

git branch
git checkout -b goods_cate
git push -u origin goods_cate

通过路由加载商品分类组件

绘制商品分类组件的基本页面布局

调用API获取商品分类的列表数据

初步使用vue-table-with-tree-grid树形表格组件

安装vue-table-with-tree-grid树形表格组件

使用命令行npm i vue-table-with-tree-grid -S
vue ui 在运行依赖中搜索并安装

使用自定义模板列渲染表格数据

渲染排序和操作对应的UI结构

实现分页功能

渲染添加分类的对话框和表单

获取父级分类数据列表

渲染级联选择器

根据父分类的变化处理表单中的数据

在对话框的close事件中重置表单数据

分支操作

完成添加分类的操作

将good_cate分支上的代码提交到Git仓库中

git branch
git add .
git commit -m "完成了分类功能的开发"
git push
git checkout master
git merge good_cate
git branch
git push

参数管理

分类参数

创建goods_params分支

git branch
git checkout -b goods_params
git push -u origin goods_params

通过路由加载分类参数组件页面

渲染分类参数页面的基本UI结构

调用API获取商品分类列表数据

渲染商品分类的级联选择框

element的级联选择器Cascader无滚动条样式全部显示超出屏幕解决办法

/ 在全局的global.css样式中给el-cascader-panel添加高度
.el-cascader-panel{
    height: 200px;
}

控制级联选择框的选中范围

渲染分类参数的Tabs页签

渲染添加参数按钮并控制按钮的禁用状态

获取参数列表数据

切换Tabs面板后重新获取参数列表数据

将获取到的参数数据挂载到不同的数据源上

渲染动态参数和静态属性的Table表格

添加参数

渲染添加参数的对话框

完成动态参数和静态属性的添加操作

修改参数

渲染修改参数的对话框

完成修改参数的操作

删除参数

完成删除参数的业务逻辑

分类参数

渲染参数下的可选项

解决attr_vals为空字符串时候的小问题

控制按钮与文本框的切换显示

为每一行数据提供单独的inputVisible和inputValue

让文本框自动获得焦点

实现文本框与按钮的切换显示

完成参数可选项的添加操作

删除参数下的可选项

清空表格数据

完成静态属性表格中的展开行效果

将本地good_params分支代码提交并推送

git branch
git add .
git commit -m "完成了分类参数的开发"
git push
git checkout master
git merge good_params
git branch
git push

商品管理

商品列表

创建goods_list子分支并推送

git branch
git checkout -b goods_list
git push -u origin goods_list

通过路由加载商品列表组件

获取商品列表数据

渲染商品表格数据

自定义格式化时间的全局过滤器

实现商品列表的分页功能

实现搜索与清空的功能

根据Id删除商品数据

通过编程式导航跳转到商品添加页面

商品添加

渲染添加页面的基本结构

美化步骤条组件

渲染tab栏区域

实现步骤条和tab栏数据的联动效果

分析表单的组成部分

绘制基本信息面板的UI结构

获取商品分类数据

绘制商品分类的级联选择器

只允许选中三级商品分类

阻止页签切换

获取动态参数列表数据

绘制商品参数面板中的复选框组

优化复选框的样式

获取静态属性列表数据

渲染商品属性面板的UI结构

初步使用upload上传组件

手动为upload组件绑定headers请求头

监听upload组件的on-success事件

监听upload组件的on-remove事件

实现图片的预览效果

安装并配置vue-quill-editor

npm install vue-quill-editor --save

实现表单数据的预验证

把goods_cat从数组转化为字符串

处理attrs数组

完成商品添加操作

将goods_list分支的代码合并并推送

git branch
git add .
git commit -m "完成了商品功能的开发"
git push
git checkout master
git merge goods_list
git branch
git push

订单管理

订单列表

创建order分支

git branch
git checkout -b order
git push -u origin order

通过路由渲染订单列表页面

根据分页获取订单数据列表

渲染订单table表格

实现分页功能

实现省市区县数据联动效果

展示物流进度对话框并获取物流信息

后台服务器存在问题，没有返回数据

手动导入并使用Timeline组件

将本地order分支的代码合并且推送

git branch
git add .
git commit -m "完成了订单功能的开发"
git push
git checkout master
git merge order
git branch
git push

数据统计

数据概述

创建report分支

git branch
git checkout -b report
git push -u origin report

通过路由加载数据报表组件

安装Echarts并渲染Demo图表

npm install echarts --save

获取折线图数据并渲染图表

将本地的report分支合并且推送

git branch
git add .
git commit -m "完成了报表功能的开发"
git push
git checkout master
git merge report
git branch
git push

项目优化

通过nprogress添加进度条效果

npm install --save nprogress

只在发布阶段移除所有的console

npm install babel-plugin-transform-remove-console --save-dev

// 这是项目发布阶段需要用到的babel插件
const prodPlugins=[]
if(process.env.NODE_ENV==='production'){
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 发布 产品时候的插件数组
    ...prodPlugins
  ]
}

生成打包报告

vue-cli-service build --report

通过vue.config.js修改webpack的默认配置

https://cli.vuejs.org/zh/config/#vue-config-js

介绍configureWebpack与chainWebpack

https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

通过chainWebpack自定义打包入口

const { config } = require("vue/types/umd");

module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
        })

        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

通过externals加载外部CDN资源

config.set('externals', { 
  vue: 'Vue', 
  'vue-router': 'VueRouter', 
  axios: 'axios', 
  lodash: '_', 
  echarts: 'echarts', 
  nprogress: 'NProgress', 
  'vue-quill-editor': 'VueQuillEditor' 
})

<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富 文本编辑器的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富 文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

若报错

通过CDN优化ElementUI的打包

自定制首页内容

module.exports = {
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')

            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })

            config.plugin('html').tap(args => {
                args[0].isProd = true
                return args
            })
        })

        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')

            config.plugin('html').tap(args => {
                args[0].isProd = false
                return args
            })
        })
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>
        <%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    <% if(htmlWebpackPlugin.options.isProd) { %>
        <!-- nprogress 的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
        <!-- 富 文本编辑器的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
        <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
        <!-- element-ui 的样式表文件 -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

        <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
        <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
        <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
        <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
        <!-- 富 文本编辑器的 js 文件 -->
        <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

        <!-- element-ui 的 js 文件 -->
        <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

        <% } %>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

需要把刚刚删掉的加回来

实现路由懒加载

npm install --save-dev @babel/plugin-syntax-dynamic-import

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '../components/Login.vue'
// import Home from '../components/Home.vue'
// import Welcome from '../components/Welcome.vue'

// 实现路由懒加载
const Login = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () =>
    import ( /* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/Users.vue'
// import Rights from '../components/power/Rights.vue'
// import Roles from '../components/power/Roles.vue'
const Users = () =>
    import ( /* webpackChunkName: "users_rights_roles" */ '../components/user/Users.vue')
const Rights = () =>
    import ( /* webpackChunkName: "users_rights_roles" */ '../components/power/Rights.vue')
const Roles = () =>
    import ( /* webpackChunkName: "users_rights_roles" */ '../components/power/Roles.vue')

// import Cate from '../components/goods/Cate.vue'
// import Params from '../components/goods/Params.vue'
const Cate = () =>
    import ( /* webpackChunkName: "cate_params" */ '../components/goods/Cate.vue')
const Params = () =>
    import ( /* webpackChunkName: "cate_params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
// import Add from '../components/goods/Add.vue'
const GoodsList = () =>
    import ( /* webpackChunkName: "goodslist_add" */ '../components/goods/List.vue')
const Add = () =>
    import ( /* webpackChunkName: "goodslist_add" */ '../components/goods/Add.vue')

// import Order from '../components/order/Order.vue'
// import Report from '../components/report/Report.vue'
const Order = () =>
    import ( /* webpackChunkName: "order_report" */ '../components/order/Order.vue')
const Report = () =>
    import ( /* webpackChunkName: "order_report" */ '../components/report/Report.vue')


Vue.use(VueRouter)

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [{
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/users',
                component: Users
            },
            {
                path: '/rights',
                component: Rights
            },
            {
                path: '/roles',
                component: Roles
            },
            {
                path: '/categories',
                component: Cate
            },
            {
                path: '/params',
                component: Params
            },
            {
                path: '/goods',
                component: GoodsList
            },
            {
                path: '/goods/add',
                component: Add
            },
            {
                path: '/orders',
                component: Order
            },
            {
                path: '/reports',
                component: Report
            },
        ]
    },
]

const router = new VueRouter({
    routes
})

//挂在路由导航守卫
router.beforeEach((to, from, next) => {
    // to将要访问的路径
    // from代表从哪个路径跳转来
    //next是一个函数,表示放行
    // next()方行  next('/login') 强制跳转

    if (to.path === '/login') return next()
        // 获取token
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) return next('/login')
    next()
})

export default router

项目上线

通过node创建web服务器

在vue_shop_server文件夹下执行

npm init -y

npm i express -S

cd .. 退出

node .\app.js

web server running at http://127.0.0.1

开启文件的Gzip网络传输压缩

npm install compression -S 安装相应的包

配置HTTPS服务

const https = require('https'); 
 const fs = require('fs'); 
 const options = { 
     cert: fs.readFileSync('./full_chain.pem'), 
     key: fs.readFileSync('./private.key') 
 } 
 https.createServer(options, app).listen(443);

使用 pm2 管理应用

①在服务器中安装 pm2：npm i pm2 -g
② 启动项目：pm2 start 脚本 –name 自定义名称
③ 查看运行项目：pm2 ls
④ 重启项目：pm2 restart 自定义名称
⑤ 停止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称

Netlify 自动化部署

使用 github 或者 gitlab 登陆 netlify

首先，打开 netlify 网站(https://app.netlify.com/)
然后使用 github 或者 gitlab 账号登录

根据 github/gitlab 仓库创建网站

点击 New site from Git 按钮然后选择仓库所在的平台已经需要部署的仓库

注意

部署分支，默认 master
打包命令，诸如 npm run build，gulp build 之类
打包后目录，静态资源文件夹，诸如 build dist，可不填

完成之后点击途中 deploy site 按钮

设置域名，绑定域名

部署完 netlify 会为我们随机生成一个 netlify 下的域名，我们可以更改其前缀名，然后绑定到自己的域名下。

点击 Site settings 按钮，然后在下方点击 Change site name 按钮，然后在弹出框中输入自己需要更改的前缀名，点击保存即可。
点击 Domain settings 按钮，然后在下方点击 Add custom domain 按钮，然后在弹出框中输入自己需要绑定的完整域名
这个时候会显示！Check DNS configuration，因为我们还没有设置域名解析到 netlify 服务器，所以这个时候需要到你自己域名的相应服务商网站登录之后在需要绑定的域名下添加一条 CNAME 解析，解析的主机记录即对应的 netlify 域名值，这样就可以使用自己的域名访问自己的网站啦

生成 HTTPS 证书，实现 HTTPS 访问

点击 Verify DNS configuration 按钮，提示成功就可以用 https 访问域名了

项目初始化

前端项目初始化

后台项目初始化

使用Git开发项目

登录/退出功能

创建登陆组件

全局样式表

入口js导入

绘制头像

表单区域

带icon的input输入框

实现表单的数据绑定

表单数据验证

表单的重置功能

表单预验证

配置axios发出登录请求

配置message全局弹窗组件

登录之后的操作

路由导航守卫控制页面访问权限

实现退出功能

修改element组件按需导入形式

将本地代码提交

主页布局

实现基本主页布局

设置主页header区域

导航菜单基本结构

通过axios拦截器添加token验证

获取左侧菜单

通过双层for循环渲染左侧菜单

为选中的项设置字体颜色并添加分类图标

每次只能打开一个菜单项及边框问题

侧边栏的折叠与展开效果

实现首页路由的重定向

实现侧边栏路由由链接的改造

用户列表

用户列表

通过路由的形式展示用户列表组件

在sessionStorage中保存左侧菜单的激活状态

绘制用户列表组件的基础布局结构

获取用户列表数据

使用el-table组件渲染基本的用户列表

为表格添加索引列

自定义状态列的显示效果

作用域插槽渲染操作列

实现分页效果

修改用户状态

实现搜索功能

添加用户

渲染添加用户对话框

渲染添加用户的表单

自定义邮箱和手机号的校验规则

添加变得的重置操作

添加用户前的表单预验证

调用API接口完成添加用户的操作

修改用户

展示修改用户对话框

根据id查询对应的用户信息

渲染修改用户的表单

实现修改用户表单的重置操作

完成提交修改之前的表单预验证

提交表单完成用户信息的修改

删除用户

弹窗询问用户是否确认删除数据

调用API完成删除用户的操作

权限管理

权限列表

创建rights子分支

通过路由展示权限列表组件

绘制面包屑导航和卡片视图

调用API获取权限列表数据

渲染权限列表UI结构

角色列表

通过路由展示角色列表组件

绘制基本布局结构并获取列表数据

渲染角色列表数据

通过第一层for循环渲染一级权限

美化一级权限的UI结构

通过二层for循环渲染二级权限

通过第三层for循环渲染三级权限

美化角色下权限的UI结构

渲染排序和操作对应的UI结构