[pig框架源码分析] 02 - 不打开后端程序，轻量的前端开发

最新推荐文章于 2024-08-08 08:33:58 发布

夜猫逐梦

最新推荐文章于 2024-08-08 08:33:58 发布

阅读量1.9k

点赞数

分类专栏： # pig框架学习和实战文章标签： vue.js 前端 vue-router vue-cli 人工mock

本文链接： https://blog.csdn.net/kinghzking/article/details/122709273

版权

12 篇文章 13 订阅

订阅专栏

一直以来，二次开发[pig框架]都是需要先开启后台，然后再打开前端程序，如果再开个Idea，16G内存根本不够用，多次出现电脑宕机罢工的情况。

其实总的来说，就是想实现mock，暂时只做个简单的显示页面吧。。。

经过最近的多次研究和尝试，在框架代码基础上实现了仅供前端开发的功能。最终效果如下。

之前一直纠结为何我的代码无法跳转到新增加的vue路径上（比如[pig框架实战] 手撕视频管理发布平台 中的myvideos等页面），无非两点：

Vue2.x基础免费视频教程 https://www.bilibili.com/video/BV1Zb411T7dm?p=31

其实不复杂，一个小时也就明白基本原理了，只是一直没想到是这个原因导致的。

pig框架的路由项目是服务器下发的，本地只有有限的几个页面路由信息。

请求路由的api是getMenu:


export function getMenu(id) {
  return request({
    url: '/admin/menu',
    params: {parentId: id},
    method: 'get'
  })
}

我们直接修改这个函数的内容，不用请求，直接返回json数据就好了，数据获取后，框架会将数据动态添加到vue-router中。

这里涉及到Promise的用法，推荐一个很不错的教程：最好理解的Promise教程 https://www.bilibili.com/video/BV1454y1R7vj

导航守卫 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

这里直接全部放过也就达到目的了。

为了通过配置的方式控制代码是只做本地展示，还是需要用到服务器。这就涉及到了vue的脚手架了vue-cli。

学习视频 Vue-cli 免费视频教程 https://jspang.com/detailed?id=26，能初步了解vue-cli。

然后根据文章vue-cli-service 机制 https://segmentfault.com/a/1190000020338771，了解其原理。

最后为了将配置打包到静态页面中，参考了vue官方文档：模式和环境变量
https://cli.vuejs.org/zh/guide/mode-and-env.html

主要就是增加了变量VUE_APP_MY_FLAG_ONLY_UI，用于区分是否只做前端页面