Vue-shop前端项目

# 1 项目概述 电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能 整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的 SPA 项目 项目使用Vue3、vite、Vue-router 4、Element-UI Plus、Axios、Echarts技术 # 2 项目初始化 ## 2.1 项目初始化步骤 1. 安装 Vue 脚手架 2. 通过 Vue 脚手架创建项目（通过 vite 的方式创建项目 ） 3. 配置 Vue 路由 4. 配置 Element-UI Plus组件库（全局导入） 5. 配置 axios 库 6. 初始化 git 远程仓库 7. 将本地项目托管到 github 或码云中 ## 2.2 后台项目的环境安装配置 1. 安装 MySQL 数据库（利用phpstudy_pro导入数据） 2. 安装 Node.js 环境 在 `vue_api_server`中安装依赖包 执行`node app.js` 命令，查看所有接口 3. 配置项目相关信息 4. 启动项目 5. 使用 Postaman 测试后台项目接口是否正常 # 3 登录功能 ## 3.1 登录概述 **1. 登录业务流程** 1. 在登录页面输入用户名和密码 2. 调用后台接口进行验证 3. 通过验证之后，根据后台的响应状态跳转到项目主页 **2. 登录业务的相关技术点** - http 是无状态的 - 通过 cookie 的客户端记录状态 - 通过 session 在服务器端记录状态 - 通过 token 方式维持状态（跨域问题） ## 3.2 登录 — token 原理分析  ## 3.3 登录功能实现  login 组件中，主要是利用 element ui 的表单域，此项目是全局导入的 element 组件 **登录页面的布局** 通过 Element-UI 组件实现布局 - el-form - el-form-item - el-input - el-button - 字体图标 #### 3.3.1 全局配置 Element-ui Plus 在 main.js 文件中，全局注册组件 ``````javascript import { createApp } from 'vue' import App from './App.vue' // 全局配置element-ui 组件 import ElementPlus from 'element-plus' // 引入组件样式 import '../node_modules/element-plus/dist/index.css' const app = createApp(App) // 挂载 element-ui 模块 app.use(ElementPlus) app.mount('#app') `````` #### 3.3.2 使用 element 组件 ``````javascript 登录 重置 `````` `:module="LoginForm"` ：在两个 input 表单中，表单中双向绑定的数据 ``````javascript data() { return { // 这是登录表单的数据绑定对象 LoginForm: { username: 'zs', password: '123', } } } `````` `:rules = "loginFormRules"` ：表单验证规则，item 的 prop 属性设置为需 form 绑定值对应的字段名 v-model 绑定的 username 与 prop 的参数要一致 ````` // 这是表单的验证规则对象 LoginFormRules: { // 验证用户名是否合法 username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 6, message: '请输入长度2-6的字符', trigger: 'blur' } ], // 验证密码是否合法 password: [ { required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 12, message: '请输入长度6-12的字符', trigger: 'blur' } ] } ````` 获取到表单的实例对象，访问 resetFields 方法，对表单进行重置 为表单添加 `ref="LoginFormRef"` 属性，方便得到表单的实例对象，且调用它的方法 `````` // 点击重置按钮，进行表单重置 resetLoginForm() { this.$refs.LoginFormRef.resetFields() } `````` ``````` // 点击登录按钮，拿到表单验证的结果 login() { this.$refs.LoginFormRef.validate((valid) => { if (!valid) return }) } ``````` #### 3.3.3 发起 ajax 请求 在 main.js 中配置 axios ``````javascript // 导入 axios import axios from 'axios' // 为 axios 配置请求的根路径 // 数据库为本地数据库 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 将 axios 挂载为 app 的全局自定义属性 app.config.globalProperties.$http = axios `````` 在点击登录按钮时，拿到表单的登录信息，向服务器发起 ajax 请求】 ``````javascript login() { this.$refs.LoginFormRef.validate(async (valid) => { if (!valid) return const { data } = await this.$http.post('/login', this.LoginForm) // 如果 status 为200，则验证通过 if (data.meta.status != 200) { return console.log('登录失败') } console.log('登录成功') }) } `````` 利用打印在控制台的方式显示提示信息的方式不明显，所以，利用 element 中的 message 消息提示组件 在利用全局注册 element 时，element-plus 为 `app.config.globalProperties` 添加了全局方法 `$message` ,所以可以采用在 method 中调用 `this.$message` 方法唤起 `ElMessage` ```````javascript 用以下的代替上述的console.log('登录失败')与console.log('登录成功') return this.$message({ showClose: true, message: '用户名或密码错误，请重新输入', type: 'error' }) this.$message({ showClose: true, message: '请求成功', type: 'success' }) ``````` #### 3.3.4 存储 token 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 2. 将 `token` 保存在 `sessionDtorage` 中 3. 通过编程式导航跳转到后台主页，地址路由时 `/home` `````` // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 window.sessionStorage.setItem('token', data.data.token) // 2. 通过编程式导航跳转到后台主页，路由地址是 /home this.$router.push('/home') `````` # 4 主页布局 ## 4.1 新建主页组件 在 router 中的 index.js 中，设置主页组件的路由导航， ````` import { createRouter, createWebHashHistory } from 'vue-router' import Login from '../components/Login.vue' import Home from '../components/Homde.vue' const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home } ] }) export default router ````` ## 4.2 路由导航守卫控制访问权限 未登录时（无 token 值），阻止进入 home 组件页面，强制跳转到 login 登录页面。 ``````` // 挂载路由导航守卫 router.beforeEach((to, from, next) => { // 如果用户进入登录界面，直接放行 if (to.path === '/login') { next() } else { // 如果在其他界面，判断其是否登录(是否有token值) const tokenStr = window.sessionStorage.getItem('token') if (!tokenStr) next('/login') else { next() } } }) ``````` ## 4.3 实现退出功能 基于 token 的方式实现退出功能，只要销毁本地的 token 即可。 ```````` window.sessionStorage.removeItem("token"); ```````` eslint 格式化文件 新建 `.prettierrc` 文件 `````` { "semi":false // 去除 ; "singleQuote":true // 启动 '' 格式 } `````` ## 4.4 实现主页整体布局 ![](C:\Users\DELL\Deskt