Vue-shop前端项目
资源内容介绍
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 文件中，全局注册组件``````javascriptimport { 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<!-- 登录表单区域 --><el-form ref="LoginFormRef" class="login_form" :model="LoginForm" :rules="LoginFormRules"> <!-- 用户名 --> <el-form-item prop="username"> <el-input prefix-icon="user" v-model="LoginForm.username" placeholder="用户名"> </el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input prefix-icon="lock" v-model="LoginForm.password" show-password placeholder="密码"></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>```````:module="LoginForm"` ：在两个 input 表单中，表单中双向绑定的数据``````javascriptdata() { 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// 导入 axiosimport 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 存储 token1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中2. 将 `token` 保存在 `sessionDtorage` 中3. 通过编程式导航跳转到后台主页，地址路由时 `/home```````// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中window.sessionStorage.setItem('token', data.data.token)// 2. 通过编程式导航跳转到后台主页，路由地址是 /homethis.$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