企业官网建设流程全解析

简介：这是一套面向高校计算机专业学生毕业设计与课程设计实践的Java Web绿色环保主题网站完整实现方案，聚焦环保资讯传播、知识普及与用户互动场景，助力开发者快速构建具备前后端交互能力的响应式Web应用。资源包共2000个文件，涵盖146个Java后端逻辑类、103个JSP页面、311个JavaScript交互脚本、240个CSS样式文件及849张PNG图片等，前端采用HTML5+Bootstrap+Pintuer框架，后端基于Java Servlet+JDBC架构，整体压缩包大小为37.32MB。已有146人学习下载，资源结构清晰，包含管理员与普通用户双角色权限体系，完整实现首页、环保资讯、环保课堂、低碳出行/绿色校园等多模块功能，并支持评论交互与培训信息填报。读者可直接部署运行，获取含数据库SQL、前后端源码、静态资源及典型环保内容填充的开箱即用项目，特别适合Java Web入门到进阶阶段的综合实训。

1. 项目概述：一个绿色环保主题的Web实践

最近在整理过往项目时，翻到了一个挺有意思的实践案例，一个基于Java后端和HTML5前端实现的绿色环保主题网站。这不仅仅是一个简单的“课程设计”或“期末作业”，它完整地走通了从需求分析、技术选型、前后端开发到部署演示的全流程。对于正在学习Java Web开发、或者想找一个完整项目来练手的朋友来说，这个案例里涉及的很多思路和踩过的“坑”，或许能给你一些直接的参考。这个项目核心要解决的是如何将环保理念通过一个直观、互动性强的网站呈现出来，同时保证技术栈的现代性和可维护性。下面，我就把这个项目的设计思路、实现细节以及一些实操心得，系统地梳理一遍。

2. 整体架构设计与技术选型考量

2.1 为什么选择 Java + HTML5 这套组合？

在项目启动时，技术选型是第一个要面对的问题。市面上有Python+Django、PHP+Laravel、Node.js+Express等多种组合，最终选择Java EE（现在常称Jakarta EE）配合HTML5，是基于以下几个现实的考量：

首先，生态的成熟与稳定是Java的绝对优势。对于企业级应用或需要长期维护的项目，Java庞大的社区、经过无数项目验证的框架（如Spring Boot）、以及丰富的第三方库，意味着你遇到的大部分问题都能找到成熟的解决方案。这对于“绿色环保网站”这类可能包含信息发布、用户互动、数据可视化等复合功能的项目来说，能极大地降低开发风险和后期维护成本。

其次，前后端分离的清晰界限。我们采用HTML5作为前端呈现技术，不仅仅是使用一些新的标签，更是拥抱了现代Web开发中“前端负责展示与交互，后端负责数据与业务逻辑”的架构思想。HTML5、CSS3和JavaScript（或基于其的框架如Vue.js、React）负责构建用户直接看到的界面，而Java后端则通过RESTful API提供纯净的数据接口。这种分离让团队协作更顺畅，也便于未来前端技术的升级换代。

再者，HTML5带来的原生能力。对于环保主题网站，我们可能希望展示空气质量地图、环保活动时间线、或者嵌入一些互动小游戏来宣传理念。HTML5的<canvas>、<svg>、<video>、<audio>标签以及Geolocation API等，为实现这些富媒体和交互功能提供了强大的原生支持，无需依赖Flash等过时插件。

注意：技术选型没有绝对的好坏，只有是否适合。如果你的项目追求极致的开发速度和个人全栈掌控，Node.js全栈可能更合适。但如果你所在团队Java背景深厚，或项目对稳定性、性能有较高要求，Java后端+HTML5前端的组合是一个非常稳妥且职业化的选择。

2.2 核心功能模块设计思路

一个主题网站不能只是静态页面的堆砌，需要围绕核心主题设计功能模块，让访客有看头、有互动、有收获。我们的绿色环保网站主要规划了以下几个模块：

