文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Spring Boot和Next.js创建全栈应用指南

2024-11-30 06:56

关注

本文旨在教您如何在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 (
                
                    
                        
                            {(i + 1)}
                        
                        
                            {item}
                        
                    
                
            );
        })
    }
    return (
        

Home

List

{list.length > 0 && (getlist())}
No. Description
); } 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 (
        
Loading...
); } 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 getList() {
  List list = new ArrayList();
  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学研大本营内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