java-web/docs/chapter07.md

7. 项目实践

基于开源项目 https://github.com/rocboss/paopao-ce , 使用spring boot完成后端服务程序。

7.1 项目准备

7.1.1 Git仓库

• 创建远程项目仓库

在http://123.249.84.124:8066/ 注册账号 ， 创建仓库paopao

选择.gitignore文件模板： java

设置分支模型： 单分支模型，分支名：master

• 在idea中clone项目

idea的菜单file -> new -> project from version control -> Repository URL，url输入框中输入项目的远程仓库地址，点击clone。

7.1.2 初始化spring boot项目

使用 Spring Initializr 创建项目

• 访问 Spring Initializr

• 选择以下选项：

  • Project: Gradle-Groovy
  • Language: Java
  • Spring Boot: 选择最新稳定版本
  • Group: 输入你的组织名称（例如 com.lk）
  • Artifact: 输入项目名称（例如 paopao）
  • Name: 项目名称（默认与 Artifact 相同）
  • Package name: 包名（默认与 Group 和 Artifact 相同）
  • Packaging: Jar
  • Java Version: 选择合适的 Java 版本（17或21）

• 添加以下依赖：

  • Web
  • JPA
  • H2 Database

• 点击 Generate 按钮，下载生成的项目压缩包。

解压并复制文件

• 将下载的压缩包解压到一个临时目录。
• 将解压后的目录中的所有文件复制到你的本地项目根目录下。
• 确保 build.gradle 等文件位于项目根目录下。

在 IDEA 中设置项目

a. 打开项目

• 打开 IntelliJ IDEA。
• 选择 File -> Open，选择你的项目根目录，然后点击 OK。

b. 设置项目使用的 JDK

• 打开 File -> Project Structure。
• 在 Project 标签页中，选择 Project SDK，选择你安装的 JDK 或者下载JDK再选择。

c. 配置 Gradle 使用的 JVM 版本

• 打开 File -> Settings（或按 Ctrl+Alt+S）。
• 导航到 Build, Execution, Deployment -> Build Tools -> Gradle。
• 在 Gradle JVM 下拉菜单中，选择你安装的 JDK 版本, 保持使用的版本和项目jdk版本一致。（如果看不到此项，尝试下面的步骤d,重新导入项目）

d. 导入项目

• 如果项目没有自动导入，可以手动导入：
  • 打开 File -> New -> Module from Existing Sources。
  • 选择项目根目录下的 build.gradle 文件，然后按照提示完成导入。

完成以上步骤后，应该能在idea的右侧插件栏中看到gradle的图标。

7.1.3 gradle配置

项目中的gradle/wrapper/gradle-wrapper.properties 文件中，将下载的gradle地址修改为使用国内源。

distributionUrl=https://mirrors.cloud.tencent.com/gradle/gradle-8.5-bin.zip

项目中build.gradle 文件中，设置使用国内maven服务器，添加如下配置：

repositories {
    mavenLocal()
    maven { url 'https://mirrors.cloud.tencent.com/nexus/repository/maven-public/' }
    maven { url 'https://maven.aliyun.com/repository/central' }
    maven { url 'https://maven.aliyun.com/repository/public' }
    mavenCentral()
}

项目中build.gradle 文件中，修改h2数据库的依赖,指定版本号，使用H2 V2(为了使用数据库工具dbeaver时比较方便设置)：

runtimeOnly 'com.h2database:h2:2.1.214'

修改完成后，刷新gradle, 等待gradle下载依赖。

下载完成，在gradle插件的窗口中，运行tasks，选择bootRun任务。项目应能正常运行。

在idea中使用git菜单,将项目所有更新提交到远程仓库.

7.1.4 ui部署

nginx中部署 paopao-web-ui.zip

• 安装nginx

下载nginx： https://nginx.org/download/nginx-1.26.2.zip

解压zip包，在解压后的目录下，运行nginx.exe, 即可启动nginx服务。

在浏览器中访问：http://localhost 应能看到nginx的欢迎界面。

• 发布前端代码

前端代码压缩文件paopao-web-ui.zip解压, 将前端代码根目录下的所有文件拷贝到html目录下，重启nginx服务。

浏览器访问：http://localhost/index.html