1. 信息门户与新闻动态：这是网站的基础。用于发布最新的环保政策、行业资讯、环保科普文章等。需要实现文章的分类、标签、检索、分页展示，以及后台的内容管理（CRUD）。
2. 环保知识库/百科：系统性地整理环保相关知识点，如垃圾分类标准、碳足迹计算、可再生能源介绍等。这部分内容相对固定，结构清晰，适合用树形或目录式结构展示，方便用户查阅学习。
3. 互动社区或活动召集（可选但建议有）：增加用户粘性的关键。可以设计为论坛板块、活动报名系统或简单的留言评论功能。让关注环保的用户能够交流心得、发起或参与线下清洁、植树等活动。
4. 数据可视化展示：这是体现技术含量和网站特色的地方。例如，可以接入公开的空气质量API，用ECharts或D3.js在HTML5的Canvas上绘制实时空气质量指数（AQI）地图；或者用时间轴展示全球重要的环保里程碑事件。
5. 个人中心与碳积分系统（进阶功能）：为用户提供注册登录功能，并可以记录其环保行为（如线上学习、活动报名、模拟垃圾分类测试），赋予虚拟“碳积分”，形成简单的激励体系。

这个功能清单并非一成不变，你可以根据项目周期和资源进行裁剪。最小可行产品（MVP）可以只包含信息门户和知识库，确保核心内容展示完整。

3. 开发环境搭建与项目初始化

3.1 Java后端工程初始化（以Spring Boot为例）

现在Java Web开发，Spring Boot几乎是事实上的标准，它极大地简化了配置。我们使用它来快速搭建后端骨架。

1. 项目创建：最方便的方式是访问 start.spring.io （Spring Initializr）。根据你的需求选择：

   • Project: Maven Project (推荐，生态更广)
   • Language: Java
   • Spring Boot: 选择最新的稳定版（如3.x.x）
   • Project Metadata:
     • Group:com.greenweb(示例)
     • Artifact:green-website-backend
     • Packaging:Jar(现在更流行，便于部署)
   • Dependencies: 添加Spring Web(用于构建REST API)、Spring Data JPA(操作数据库)、MySQL Driver(或其他数据库驱动)、Lombok(简化实体类代码，可选但强烈推荐)。

2. 集成开发环境（IDE）：将生成的项目压缩包解压，用IntelliJ IDEA或Eclipse（需安装Spring Tools插件）打开。IDEA对Spring Boot的支持非常出色，能自动识别并加载项目。

3. 数据库配置：在src/main/resources/application.properties或application.yml中配置数据库连接。

   # application.properties 示例 spring.datasource.url=jdbc:mysql://localhost:3306/green_web_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=yourpassword spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver # JPA相关配置 spring.jpa.hibernate.ddl-auto=update # 开发环境可用update，生产环境务必改为validate或none spring.jpa.show-sql=true # 开发时显示SQL，便于调试 spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

   实操心得：关于spring.jpa.hibernate.ddl-auto，在开发初期用update可以让Hibernate自动根据你的实体类创建或更新表结构，非常方便。但一旦表结构基本稳定，尤其是在团队协作或生产环境，一定要改为validate（仅校验）或none（不操作），并通过数据库版本管理工具（如Flyway或Liquibase）来管理DDL变更，这是保证数据安全的基本职业素养。

3.2 前端工程结构与技术准备

前端我们采用纯粹的HTML5/CSS3/JavaScript技术栈，不引入重型框架以保持简洁，但会使用一些工具提升效率。

1. 目录结构规划：在前端项目根目录下（可以独立于后端项目，也可以放在后端项目的src/main/resources/static目录下），建议如下组织：

   /frontend ├── index.html # 首页 ├── css/ │ ├── style.css # 主样式 │ └── reset.css # 样式重置，保证浏览器一致性 ├── js/ │ ├── main.js # 主逻辑 │ ├── api.js # 封装所有与后端交互的API请求 │ └── charts/ # 存放数据可视化相关JS（如echarts.min.js） ├── lib/ # 存放第三方库，如jQuery, Bootstrap ├── images/ # 图片资源 └── pages/ # 其他页面，如news.html, knowledge.html

