29｜前台页面的渲染方式：如何设计前台页面的渲染策略？
杨文坚
你好，我是杨文坚。
经过前面几节课的学习，在运营搭建平台的页面功能维度中，我们完成了页面发布流程和页面回滚措施，可以放心地把页面发布到生产环境，提供给让外部客户使用。下一步，就是进行前台页面的渲染操作了，这也是运营搭建平台中，页面功能维度的最后一个环节——“页面渲染方式”。
有这个疑问很正常，因为我们之前学的都是一些分散的技术点，比如 Vue.js 的服务端渲染、Vue.js 组件的多种模块格式等等，这些技术散点都是你的知识储备。今天，我们就要把这些知识储备，通过实际项目应用实践，有机结合起来，应用到搭建平台的前台场景中。
那么“页面渲染方式”这个页面维度的功能模块，在前台服务上，我们如何进行设计和实现呢？
1. 设计前台页面的链接
页面渲染的第一件事，就是在要在浏览器输入页面的 URL，也就是页面的链接，所以我们今天第一件事就是设计页面的链接。
前台页面的链接，是面向外部用户的，考虑到用户的传播和使用，我们要尽量让链接简单一些，后续生成的链接二维码图片也会精简一些。
一般我们会这么设计 URL。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了前台页面的渲染方式设计和实现，重点讨论了页面链接设计、浏览器端渲染和前台渲染测试的落地实现。首先，强调了简化链接以及避免使用易被利用的自增数字id。其次，详细介绍了Bundle文件渲染、ESM动态渲染和AMD动态渲染三种方式，并提出了灵活利用这三种渲染方式构建页面渲染策略的观点。最后，讨论了前台渲染测试的落地实现，包括页面错误异常处理、降级渲染选择、以及根据浏览器兼容情况选择和执行ESM或AMD的渲染方式。文章还探讨了服务端渲染的隐患，并提出了解决办法。总的来说，本文通过实际案例和技术方案，为读者提供了全面的技术指导，使其能够更好地理解和应用前台页面的渲染方式设计和实现。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
Akili老师，请教一个问题，我们现在涉及的都是后台管理系统开发，遇到的问题就是一直在重复的工作，对自己也没有提升，有没有什么方案避免这样的工作方式？谢谢你作者回复: 您好，后台管理的前端开发，可以先分析出重复工作内容，然后用技术工具化的方式解决。比如： 1. 如果是经常重复开发表单，可以抽象出一个公共的动态表单组件，输入JSON就能按照自己业务逻辑渲染表单。 2. 如果是经常重复开发新页面，新应用，可以抽象出通用的页面和应用的生成脚本，定制一个CLI工具，用脚本方式批量来生产代码。 解决重复工作，核心是要找出重复的规律，用技术手段来实现重复逻辑。
2023-02-17归属地：云南4
收起评论