溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JSP與React結(jié)合實(shí)踐

發(fā)布時(shí)間：2024-11-13 15:58:02 來(lái)源：億速云 閱讀：79 作者：小樊 欄目：編程語(yǔ)言

將JSP（JavaServer Pages）與React結(jié)合使用，可以讓你在服務(wù)器端渲染頁(yè)面，同時(shí)利用React的組件化和響應(yīng)式設(shè)計(jì)優(yōu)勢(shì)。以下是一個(gè)簡(jiǎn)單的實(shí)踐指南：

1. 項(xiàng)目結(jié)構(gòu)

首先，創(chuàng)建一個(gè)新的項(xiàng)目目錄結(jié)構(gòu)。你可以使用Maven或Gradle來(lái)管理依賴。

my-jsp-react-app/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/example/app/
│   │   │       ├── controller/
│   │   │       ├── model/
│   │   │       ├── service/
│   │   │       └── AppController.java
│   │   ├── resources/
│   │   │   └── applicationContext.xml
│   │   └── webapp/
│   │       ├── WEB-INF/
│   │       │   └── web.xml
│   │       └── index.jsp
│   └── test/
│       └── java/
│           └── com/example/app/
│               └── AppControllerTest.java
├── pom.xml (for Maven)
└── build.gradle (for Gradle)

2. 配置JSP和Spring MVC

在web.xml中配置Spring MVC的DispatcherServlet。

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                             http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

在applicationContext.xml中配置Spring MVC。

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context.xsd
           http://www.springframework.org/schema/mvc
           http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.example.app"/>
    <mvc:annotation-driven/>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

3. 創(chuàng)建React應(yīng)用

在src/main/webapp/WEB-INF/views/目錄下創(chuàng)建一個(gè)React應(yīng)用的入口文件index.jsp。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React and JSP</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component {
            render() {
                return (
                    <div>
                        <h1>Hello, React and JSP!</h1>
                    </div>
                );
            }
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

4. 創(chuàng)建Spring MVC控制器

在src/main/java/com/example/app/controller/目錄下創(chuàng)建一個(gè)控制器來(lái)處理請(qǐng)求。

package com.example.app.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AppController {

    @GetMapping("/")
    public String index() {
        return "index";
    }
}

5. 運(yùn)行項(xiàng)目

你可以使用Maven或Gradle來(lái)構(gòu)建和運(yùn)行項(xiàng)目。

使用Maven

mvn clean install
java -jar target/my-jsp-react-app.war

使用Gradle

gradle clean build
java -jar build/libs/my-jsp-react-app.war

6. 訪問(wèn)應(yīng)用

打開瀏覽器，訪問(wèn)http://localhost:8080/，你應(yīng)該能看到“Hello, React and JSP!”的頁(yè)面。

通過(guò)這種方式，你可以在服務(wù)器端渲染頁(yè)面，同時(shí)利用React的組件化和響應(yīng)式設(shè)計(jì)優(yōu)勢(shì)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

jsp
AI
助
手