概要
避免篇幅过大,作为【从事件驱动转向数据驱动,记录一次旧系统改造UI过程】文中提到的基础内容补充;
搭建react项目
步骤 1: 搭建 React 开发环境
在本地环境中创建一个新的 React 应用。你可以使用 create-react-app 来快速开始:
npx create-react-app my-react-app
cd my-react-app
npm start
步骤 2: 开发 React 组件
开发你的 React 组件,确保它们可以独立工作,并且与旧的JSP页面逻辑分离。
步骤 3: 构建 React 应用
当你的 React 应用开发完成后,你可以构建生产版本的文件:
npm run build
这将在 build 文件夹中生成静态文件,包括 HTML、CSS 和 JavaScript 文件。
搭建Maven Spring MVC Demo项目
步骤 1: 打开 IntelliJ IDEA 并创建新项目
打开 IntelliJ IDEA。
选择 “File” > “New” > “Project…”。
步骤 2: 选择项目类型
在弹出的 “New Project” 窗口中,选择 “Maven” 作为项目类型。
确保 “Create from archetype” 选项未被选中(除非你想使用特定的 Maven 架构原型)。
点击 “Next”。
步骤 3: 设置项目信息
输入 “GroupId”(通常是你的组织或公司的域名反转,例如 com.example)。
输入 “ArtifactId”(你的项目名称,例如 my-springmvc-app)。
选择项目版本(如果不确定,可以保留默认值)。
点击 “Next”。
步骤 4: 选择项目位置
选择项目存储的位置。
点击 “Finish”。
步骤 5: 添加 Spring MVC 依赖
IntelliJ IDEA 将创建项目并打开 pom.xml 文件。
在 pom.xml 文件中,添加 Spring MVC 的依赖项
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>springmvc-demo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<!-- Spring MVC -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.25</version>
</dependency>
<!-- Servlet API -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<