作为一名萌新, Vue 项目看不懂怎么破? 超详细vue案例解析 不怕入不了门

超详细vue案例解析 不怕入不了门

唠两句

如今, 正值毕设的高潮, 笔者也是应接不暇; 我想一个高逼格的毕设框架的选取: 前端少不了Vue/React后端少不了SpringBoot

vue虽然逼格高, 入门也不容易啊; 刚从gitee拉的一个项目, 修改一个动全身,各种报错, 死活理不清内部逻辑到底怎么回事
---- 来自n位童鞋的哭诉(程序员哭起来, 老惨了)

好了, 笔者最近正好打算梳理vue系列东西,今天就先打个样吧

建议你先从网上找一个比较 完成的vue项目


划重点 别走眼

  • before

    vue项目在看的时候, 首先明确一个思路: 既然作为vue是前后端分离的产物,那么首先要看看vue是怎么分离的: 先给出结论, 稍后具体描述 (别急)

    vue项目分析流程:
    前端: vue项目在执行如下指令后, 会经历如下图的过程 切记

    npm run dev
    

    喂, 醒醒 切记这个流程

    下面开始套这个流程 来全图分析一下整个登录过程

  1. main.js 加载路由信息, 状态管理, 语言国际化, 渲染APP.vue
    在这里插入图片描述

  2. Permission.js鉴权并寻找默认路由

    第一次肯定进入登录路由 往后走默认首页路由

    在这里插入图片描述

  3. 进入Login.vue, 输入用户密码 发起登录
    在这里插入图片描述

  4. 上一步Login方法经过4个阶段
    4.1 进入store目录调用Login方法
    在这里插入图片描述

    4.2 进入api目录调用login方法
    在这里插入图片描述

    4.3 向后台发起真正登录请求(mock)
    在这里插入图片描述
    4.4 mock处理完毕层层返回给到Login.vue

    返回之前会在store的接受返回中 对token进行全局缓存 便于后面的请求不需要继续登录
    在这里插入图片描述

    登录成功 跳转

    1. 进入permission.js

      所有的请求首先都会进行权限校验 这是毫无疑问的

      在这里插入图片描述

    2. 由于已经登录过 所以直接请求router的路由名为 ‘/’

      注意: 此时的路由信息在内存中, 也就是permission.js调用GenerateRoutes方法时拼接了基础路由和其他带权限路由
      '/'就在带权限路由里

      在这里插入图片描述
      在这里插入图片描述

      在拼接基础路由和带权限路由中 会调用config目录获取带权限的路由

      在这里插入图片描述
      最终 找到路由’/'进行访问 此后逻辑就是大同小异了, 可以发现即使找到了/也是经过了层层重定向访问


实际开发怎么做?

其实vue项目确实蛮复杂的, 上面只是为了帮大家理清整个前端和后端的请求流程和返回是怎样的, 不过我们实际开发中,
仅仅需要关心api、views、router、store四个目录即可, 开发时往里面填代码就行了, 如果遇到问题就可以直接根据登录思路
快速查找问题根源

必备知识

至少要把vue的基础教程看完 然后去学习vuex 学完这些就能进行真正的开发了, 想直接修改就完事的, 你一定会被一堆错误笼罩在被支配的恐惧中, 所以好好学一下vue吧

引路人收工 吃饭(老规矩,莫要白票!)

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值