Vue-shop前端项目

qq_6199266299.79KB需要积分:1

资源文件列表:

vue-shop-master.zip 大约有39个文件

vue-shop-master/
vue-shop-master/.gitignore 44B
vue-shop-master/README.md 59.21KB
vue-shop-master/babel.config.js 204B
vue-shop-master/index.html 313B
vue-shop-master/package-lock.json 122.06KB
vue-shop-master/package.json 552B
vue-shop-master/public/
vue-shop-master/public/favicon.ico 4.19KB
vue-shop-master/src/
vue-shop-master/src/App.vue 254B
vue-shop-master/src/assets/
vue-shop-master/src/assets/css/
vue-shop-master/src/assets/css/global.css 408B
vue-shop-master/src/assets/fonts/
vue-shop-master/src/assets/fonts/demo.css 8.23KB
vue-shop-master/src/assets/fonts/demo_index.html 24.14KB
vue-shop-master/src/assets/fonts/iconfont.css 1.4KB
vue-shop-master/src/assets/fonts/iconfont.js 16.84KB
vue-shop-master/src/assets/fonts/iconfont.json 3.46KB
vue-shop-master/src/assets/fonts/iconfont.ttf 6.17KB
vue-shop-master/src/assets/fonts/iconfont.woff 3.92KB
vue-shop-master/src/assets/fonts/iconfont.woff2 3.3KB
vue-shop-master/src/assets/heima.png 5.83KB
vue-shop-master/src/assets/logo.png 6.69KB
vue-shop-master/src/components/
vue-shop-master/src/components/Home.vue 3.43KB
vue-shop-master/src/components/Login.vue 3.66KB
vue-shop-master/src/components/Welcome.vue 164B
vue-shop-master/src/components/goods/
vue-shop-master/src/components/goods/Cate.vue 174B
vue-shop-master/src/components/power/
vue-shop-master/src/components/power/Rights.vue 1.67KB
vue-shop-master/src/components/power/Roles.vue 14.23KB
vue-shop-master/src/components/user/
vue-shop-master/src/components/user/Users.vue 15.68KB
vue-shop-master/src/main.js 1.1KB
vue-shop-master/src/router/
vue-shop-master/src/router/index.js 1.45KB

资源介绍:

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 原理分析 ![](C:\Users\DELL\Desktop\前端\前端\项目\电商后台管理项目\CSDN图片\token 原理分析.png) ## 3.3 登录功能实现 ![](C:\Users\DELL\Desktop\前端\前端\项目\电商后台管理项目\CSDN图片\login 组件.png) 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

Vue-shop前端项目

资源文件列表:

资源介绍:

Vue前端项目简单分享

Vue前端项目简单分享

Vue前端项目简单分享

Vue前端项目简单分享

vscode qt cmake opencv 环境搭建测试工程

JComV1.2.0.zip

灰狼优化算法求旅行商问题Matlab代码

My97DatePicker