Vue全家桶-项目实战笔记
写在前面
这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记，主要记录思路，内容不完整，这里只写到了用户列表管理，进来的友友们可以根据目录，看是否有自己需要的功能
这篇笔记记录的是基础vue内容，没有涉及到组件化开发，距离实际开发有一定的距离，但是可以了解vue的基本使用，登录/登出功能、菜单动态渲染、列表数据渲染等实现思路，对初学者比较友好
想跟着写完整项目的友友们慎入呀！！！
项目源码在码云上
今天完成的是登录/登出功能，其他功能将持续更新
Vue全家桶-项目实战
- 能够基于Vue初始化项目
- 能够基于Vue技术栈进行项目开发
- 能够使用Vue的第三方组件进行项目开发心
- 能够说出前后端分离的开发模式
1.项目概述
1.1电商项目基本业务概述
根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。
1.2电商后台管理系统的功能
电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能。
1.3电商后台管理系统的开发模式(前后端分离)
电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于Vue技术栈的SPA项目。
1.4电商后台管理系统的技术选型
1.前端项目技术栈
- vue
- vue-router
- Element-UI
- Axios
- Echarts
2.后端项目技术栈
- Node.js
- Express
- Jwt
- mysql
- sequelize
2.项目初始化
2.1前端项目初始化步骤
- 安装vue 脚手架
- 通过vue 脚手架创建项目配置vue 路由
- 配置Element-UI组件库
- 配置axios库
- 初始化 git远程仓库
- 将本地项目托管到Github或码云中
创建项目
添加插件
安装依赖
使用码云
地址：https://gitee.com/
2.2后台项目的环境安装配置
- 安装 MySQL数据库
- 安装 Node.js环境配置项目相关信息
- 启动项目
- 使用Postman测试后台项目接口是否正常
3.登录/退出功能
3.1登录概述
登录业务流程
在登录页面输入用户名和密码
调用后台接口进行验证
通过验证之后，根据后台的响应状态跳转到项目主页
登录业务的相关技术点
http是无状态的
通过cookie在客户端记录状态
通过session在服务器端记录状态
通过token方式维持状态（存在跨域问题）
3.2登录一token原理分析
3.3登录功能实现
1.登录页面的布局
通过Element-Ul组件实现布局
- el-form
- el-form-item
- el-input
- el-button
- 字体图标
- 打开项目，查看本地仓库情况，写一个功能，创建一个分支，完成所有功能后，在合并到主分支上
- 删除不要的组件
- 梳理根组件
- 梳理路由
2.创建登录组件
创建登录组件文件
添加路由规则
放置路由占位符：通过路由匹配到的组件都会被渲染到路由占位符里进行展示
路由重定向，如果访问根路径，自动跳转到login页面
3.登录组件布局
1.安装依赖，重启运行
创建全局样式
在入口文件main.js中导入全局样式表，字体图标
登录组件样式
按需导入，全局注册组件
登录组件表单的数据绑定
登录组件表单的数据验证
登录组件实现表单的重置
登录前的预校验：发起网路请求前先对表单数据进行校验，通过才可以发起请求，否则提示用户，信息不合法
导入axios，根据预验证是否发起请求
设置登录弹窗提示
登录成功后的行为
将登录成功之后的 token，保存到客户端的sessionStorage（会话期间的存储机制）中
项目中除了登录之外的其他API接口，必须在登录之后才能访问
token只应在当前网站打开期间生效，所以将 token保存在 sessionStorage中
通过编程式导航跳转到后台主页，路由地址是/home
路由导航守卫控制访问权限：如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。
3.4登出
退出功能实现原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的 token之后才可以访问页面。
3.5处理语法警告问题
3.6优化element-ui按需组件的导入形式
3.7提交登录功能代码
3.6优化element-ui按需组件的导入形式
3.7提交登录功能代码
4.主页布局
4.1整体布局
1.导入布局组件并使用
2.美化页面、Header布局
使用flex布局
3.左侧菜单布局
菜单组件按需导入并注册为全局组件
4.2通过接口获取菜单数据
通过axios请求拦截器添加token，保证拥有获取数据的权限。
1. 发起请求获取左侧菜单数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krVcLMK9-1642689349276)(C:\Users\a\AppData\Roaming\Typora\typora-user-images
4.3.左侧菜单UI绘制
1.菜单格式美化
2.菜单优化
3.实现左菜单的折叠与展开功能
4.首页路由重定向到welcome
5.左侧菜单改造为路由链接
5.用户管理模块
5.1用户列表开发
1.创建users组件
2.左侧菜单高亮效果保持
3.绘制用户列表的基本UI结构
4.获取用户列表数据
5.渲染用户列表数据
6.为用户列表添加索引列
7.状态列开关
写在最后
该项目我已经写完了，有什么问题的话，期待与大家一起讨论，我也是个初学者，一起加油吧！！！
Vue全家桶-项目实战笔记相关推荐
- VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局 一.页面布局 二.创建Home组件 三.路由index.js 文件配置主页路径 四.添加welcome组件 一.页面布局 <el-container& ...
- 从头到尾创建一个vue全家桶项目
一.vue全家桶有哪些 全家桶:vue, vue-router, vuex, axios, elementui vue-router: 路由 vuex: vue状态机 axios: 网络请求工具 el ...
- Vue全家桶项目创建指南
切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车 习惯项目名小 ...
- vue全家桶+Koa2开发笔记(5)--nuxt
1. nuxt项目初始化报错 下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...
- 小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接 预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
- vue全家桶+Koa2开发笔记(2)--koa2
1. 安装koa脚手架的时候 执行命令 koa2 -e koa-learn 注意要使用-e的方式,才会生成ejs的模板 2. async await的使用方法:存在的意义:提高promise的可读性 ...
- vue全家桶项目搭建（vue-cli 2.9.6+vue-router+vuex+axios）
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
- vue全家桶+Koa2开发笔记(3)--mongodb
1. 安装 momgodb brew install mongodb 安装成功后执行 which mongod 启动:mongod 2. 下载可视化操作数据库的软件 https://robomongo ...
- Vue全家桶构建项目
步骤一.安装vue-cli 首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过 node -v 查询node的版本号,有版本号则已经安 ...
最新文章
- 计算机硬件2部件指的是什么,计算机基础-2.计算机硬件基础.doc
- 最强无监督行人重识别方法 Cluster Contrast ReID，rank-1 94.6%
- configparser模块和PyYAML模块生成和修改配置文件
- (chap1 web网络基础) HTTP协议相关的各个协议(2)
- 为了让你在“口袋奇兵”聊遍全球，Serverless 做了什么？
- 薪资涨幅60%,直通一线互联网公司的秘密......
- 【数据库系统概论】考研第二部分重点分析【2.1】
- 特征点提取算法 - 01 - 特征的定义基础
- Hadoop学习笔记（一）：零Linux基础安装hadoop过程笔记
- Spring入门看这一篇就够了
- 组件上传之AspUpload使用方法
- Word——如何在框框□里打打勾√
- 会员功能竞品分析（一）：唯品会、京东、苏宁易购
- 数据结构化和半结构化的区别
- 虚拟机2008安装DHPC服务器,Windows Server 2008 配置DHCP服务器
- Linux程序设计——用getopt处理命令行参数
- c++minmax函数_std :: minmax（）函数以及C ++ STL中的示例
- Github推荐--PC端下载bilibili视频
- 24岁女孩与30多岁成熟有家男人的午夜对白
- 川土微电子8通道隔离式数字输入接收器