项目总结 【电商后台管理系统】
电商后台管理系统：首先大的功能是用户管理、权限管理、商品管理、订单管理、数据统计。
1、用户管理下面是用户列表，
用户列表中的问题：
1）状态和操作是什么做的
首先是在element中的ui设计，template，v-slot（作用域插槽）
涉及到做弹窗，用的是el-dialog
2、权限管理下面是角色列表和权限列表
用到了树形空间el-tree。
权限列表
el-tag 是标签
一、 如何进行登录页面的预校验，实现登录
登录组件预验证，通过调用表单的validate函数
对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
通过ref拿到表单的引用，然后访问引用对象this.$refs.loginFormRef，再直接调用validate函数，若直接打印valid，返回true或false
登录组件根据预验证决定是否发起请求
发起请求需要对应的axios包，在main.js中配置axios
import axios from 'axios'
axios.defaults.baseURL = 'http://api.shop.feishuai521.cn/api/private/v1/'
Vue.prototype.$http = axios //全局配置
通过this.$http.post('login', this.loginForm)发起请求
注意：登录组件弹框提示，用message，需要全局挂载
二、登录之后要做什么
将登录成功之后的token，保存到客户端的sessionStorage中，会话期间的存贮机制
因为项目中除了登录之外的其他api接口，必须在登录之后才能访问
token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
通过编程式导航实现页面跳转
三、路由导航守卫控制权限
home页面只有在登录之后才能进入，如果清除了token，用户没有登录，但是直接通过url访问特定页面，需要重新导航到登录页面，export default router之前挂载路由导航守卫
router.beforeEach((to, from, next) => {// to 将访问哪一个路径// from 代表从哪个路径跳转而来// next 是一个函数,表示放行// next() 放行 next('/login') 强制跳转if (to.path === '/login') return next()// 从sessionStorage中获取到保存的tokenconst token = window.sessionStorage.getItem('token')if (!token) return next('/login')next() })
四、如何退出登录
在Home.vue中
五、什么是树形控件
el-row栅格布局，行；el-col
六、分页效果是怎么实现的在（P146 商品列表的分页功能）
<!-- 分页区--><el-row><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[5, 9, 11, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination>
订单列表的分页框：
七、使用axios，创建get、post请求
八、ajax的使用
九、项目中遇到了什么问题
跨域问题，如何解决的
Access to XMLHttpRequest at 'http://127.0.0.1:8080/api/private/v1/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
配置代理 新建vue.config.js文件 配置
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
测试接口是否正常工作 先在powershell终端打开文件夹 安装依赖 npm install
然后运行node app.js 这里有报错
数据库未访问成功 Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES)
这里和自己导入的数据库配置成一样才可以成功
十、项目中印象最深的什么
项目总结 【电商后台管理系统】相关推荐
- Vue2项目总结-电商后台管理系统
Vue2项目总结-电商后台管理系统 去年做的项目,拖了很久,总算是打起精力去做这个项目的总结,并对Vue2的相关知识进行回顾与复习 各个功能模块如果有过多重复冗杂的部分,将会抽取部分值得记录复习的地方 ...
- 【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍 电商管理系统(Element-UI) 开发模式 前端技术栈 后端技术栈 1. 配置--初始化 前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
- 黑马程序员课程Vue实战项目_Element-ui——电商后台管理系统-商品管理（商品分类）
目录 商品分类 一.创建一个子分支 二.创建组件 三.绘制商品分类的页面基本结构 四.功能 五.提交代码 商品分类 一.创建一个子分支 git branch--查看当前所在分支 git checkou ...
- Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤 码云相关操作 2. ...
- 电商后台管理系统项目的优化
在面试过程中,面试官除了对基础知识的盘查之外,还会了解你所做的项目,单单知识谈项目所用到的技术已经满足不了面试官对我们的好奇心了,每次面试问到优化这一方面,因为没怎么准备,含糊的说辞只会让面试官连连摇 ...
- Vue全家桶-电商后台管理系统项目开发
项目效果展示: 1. 项目概述 1.1 电商项目基本业务概述 一般情况下客户使用的业务服务包括:PC端,小程序,移动web,移动app. 管理员使用的业务服务:PC后台管理端: PC后台管理端的功能 ...
- 【VUE项目】VUE+ElementUI电商后台管理系统
电商后台管理系统 项目来源:https://www.bilibili.com/video/BV1x64y1S7S7?p=191&spm_id_from=333.1007.top_right_b ...
- 电商后台管理系统（一）项目搭建
电商后台管理系统(一)项目搭建 前言 一.服务器端框架搭建 1. 安装ThinkJS命令 2. 创建项目及运行项目命令 3. 项目结构 二.前端框架搭建 三.MySQL数据库搭建 总结 前言 新开的坑 ...
- Vue项目实战之电商后台管理系统(一) 用户登录模块
目录 一.项目概述 二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置 三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
- Vue电商后台管理系统项目开发实战（一）
前言 当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
最新文章
- 记录一次git的误删除操作--恢复
- 如何设计网站导航更利于SEO优化？
- 工作中发现的相对布局中的一个小技巧
- 线程的核心应用(DoubleCat)
- git 本地代码到github（转）
- 手把手教你完成CSDN对接百度统计 看完这篇文章你还不会对接 欢迎您提刀顺着网线来砍我！！！！
- SQL Server 性能调优（cpu）
- Hybris Enterprise Commerce Platform 服务层的设计与实现
- ManualResetEvent用法
- c语言图片添加水印程序,[求助]C语言 bmp文件加上水印
- 博客园里写blog可以添加自己的js文件
- 投奔“自动驾驶第一城”—— 一场说走就走的“迁都”
- 窄带包络Matlab分析,窄带随机过程的产生及其性能测试
- 猜拳小游戏（Java代码实现)
- 经营养生理疗馆要注意什么问题？
- 你在淘宝剁手，钱却可能进入黑客的口袋
- NatApp免费内网穿透
- 2011年1月22日 上野公园，秋叶原游记
- 最大公约最小公倍数算法
- Python数据聚合和分组运算(1)-GroupBy Mechanics