7.2 用户注册功能开发

基本上按照层次结构创建系统的包结构, 在com.lk.paopao包下创建子包controller、service、entity、repository、config。

7.2.1 API设计

用户注册API.md

7.2.2 spring boot配置文件修改

在项目目录src/main/resources下，新建application.yml文件，添加数据库相关配置：

spring:
  jackson:
    property-naming-strategy: SNAKE_CASE # 驼峰转下划线，以适应数据库字段命名规则
  datasource:
    url: jdbc:h2:file:./db.h2 # 使用文件存储，配置数据库连接URL
    driverClassName: org.h2.Driver # 指定数据库驱动类
    username: root # 数据库用户名
    password: root # 数据库密码
  h2:
    console: # 开启console访问 默认false，提供数据库管理界面
      enabled: true # 启用H2控制台访问功能
      settings:
        trace: true # 开启h2 console 跟踪 方便调试  默认 false
        web-allow-others: true # 允许console 远程访问 默认false，提高可用性
      path: /h2 #  h2 访问路径上下文，定义访问路由
  jpa:
    show-sql: true # 显示SQL查询，便于调试和性能优化
    open-in-view: false # 禁用Open SessionInView，避免性能问题和资源泄露
    defer-datasource-initialization: true # 延迟数据源初始化，确保配置加载完成
    database-platform: org.hibernate.dialect.H2Dialect # 指定数据库方言，优化SQL生成
    hibernate:
      ddl-auto:  update # 自动更新数据库结构，适应实体模型变化

yml配置文件的格式需要注意：缩进和空格是敏感的，需要严格遵循格式。

7.2.3 实体类User和UserRepository接口

创建实体类User

创建User对应的数据库接口： UserRepository

7.2.3 创建服务类AuthService

创建service类，处理用户注册和登录逻辑： AuthService

7.2.4 创建AuthController类

创建controller类，处理用户注册和登录请求： AuthController

7.2.5 解决跨域问题

跨域问题‌是指在使用AJAX进行跨域请求时，浏览器阻止访问不同源的Web资源的问题。跨域问题的本质是浏览器的一种安全机制，称为同源策略（Same-Origin Policy）。同源策略限制了来自不同源的文档或脚本间的交互，以防止恶意网站窃取数据或进行其他恶意操作‌。

跨域问题的原因

跨域问题主要由以下几种情况引起：

‌协议不同‌：例如，http和https。
‌域名不同‌：例如，example.com和test.com。
‌端口不同‌：例如，80和8080。

目前最常用的解决方案：

CORS（Cross-Origin Resource Sharing）‌：服务器端设置CORS头部信息，允许特定的域名或所有域名进行跨域请求。

在spring boot中可使用自己创建CorsFilter的bean实例的方式解决。

在项目config包中创建类CorsConfig，添加如下代码：

package com.lk.paopao.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.List;

/**
 * 配置类，用于设置跨域请求
 */
@Configuration
public class CorsConfig {

    /**
     * 创建并配置CorsFilter bean
     *
     * @return CorsFilter bean实例，用于处理跨域请求
     */
    @Bean
    public CorsFilter corsFilter() {
        // 创建URL基于的Cors配置源
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 创建Cors配置实例
        CorsConfiguration config = new CorsConfiguration();

        // 配置允许的源
        config.setAllowedOrigins(List.of("http://localhost"));
        // 配置允许的方法
        config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE"));
        // 配置允许的头部
        config.setAllowedHeaders(List.of("*"));
        // 允许凭据
        config.setAllowCredentials(true);

        // 在配置源中注册全局跨域配置
        source.registerCorsConfiguration("/**", config);
        // 返回CorsFilter实例
        return new CorsFilter(source);
    }
}

7.3 发布文章功能开发

7.3.1 API

7.3.2 实体类和Repository接口

7.3.3 Controller和service

7.3.4 实现统一包装回应数据

7.3 附件上传功能开发

7.3.1 API

7.3.2 实体类和Repository接口

7.3.3 Controller和service

7.4 文章相关功能开发

7.4.1 API设计

7.4.2 功能实现

文章查询、评论功能、点赞、收藏

7.4.3 DTO

7.4.4 lombok和mapstruct

7.5 部署