关于快速开发全栈我的一些心得 提升800%效率!

关于快速开发全栈我的一些心得 提升800%效率!

最近做了很多的全栈的项目。

最近也在学习领域思想。从架构的层面去看待代码,去看待产品。

很多项目的基础,在本质上都是在增删改查也就是CURD的基础上进行开发的。

对于很多繁琐的crud方法,我们是否能用一些东西来进行,快速的开发呢?

当然是可以的,下面我就分享一下我经常用的东西。

后端

首先先来说后端

这里我推荐的插件有俩个,一个是mybatisX 一个是easycode

平常我用的比较多的是mybatisX

这里做一个演示。

假设我们有一个这样的表:

我们现在要做的就是根据这个表结构来快速的生成crud代码。

第一步我一般不修改什么

第二步就可以根据自己的情况来进行修改了,这个是我经常用的配置。

之后他就会生成:

以及xml文件

之后我们把他拖动到我们的项目中。记住是拖动,这样他会自动的进行一个重构。

之后我们在根据这些方法来书写我们的controller层代码。

当然,如果你不想写controller层代码呢?

我们可以用easycode这个插件。

这个的功能和上面的那一个大同小异。

不过她可以自定义一些模板

如果你的工作每一个项目都非常的标准化,繁琐,你可以去抽象出来一些模板来用它进行快速的生成。

这个是他的文档:文档预览 - Gitee.com

说完后端我们来说前端:

前端

对于前端,自动生成增删改查我用的是

OpenAPI Typescript Codegen

这个是他的地址:ferdikoomen/openapi-typescript-codegen: NodeJS library that generates Typescript or Javascript clients based on the OpenAPI specification (github.com)

这个需要配合我们后端的swagger应用。

只要你集成了swagger 那么这个地址应该就是ip:端口/api/v2/api-docs

有了这个地址后,

我们首先安装上这个

css 复制代码
npm install openapi-typescript-codegen --save-dev

之后去执行这个命令

bash 复制代码
openapi --input http://localhost:8101/api/v2/api-docs --output ./generated --client axios

这里的input后面的是你swagger的地址

output是要输出的路径

client是要生成的HTTP client

目前它支持:[fetch, xhr, node, axios, angular]

这个就是她自动生成的代码:

这样你就快速有了一套前后端的增删改查了。

在前端只用调用对应的service里面的方法,就可以去发请求了。

总结

至此,我们没有手写一套代码,只是根据一个数据库,就生成了前后端的增删改查代码,可以大大的提高我们的效率。

对于这个代码生成器是否会拉低程序员的整体水平。

我认为,这叫好像是学渣直接抄答案,学霸在简单的题目上直接抄答案。

至于利弊,大家可以讨论一下,我的想法还是偏向利多一些的。

相关推荐
小二·1 天前
Python Web 开发进阶实战 :AI 原生数字孪生 —— 在 Flask + Three.js 中构建物理世界实时仿真与优化平台
前端·人工智能·python
Bony-1 天前
Go语言垃圾回收机制详解与图解
开发语言·后端·golang
Amumu121381 天前
Vue组件化编程
前端·javascript·vue.js
We་ct1 天前
LeetCode 6. Z 字形变换:两种解法深度解析与优化
前端·算法·leetcode·typescript
小二·1 天前
Python Web 开发进阶实战(终章):从单体应用到 AI 原生生态 —— 45 篇技术演进全景与未来开发者生存指南
前端·人工智能·python
m0_637256581 天前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
挂机且五杀1 天前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
RFCEO1 天前
HTML编程 课程七、:HTML5 新增表单标签与属性
前端·html·html5·搜索框·手机号·邮箱验证·日期选择
刘一说1 天前
Vue开发中的“v-model陷阱”:为什么它不能用于非表单元素?
前端·javascript·vue.js
利刃大大1 天前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架