一、前言
![](https://ask.qcloudimg.com/http-save/yehe-8223537/ea7a3701a3fe1e05c504cb106c050173.png)
公司主打产品的,近来发现了一款快速完成前后端 CRUD 的框架 renren-fast,
打算用它来 “刷” 小型的外包,积攒资金。
![](https://ask.qcloudimg.com/http-save/yehe-8223537/9078f49c5bf16cdd50773fbd2461ee40.png)
个人觉得,renren-fast 主要面向后台开发者,使用方式和 Guns 类似:
![](https://ask.qcloudimg.com/http-save/yehe-8223537/eaaed1c082f8bcec48a6b7f65e0fadf5.png)
使用 Guns 自动生成 SpringBoot + LayUI 的后台管理系统
![](https://ask.qcloudimg.com/http-save/yehe-8223537/c2a4f496b28a61f1b18586d8630f17b3.png)
① 由于完整开发文档需要费用,
② 前端使用 vue,有的后台开发者不清楚。
![](https://ask.qcloudimg.com/http-save/yehe-8223537/075725e1bd3109307b60ea200a763f05.png)
笔者参考了 Guns、renren-fast 官方完整文档,为此做了一个小结。
![](https://ask.qcloudimg.com/http-save/yehe-8223537/23174e4a6cf1d56e1a48666ed0f5937d.png)
二、操作
![](https://ask.qcloudimg.com/http-save/yehe-8223537/8befaa9b0d0eb8a0d728a28cf78dae24.png)
1、代码准备
![](https://ask.qcloudimg.com/http-save/yehe-8223537/908e5efa2f33ced5b6fa994df0564c9e.png)
renren-fast,主要操作为开启 3 个工程,操作 1 个机器代码:
![](https://ask.qcloudimg.com/http-save/yehe-8223537/d9dfa9de5cba92e341a3937a238c478b.png)
① renren-fast 后台 git clone https://git.oschina.net/renrenio/renren-fast.git
② renren-generator 代码生成器 git clone https://gitee.com/renrenio/renren-generator
③ renren-fast-vue 数据操作界面 git clone https://github.com/daxiongYang/renren-fast-vue.git
④ renren 生成的代码(前端+后台mapper+module)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/3f8cb011433d6a13c400f860b7282060.png)
2、数据库
![](https://ask.qcloudimg.com/http-save/yehe-8223537/58cf2f503ea2332c552a8371b799c636.png)
① 运行 renren-fast/db 中的 sql 文件,这里使用 MySQL
![](https://ask.qcloudimg.com/http-save/yehe-8223537/2284f6048f2e104f141bc2d25298a0e5.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/2ebaa2a33488735dd6ac7c1d2431e12f.png)
② 创建数据库表,这里为了演示,简单创建了一张表 t_student
![](https://ask.qcloudimg.com/http-save/yehe-8223537/aa88349f378cc61437c9d7519c6dcf95.png)
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for t_student
-- ----------------------------
DROP TABLE IF EXISTS `t_student`;
CREATE TABLE `t_student` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`password` varchar(255) DEFAULT NULL,
`gender` int(1) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
![](https://ask.qcloudimg.com/http-save/yehe-8223537/cf57b7c8d1997388b1bc2bb37f228da3.png)
注意在表中写注释,进入 http://localhost/#generator.html 时好操作
![](https://ask.qcloudimg.com/http-save/yehe-8223537/bc5a31c4651b198d12a8cac0767c495d.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/325d365f4c6cde4d8538a6648bc05050.png)
字段也写上备注,因为代码也会对应填上注释,
![](https://ask.qcloudimg.com/http-save/yehe-8223537/184221fad06c043b38cba27189ec3976.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/a06224a0e85880a020fcbab7ce3dcf2d.png)
否则让人有点难受
![](https://ask.qcloudimg.com/http-save/yehe-8223537/5a5d080acedf2c9ef43251dc16badcc9.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/473c131f11a0e56d142c8506d48a4cbb.png)
3、开启 renren-generator
![](https://ask.qcloudimg.com/http-save/yehe-8223537/659aea9dae94c5db060659fa6bd19f5a.png)
进入 http://localhost/#generator 生成前后端代码
![](https://ask.qcloudimg.com/http-save/yehe-8223537/4f10873095e72941886d99c2437337df.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/050eb8f1b76d1548fe2c4014339f241b.png)
前端:
![](https://ask.qcloudimg.com/http-save/yehe-8223537/ab22b2af60201561c29a51ba5a4993f9.png)
将 renren 中 src/views/modules/generator 的代码,
![](https://ask.qcloudimg.com/http-save/yehe-8223537/9367ec85ae25961dd0ae5cd127264273.png)
![](https://ask.qcloudimg.com/http-save/yehe-8223537/407614f59414c679cf691cf313437e3c.png)
放到 renren-fast-vue 的 src/views/modules下,
![](https://ask.qcloudimg.com/http-save/yehe-8223537/4d284f369d863362fc50f49c4a9a90c8.png)
后台:
① 运行 sql 文件,
② 将 renren 中的 main/java/io/renren/modules/generator
放到 renren-fast 的src/main/java/io/renren/modules 下
③ 将 renren 中的 main/resources/mapper/generator
放到 renren-fast 中的 src/main/resources/mapper 下
4、开启 renren-fast
为下面前端做准备,如登录的验证码生成
账户:
用户名:admin
密码:admin
验证码
同时可以查看 swagger 接口文档:
http://localhost:8080/renren-fast/swagger-ui.html
http://localhost:8080/renren-fast/swagger/index.html
5、开启 renren-fast-vue 操作界面
cnpm i 下载依赖的模块
npm run dev 开启前端工程
进入 http://localhost:8001/#/home
三、进阶
仅仅靠机器,还是不能很好地符合客户的需求,接着,我们要对机器生成的代码,进行一定的修改。
1、查询功能
① 数据处理
查看前端代码,名称为 key
后台,简单加了红色框中的模糊查询,MyBatisPlus 的基本操作:
在 SpringBoot 中引入 MyBatisPlus 之 常规操作
② 界面处理
前端代码
效果
2、新增、修改功能
修改前的代码
修改后的代码
效果
3、列表栏
改前的代码
改后的代码
效果
4、公司、logo
公司隐私起见,使用在校的团队名
代码
效果
四、问题
1、npm、node 版本过低
问题:
原因:
renren-fast 要求的版本
解决:
① 升级 npm,npm install npm@latest -g
② 升级 node,https://nodejs.org/en/download/ 重新下载安装即可
读者有疑问,欢迎留言,看到会第一时间回复。
前后端分离接口展示
http://localhost:8080/renren-fast/swagger-ui.html
http://localhost:8080/renren-fast/swagger/index.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/hz/145134.html