前后端项目初始化

目录

• 前端
  • 前端项目初始化（Ant Design Pro）
  • 自动生成增删查改代码
  • 前端默认代码优化（瘦身）
  • 替换网站标题名称
• 后端（SpringBoot）
  • 后项目初始化
  • 自动生成增删查改代码

 

---

回到顶部

前端

前端项目初始化（Ant Design Pro）

步骤：

1. 按照官方文档初始化

https://pro.ant.design/zh-CN/docs/getting-started/

2. 项目试运行（npm run dev / start）
3. 代码托管
4. 移出不必要的能力，对项目进行瘦身（比如国际化）

自动生成增删查改代码

后端可以用mybatisX插件生成代码，那前端可以自动生成增删查改代码吗？ 是可以的！

（这里是根据后端生成的后端接口地址自动生成前端增删查改的代码）

步骤：

1. 修改config.ts

2. 在package.json中运行openapi

看，它竟然神奇的生成啦！（后端程序猿发现新大陆啦！）

3. 修改app.tsx

4. 测试结果

修改index.txt

前端默认代码优化（瘦身）

目的：把不需要使用到的文件给清除，对项目进行瘦身。

一. 项目备份（代码托管）

步骤：

1. 使用git init进行初始化本地项目，防止万一删错了文件，方便用git进行还原。

git init 是一个 Git 命令，用于初始化一个新的 Git 仓库。运行 git init 命令后，会在当前目录下创建一个 .git 目录，其中包含了 Git 版本控制所必需的所有文件和子目录。此外，该命令还会创建一个名为 “master” 的默认分支，用于提交改动。通过使用 git add 命令添加文件和 git commit 命令提交改动，您可以在该新仓库中添加文件并进行版本控制。

2. 使用 git add .把项目中的代码添加到git，其中.表示所有文件。（添加所有更改到暂存区）
3. 使用git commit -m 'first init'把代码进行临时保存。（提交更改，并添加提交信息）

该命令用于在Git中提交更改，-m选项为提交消息，在引号中输入提交的信息，通常是指此次提交的更改描述。在这里，“first init”可以表示此次提交为初始提交或是创建了一个新的仓库。

需要注意的是，使用该命令提交代码之前，需要将更改加入到Git的暂存区中，即使用git add命令将更改添加到暂存区中，然后再使用git commit命令提交。

二. 项目瘦身

1. 去除国际化

在package.json文件中运行i18n-remove

把国际化语言的包也给删了

2. 删除oneapi.json

这个东西没什么用，是一个示例数据

3. 删除mock

里面存储了一些模拟数据，因为我们本地已经有了前后端，mock也就不会使用了

4. 图标可以删除

5. 替换Logo

替换 Logo，去 https://www.iconfont.cn/ 搜索，替换 favicon，使用 http://libowen.com/tool/ico/ 生成

6. 可以这个swagger给删了

7. 删除mainfest.json

mainfest.json作用：开发APP/H5网页 指定不同的配置

8. 删除test文件

删除测试文件

9. 删除types文件

10. 删除jest.config.ts

jest.config.ts，单元测试框架

11. prettier、eslint、editorConfig、stylelint，需要开启 prettier 美化配置

替换网站标题名称

全局替换 Ant Design Pro 和 Ant Design

回到顶部

后端（SpringBoot）

后项目初始化

步骤：

• 解压并打开星球后端万能模板
• 修改application.yml文件
• 运行sql脚本
• 根据需求修改后端万能模板代码（可以根据里面的TODO快速定位并根据提示进行修改）

自动生成增删查改代码

1. 选中要进行增删查改的表
2. 右键选中MybatisX-Generator

3. 这个插件有一些bug，选中模块后点击下一步

4. 根据下图进行相应的选择，并点击Finish

生成的文件

5. 把生成的文件放到正确的位置

例如：把生成的mapper文件拖拽到你项目中真正需要放置mapper的位置进行重构（注意四拖拽过去不是复制进去）

domain和service也是和mapper一样的步骤

由于我用的是鱼皮的后端万能模板（即有老的模板），所以还有一些内容需要修改。

我已user类为例，MybatisX自动生成的domain也需要修改

1. 修改user类中主键自动增长的方式。

@TableId(type = IdType.ASSIGN_ID)	//把IdType.AUTO改为IdType.ASSIGN_ID
private Long id;

2. 添加逻辑删除注解

@TableLogic
private Integer isDelete;

我们启动项目的时候可能会报错，如下图所示

原因是鱼皮万能后端模板集成了其他的技术（比如第三方登录），导致启动可能会报错。

把不需要用的功能给删除即可。