☰
Java 后端转全栈的第一课:从前端项目搭建到技术选
2026/9/30 3:31:46 网站建设 项目流程

引言

作为一名 Java 后端开发者,一直习惯用 Spring Boot、MyBatis、Redis 这套组合拳解决问题。但当你想做一个自己的项目时,发现光有后端不够——总得有个界面给人看。

这篇文章记录从前端项目创建、技术选型到依赖安装的完整过程,以及作为后端开发者在每个环节的思维转换。

一、项目创建:Vite 的脚手架体验

1.1 命令的坑

一开始想在已经创建好的空文件夹ready-to-the-moon里初始化项目,敲下了:

npmcreate vite@latest my-first-react-app ----templatereact

结果发现这个命令会在当前目录下再新建一个my-first-react-app子文件夹,而不是在ready-to-the-moon里初始化。

正确的做法是:

cdready-to-the-moonnpmcreate vite@latest.----templatereact-ts

用.表示当前目录。

后端类比:这就像你用spring init创建项目时,如果不指定目录,它会在当前路径下新建一个以项目名命名的文件夹。前端脚手架也是同样的逻辑。

1.2 为什么选 TypeScript

模板选了react-ts而不是react。理由很直接:Java 是强类型语言,TypeScript 的接口、泛型、类型推断来说是天然优势。用 TS 写前端,接口一多也不会乱。

后端类比:TypeScript 的interface就像 Java 的 DTO,type就像 Java 的实体类。前后端约定接口时,TS 类型就是前端侧的契约。

二、Linter 选择:Oxlint vs ESLint

创建项目时,Vite 会问你要用哪个 Linter

对比维度ESLintOxlint
定位行业标准,生态成熟极速新锐,Rust 编写
速度较慢,大项目数秒到数十秒极快,百毫秒级
生态插件和自定义规则极其丰富兼容大部分 ESLint 规则,边缘插件还在追赶
适合场景新手、需要大量社区资料追求速度、项目规模大

最终选了 ESLint。理由:作为新手,遇到的报错大概率是基础问题,ESLint 有海量社区讨论和教程,随便搜一个错误信息都能找到答案。等以后熟了再切 Oxlint 体验“秒检查”的快感。

后端类比:这就像选 Maven 还是 Gradle。Maven 生态成熟、资料多,Gradle 更快更灵活。新手先用 Maven 没错。

三、依赖安装:前端的“工具箱”

项目跑起来后,装了四个核心库:

npminstallreact-router-dom axios zustand antd

每个库对应一个后端熟悉的概念:

前端库作用后端类比
react-router-dom页面路由Spring MVC 的 @RequestMapping
axiosHTTP 请求RestTemplate / WebClient
zustand全局状态管理Session / Redis 缓存
antdUI 组件库模板引擎 + 组件生成器

重要提醒:装完这些库,页面不会自动变化。它们只是“躺在工具箱里”,等你import进来才会用到。这就像pom.xml加了依赖但不写代码调用,功能不会自己出现。

四、作为后端开发者的思维转换

后端思维前端思维
请求-响应同步处理一切异步,用 Promise/async
状态存在数据库/Redis状态存在内存(组件/Store)
分层:Controller/Service/DAO分层:View/Store/API
编译一次部署打包成静态资源,浏览器执行
异常抛到全局错误要 UI 提示,不能白屏
接口文档即契约TypeScript 类型即契约

小结

前端项目搭建本身不难,难的是思维转换。作为 Java 后端,你的工程化意识、调试能力、类型思维都是优势,缺的只是前端生态的“套路”和手感。把项目跑起来,看到页面在浏览器里渲染出来,就是最好的开始。

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询