[Vue.js]实战 -- 电商项目(一)

项目目录

项目概述
项目初始化
登录/退出功能
主页布局
用户管理模块
权限管理模块
分类管理模块
参数管理模块
商品管理模块
订单管理模块
数据统计模块

项目概述

电商项目基本业务概述

电商后台管理系统的功能

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

电商后台管理系统的开发模式(前后端分离)

前端项目是基于Vue技术栈的SPA项目

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

前端项目技术栈
- Vue
- Vue-router
- Element-UI
- Axios
- Echarts
后端项目技术栈
- Node.js
- Express
- Jwt
- Mysql
- Sequelize

项目初始化

前端项目初始化步骤

安装vue脚手架
通过vue脚手架创建项目配置vue路由
配置 Element-UI组件库配置axios库
初始化 git远程仓库
将本地项目托管到Github或码云中

后台项目的环境安装配置

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

登录/退出功能

登录概述

登录业务流程
- 在登录页面输入用户名和密码
- 调用后台接口进行验证
- 通过验证之后，根据后台的响应状态跳转到项目主页
登录业务的相关技术点
- http是无状态的
- 通过cookie 在客户端记录状态(不存在跨域问题)
- 通过session在服务器端记录状态(不存在跨域问题)
- 通过token方式维持状态(存在跨域问题)

登录 – token原理分析

登录功能实现

登录页面的布局

通过Element-UI 组件实现布局

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

在终端命令行中输入git checkout -b login,创建新的z子分支login
用git branch 查看一共有多少个分支

创建登录组件

在component文件下添加Login.vue,里面添加

<template><div>登录组件</div>
</template><script>export default {name: "Login"}
</script><style lang="less" scoped></style>

在index.js文件下写入

import Login from "../components/Login";const routes = [{path: '/',redirect:'/login'},{path:'/login',component: Login}
]

登录组件布局

安装依赖less-loader 和less
在src/asserts创建cdd文件夹,创建全局样式global.css

/* 全局样式表 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;
}

在Login.vue中写入登录样式

<template><div class="login_container"><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../assets/logo.png" alt=""></div><!-- 登录表单区域 --><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 用户名 --><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="less" scoped>.login_container {background-color: #2b4b6b;height: 100%;}.login_box {width: 450px;height: 300px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.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;}}}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.btns {display: flex;justify-content: flex-end;}
</style>

在引入组件的时候,要先导入组件

在plugins/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)

在main.js文件下导入字体图标

import './assets/fonts/iconfont.css'

表单数据绑定

// 这是登录表单的数据绑定对象loginForm: {username: 'admin',password: '123456'},

表单数据验证

// 这是表单的验证规则对象loginFormRules: {// 验证用户名是否合法username: [{ required: true, message: '请输入登录名称', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]}

表单重置

// 点击重置按钮，重置登录表单resetLoginForm() {// console.log(this);this.$refs.loginFormRef.resetFields()},

判断是否发起请求时,在main.js添加根路径

import  axios from 'axios'
//配置请求的根路径
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

//登录前的预验证login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('login', this.loginForm)})}

配置弹框提示

在element.js下导入弹框提示组件并且挂载Vue上

import {Message} from "element-ui"
Vue.prototype.$message = Message

修改Login.vue

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

实现登录

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

在components文件夹下创建Home.vue
在main.js加入

import Home from "../components/Home";
{path: '/home',component: Home
}

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')

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

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

在router.js 挂载路由导航守卫

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

to将要访问的路径

from 代表从哪个路径跳转而来

next是一个函数,表示放行

next() 放行

next("/login")强制跳转

退出

退出功能实现原理

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

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

处理语法警告问题

在根目录下创建.prettierrc

{
//移除分号"semi": false,
//单引号"singleQuote": true
}

[Vue.js]实战 -- 电商项目(一)相关推荐

[Vue.js]实战 -- 电商项目(四)
分类管理商品分类概述商品分类用于在购物时,快速找到所要购买的商品,可以通过电商平台主页直观的看到商品分类列表基本布局与数据获取基本布局面包屑导航区域 <!-- 面包屑导航区域 --& ...
[Vue.js]实战 -- 电商项目(二)
主页布局整体布局主页布局开始引入官网的框架时,首先要在element.js中添加 import { Container,Header,Aside,Main } from 'element-ui' ...
[Vue.js]实战 -- 电商项目(六)
商品管理商品管理概述用于维护电商平台的商品信息包括商品的类型.参数.图片.详情等信息.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能商品列表实现商品列表布局效果调用后台接口获取 ...
[Vue.js]实战 -- 电商项目(八)
数据统计数据统计概述用于统计电商平台运营过程的中的各种统计数据通过直观的可视化方式展示出来,方便相关运营和管理人员查看用户来源数据统计报表 Echarts 第三方可视化库的基本使用安装ech ...
[Vue.js]实战 -- 电商项目(五)
参数管理参数管理概述商品参数用于显示商品的固定的特征信息,可以通过电商平台商品详情页面直观的看到商品分类选择选择商品分类页面布局 <div><!-- 面包屑导航区域 --& ...
[Vue.js]实战 -- 电商项目(三)
权限管理权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限权限列表展示创建对应规格在comp ...
[Vue.js]实战 -- 电商项目(七)
订单管理订单管理概述用于维护商品的订单信息可以查看订单的商品信息.物流信息,并且可以根据实际的运营情况对订单做适当的调整. 订单列表订单列表展示订单数据加载订单列表布局 const { d ...
JS任务机制 - springboot实战电商项目mall4j
springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j) java商城系统源码 1.介绍工作一段时间了,今天在这总结一下浏览器执行JS任务机 ...
[Vue]实战---电商项目(项目的概述及初始化)【一】
项目实战项目目录项目概述项目初始化登录/退出功能主页布局用户管理模块权限管理模块分类管理模块参数管理模块商品管理模块订单管理模块数据统计模块项目概述电商项目基本业务概述电 ...