2. 基础工具与库：

   • 代码编辑器：VS Code是前端开发的首选，轻量且插件生态丰富。
   • 版本控制：立即使用Git进行版本管理。git init初始化仓库，并创建.gitignore文件忽略node_modules等无关文件。
   • 包管理器：虽然我们不用Node.js框架，但可以用npm或yarn来管理前端依赖，比如代码格式化工具、本地开发服务器等。初始化：npm init -y。
   • 基础库引入：
     • Bootstrap 5：通过CDN引入，快速构建响应式布局和基础UI组件，让你摆脱繁琐的CSS布局。
     • jQuery：可选。虽然现代原生JS能力很强，但jQuery在DOM操作和Ajax请求上依然简洁，适合快速开发。你也可以选择不引入，锻炼原生JS能力。
     • ECharts：一个强大的数据可视化库，通过简单的配置就能生成各种图表，非常适合展示环保数据。从官网下载或通过CDN引入。

4. 后端核心功能实现详解

4.1 数据模型设计与JPA实体映射

一切从数据开始。我们先设计核心的实体类，以“环保文章”为例。

// Article.java package com.greenweb.entity; import lombok.Data; import javax.persistence.*; import java.time.LocalDateTime; @Entity @Data // Lombok注解，自动生成getter, setter, toString等 @Table(name = "article") public class Article { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false, length = 200) private String title; // 文章标题 @Column(columnDefinition = "TEXT") private String summary; // 摘要 @Column(columnDefinition = "LONGTEXT") private String content; // 文章内容（富文本） @Column(name = "cover_image") private String coverImageUrl; // 封面图链接 @Column(name = "view_count") private Integer viewCount = 0; // 浏览量 @Column(name = "category_id") private Long categoryId; // 分类ID，关联分类表 @Column(name = "author_id") private Long authorId; // 作者ID，关联用户表 @Column(name = "publish_time") private LocalDateTime publishTime; // 发布时间 @Column(name = "create_time", updatable = false) private LocalDateTime createTime = LocalDateTime.now(); // 创建时间 @Column(name = "update_time") private LocalDateTime updateTime = LocalDateTime.now(); // 更新时间 // 在更新实体前自动设置updateTime @PreUpdate public void preUpdate() { this.updateTime = LocalDateTime.now(); } }

这个实体定义了文章的基本字段。@Data来自Lombok，极大减少了样板代码。@PreUpdate是一个生命周期回调，确保每次更新时updateTime自动刷新。

常见问题：如果你在IDEA中编译时遇到“java: 警告: 源发行版 17 需要目标发行版 17”或“java: You aren‘t using a compiler supported by lombok”这类错误。前者需要在IDEA的Project Structure（File->Project Structure）中确认Project和Modules的Language level都设置为17或你的JDK版本。后者通常是因为Lombok注解处理未启用，确保在IDEA中安装了Lombok插件，并在设置中勾选Build, Execution, Deployment->Compiler->Annotation Processors->Enable annotation processing。

4.2 构建RESTful API控制器

实体有了，接下来创建Repository和Controller来暴露API。

// ArticleRepository.java - 数据访问层 package com.greenweb.repository; import com.greenweb.entity.Article; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; @Repository public interface ArticleRepository extends JpaRepository<Article, Long> { // 根据分类分页查询 Page<Article> findByCategoryId(Long categoryId, Pageable pageable); // 根据标题关键词模糊查询 Page<Article> findByTitleContaining(String keyword, Pageable pageable); }

Spring Data JPA的强大之处在于，你只需按规则定义方法名，它就能自动实现查询逻辑。

// ArticleController.java - 表现层 package com.greenweb.controller; import com.greenweb.entity.Article; import com.greenweb.service.ArticleService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api/articles") @CrossOrigin(origins = "*") // 允许跨域，方便前端独立开发调试 public class ArticleController { @Autowired private ArticleService articleService; // 获取文章分页列表 @GetMapping public ResponseEntity<Map<String, Object>> getArticles( @RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(required = false) Long categoryId, @RequestParam(required = false) String keyword) { Page<Article> articlePage = articleService.getArticles(page, size, categoryId, keyword); Map<String, Object> response = new HashMap<>(); response.put("articles", articlePage.getContent()); response.put("currentPage", articlePage.getNumber()); response.put("totalItems", articlePage.getTotalElements()); response.put("totalPages", articlePage.getTotalPages()); return ResponseEntity.ok(response); } // 根据ID获取单篇文章详情 @GetMapping("/{id}") public ResponseEntity<Article> getArticleById(@PathVariable Long id) { return articleService.getArticleById(id) .map(ResponseEntity::ok) .orElse(ResponseEntity.notFound().build()); } // 创建新文章 (需要权限校验，此处简化) @PostMapping public ResponseEntity<Article> createArticle(@RequestBody Article article) { Article savedArticle = articleService.saveArticle(article); return ResponseEntity.ok(savedArticle); } }

