vue_shop项目笔记

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 远程仓库
⑦ 将本地项目托管到 Github 或 码云 中

2.2 后台项目的环境安装配置

① 安装 MySQL 数据库
② 安装 Node.js 环境
③ 配置项目相关信息
④ 启动项目
⑤ 使用 Postman 测试后台项目接口是否正常

3. 登录/退出功能

3.1 登录概述

1. 登录业务流程
   ① 在登录页面输入用户名和密码
   ② 调用后台接口进行验证
   ③ 通过验证之后，根据后台的响应状态跳转到项目主页
2. 登录业务的相关技术点

• http 是无状态的
• 通过 cookie 在客户端记录状态
• 过 session 在服务器端记录状态
• 通过 token 方式维持状态

3.2 登录 — token 原理分析

3.3 登录功能实现

1. 登录页面的布局

通过 Element-UI 组件实现布局

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

2.实现登录功能

① 通过 axios 调用登录验证接口
② 登录成功之后保持用户 token 信息
③ 跳转到项目主页

login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败!')
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //  1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //  1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }

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

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

// 挂载路由导航守卫
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()
})

4. Vue 直接操作 DOM

• 通过 ref 标注 DOM 元素

 // 在 DOM 元素上通过 ref 属性标注，属性名称自定义  
 <div ref="info">hello</div>

• 通过 $refs 获取 DOM 元素

// 通过 Vue 实例的 $refs 获取标记 ref 属性的元素  
let info = this.$refs.info.innerHTML 
 console.log(info) // hello 

5. 基于 Element-UI 进行表单验证

Element-UI表单验证规则 :

loginFormRules: {    // 登录名称的验证规则    
username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }]  } 

// 进行表单验证  
this.$refs.loginFormRef.validate(async valid => {    
// 如果验证失败，直接退出后续代码的执行    
if (!valid) return    
// 验证通过后这里完成登录成功后的相关操作（保存token、跳转到主页）  }) 
 

3.4退出

退出功能实现原理

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token ，必须重新登录生成一个新的 token 之后才可以访问页面。

  // 清空token   
  window.sessionStorage.clear()   
  // 跳转到登录页   
  this.$router.push('/login') 

在github仓库login分支可查看该项目:https://github.com/q1248973323/vue_shop.git