Vue全家桶-项目实战笔记

最新推荐文章于 2024-09-13 11:26:07 发布
最新推荐文章于 2024-09-13 11:26:07 发布
阅读量644 收藏 7
点赞数 3
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51453356/article/details/122590074
版权

写在前面

这是我跟着黑马程序员的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前端项目初始化步骤

  1. 安装vue 脚手架
  2. 通过vue 脚手架创建项目配置vue 路由
  3. 配置Element-UI组件库
  4. 配置axios库
  5. 初始化 git远程仓库
  6. 将本地项目托管到Github或码云中

创建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加插件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装依赖

在这里插入图片描述

在这里插入图片描述

使用码云

地址：https://gitee.com/

在这里插入图片描述

2.2后台项目的环境安装配置

  1. 安装 MySQL数据库
  2. 安装 Node.js环境配置项目相关信息
  3. 启动项目
  4. 使用Postman测试后台项目接口是否正常

3.登录/退出功能

3.1登录概述

  1. 登录业务流程

    • 在登录页面输入用户名和密码

    • 调用后台接口进行验证

    • 通过验证之后，根据后台的响应状态跳转到项目主页

  2. 登录业务的相关技术点

    • http是无状态的

    • 通过cookie在客户端记录状态

    • 通过session在服务器端记录状态

    • 通过token方式维持状态（存在跨域问题）

3.2登录一token原理分析

在这里插入图片描述

3.3登录功能实现

1.登录页面的布局

通过Element-Ul组件实现布局

在这里插入图片描述

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标
  1. 打开项目，查看本地仓库情况，写一个功能，创建一个分支，完成所有功能后，在合并到主分支上

在这里插入图片描述

  1. 删除不要的组件

在这里插入图片描述

  • 梳理根组件

在这里插入图片描述

  • 梳理路由

在这里插入图片描述

2.创建登录组件

  1. 创建登录组件文件
    在这里插入图片描述

  2. 添加路由规则
    在这里插入图片描述

  3. 放置路由占位符：通过路由匹配到的组件都会被渲染到路由占位符里进行展示
    在这里插入图片描述

  4. 路由重定向，如果访问根路径，自动跳转到login页面
    在这里插入图片描述

3.登录组件布局

1.安装依赖，重启运行
在这里插入图片描述

在这里插入图片描述

  1. 创建全局样式
    在这里插入图片描述

  2. 在入口文件main.js中导入全局样式表，字体图标
    在这里插入图片描述

  3. 登录组件样式
    在这里插入图片描述

  4. 按需导入，全局注册组件
    在这里插入图片描述

  5. 登录组件表单的数据绑定
    在这里插入图片描述

  6. 登录组件表单的数据验证
    在这里插入图片描述

  7. 登录组件实现表单的重置
    在这里插入图片描述

  8. 登录前的预校验：发起网路请求前先对表单数据进行校验，通过才可以发起请求，否则提示用户，信息不合法
    在这里插入图片描述

  9. 导入axios，根据预验证是否发起请求
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  10. 设置登录弹窗提示
    在这里插入图片描述
    在这里插入图片描述

  11. 登录成功后的行为

    1. 将登录成功之后的 token，保存到客户端的sessionStorage（会话期间的存储机制）中

      • 项目中除了登录之外的其他API接口，必须在登录之后才能访问

      • token只应在当前网站打开期间生效，所以将 token保存在 sessionStorage中

    2. 通过编程式导航跳转到后台主页，路由地址是/home
      在这里插入图片描述

  12. 路由导航守卫控制访问权限：如果用户没有登录，但是直接通过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项目实战