这里我们创建了三个基础的API：分页列表查询、单篇详情获取、文章创建。@CrossOrigin注解在开发阶段解决前端跨域问题非常方便，但在生产环境应通过网关或Nginx进行更精确的配置。

4.3 服务层与业务逻辑封装

在ArticleService中，我们封装具体的业务逻辑，这是保持Controller简洁、逻辑清晰的关键。

// ArticleService.java package com.greenweb.service; import com.greenweb.entity.Article; import com.greenweb.repository.ArticleRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.stereotype.Service; import java.util.Optional; @Service public class ArticleService { @Autowired private ArticleRepository articleRepository; public Page<Article> getArticles(int page, int size, Long categoryId, String keyword) { Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "publishTime")); if (categoryId != null) { return articleRepository.findByCategoryId(categoryId, pageable); } else if (keyword != null && !keyword.trim().isEmpty()) { return articleRepository.findByTitleContaining(keyword.trim(), pageable); } else { return articleRepository.findAll(pageable); } } public Optional<Article> getArticleById(Long id) { // 每次获取详情，浏览量+1 Optional<Article> optionalArticle = articleRepository.findById(id); optionalArticle.ifPresent(article -> { article.setViewCount(article.getViewCount() + 1); articleRepository.save(article); }); return optionalArticle; } public Article saveArticle(Article article) { // 这里可以添加一些业务逻辑，比如设置默认作者、状态等 if (article.getPublishTime() == null) { article.setPublishTime(java.time.LocalDateTime.now()); } return articleRepository.save(article); } }

在getArticleById方法中，我们巧妙地实现了浏览量的递增，这是一个典型的“在服务层处理附加业务逻辑”的例子。

5. 前端页面开发与交互实现

5.1 响应式首页布局与HTML5结构

首页(index.html)是门面，我们利用HTML5语义化标签和Bootstrap栅格系统来构建。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绿色家园 - 环保公益网站</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 自定义CSS --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 使用HTML5语义化标签 --> <header class="container-fluid bg-success text-white py-3"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand fs-3 fw-bold" href="index.html">🌍 绿色家园</a> <button class="navbar-toggler" type="button">// api.js const API_BASE_URL = 'http://localhost:8080/api'; // 后端API基础地址 /** * 通用的GET请求函数 * @param {string} endpoint - API端点，如 '/articles' * @param {Object} params - 查询参数对象 * @returns {Promise} 返回解析后的JSON数据 */ async function fetchGet(endpoint, params = {}) { const queryString = new URLSearchParams(params).toString(); const url = queryString ? `${API_BASE_URL}${endpoint}?${queryString}` : `${API_BASE_URL}${endpoint}`; try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('Fetch GET error:', error); // 这里可以统一处理错误，例如显示一个用户友好的提示 showToast('网络请求失败，请稍后重试', 'danger'); throw error; // 将错误继续向上抛出 } } /** * 通用的POST请求函数 * @param {string} endpoint - API端点 * @param {Object} data - 要发送的数据对象 * @returns {Promise} 返回解析后的JSON数据 */ async function fetchPost(endpoint, data) { try { const response = await fetch(`${API_BASE_URL}${endpoint}`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('Fetch POST error:', error); showToast('提交失败，请检查网络或数据', 'danger'); throw error; } } // 示例：专门获取文章列表的函数 async function fetchArticles(page = 0, size = 6, categoryId = null, keyword = null) { const params = { page, size }; if (categoryId) params.categoryId = categoryId; if (keyword) params.keyword = keyword; return await fetchGet('/articles', params); }

封装的好处是，所有请求的逻辑、错误处理、基础URL配置都集中在一处，维护起来非常方便。showToast是一个假设存在的用于显示提示的函数。

5.3 首页新闻列表的动态渲染

