前端开发
支持外部链接跳转的 Vue Router 扩展实现
Vue Router 是 Vue 中重要的插件,特别在单页面应用中起着关键作用。随着页面概念逐渐消失,路由根据URL确定显示内容。文章介绍了处理内部和外部链接的问题,提出了在 Vue Router 基础上实现外部链接跳转的扩展思路。通过自定义组件 MyRouterLink,区分内部和外部链接并支持传递URL参数,解决了 Vue Router 不支持外部链接的问题。讨论了如何给出站链接携带令牌信息,通过指令或组件内部处理统一附加参数。最终强调了在项目中统一使用规范化组件的重要性。
前端开发
Vue.js 前端项目容器化部署实践极简教程
本文介绍了在「微雨燕双飞」的一天中,作者接到朋友询问前端容器化部署问题的电话。作者分享了使用 Docker 容器化部署前端项目的实践教程,以 Vue.js 为例。通过编写 Dockerfile 实现多阶段构建,包括使用 node.js 构建前端项目和部署到 Nginx 静态文件服务器等步骤。另外,还提及了 Nginx 的配置以及使用 OpenSSL 创建证书的过程。最后,作者鼓励读者根据教程进一步完善部署,并展望了未来将撰写关于 ASP.NET Core 测试的文章。
容器
Vue
Nginx
Envoy
2022-05-17
前端开发
在 Vue.js 中使用 Mock.js 实现接口模拟
最近参与前端项目的作者反思了程序员少有机会写自己喜欢的代码,更多时候是为别人写代码。在谈到 Vue.js 结合 Mock.js 实现接口模拟这一话题时,指出它触及前后端分离的核心,并引出协同开发中的问题。讨论了前后端团队接口文档制定和假数据管理的挑战,以及 Mock.js 在解决这些问题上的作用。提到 Swagger 作为接口文档管理工具,推荐使用 Mock.js 来模拟前端调用后端接口,强调了在 Vue 中如何使用 Mock.js 实现接口模拟,以及如何通过 YAPI 或 Apifox 等工具管理 API 接口和 Mock。最后,勉励读者在项目中努力前行,引用古语“山不厌高,海不厌深”表达对追求更完美世界的理想。
编程语言
ABP vNext 对接 Ant Design Vue 实现分页查询
本文主要讨论了在使用 ABP vNext 和 Ant Design Vue 实现分页查询时的问题。通过介绍 ABP vNext 中的分页查询实现方式以及 Ant Design Vue 中的 STable 组件的参数要求,作者展示了如何在前后端技术栈间进行上下文切换,并提供了参数转换层的代码示例来实现两者之间的无缝集成。最终,作者展示了如何封装前端服务层以及实现 loadData 方法,实现了 ABP vNext 与 Ant Design Vue 的完美整合,提高了开发效率。整体内容涵盖了技术实现细节和开发经验分享。
编程语言
Vue 快速实现通用表单验证
本文讨论了在开发过程中遇到的前后端分离、表单验证等问题。作者通过三个示例分享了在 Vue 下实现表单验证的方法,包括最简单的表单验证、基于 jQuery 的表单验证和基于 Vue 的表单验证。针对 Vue 的表单验证,作者介绍了使用 VeeValidate 插件的方法,并展示了扩展自定义验证规则的步骤。文中强调了表单验证的重要性以及在实际工作中遇到的挑战和心得体会。
编程语言
使用 .NET Core 和 Vue 搭建 WebSocket 聊天室
本文介绍了 WebSocket 的基本概念和应用。WebSocket 是建立在 HTTP 协议基础上的双向通信协议,弥补了 HTTP 协议请求-响应模型的不足,使客户端和服务器可以实现双向通信。文章以构建WebSocket 聊天室为例,展示了如何在 ASP.NET Core 中实现服务端 WebSocket 和使用原生 WebSocket API 和 Vue 实现客户端功能。另外,文章还介绍了 ASP.NET Core 中间件的概念和作用。通过实例展示了 WebSocket 握手请求和响应的过程,以及服务端如何响应 WebSocket 请求。文章深入浅出地解释了 WebSocket 的原理和应用,为读者提供了全面的了解和实践指导。
WebSocket
.NET Core
Vue
2018-08-01