电商后台管理---Vue实战

1. 项目概述

1.1 电商项目基本业务概述

根据不同的应用场景，电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式。

1.2 电商后台管理系统的功能

电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。

1.3 电商后台管理系统的开发模式（前后端分离） 

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

 1.4 电商后台管理系统的技术选型

1. 前端项目技术栈

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

2. 后端项目技术栈
 

• Node.js
• Express
• Jwt
• Mysql
• Sequelize

2. 项目初始化

2.1 前端项目初始化步骤

① 安装 Vue 脚手架

② 通过 Vue 脚手架创建项目

③ 配置 Vue 路由

④ 配置 Element-UI 组件库

⑤ 配置 axios 库

⑥ 初始化 git 远程仓库

⑦ 提交项目初始化版本

1. 在终端命令行输入 vue ui
2. http://localhost:8000/project/select 创建新项目；手动配置项目；选择功能 Babel,Router,Linter/Formatter，使用配置文件；Vue2.x,ESLint + Standard config,Lint on save
3. http://localhost:8000/dashboard 点击插件，点击添加插件，查询vue-cli-plugin-element，选中并点击安装；配置插件，import on demand，点击完成安装
4. 点击依赖，点击安装依赖，查询axios，选中并点击安装
5. Gitee - 基于 Git 的代码托管和研发协作平台 申请账号；进行配置，点击头像->设置->SSH公钥（没有公钥，点击‘怎样生成公钥’，按教程生成）；点击加号->新建仓库，按照提示创建仓库；在本地项目文件夹打开终端，输入git status查看本地仓库状态，若有文件未添加到暂存区，输入git add . 添加所有文件，再输入git commit -m "提示信息"，做本地提交
6. 在项目文件夹中打开终端，输入

   git remote add origin https://gitee.com/vsdeveloper/vue_shop.git
   git push -u origin master

      

2.2 后台项目环境安装配置

① 安装 MySQL 数据库

② 安装 Node.js 环境

③ 配置项目相关信息

④ 启动项目 npm install 安装所有的依赖包；node app.js 启动项目

⑤ 使用 Postman 测试后台项目接口是否正常

3. 登录/退出功能

3.1 登录概述

1. 登录业务流程

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

② 调用后台接口进行验证

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

2. 登录业务的相关技术点

• http 是无状态的
• 通过 cookie 在客户端记录状态
• 通过 session 在服务器端记录状态
• 通过 token 方式维持状态  ------  当前端项目与后台接口项目存在跨域问题时使用token

3.2 登录 — token 原理分析

3.3 登录功能实现

1. 登录组件布局

通过 Element-UI 组件实现布局

•  el-form
•  el-form-item
•  el-input
•  el-button
•  字体图标

tips: 当开发一个新功能时，将这个新功能放到新的分支上进行开发，当该功能开发完成后，在合并到主分支上。1. 创建名为login的分支并切换到该分支 git checkout -b login；2. 查看当前分支 git branch

查看项目运行效果：点击任务->serve->运行->启动app

删除不要的组件：先启动项目，在删除代码，不然会报错

1. src->mian.js 是整个项目的入口文件；

2. app.vue 根组件 删除id='app'的div标签中的代码，将页面清空，script标签中仅留下export default {  name: 'app'}，清空style标签

3. router.js 删除routes数组中的对象；清空views,components文件夹

创建登录组件：

1.在components文件夹新建Login.vue

2. 在router-》index.js文件中导入该组件

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

Vue.use(VueRouter)

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
]

const router = new VueRouter({ routes })

export default router

3. 在App.vue中添加路由占位符<router-view> ，这样，routes数组中的路由都会渲染到根组件中

4. 当用户访问'/'时，重定向到'/login'

5. 添加背景色

6. 添加less-loader，less依赖(开发依赖)

7. 此时背景色没有占满全屏，在asset目录下新建css文件夹，新建global.css全局样式表，在入口文件main.js中导入全局样式表

8. 登录界面中心盒子样式实现：位于屏幕中央

.login_box{
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

9. 头像样式

    .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

10. 登录表单：使用element-ui ;由于该插件设置为按需导入，需要先在element.js中进行组件导入

import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

            <!-- 登录表单 -->
            <el-form label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input type="password"></el-input>
                </el-form-item>
                <!-- 按钮区域 -->
                <el-form-item class="btns">
                    <el-button type="primary">登录</el-button>
                    <el-button type="info">重置</el-button>
                </el-form-item>
            </el-form>

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btns {
    display: flex;
    justify-content: flex-end;
}

11. 带icon的输入框: 使用第三方矢量图标库：iconfont-阿里巴巴矢量图标库

                <!-- 用户名 -->
                <el-form-item>
                    <el-input prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input prefix-icon="iconfont icon-3702mima"></el-input>
                </el-form-item>

12. 登录组件表单的数据绑定Element - The world's most popular Vue UI framework -》典型表单

13. 登录表单组件的数据验证Element - The world's most popular Vue UI framework -》表单验证

14. 表单的重置：在<el-form>中添加ref属性以获取表单实例对象，为重置按钮绑定点击事件

From Methods -> resetFields

15. 登录前的预验证 From Methods -> validate

        // 登录
        login () {
            this.$refs.loginFormRef.validate(async (valid) => {
                if (!valid) return
                const { data } = await this.$http.post('login', this.loginForm) // data()中的loginForm
                console.log(data)
                if (data.meta.status !== 200) return console.log('登录失败')
                console.log('登录成功')
            })

16. 登录组件的弹窗配置element-ui -> Message 消息提示

if (data.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')

2. 实现登录

① 通过 axios 调用登录验证接口

② 登录成功之后保存用户 token 信息

③ 跳转到项目主页

const {data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200)return this.$message.error('登录失败！')
// 提示登录成功
this.$message.success('登录成功！')
// 把登录成功的token保存到sessionStorage
window.sessionStorage.setItem('token', res.data.token)
// 使用编程式导航，跳转到后台主页
this.$router.push('/home')

3. 路由导航守卫控制访问权限

如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面。

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
 // 如果用户访问的登录页，直接放行
 if (to.path === '/login') return next()
 // 从 sessionStorage 中获取到 保存的 token