老余的博客
02-20 3484
新建common组件文件夹,新建对应的Header、Footer、Menu这些文件,然后完成Menu菜单,并且新建学生列表、作业列表、信息列表、考勤管理页面，并且配置路由，之后去写面包屑组件。添加 --legacy-peer-deps 指令在下载对应版本的指令后，保证各个依赖之间的不同版本的共存；然后在axios的二次封装的请求头里携带上token,至此,我们的axios二次封装和跨域完美解决。3、开需求分析会（甲方、SE、开发、测试）简单的进行首页、登录页、404页面的搭建。
Vue全家桶--Vuex学习笔记
qq_37396088的博客
01-31 355
vuex学习 终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的 vuex安装 npm install -S vuex store.js import Vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(Vuex) const store = new Vues.store({ state:{}, mutations:{}, actions:{} }) export default
vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）
weixin_30399821的博客
06-20 433
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了，直奔主题。 一、Vue 　　系列一已经用vue-cli搭建了Vue项目，此处就不赘述了。 二、Vue-router 　　Vue的路由，先献上文档（https://router.vuejs.org/zh-cn/）。 　　路由在全家桶里面定位是什么呢，创建单页应用！简单！我们知道Vuejs是一系列的组件组成应用，既然是组件那么就需要组合起...
Vue3项目实战开发
最新发布
2301_77577184的博客
09-13 2657
<h2>主页</h2> <p>{{ products }}</p> <button @click="changeProduct">修改</button>
Vue全家桶项目实践
zp_field的博客
12-08 532
Vue全家桶项目实践最近新建了一个vue项目，整体来说只能算是摸索前进 目的在于尝试使用js建立全盏项目，熟悉vue的使用方法，顺便趟一下各种坑 下面我会不定期的总结一些坑在这里进行留存简述一下技术盏内容： 前端：vue\vue-cli\iView\axios\webpack 后端：node\express\MongoDB整个项目在github上，有兴趣的朋友可以下来试试 –>项目链接开坑
Vue全家桶笔记
挣钱花388的博客
03-20 197
纯粹自学做的笔记：
vue全家桶学习笔记
qq_45832807的博客
04-09 3088
大纲 核心成员 vue：核心功能—插件，组件，数据管理，生命周期 vue-router：路由机制—拆分，拆开，将文件划分大小 vuex：vue官方提供的数据共享机制，全局性管理数据 编译打包 webpack：打包—js，css，图片，包的分隔，提供了很多开发功能 vue-loader：转换器 cli：脚手架，创建默认启动项目 开发支持 vue-devtools：按照组件查找 后端渲染 ​ 前端渲染...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
【万字长文】 Vue全家桶从入门到实战，初学者必备
m0_74918915的博客
04-02 930
展示路由template：HTML 代码模板，会替换 < App /> 中的内容export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入name: ‘App’：定义组件的名称components: { HelloWorld }：定义子组件在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的!不加代表全局有效。index.js 配置路由。
VUE核心技术Vue技术全家桶视频.zip
08-15
Vue.js，简称Vue，是由尤雨溪开发的开源...同时，源码code.zip可能包含了实际项目代码示例，课件资料.zip可能包含教学材料，笔记总结.zip则是对课程内容的整理，这些资源对于深入理解和应用Vue技术全家桶非常有帮助。
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue实战项目通常会结合Element UI这样的UI组件库，简化界面设计。Element UI提供了丰富的预设组件，可以快速构建出美观的后台管理系统。Vuex在实际项目中用于存储和管理全局状态，解决由于组件复用和路由跳转导致的...
vue 项目实战
06-17
这是一个入门vue的实战项目，可以提升自己对vue的掌握。
Vuejs全家桶系列（一）--- 基本用法
帕尼尼的博客
12-17 4703
Vuejs全家桶系列（一） --- 基本用法
Vue 项目实战
热门推荐
qq_44888570的博客
03-12 1万+
前言 为了练习Vue，写了一个小项目，主要内容是答题。 项目简介 ElementUI框架 无后端，数据来源为本地JSON文件 也可以改造成有后端的，查找题目种类就在后端完成 比较原生，适合刚刚接触Vue，想做练习的同学 笔者水平有限，如有不严谨之处请多多批评 预览图 主页/开始页 答题页 正文 1. 初始化项目 使用脚手架创建项目，cli3.x，选择router即可 添加element，详见在vue中使用elementUI 安装axios 2. 在views文件夹中创建如下目录 3. 写
VUE项目实战
DavidFFFFFF的博客
07-29 2325
Vue实战—–用户登录及注册1.用户登录 用户登录页面主要是获取当前页面用户输入的帐号跟密码，验证是否为空并通过VUE axios(http请求插件),vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。配置文件选项,这里的config是对一些基本信息的配置，比如请求头，baseURL，请求方式等等，当然这里提
vue项目实战
小蜗牛的博客
03-01 477
node连接服务器 【全栈初体验】Vue+Node+MySQL实现前后端分离开发_艾欢欢的博客-CSDN博客 node项目 1.猫眼电影移动端 在博客‘前端学习三’中项目入门的基础上进行 1.首先上图是测试了跳转，现在正式开发：要展示的是电影列表，这个列表对于正在上映和即将上映都需要，只是请求的数据/调用的接口不同，因此将其设置为一个组件 1.在components中新建一个moviesDetail.vue:其展示的内容是每次点击最上面的正在热映/即将上映触发一个请求进行返回的.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值