讲解如何在Spring Boot环境中实现与Next.js应用程序的集成。
微信搜索关注《Java学研大本营》
在构建Web应用程序时,越来越多的开发者选择将Next.js用于前端,Spring Boot用于后端。Next.js以其高效构建前端应用程序的方式赢得了开发者的青睐;利用Next.js,您可以灵活地创建全栈应用程序,并配备自定义API。然而,在某些情况下,您可能希望将前端的静态资源与后端应用程序进行无缝集成,以提供更好的用户体验。
本文旨在教您如何在Spring Boot环境中实现与Next.js应用程序的无缝集成,确保浏览器刷新和直接URL输入等场景能够得到正确处理,并同时利用Next.js的静态资源。
1 使用以下命令创建Next.js应用程序:
npx create-next-app@latest
此命令将使用最新版本设置一个新的Next.js项目,为您构建前端提供坚实的基础。
创建Next.js项目后,打开您喜欢的文本编辑器,如Visual Studio Code。这样可以让您处理前端代码并进行必要的修改。
在package.json和next.config.js中进行必要的更改并构建项目。
2 从后端获取数据
在Next.js项目中创建一个名为list.js的文件,负责从Spring Boot API获取数据。实现从后端检索数据并在前端呈现的必要逻辑。
function List() {
const [list, setList] = useState([])
const fetchList = () => {
fetch("/e3docs/getlist")
.then(response => {
return response.json()
})
.then(data => {
setList(data)
})
}
useEffect(() => {
fetchList()
}, [])
function getlist() {
return list.map((item, i) => {
return (
<Fragment key={i}>
<tr>
<td>
{(i + 1)}
</td>
<td>
{item}
</td>
</tr>
</Fragment>
);
})
}
return (
<main>
<div style={{ paddingLeft: '34%', paddingTop: '2%', display: 'flex' }}>
<h2 style={{ paddingRight: '10px' }}>
<Link href="/">Home</Link>
</h2>
<h2>
<Link href="/list">List</Link>
</h2>
</div>
<div style={{ paddingLeft: '34%', paddingTop: '3%' }}>
<table>
<thead>
<tr>
<th>No.</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{list.length > 0 && (getlist())}
</tbody>
</table >
</div>
</main>
);
}
export default List;
3 创建新页面处理Web应用程序的刷新和直接URL输入
为了处理Web应用程序的刷新或直接URL输入等情况,在Next.js项目中创建一个新页面。该页面将帮助处理Next.js中的404错误页面,当用户在浏览器中输入直接URL或刷新页面时。
function PageRefresh() {
const router = useRouter();
useEffect(() => {
if (router.isReady) {
router.push(router.asPath).catch((e) => {
router.push('/_error');
});
}
}, [router.isReady])
return (
<div>Loading...</div>
);
}
export default PageRefresh;
构建并导出一个Next.js项目,将创建一个带有已编译和优化的Next.js应用程序的“out”文件夹。
4 使用Spring Initializr创建新Spring Boot项目
使用Spring Initializr创建一个新的Spring Boot项目。指定必要的依赖项和项目设置,并生成项目结构。
生成项目后,找到build.gradle文件,并使用任何额外的依赖项或插件更新它。该文件用作构建系统的配置。
5 为API创建控制器类
为了处理API请求,在Spring Boot项目中创建一个控制器类。该类将负责处理与Next.js前端应用程序的通信,并提供必要的数据。
@RestController
@RequestMapping("e3docs")
public class E3DocsController {
@GetMapping("/getlist")
public List<String> getList() {
List<String> list = new ArrayList<String>();
list.add("India");
list.add("China");
list.add("United States(US)");
list.add("Russia");
list.add("Australia");
list.add("African");
list.add("Europe");
return list;
}
}
6 为Next.js集成创建过滤器组件
为了实现Spring Boot后端和Next.js前端的顺畅集成,创建一个过滤器组件。该组件将拦截请求并执行必要的操作,如直接输入URL或页面刷新。
@Component
public class PageRefreshFilter implements Filter {
private static final String PAGE = "/pagerefresh/pagerefresh.html";
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
doFilter((HttpServletRequest) request, (HttpServletResponse) response, chain);
}
private void doFilter(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
throws IOException, ServletException {
String path = request.getServletPath();
if ("/".equals(path) || path.contains(".") || path.contains("e3docs")) {
chain.doFilter(request, response);
} else {
request.getRequestDispatcher(PAGE).forward(request, response);
}
}
}
7 与后端集成前端
将Next.js项目的“out”文件夹中的静态内容复制到Spring Boot项目的/src/main/resources/static文件夹中。这样可以确保前端资源可以从Spring Boot服务器访问。
通过运行以下命令构建Spring Boot项目:
gradlew clean assemble
成功完成构建过程后,您会在“build/distributions”目录中找到一个zip文件。解压缩此zip文件的内容,并执行相应的脚本,例如批处理文件(.bat),以启动Spring Boot服务器。
一旦服务器开始运行,您可以通过打开Web浏览器并输入以下URL来访问应用程序:http://localhost:8080。这将使您能够与Spring Boot应用程序无缝交互。
推荐书单
《名师讲坛:Java微服务架构实战(SpringBoot+SpringCloud+Docker+RabbitMQ)》
Java微服务架构是当下流行的软件架构设计方案,可以快速地进行代码编写与开发,维护起来也非常方便。利用微架构技术,可以轻松地实现高可用、分布式、高性能的项目结构开发,同时也更加安全。 《名师讲坛:Java微服务架构实战(SpringBoot+SpringCloud+Docker+RabbitMQ)》一共15章,核心内容为SpringBoot、SpringCloud、Docker、RabbitMQ消息组件。其中,SpringBoot 是SpringMVC技术的延伸,使用它进行程序开发会更简单,服务整合也会更容易。SpringCloud是当前微架构的核心技术方案,属于SpringBoot的技术延伸,它可以整合云服务,基于RabbitMQ和GITHUB进行微服务管理。除此以外,该书还重点分析了OAuth统一认证服务的应用。 《名师讲坛:Java微服务架构实战(SpringBoot+SpringCloud+Docker+RabbitMQ)》适用于从事Java开发且有架构与项目重构需求的读者,也适用于相关技术爱好者,同时也可作为应用型高等院校及培训机构的学习教材。
《名师讲坛:Java微服务架构实战(SpringBoot+SpringCloud+Docker+RabbitMQ)》https://item.jd.com/12793864.html
精彩回顾
使用@Log和@Slf4j装饰器提升Spring Boot的日志功能
微信搜索关注《Java学研大本营》
访问【IT今日热榜】,发现每日技术热点