在main.js中，我们使用封装好的API来获取数据并动态更新页面。

// main.js document.addEventListener('DOMContentLoaded', function() { // 1. 加载最新文章 loadLatestNews(); // 2. 初始化空气质量图表 initAqiChart(); }); async function loadLatestNews() { const container = document.getElementById('news-container'); if (!container) return; try { const data = await fetchArticles(0, 3); // 获取第一页，3条数据 const articles = data.articles; if (!articles || articles.length === 0) { container.innerHTML = '<p class="text-muted">暂无最新动态。</p>'; return; } let html = ''; articles.forEach(article => { html += ` <div class="card h-100 shadow-sm"> <img src="${article.coverImageUrl || 'images/default-cover.jpg'}" class="card-img-top" alt="${article.title}" style="height: 180px; object-fit: cover;"> <div class="card-body d-flex flex-column"> <h5 class="card-title text-truncate">${article.title}</h5> <p class="card-text flex-grow-1">${article.summary || article.content.substring(0, 60) + '...'}</p> <div class="mt-auto d-flex justify-content-between align-items-center"> <small class="text-muted">${new Date(article.publishTime).toLocaleDateString()}</small> <a href="pages/news-detail.html?id=${article.id}" class="btn btn-outline-success btn-sm"></a> </div> </div> </div> `; }); // 使用Bootstrap栅格包裹每个卡片 container.innerHTML = `<div class="row g-4">${html}</div>`; } catch (error) { container.innerHTML = '<p class="text-danger">动态加载失败，请刷新页面。</p>'; } }

这段代码在页面加载完成后执行，从后端获取最新的3篇文章，然后动态生成HTML卡片并插入到预留的news-container中。注意我们对图片、摘要做了简单的容错处理。

5.4 使用ECharts实现数据可视化

数据可视化是环保网站的一大亮点。我们使用ECharts来绘制一个模拟的空气质量指数图表。

// main.js (续) async function initAqiChart() { const chartDom = document.getElementById('aqi-chart'); if (!chartDom) return; // 初始化ECharts实例 const myChart = echarts.init(chartDom); // 模拟数据 - 实际项目中应从后端API获取 const mockData = { cities: ['北京', '上海', '广州', '成都', '西安', '杭州'], aqi: [85, 62, 45, 78, 110, 58] // 模拟AQI值 }; // 根据AQI值确定颜色和等级 function getAqiLevelAndColor(value) { if (value <= 50) return { level: '优', color: '#95e637' }; else if (value <= 100) return { level: '良', color: '#ffde33' }; else if (value <= 150) return { level: '轻度污染', color: '#ff9933' }; else if (value <= 200) return { level: '中度污染', color: '#cc0033' }; else if (value <= 300) return { level: '重度污染', color: '#660099' }; else return { level: '严重污染', color: '#7e0023' }; } const aqiInfo = mockData.aqi.map(v => getAqiLevelAndColor(v)); // 配置项 const option = { title: { text: '主要城市实时AQI', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function(params) { const data = params[0]; const info = getAqiLevelAndColor(data.value); return `${data.name}<br/>AQI: ${data.value} (${info.level})`; } }, xAxis: { type: 'category', data: mockData.cities, axisLabel: { rotate: 45 } // 城市名倾斜显示 }, yAxis: { type: 'value', name: 'AQI指数', max: 150 // 设定Y轴最大值，使图表更直观 }, series: [ { name: 'AQI', type: 'bar', data: mockData.aqi.map((value, index) => ({ value: value, itemStyle: { color: aqiInfo[index].color } })), label: { show: true, position: 'top', formatter: '{c}' } } ], // 响应式配置 responsive: true }; // 使用配置项和数据显示图表 myChart.setOption(option); // 监听窗口变化，重绘图表 window.addEventListener('resize', function() { myChart.resize(); }); // 实际项目中，这里可以设置一个定时器，定期从后端获取最新数据并更新图表 // setInterval(updateChartData, 60000); // 每分钟更新一次 } // 模拟更新图表数据的函数 async function updateChartData() { // 实际应调用后端API，例如：const realData = await fetchGet('/api/aqi/latest'); // 然后 myChart.setOption({ series: [{ data: newData }] }); console.log('更新图表数据...'); }

这个示例创建了一个简单的柱状图，X轴是城市，Y轴是AQI值，并且根据AQI值的高低用不同颜色区分污染等级。ECharts的配置非常灵活，你可以轻松地将其改为折线图、地图或更复杂的可视化形式。

6. 项目部署与演示准备

6.1 后端应用打包与运行

开发完成后，我们需要将Spring Boot应用打包成可执行的JAR文件。

1. 打包：在项目根目录（包含pom.xml的目录）下，运行Maven命令：

   mvn clean package -DskipTests

   这会在target目录下生成一个名为green-website-backend-0.0.1-SNAPSHOT.jar的文件（具体名字取决于你的pom.xml配置）。

2. 运行：确保你的MySQL数据库服务已经启动，并且application.properties中的连接配置正确（生产环境建议将配置外置）。然后运行：

   java -jar target/green-website-backend-0.0.1-SNAPSHOT.jar

   如果看到Spring Boot的启动日志，并且没有报错，说明后端服务已经成功运行在http://localhost:8080。

   踩坑记录：在生产环境部署时，可能会遇到“Java: OutOfMemoryError: insufficient memory”错误。这通常是因为JVM堆内存设置不足。可以通过-Xmx参数来调整，例如：java -Xmx512m -jar your-app.jar将最大堆内存设置为512MB。具体大小需要根据服务器物理内存和应用实际消耗来调整。

6.2 前端静态资源部署

前端部分是一堆静态文件（HTML, CSS, JS, 图片）。你有几种部署选择：

1. 与后端集成（简单演示）：将前端构建好的所有文件（index.html,css/,js/,images/等）复制到Spring Boot项目的src/main/resources/static目录下。然后重新打包运行。这样访问http://localhost:8080就会直接显示index.html。这是最简单的全栈演示方式。

2. 独立部署（生产推荐）：将前端文件部署到专门的静态文件服务器或对象存储（如Nginx, Apache, 或云服务的OSS/CDN）。此时，前端页面中的API_BASE_URL需要修改为后端公网可访问的地址（如http://your-api-domain.com/api）。同时，后端需要配置CORS（跨域资源共享）以允许这个前端域名访问。在Spring Boot中，可以在配置类中全局配置：

   @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("https://your-frontend-domain.com") // 指定前端域名 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true); // 如果需要传递Cookie等凭证 } }

6.3 演示要点与优化建议

在向他人演示这个项目时，除了基本的功能操作，可以重点展示以下几点，体现你的思考深度：

1. 响应式设计：缩放浏览器窗口，展示网站在手机、平板、电脑上的自适应布局效果。
2. 前后端分离：打开浏览器的开发者工具（F12），切换到“网络(Network)”标签，操作网站时，让观众看到浏览器在向后端发起Fetch/XHR请求并接收JSON数据。
3. 数据可视化交互：展示ECharts图表，可以强调它是通过JavaScript动态生成的，并且可以模拟“数据更新”的效果。
4. 代码结构：简要展示后端的Controller、Service、Repository分层，以及前端的模块化JS文件，说明这样设计的好处（可维护、可测试）。
5. 数据库操作：演示一下后台添加一篇新文章，然后前端列表立刻刷新的完整数据流。

优化建议：

• 引入前端构建工具：对于更复杂的前端，可以使用Webpack或Vite来管理依赖、打包压缩代码、处理CSS预处理器等。
• 添加用户认证：使用Spring Security实现简单的登录注册功能，保护文章发布等管理接口。
• 富文本编辑器：在文章发布页面集成如wangEditor或Quill等富文本编辑器，提升内容编辑体验。
• SEO优化：为动态加载的内容考虑服务端渲染（SSR）或静态化，或至少使用<meta>标签和语义化HTML来改善搜索引擎收录。

这个项目麻雀虽小，五脏俱全。它串联起了Java Web后端开发、现代HTML5前端技术、RESTful API设计、数据可视化以及基本的项目部署，是一个非常好的全栈实践入门案例。在实际开发中，每一个环节都可以根据需求和团队能力进行深化和扩展。希望这个详细的拆解能为你自己的项目实践提供一条清晰的路径。

本文还有配套的精品资源，点击获取