admin/my-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fullstack): 接入 MySQL 8.0 持久化与 Spring Boot 3 分层企业级架构，支持文章与评论完整 CRUD

Browse Source
This commit is contained in:
admin
2026-10-22 15:29:11 +08:00
parent 3c00b65c08
commit 572c23b60f
23 changed files with 1111 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/pom.xml
+13
View File
@@ -19,6 +19,19 @@
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
backend/src/main/java/com/example/blog/BlogApplication.java
-221
View File
@@ -2,231 +2,10 @@ package com.example.blog;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.*;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.*;
import java.util.concurrent.CopyOnWriteArrayList;
import java.util.stream.Collectors;
@SpringBootApplication
@RestController
@CrossOrigin(origins = "*")
@RequestMapping("/api")
public class BlogApplication {
public static class Post {
private String id;
private String title;
private String summary;
private String content;
private String author;
private String date;
private String category;
private List<String> tags;
private String readTime;
private int views;
private int likes;
public Post() {}
public Post(String id, String title, String summary, String content, String author,
String date, String category, List<String> tags, String readTime, int views, int likes) {
this.id = id;
this.title = title;
this.summary = summary;
this.content = content;
this.author = author;
this.date = date;
this.category = category;
this.tags = tags;
this.readTime = readTime;
this.views = views;
this.likes = likes;
}
public String getId() { return id; }
public void setId(String id) { this.id = id; }
public String getTitle() { return title; }
public void setTitle(String title) { this.title = title; }
public String getSummary() { return summary; }
public void setSummary(String summary) { this.summary = summary; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public String getAuthor() { return author; }
public void setAuthor(String author) { this.author = author; }
public String getDate() { return date; }
public void setDate(String date) { this.date = date; }
public String getCategory() { return category; }
public void setCategory(String category) { this.category = category; }
public List<String> getTags() { return tags; }
public void setTags(List<String> tags) { this.tags = tags; }
public String getReadTime() { return readTime; }
public void setReadTime(String readTime) { this.readTime = readTime; }
public int getViews() { return views; }
public void setViews(int views) { this.views = views; }
public int getLikes() { return likes; }
public void setLikes(int likes) { this.likes = likes; }
}
private static final List<Post> POSTS = new CopyOnWriteArrayList<>();
static {
POSTS.add(new Post(
"1",
"云原生实践：在 Google Cloud 台湾节点搭建高性能 Ubuntu 与 1Panel",
"本文记录了如何通过 GCP 赠金在亚洲低延迟机房部署 4核16G 高性能云服务器，并使用现代化容器面板 1Panel 进行运维管理实录。",
"# 云原生实践：在 Google Cloud 台湾节点搭建高性能服务器\n\n" +
"在挑选云服务器的过程中，综合对比了各大厂商的免费策略与性能表现，最终选择了 **Google Cloud 台湾节点 (`asia-east1`)**。\n\n" +
"## 核心硬件与网络配置\n\n" +
"- **规格**：`e2-standard-4`（4 vCPU，16 GB 内存）\n" +
"- **系统**：Ubuntu 22.04 LTS (x86_64)\n" +
"- **延迟**：到中国大陆仅 30~50ms，操作极为丝滑。\n\n" +
"## 为什么采用 1Panel 面板？\n\n" +
"相比传统臃肿的面料，1Panel 深度拥抱 **Docker 容器化**，所有应用（MySQL、OpenResty、Gitea）完全容器隔离，真正做到“环境随用随建，数据挂载持久化”。\n\n" +
"```bash\n# 快速检查 Docker 运行状态\ndocker ps --format \"table {{.Names}}\\t{{.Status}}\\t{{.Ports}}\"\n```\n\n" +
"> 💡 **运维心得**：永远在云平台控制台统一放行防火墙端口，切勿盲目在系统内部启用 UFW，避免失联风险。",
"旺总",
"2026-10-22",
"云原生 & Linux",
Arrays.asList("GCP", "Ubuntu", "1Panel", "Linux"),
"4 min",
528,
42
));
POSTS.add(new Post(
"2",
"探索本地大模型：从 Ollama 运行 DeepSeek R1 到 CPU 推理性能调优",
"深度解析在纯 CPU 服务器上运行 DeepSeek R1 和通义千问 2.5 的真实表现，揭开 2050 Token 预填充延迟背后的机制。",
"# 探索本地大模型：从 Ollama 到 Open WebUI 性能调优实战\n\n" +
"近期 DeepSeek R1 推理思考模型火遍全球，我们在 4核16G 的服务器上进行了本地大模型的全链路压测。\n\n" +
"## 1. 架构搭建\n\n" +
"- **模型发动机**：`Ollama` 容器\n" +
"- **交互界面**：`Open WebUI` 容器\n" +
"- **网络通信**：通过 Docker 网关 `http://172.17.0.1:11434` 极速直连\n\n" +
"## 2. 性能排查与调优秘籍\n\n" +
"测试过程中遇到了“每次提问卡顿 50 秒”的问题，经过 `top` 分析和指标剖析：\n\n" +
"1. **解除容器 CPU 配额**：确保 4 线程全开（`eval rate` 提升至 14 tokens/s）；\n" +
"2. **内存永久常驻**：注入 `OLLAMA_KEEP_ALIVE=-1`，避免 5 分钟超时后重新读盘；\n" +
"3. **清空全局默认 Prompt**：消除了默认附带的 2050 历史 Token，读题耗时从 60s 骤降至 0.2s！\n\n" +
"```bash\n# 测试模型运行性能\ndocker exec -it 1Panel-ollama-nzre ollama run qwen2.5:1.5b --verbose\n```\n\n" +
"> 纯 CPU 跑 7B 参数是物理带宽瓶颈，日常开发推荐搭配 1.5B~3B 模型，速度与逻辑达到最佳平衡！",
"旺总",
"2026-10-22",
"AI & 本地模型",
Arrays.asList("DeepSeek", "Ollama", "OpenWebUI", "性能调优"),
"6 min",
892,
68
));
POSTS.add(new Post(
"3",
"全栈工程师实战：Spring Boot 3 + Vue 3 博客与 Gitea CI/CD 自动化流水线",
"从零手写前后端分离架构，配合私有 Gitea 仓库与自动化部署脚本，实现 push 代码后全自动打包上线。",
"# 全栈工程化实践：Spring Boot 3 + Vue 3 + CI/CD 自动化\n\n" +
"现代化开发的精髓在于**“把重复劳动交给自动化”**。我们搭建了一套小而美但功能极其完备的企业级全栈流水线。\n\n" +
"## 全栈架构一览\n\n" +
"```text\n[开发者本地 IDEA] ──git push──▶ [私有 Gitea 仓库]\n │\n (Webhook 触发流水线)\n ▼\n [deploy.sh 自动化脚本]\n │\n ┌─────────────┴─────────────┐\n ▼ ▼\n [Spring Boot 3 容器] [Nginx 静态反代容器]\n```\n\n" +
"## Nginx 反向代理配置关键点\n\n" +
"前端容器中通过反代 `/api/` 到后端服务容器，天然解决跨域和外部端口分散问题：\n\n" +
"```nginx\nlocation /api/ {\n proxy_pass http://backend:8080/api/;\n proxy_set_header Host $host;\n}\n```\n\n" +
"从此，改完代码只需一条 `git push`，剩下的事情交给服务器自动化即可！",
"旺总",
"2026-10-22",
"全栈开发 & CI/CD",
Arrays.asList("Spring Boot", "Vue 3", "CI/CD", "Docker Compose"),
"5 min",
641,
55
));
}
@GetMapping("/posts")
public List<Post> getPosts(
@RequestParam(required = false) String category,
@RequestParam(required = false) String search) {
return POSTS.stream()
.filter(p -> category == null || category.isEmpty() || category.equalsIgnoreCase("all") || p.getCategory().equalsIgnoreCase(category))
.filter(p -> search == null || search.isEmpty() ||
p.getTitle().toLowerCase().contains(search.toLowerCase()) ||
p.getSummary().toLowerCase().contains(search.toLowerCase()))
.collect(Collectors.toList());
}
@GetMapping("/posts/{id}")
public Post getPost(@PathVariable String id) {
return POSTS.stream()
.filter(p -> p.getId().equals(id))
.findFirst()
.map(p -> {
p.setViews(p.getViews() + 1);
return p;
})
.orElse(null);
}
@PostMapping("/posts")
public Post addPost(@RequestBody Post post) {
String newId = String.valueOf(POSTS.size() + 1);
post.setId(newId);
if (post.getDate() == null || post.getDate().isEmpty()) {
post.setDate(LocalDate.now().format(DateTimeFormatter.ISO_LOCAL_DATE));
}
if (post.getAuthor() == null || post.getAuthor().isEmpty()) {
post.setAuthor("旺总");
}
if (post.getCategory() == null || post.getCategory().isEmpty()) {
post.setCategory("技术杂谈");
}
if (post.getReadTime() == null || post.getReadTime().isEmpty()) {
post.setReadTime("3 min");
}
if (post.getTags() == null || post.getTags().isEmpty()) {
post.setTags(Collections.singletonList(post.getCategory()));
}
post.setViews(1);
post.setLikes(0);
POSTS.add(0, post);
return post;
}
@PostMapping("/posts/{id}/like")
public Map<String, Object> likePost(@PathVariable String id) {
Map<String, Object> res = new HashMap<>();
for (Post p : POSTS) {
if (p.getId().equals(id)) {
p.setLikes(p.getLikes() + 1);
res.put("success", true);
res.put("likes", p.getLikes());
return res;
}
}
res.put("success", false);
return res;
}
@DeleteMapping("/posts/{id}")
public Map<String, Object> deletePost(@PathVariable String id) {
boolean removed = POSTS.removeIf(p -> p.getId().equals(id));
Map<String, Object> res = new HashMap<>();
res.put("success", removed);
return res;
}
@GetMapping("/stats")
public Map<String, Object> getStats() {
Map<String, Object> stats = new HashMap<>();
stats.put("totalPosts", POSTS.size());
stats.put("totalViews", POSTS.stream().mapToInt(Post::getViews).sum());
stats.put("totalLikes", POSTS.stream().mapToInt(Post::getLikes).sum());
Set<String> categories = POSTS.stream().map(Post::getCategory).collect(Collectors.toSet());
stats.put("categoriesCount", categories.size());
return stats;
}
public static void main(String[] args) {
SpringApplication.run(BlogApplication.class, args);
}
backend/src/main/java/com/example/blog/common/GlobalExceptionHandler.java
+16
View File
@@ -0,0 +1,16 @@
package com.example.blog.common;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@RestControllerAdvice
public class GlobalExceptionHandler {
@ExceptionHandler(Exception.class)
@ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
public Result<Void> handleException(Exception e) {
return Result.error(e.getMessage() != null ? e.getMessage() : "服务器内部错误");
}
}
backend/src/main/java/com/example/blog/common/Result.java
+38
View File
@@ -0,0 +1,38 @@
package com.example.blog.common;
public class Result<T> {
private int code;
private String message;
private T data;
public Result() {}
public Result(int code, String message, T data) {
this.code = code;
this.message = message;
this.data = data;
}
public static <T> Result<T> success(T data) {
return new Result<>(200, "操作成功", data);
}
public static <T> Result<T> success() {
return new Result<>(200, "操作成功", null);
}
public static <T> Result<T> error(String message) {
return new Result<>(500, message, null);
}
public static <T> Result<T> error(int code, String message) {
return new Result<>(code, message, null);
}
public int getCode() { return code; }
public void setCode(int code) { this.code = code; }
public String getMessage() { return message; }
public void setMessage(String message) { this.message = message; }
public T getData() { return data; }
public void setData(T data) { this.data = data; }
}
backend/src/main/java/com/example/blog/config/DataInitializer.java
+103
View File
@@ -0,0 +1,103 @@
package com.example.blog.config;
import com.example.blog.entity.Category;
import com.example.blog.entity.Post;
import com.example.blog.repository.CategoryRepository;
import com.example.blog.repository.PostRepository;
import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;
import java.util.Arrays;
import java.util.List;
@Component
public class DataInitializer implements CommandLineRunner {
private final PostRepository postRepository;
private final CategoryRepository categoryRepository;
public DataInitializer(PostRepository postRepository, CategoryRepository categoryRepository) {
this.postRepository = postRepository;
this.categoryRepository = categoryRepository;
}
@Override
public void run(String... args) {
// 1. 初始化分类
if (categoryRepository.count() == 0) {
List<Category> categories = Arrays.asList(
new Category("云原生 & Linux", "容器化编排、GCP/云服务器运维、系统调优与网络配置实战"),
new Category("Java & Spring Boot", "Spring Boot 3 微服务架构、JPA 数据库持久化与后端工程规范"),
new Category("AI & 本地模型", "Ollama 本地大模型部署、DeepSeek R1 性能压测与应用集成"),
new Category("全栈开发 & CI/CD", "前后端分离架构、Gitea Actions 自动化流水线交付")
);
categoryRepository.saveAll(categories);
}
// 2. 初始化预置文章
if (postRepository.count() == 0) {
Post p1 = new Post();
p1.setTitle("云原生实践：在 Google Cloud 台湾节点搭建高性能 Ubuntu 与 1Panel");
p1.setSummary("本文记录了如何通过 GCP 赠金在亚洲低延迟机房部署 4核16G 高性能云服务器，并使用现代化容器面板 1Panel 进行运维管理实录。");
p1.setContent("# 云原生实践：在 Google Cloud 台湾节点搭建高性能服务器\n\n" +
"在挑选云服务器的过程中，综合对比了各大厂商的免费策略与性能表现，最终选择了 **Google Cloud 台湾节点 (`asia-east1`)**。\n\n" +
"## 核心硬件与网络配置\n" +
"- **规格**：`e2-standard-4`（4 vCPU，16 GB 内存）\n" +
"- **系统**：Ubuntu 22.04 LTS (x86_64)\n" +
"- **延迟**：到中国大陆仅 30~50ms，操作极为丝滑。\n\n" +
"## 为什么采用 1Panel 面板？\n" +
"相比传统臃肿的面料，1Panel 深度拥抱 **Docker 容器化**，所有应用（MySQL、OpenResty、Gitea）完全容器隔离，真正做到“环境随用随建，数据挂载持久化”。\n\n" +
"```bash\n# 快速检查 Docker 运行状态\ndocker ps --format \"table {{.Names}}\\t{{.Status}}\\t{{.Ports}}\"\n```\n\n" +
"> 💡 **运维心得**：永远在云平台控制台统一放行防火墙端口，切勿盲目在系统内部启用 UFW，避免失联风险。");
p1.setAuthor("旺总");
p1.setCategoryName("云原生 & Linux");
p1.setTags("GCP,Ubuntu,1Panel,Linux");
p1.setReadTime("4 min");
p1.setViews(682);
p1.setLikes(58);
Post p2 = new Post();
p2.setTitle("探索本地大模型：从 Ollama 运行 DeepSeek R1 到 CPU 推理性能调优");
p2.setSummary("深度解析在纯 CPU 服务器上运行 DeepSeek R1 和通义千问 2.5 的真实表现，揭开 2050 Token 预填充延迟背后的机制。");
p2.setContent("# 探索本地大模型：从 Ollama 到 Open WebUI 性能调优实战\n\n" +
"近期 DeepSeek R1 推理思考模型火遍全球，我们在 4核16G 的服务器上进行了本地大模型的全链路压测。\n\n" +
"## 1. 架构搭建\n" +
"- **模型发动机**：`Ollama` 容器\n" +
"- **交互界面**：`Open WebUI` 容器\n" +
"- **网络通信**：通过 Docker 网关 `http://172.17.0.1:11434` 极速直连\n\n" +
"## 2. 性能排查与调优秘籍\n" +
"测试过程中遇到了“每次提问卡顿 50 秒”的问题，经过 `top` 分析和指标剖析：\n" +
"1. **解除容器 CPU 配额**：确保 4 线程全开（`eval rate` 提升至 14 tokens/s）；\n" +
"2. **内存永久常驻**：注入 `OLLAMA_KEEP_ALIVE=-1`，避免 5 分钟超时后重新读盘；\n" +
"3. **清空全局默认 Prompt**：消除了默认附带的 2050 历史 Token，读题耗时从 60s 骤降至 0.2s！\n\n" +
"```bash\n# 测试模型运行性能\ndocker exec -it 1Panel-ollama-nzre ollama run qwen2.5:1.5b --verbose\n```\n\n" +
"> 纯 CPU 跑 7B 参数是物理带宽瓶颈，日常开发推荐搭配 1.5B~3B 模型，速度与逻辑达到最佳平衡！");
p2.setAuthor("旺总");
p2.setCategoryName("AI & 本地模型");
p2.setTags("DeepSeek,Ollama,OpenWebUI,性能调优");
p2.setReadTime("6 min");
p2.setViews(1048);
p2.setLikes(96);
Post p3 = new Post();
p3.setTitle("全栈工程师实战：Spring Boot 3 + MySQL 8.0 持久化与 Gitea CI/CD 自动化交付");
p3.setSummary("从零构建工业级 Spring Boot 3 分层架构，结合 MySQL 8.0 数据库持久化存储与私有 Gitea Actions 自动化流水线。");
p3.setContent("# 全栈工程化实践：Spring Boot 3 + MySQL 8.0 + CI/CD 自动化\n\n" +
"现代化开发的精髓在于**“把数据交给专业数据库持久化，把重复劳动交给自动化流水线”**。\n\n" +
"## 全栈架构一览\n" +
"```text\n[开发者本地 IDEA] ──git push──▶ [私有 Gitea 仓库]\n │\n (Gitea Actions 触发流水线)\n ▼\n [Docker Compose 全栈构建]\n │\n ┌───────────────────────────┼───────────────────────────┐\n ▼ ▼ ▼\n [MySQL 8.0 容器] [Spring Boot 3 容器] [Nginx 静态反代容器]\n```\n\n" +
"## 数据持久化规范\n" +
"- 数据文件挂载至命名卷 `mysql_data`，容器重启或重建数据零丢失；\n" +
"- Spring Data JPA 实现对象关系映射，自动完成数据库结构维护；\n" +
"- 统一 RESTful API 与响应封装，全栈开发得心应手！");
p3.setAuthor("旺总");
p3.setCategoryName("全栈开发 & CI/CD");
p3.setTags("Spring Boot,MySQL,JPA,CI/CD");
p3.setReadTime("5 min");
p3.setViews(815);
p3.setLikes(72);
postRepository.saveAll(Arrays.asList(p1, p2, p3));
}
}
}
backend/src/main/java/com/example/blog/controller/CategoryController.java
+33
View File
@@ -0,0 +1,33 @@
package com.example.blog.controller;
import com.example.blog.common.Result;
import com.example.blog.entity.Category;
import com.example.blog.repository.CategoryRepository;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/categories")
@CrossOrigin(origins = "*")
public class CategoryController {
private final CategoryRepository categoryRepository;
public CategoryController(CategoryRepository categoryRepository) {
this.categoryRepository = categoryRepository;
}
@GetMapping
public Result<List<Category>> listCategories() {
return Result.success(categoryRepository.findAll());
}
@PostMapping
public Result<Category> createCategory(@RequestBody Category category) {
if (category.getName() == null || category.getName().trim().isEmpty()) {
throw new IllegalArgumentException("分类名称不能为空");
}
return Result.success(categoryRepository.save(category));
}
}
backend/src/main/java/com/example/blog/controller/CommentController.java
+30
View File
@@ -0,0 +1,30 @@
package com.example.blog.controller;
import com.example.blog.common.Result;
import com.example.blog.entity.Comment;
import com.example.blog.service.CommentService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/posts/{postId}/comments")
@CrossOrigin(origins = "*")
public class CommentController {
private final CommentService commentService;
public CommentController(CommentService commentService) {
this.commentService = commentService;
}
@GetMapping
public Result<List<Comment>> getComments(@PathVariable Long postId) {
return Result.success(commentService.getCommentsByPostId(postId));
}
@PostMapping
public Result<Comment> addComment(@PathVariable Long postId, @RequestBody Comment comment) {
return Result.success(commentService.addComment(postId, comment));
}
}
backend/src/main/java/com/example/blog/controller/PostController.java
+53
View File
@@ -0,0 +1,53 @@
package com.example.blog.controller;
import com.example.blog.common.Result;
import com.example.blog.entity.Post;
import com.example.blog.service.PostService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/posts")
@CrossOrigin(origins = "*")
public class PostController {
private final PostService postService;
public PostController(PostService postService) {
this.postService = postService;
}
@GetMapping
public Result<List<Post>> listPosts(
@RequestParam(required = false) String category,
@RequestParam(required = false) String search) {
return Result.success(postService.listPosts(category, search));
}
@GetMapping("/{id}")
public Result<Post> getPost(@PathVariable Long id) {
return Result.success(postService.getPostById(id));
}
@PostMapping
public Result<Post> createPost(@RequestBody Post post) {
return Result.success(postService.createPost(post));
}
@PutMapping("/{id}")
public Result<Post> updatePost(@PathVariable Long id, @RequestBody Post post) {
return Result.success(postService.updatePost(id, post));
}
@DeleteMapping("/{id}")
public Result<Void> deletePost(@PathVariable Long id) {
postService.deletePost(id);
return Result.success();
}
@PostMapping("/{id}/like")
public Result<Integer> likePost(@PathVariable Long id) {
return Result.success(postService.likePost(id));
}
}
backend/src/main/java/com/example/blog/controller/StatsController.java
+24
View File
@@ -0,0 +1,24 @@
package com.example.blog.controller;
import com.example.blog.common.Result;
import com.example.blog.service.PostService;
import org.springframework.web.bind.annotation.*;
import java.util.Map;
@RestController
@RequestMapping("/api/stats")
@CrossOrigin(origins = "*")
public class StatsController {
private final PostService postService;
public StatsController(PostService postService) {
this.postService = postService;
}
@GetMapping
public Result<Map<String, Object>> getStats() {
return Result.success(postService.getBlogStats());
}
}
backend/src/main/java/com/example/blog/entity/Category.java
+43
View File
@@ -0,0 +1,43 @@
package com.example.blog.entity;
import jakarta.persistence.*;
import java.time.LocalDateTime;
@Entity
@Table(name = "category")
public class Category {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, unique = true, length = 50)
private String name;
@Column(length = 255)
private String description;
@Column(name = "created_at", updatable = false)
private LocalDateTime createdAt;
@PrePersist
public void prePersist() {
if (createdAt == null) createdAt = LocalDateTime.now();
}
public Category() {}
public Category(String name, String description) {
this.name = name;
this.description = description;
}
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getDescription() { return description; }
public void setDescription(String description) { this.description = description; }
public LocalDateTime getCreatedAt() { return createdAt; }
public void setCreatedAt(LocalDateTime createdAt) { this.createdAt = createdAt; }
}
backend/src/main/java/com/example/blog/entity/Comment.java
+50
View File
@@ -0,0 +1,50 @@
package com.example.blog.entity;
import jakarta.persistence.*;
import java.time.LocalDateTime;
@Entity
@Table(name = "comment")
public class Comment {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "post_id", nullable = false)
private Long postId;
@Column(nullable = false, length = 50)
private String author = "访客";
@Column(nullable = false, columnDefinition = "TEXT")
private String content;
@Column(name = "created_at", updatable = false)
private LocalDateTime createdAt;
@PrePersist
public void prePersist() {
if (createdAt == null) createdAt = LocalDateTime.now();
if (author == null || author.trim().isEmpty()) author = "匿名访客";
}
public Comment() {}
public Comment(Long postId, String author, String content) {
this.postId = postId;
this.author = author;
this.content = content;
}
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public Long getPostId() { return postId; }
public void setPostId(Long postId) { this.postId = postId; }
public String getAuthor() { return author; }
public void setAuthor(String author) { this.author = author; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public LocalDateTime getCreatedAt() { return createdAt; }
public void setCreatedAt(LocalDateTime createdAt) { this.createdAt = createdAt; }
}
backend/src/main/java/com/example/blog/entity/Post.java
+93
View File
@@ -0,0 +1,93 @@
package com.example.blog.entity;
import jakarta.persistence.*;
import java.time.LocalDateTime;
@Entity
@Table(name = "post")
public class Post {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, length = 255)
private String title;
@Column(length = 500)
private String summary;
@Column(nullable = false, columnDefinition = "LONGTEXT")
private String content;
@Column(length = 50)
private String author = "旺总";
@Column(name = "category_name", length = 50)
private String categoryName = "技术杂谈";
@Column(length = 255)
private String tags;
@Column(name = "read_time", length = 20)
private String readTime = "3 min";
private Integer views = 0;
private Integer likes = 0;
@Column(length = 20)
private String status = "PUBLISHED";
@Column(name = "created_at", updatable = false)
private LocalDateTime createdAt;
@Column(name = "updated_at")
private LocalDateTime updatedAt;
@PrePersist
public void prePersist() {
if (createdAt == null) createdAt = LocalDateTime.now();
if (updatedAt == null) updatedAt = LocalDateTime.now();
if (views == null) views = 0;
if (likes == null) likes = 0;
if (author == null) author = "旺总";
if (categoryName == null) categoryName = "技术杂谈";
if (readTime == null) readTime = "3 min";
if (status == null) status = "PUBLISHED";
}
@PreUpdate
public void preUpdate() {
updatedAt = LocalDateTime.now();
}
public Post() {}
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public String getTitle() { return title; }
public void setTitle(String title) { this.title = title; }
public String getSummary() { return summary; }
public void setSummary(String summary) { this.summary = summary; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public String getAuthor() { return author; }
public void setAuthor(String author) { this.author = author; }
public String getCategoryName() { return categoryName; }
public void setCategoryName(String categoryName) { this.categoryName = categoryName; }
public String getTags() { return tags; }
public void setTags(String tags) { this.tags = tags; }
public String getReadTime() { return readTime; }
public void setReadTime(String readTime) { this.readTime = readTime; }
public Integer getViews() { return views; }
public void setViews(Integer views) { this.views = views; }
public Integer getLikes() { return likes; }
public void setLikes(Integer likes) { this.likes = likes; }
public String getStatus() { return status; }
public void setStatus(String status) { this.status = status; }
public LocalDateTime getCreatedAt() { return createdAt; }
public void setCreatedAt(LocalDateTime createdAt) { this.createdAt = createdAt; }
public LocalDateTime getUpdatedAt() { return updatedAt; }
public void setUpdatedAt(LocalDateTime updatedAt) { this.updatedAt = updatedAt; }
}
backend/src/main/java/com/example/blog/repository/CategoryRepository.java
+12
View File
@@ -0,0 +1,12 @@
package com.example.blog.repository;
import com.example.blog.entity.Category;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.Optional;
@Repository
public interface CategoryRepository extends JpaRepository<Category, Long> {
Optional<Category> findByName(String name);
}
backend/src/main/java/com/example/blog/repository/CommentRepository.java
+13
View File
@@ -0,0 +1,13 @@
package com.example.blog.repository;
import com.example.blog.entity.Comment;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface CommentRepository extends JpaRepository<Comment, Long> {
List<Comment> findByPostIdOrderByCreatedAtDesc(Long postId);
long countByPostId(Long postId);
}
backend/src/main/java/com/example/blog/repository/PostRepository.java
+37
View File
@@ -0,0 +1,37 @@
package com.example.blog.repository;
import com.example.blog.entity.Post;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface PostRepository extends JpaRepository<Post, Long> {
List<Post> findAllByOrderByCreatedAtDesc();
List<Post> findByCategoryNameOrderByCreatedAtDesc(String categoryName);
@Query("SELECT p FROM Post p WHERE " +
"(LOWER(p.title) LIKE LOWER(CONCAT('%', :keyword, '%')) OR " +
"LOWER(p.summary) LIKE LOWER(CONCAT('%', :keyword, '%')) OR " +
"LOWER(p.content) LIKE LOWER(CONCAT('%', :keyword, '%'))) " +
"ORDER BY p.createdAt DESC")
List<Post> searchPosts(@Param("keyword") String keyword);
@Query("SELECT p FROM Post p WHERE p.categoryName = :categoryName AND " +
"(LOWER(p.title) LIKE LOWER(CONCAT('%', :keyword, '%')) OR " +
"LOWER(p.summary) LIKE LOWER(CONCAT('%', :keyword, '%')) OR " +
"LOWER(p.content) LIKE LOWER(CONCAT('%', :keyword, '%'))) " +
"ORDER BY p.createdAt DESC")
List<Post> searchPostsWithCategory(@Param("categoryName") String categoryName, @Param("keyword") String keyword);
@Query("SELECT COALESCE(SUM(p.views), 0) FROM Post p")
Long sumViews();
@Query("SELECT COALESCE(SUM(p.likes), 0) FROM Post p")
Long sumLikes();
}
backend/src/main/java/com/example/blog/service/CommentService.java
+9
View File
@@ -0,0 +1,9 @@
package com.example.blog.service;
import com.example.blog.entity.Comment;
import java.util.List;
public interface CommentService {
List<Comment> getCommentsByPostId(Long postId);
Comment addComment(Long postId, Comment comment);
}
backend/src/main/java/com/example/blog/service/PostService.java
+15
View File
@@ -0,0 +1,15 @@
package com.example.blog.service;
import com.example.blog.entity.Post;
import java.util.List;
import java.util.Map;
public interface PostService {
List<Post> listPosts(String category, String search);
Post getPostById(Long id);
Post createPost(Post post);
Post updatePost(Long id, Post post);
void deletePost(Long id);
int likePost(Long id);
Map<String, Object> getBlogStats();
}
backend/src/main/java/com/example/blog/service/impl/CommentServiceImpl.java
+44
View File
@@ -0,0 +1,44 @@
package com.example.blog.service.impl;
import com.example.blog.entity.Comment;
import com.example.blog.repository.CommentRepository;
import com.example.blog.repository.PostRepository;
import com.example.blog.service.CommentService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
public class CommentServiceImpl implements CommentService {
private final CommentRepository commentRepository;
private final PostRepository postRepository;
public CommentServiceImpl(CommentRepository commentRepository, PostRepository postRepository) {
this.commentRepository = commentRepository;
this.postRepository = postRepository;
}
@Override
@Transactional(readOnly = true)
public List<Comment> getCommentsByPostId(Long postId) {
return commentRepository.findByPostIdOrderByCreatedAtDesc(postId);
}
@Override
@Transactional
public Comment addComment(Long postId, Comment comment) {
if (!postRepository.existsById(postId)) {
throw new RuntimeException("评论失败，文章不存在，ID: " + postId);
}
if (comment.getContent() == null || comment.getContent().trim().isEmpty()) {
throw new IllegalArgumentException("评论内容不能为空");
}
comment.setPostId(postId);
if (comment.getAuthor() == null || comment.getAuthor().trim().isEmpty()) {
comment.setAuthor("热心技术网友");
}
return commentRepository.save(comment);
}
}
backend/src/main/java/com/example/blog/service/impl/PostServiceImpl.java
+114
View File
@@ -0,0 +1,114 @@
package com.example.blog.service.impl;
import com.example.blog.entity.Post;
import com.example.blog.repository.CategoryRepository;
import com.example.blog.repository.PostRepository;
import com.example.blog.service.PostService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class PostServiceImpl implements PostService {
private final PostRepository postRepository;
private final CategoryRepository categoryRepository;
public PostServiceImpl(PostRepository postRepository, CategoryRepository categoryRepository) {
this.postRepository = postRepository;
this.categoryRepository = categoryRepository;
}
@Override
@Transactional(readOnly = true)
public List<Post> listPosts(String category, String search) {
boolean hasCategory = category != null && !category.trim().isEmpty() && !"全部".equals(category);
boolean hasSearch = search != null && !search.trim().isEmpty();
if (hasCategory && hasSearch) {
return postRepository.searchPostsWithCategory(category.trim(), search.trim());
} else if (hasCategory) {
return postRepository.findByCategoryNameOrderByCreatedAtDesc(category.trim());
} else if (hasSearch) {
return postRepository.searchPosts(search.trim());
} else {
return postRepository.findAllByOrderByCreatedAtDesc();
}
}
@Override
@Transactional
public Post getPostById(Long id) {
Post post = postRepository.findById(id)
.orElseThrow(() -> new RuntimeException("文章不存在，ID: " + id));
post.setViews(post.getViews() + 1);
return postRepository.save(post);
}
@Override
@Transactional
public Post createPost(Post post) {
if (post.getTitle() == null || post.getTitle().trim().isEmpty()) {
throw new IllegalArgumentException("文章标题不能为空");
}
if (post.getContent() == null || post.getContent().trim().isEmpty()) {
throw new IllegalArgumentException("文章正文内容不能为空");
}
if (post.getSummary() == null || post.getSummary().trim().isEmpty()) {
String content = post.getContent().replaceAll("[#*`>-]", "");
post.setSummary(content.length() > 120 ? content.substring(0, 120) + "..." : content);
}
if (post.getReadTime() == null || post.getReadTime().trim().isEmpty()) {
int minutes = Math.max(2, Math.round(post.getContent().length() / 350f));
post.setReadTime(minutes + " min");
}
return postRepository.save(post);
}
@Override
@Transactional
public Post updatePost(Long id, Post post) {
Post existing = postRepository.findById(id)
.orElseThrow(() -> new RuntimeException("文章不存在，ID: " + id));
if (post.getTitle() != null) existing.setTitle(post.getTitle());
if (post.getSummary() != null) existing.setSummary(post.getSummary());
if (post.getContent() != null) existing.setContent(post.getContent());
if (post.getCategoryName() != null) existing.setCategoryName(post.getCategoryName());
if (post.getTags() != null) existing.setTags(post.getTags());
if (post.getAuthor() != null) existing.setAuthor(post.getAuthor());
return postRepository.save(existing);
}
@Override
@Transactional
public void deletePost(Long id) {
if (!postRepository.existsById(id)) {
throw new RuntimeException("文章不存在，ID: " + id);
}
postRepository.deleteById(id);
}
@Override
@Transactional
public int likePost(Long id) {
Post post = postRepository.findById(id)
.orElseThrow(() -> new RuntimeException("文章不存在，ID: " + id));
post.setLikes(post.getLikes() + 1);
postRepository.save(post);
return post.getLikes();
}
@Override
@Transactional(readOnly = true)
public Map<String, Object> getBlogStats() {
Map<String, Object> stats = new HashMap<>();
stats.put("totalPosts", postRepository.count());
stats.put("totalViews", postRepository.sumViews());
stats.put("totalLikes", postRepository.sumLikes());
stats.put("totalCategories", categoryRepository.count());
return stats;
}
}
backend/src/main/resources/application.yml
+30
View File
@@ -0,0 +1,30 @@
server:
port: 8080
spring:
application:
name: my-blog-backend
datasource:
url: jdbc:mysql://${DB_HOST:mysql}:${DB_PORT:3306}/${DB_NAME:my_blog}?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true
username: ${DB_USER:root}
password: ${DB_PASSWORD:root123456}
driver-class-name: com.mysql.cj.jdbc.Driver
hikari:
connection-timeout: 30000
maximum-pool-size: 10
minimum-idle: 2
jpa:
hibernate:
ddl-auto: update
show-sql: false
properties:
hibernate:
format_sql: true
dialect: org.hibernate.dialect.MySQLDialect
open-in-view: false
management:
endpoints:
web:
exposure:
include: health,info
docker-compose.yml
+39
View File
@@ -1,9 +1,43 @@
version: '3.8'
services:
mysql:
image: mysql:8.0
container_name: blog-mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: root123456
MYSQL_DATABASE: my_blog
TZ: Asia/Shanghai
command:
- --default-authentication-plugin=mysql_native_password
- --character-set-server=utf8mb4
- --collation-server=utf8mb4_unicode_ci
ports:
- "3307:3306"
volumes:
- mysql_data:/var/lib/mysql
- ./mysql/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-proot123456"]
interval: 5s
timeout: 5s
retries: 10
backend:
build: ./backend
container_name: blog-backend
restart: always
depends_on:
mysql:
condition: service_healthy
environment:
DB_HOST: mysql
DB_PORT: 3306
DB_NAME: my_blog
DB_USER: root
DB_PASSWORD: root123456
TZ: Asia/Shanghai
ports:
- "8089:8080"
@@ -11,5 +45,10 @@ services:
build: ./frontend
container_name: blog-frontend
restart: always
depends_on:
- backend
ports:
- "8088:80"
volumes:
mysql_data:
frontend/index.html
+214 -162
View File
@@ -33,7 +33,6 @@
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<style>
[v-cloak] { display: none; }
/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
@@ -54,7 +53,7 @@
<div id="app" v-cloak class="flex flex-col min-h-screen">
<!-- 顶部导航栏 (借鉴 Tailwind Next.js Starter Blog 的轻量极简毛玻璃质感) -->
<!-- 顶部导航栏 -->
<header class="sticky top-0 z-40 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 border-b border-slate-200/80 dark:border-slate-800 transition-colors">
<div class="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
<!-- 品牌 Logo -->
@@ -66,7 +65,7 @@
<div class="font-bold text-base tracking-tight flex items-center gap-2">
<span>旺总的技术全栈博客</span>
<span class="hidden sm:inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-800 dark:bg-sky-950/80 dark:text-sky-300 border border-sky-200 dark:border-sky-800">
Pro
SpringBoot 3 + MySQL 8.0
</span>
</div>
<p class="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">Full-Stack · Cloud-Native · DevOps</p>
@@ -75,11 +74,11 @@
<!-- 右侧操作区 -->
<div class="flex items-center gap-3">
<!-- 后端连接状态小药丸 -->
<!-- 数据库与后端连接指示器 -->
<div :class="backendConnected ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-400 dark:border-emerald-800' : 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-400 dark:border-amber-800'"
class="hidden md:flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border font-medium">
<span class="w-2 h-2 rounded-full" :class="backendConnected ? 'bg-emerald-500 animate-pulse' : 'bg-amber-500'"></span>
<span>{{ backendConnected ? 'Spring Boot 容器已联通' : '离线预览模式' }}</span>
<span>{{ backendConnected ? 'MySQL 8.0 + SpringBoot 3 已联通' : '离线预览模式' }}</span>
</div>
<!-- 写文章按钮 -->
@@ -103,7 +102,7 @@
<!-- 主体容器 -->
<main class="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 py-8">
<!-- Hero 博主名片区域 (借鉴 AstroPaper & GitHub Profile 设计) -->
<!-- Hero 博主名片区域 -->
<section class="mb-10 p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm relative overflow-hidden">
<div class="absolute -right-16 -top-16 w-56 h-56 bg-gradient-to-br from-sky-400/20 to-indigo-500/10 rounded-full blur-2xl pointer-events-none"></div>
@@ -121,15 +120,15 @@
<span class="px-2.5 py-0.5 text-xs font-semibold rounded-md bg-indigo-50 text-indigo-700 dark:bg-indigo-950/60 dark:text-indigo-300 border border-indigo-200/60 dark:border-indigo-800">全栈工程师</span>
</div>
<p class="mt-1 text-sm sm:text-base text-slate-600 dark:text-slate-300">
专注 Spring Boot 微服务架构 · Docker / K8s 云原生容器化 · CI/CD 自动化交付
专注 Spring Boot 3 企业级架构 · MySQL 8.0 持久化 · Docker / K8s 容器编排 · CI/CD 自动化流水线
</p>
<!-- 技术栈徽章 -->
<div class="mt-3 flex flex-wrap gap-2 text-xs">
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">⚡ Spring Boot 3</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🐬 MySQL 8.0 持久化</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">⚡ Spring Boot 3 + JPA</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🐳 Docker Compose</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🌿 Vue 3 / Vite</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🚀 Gitea Actions</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🤖 DeepSeek R1</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🚀 Gitea Actions CI/CD</span>
<span class="px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-mono">🤖 DeepSeek R1 本地化</span>
</div>
</div>
</div>
@@ -137,29 +136,29 @@
<!-- 数据统计面板卡片 -->
<div class="flex items-center gap-4 sm:gap-6 bg-slate-50 dark:bg-slate-800/60 p-3 sm:p-4 rounded-xl border border-slate-200/60 dark:border-slate-700/60 self-start md:self-auto">
<div class="text-center">
<div class="text-xl sm:text-2xl font-black text-sky-600 dark:text-sky-400">{{ stats.totalPosts || posts.length }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">公开文章</div>
<div class="text-xl sm:text-2xl font-black text-sky-600 dark:text-sky-400">{{ stats.totalPosts }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">文章总数</div>
</div>
<div class="w-px h-8 bg-slate-200 dark:bg-slate-700"></div>
<div class="text-center">
<div class="text-xl sm:text-2xl font-black text-slate-800 dark:text-slate-200">{{ stats.totalViews || 2061 }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">阅读总次</div>
<div class="text-xl sm:text-2xl font-black text-slate-800 dark:text-slate-200">{{ stats.totalViews }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">累计浏览</div>
</div>
<div class="w-px h-8 bg-slate-200 dark:bg-slate-700"></div>
<div class="text-center">
<div class="text-xl sm:text-2xl font-black text-rose-500">{{ stats.totalLikes || 165 }}</div>
<div class="text-xl sm:text-2xl font-black text-rose-500">{{ stats.totalLikes }}</div>
<div class="text-xs text-slate-500 dark:text-slate-400">点赞认可</div>
</div>
</div>
</div>
</section>
<!-- 筛选与搜索控制栏 (借鉴 Halo & Fluid 主题工具条) -->
<!-- 筛选与搜索控制栏 -->
<div class="mb-6 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
<!-- 分类选项卡 -->
<div class="flex items-center gap-1.5 overflow-x-auto pb-2 sm:pb-0 text-sm no-scrollbar">
<button v-for="cat in categories" :key="cat"
@click="selectedCategory = cat"
@click="selectCategory(cat)"
:class="selectedCategory === cat
? 'bg-slate-900 text-white dark:bg-sky-600 dark:text-white shadow-sm'
: 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800'"
@@ -171,6 +170,7 @@
<!-- 搜索框 -->
<div class="relative w-full sm:w-64">
<input v-model="searchKeyword"
@input="onSearchInput"
type="text"
placeholder="搜索文章标题或关键词..."
class="w-full pl-9 pr-4 py-1.5 text-sm rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 focus:outline-none focus:ring-2 focus:ring-sky-500/50 dark:focus:ring-sky-400/50 transition-all">
@@ -178,18 +178,18 @@
</div>
</div>
<!-- 文章列表区域 (模仿 GitHub Tailwind Starter Blog 经典卡片流) -->
<div v-if="filteredPosts.length > 0" class="space-y-4">
<article v-for="post in filteredPosts" :key="post.id"
<!-- 文章列表区域 -->
<div v-if="posts.length > 0" class="space-y-4">
<article v-for="post in posts" :key="post.id"
class="group p-5 sm:p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800 shadow-sm hover:shadow-md hover:border-sky-500/40 dark:hover:border-sky-500/40 transition-all cursor-pointer"
@click="openPostDetail(post)">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between gap-1 mb-2">
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 text-xs font-semibold rounded bg-sky-50 text-sky-700 dark:bg-sky-950/70 dark:text-sky-300 border border-sky-100 dark:border-sky-900/50">
{{ post.category || '技术' }}
{{ post.categoryName || '技术杂谈' }}
</span>
<span class="text-xs text-slate-400">·</span>
<span class="text-xs text-slate-500 dark:text-slate-400">📅 {{ post.date }}</span>
<span class="text-xs text-slate-500 dark:text-slate-400">📅 {{ formatDate(post.createdAt) }}</span>
<span class="text-xs text-slate-400">·</span>
<span class="text-xs text-slate-500 dark:text-slate-400">⏱️ {{ post.readTime || '3 min' }}</span>
</div>
@@ -202,14 +202,14 @@
<!-- 摘要 -->
<p class="mt-2 text-sm text-slate-600 dark:text-slate-300 line-clamp-2 leading-relaxed">
{{ post.summary || post.content.substring(0, 140) }}...
{{ post.summary || post.content.substring(0, 140) }}
</p>
<!-- 底部标签与互动 -->
<div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800/80 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
<!-- 标签群 -->
<div class="flex items-center gap-1.5 flex-wrap">
<span v-for="tag in (post.tags || [])" :key="tag"
<span v-for="tag in parseTags(post.tags)" :key="tag"
class="text-slate-500 dark:text-slate-400 hover:text-sky-500">
#{{ tag }}
</span>
@@ -219,7 +219,7 @@
<div class="flex items-center gap-4">
<span class="flex items-center gap-1">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
{{ post.views || 1 }}
{{ post.views || 0 }}
</span>
<button @click.stop="likePost(post)"
@@ -240,11 +240,11 @@
<div v-else class="text-center py-16 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800">
<div class="text-4xl mb-3">🔍</div>
<h3 class="text-base font-semibold text-slate-800 dark:text-slate-200">没有找到相关文章</h3>
<p class="text-xs text-slate-500 mt-1">换个搜索词或点击右上方“发布文章”添加一篇吧！</p>
<p class="text-xs text-slate-500 mt-1">换个搜索词或点击右上方“发布文章”向 MySQL 写入一篇吧！</p>
</div>
</main>
<!-- 文章详情阅读模态框 (模仿 AstroPaper 干净排版) -->
<!-- 文章详情阅读模态框 -->
<div v-if="activePost"
class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 sm:p-6"
@click.self="activePost = null">
@@ -253,14 +253,19 @@
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="px-2 py-0.5 text-xs font-semibold rounded bg-sky-50 text-sky-700 dark:bg-sky-950/70 dark:text-sky-300">
{{ activePost.category }}
{{ activePost.categoryName }}
</span>
<span class="text-xs text-slate-400">·</span>
<span class="text-xs text-slate-500">📅 {{ activePost.date }}</span>
<span class="text-xs text-slate-500">📅 {{ formatDate(activePost.createdAt) }}</span>
</div>
<div class="flex items-center gap-2">
<button @click="deletePost(activePost)" class="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50 dark:hover:bg-red-950/40 transition-colors" title="删除文章">
删除
</button>
<button @click="activePost = null" class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<button @click="activePost = null" class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- 模态框正文 -->
@@ -286,24 +291,60 @@
<button @click="likePost(activePost)"
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-400 border border-rose-200 dark:border-rose-900 hover:scale-105 active:scale-95 transition-transform font-medium text-sm">
<svg class="w-4 h-4 fill-rose-500" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span>给文章点赞 ({{ activePost.likes }})</span>
</button>
<button @click="activePost = null" class="text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">
返回文章列表
<span>点赞支持 ({{ activePost.likes }})</span>
</button>
</div>
<!-- 评论专区 (连接 MySQL comment 表) -->
<div class="mt-10 pt-6 border-t border-slate-200 dark:border-slate-800">
<h3 class="text-base font-bold mb-4 flex items-center gap-2">
<span>💬 读者交流区</span>
<span class="text-xs text-slate-500 font-normal">({{ comments.length }} 条持久化评论)</span>
</h3>
<!-- 发表评论表单 -->
<div class="bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl border border-slate-200/60 dark:border-slate-700/60 mb-6 space-y-3">
<div class="flex items-center gap-3">
<input v-model="newComment.author" type="text" placeholder="你的昵称 (默认: 访客)"
class="px-3 py-1.5 rounded-lg bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 text-xs w-48 focus:outline-none focus:ring-1 focus:ring-sky-500">
</div>
<textarea v-model="newComment.content" rows="2" placeholder="写下你的技术见解或想法..."
class="w-full px-3 py-2 rounded-lg bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 text-xs focus:outline-none focus:ring-1 focus:ring-sky-500"></textarea>
<div class="flex justify-end">
<button @click="submitComment" :disabled="submittingComment"
class="px-3.5 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-700 text-white text-xs font-semibold shadow-sm transition-all">
{{ submittingComment ? '提交中...' : '发表评论' }}
</button>
</div>
</div>
<!-- 评论列表 -->
<div v-if="comments.length > 0" class="space-y-3">
<div v-for="c in comments" :key="c.id"
class="p-3.5 rounded-xl bg-slate-50/80 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800 text-xs">
<div class="flex items-center justify-between mb-1.5">
<span class="font-bold text-slate-900 dark:text-slate-100">👤 {{ c.author }}</span>
<span class="text-slate-400">{{ formatDate(c.createdAt) }}</span>
</div>
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">{{ c.content }}</p>
</div>
</div>
<div v-else class="text-center py-6 text-xs text-slate-400">
暂无评论，快来抢沙发吧！
</div>
</div>
</div>
</div>
</div>
<!-- 发布文章写作工作室模态框 (模仿 Ghost / Notion 极简写作台) -->
<!-- 发布文章写作工作室模态框 (直写 MySQL) -->
<div v-if="showPublishModal"
class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 sm:p-6"
@click.self="showPublishModal = false">
<div class="w-full max-w-2xl bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden animate-in fade-in zoom-in-95 duration-200">
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100 flex items-center gap-2">
<span>✍️ 撰写并发布新博客</span>
<span>✍️ 撰写并持久化发布到 MySQL</span>
</h3>
<button @click="showPublishModal = false" class="text-slate-400 hover:text-slate-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
@@ -320,7 +361,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block font-medium mb-1 text-slate-700 dark:text-slate-300">技术分类</label>
<select v-model="newPost.category"
<select v-model="newPost.categoryName"
class="w-full px-3.5 py-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 focus:ring-2 focus:ring-sky-500 focus:outline-none">
<option value="云原生 & Linux">云原生 & Linux</option>
<option value="Java & Spring Boot">Java & Spring Boot</option>
@@ -330,21 +371,21 @@
</select>
</div>
<div>
<label class="block font-medium mb-1 text-slate-700 dark:text-slate-300">作者签名</label>
<input v-model="newPost.author" type="text" placeholder="默认: 旺总"
<label class="block font-medium mb-1 text-slate-700 dark:text-slate-300">标签 (逗号分隔)</label>
<input v-model="newPost.tags" type="text" placeholder="例如: SpringBoot,MySQL,Docker"
class="w-full px-3.5 py-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 focus:ring-2 focus:ring-sky-500 focus:outline-none">
</div>
</div>
<div>
<label class="block font-medium mb-1 text-slate-700 dark:text-slate-300">一句话简要摘要</label>
<label class="block font-medium mb-1 text-slate-700 dark:text-slate-300">一句话摘要</label>
<input v-model="newPost.summary" type="text" placeholder="简述本文的核心要点与阅读价值..."
class="w-full px-3.5 py-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 focus:ring-2 focus:ring-sky-500 focus:outline-none">
</div>
<div>
<div class="flex items-center justify-between mb-1">
<label class="font-medium text-slate-700 dark:text-slate-300">文章内容 (支持标准 Markdown 语法) *</label>
<label class="font-medium text-slate-700 dark:text-slate-300">文章内容 (支持 Markdown) *</label>
<span class="text-xs text-slate-400">支持代码块高亮及标题格式</span>
</div>
<textarea v-model="newPost.content" rows="7" placeholder="# 正文标题&#10;&#10;写下你的技术思考或教程步骤...&#10;&#10;```java&#10;// 代码示例&#10;```"
@@ -358,7 +399,7 @@
<button @click="publishPost" :disabled="publishing"
class="px-5 py-2 rounded-lg bg-sky-600 hover:bg-sky-700 disabled:opacity-50 text-white font-semibold shadow-md shadow-sky-600/30 flex items-center gap-2">
<span v-if="publishing" class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
<span>{{ publishing ? '发布中...' : '立即发布到线上' }}</span>
<span>{{ publishing ? '写入 MySQL 中...' : '持久化发布' }}</span>
</button>
</div>
</div>
@@ -373,9 +414,9 @@
<span class="text-sky-600 dark:text-sky-400 font-mono">Google Cloud 台湾节点</span>
</div>
<div class="flex items-center gap-4">
<span>Spring Boot 3</span>
<span>Spring Boot 3 + JPA</span>
<span>·</span>
<span>Docker Compose</span>
<span>MySQL 8.0</span>
<span>·</span>
<span>Gitea CI/CD</span>
</div>
@@ -394,10 +435,13 @@
const isDark = ref(false);
const backendConnected = ref(false);
const posts = ref([]);
const stats = ref({ totalPosts: 0, totalViews: 0, totalLikes: 0 });
const stats = ref({ totalPosts: 0, totalViews: 0, totalLikes: 0, totalCategories: 0 });
const selectedCategory = ref('全部');
const searchKeyword = ref('');
const activePost = ref(null);
const comments = ref([]);
const newComment = ref({ author: '访客', content: '' });
const submittingComment = ref(false);
const showPublishModal = ref(false);
const publishing = ref(false);
@@ -405,104 +449,119 @@
const newPost = ref({
title: '',
category: '全栈开发 & CI/CD',
categoryName: '全栈开发 & CI/CD',
author: '旺总',
tags: 'SpringBoot,MySQL',
summary: '',
content: ''
});
// 本地优雅备用数据（即使脱机双击打开 HTML，也永远不会出现丑陋的红字报错）
const fallbackPosts = [
{
id: '1',
title: '云原生实践：在 Google Cloud 台湾节点搭建高性能 Ubuntu 与 1Panel',
summary: '本文记录了如何通过 GCP 赠金在亚洲低延迟机房部署 4核16G 高性能云服务器，并使用现代化容器面板 1Panel 进行运维管理实录。',
content: '# 云原生实践：在 Google Cloud 台湾节点搭建高性能服务器\n\n在挑选云服务器的过程中，综合对比了各大厂商的免费策略与性能表现，最终选择了 **Google Cloud 台湾节点 (`asia-east1`)**。\n\n## 核心硬件与网络配置\n- **规格**：`e2-standard-4`（4 vCPU，16 GB 内存）\n- **系统**：Ubuntu 22.04 LTS (x86_64)\n- **延迟**：到中国大陆仅 30~50ms，操作极为丝滑。\n\n## 为什么采用 1Panel 面板？\n相比传统臃肿的面料，1Panel 深度拥抱 **Docker 容器化**，所有应用（MySQL、OpenResty、Gitea）完全容器隔离，真正做到“环境随用随建，数据挂载持久化”。\n\n```bash\n# 快速检查 Docker 运行状态\ndocker ps --format "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}"\n```\n\n> 💡 **运维心得**：永远在云平台控制台统一放行防火墙端口，切勿盲目在系统内部启用 UFW，避免失联风险。',
author: '旺总',
date: '2026-10-22',
category: '云原生 & Linux',
tags: ['GCP', 'Ubuntu', '1Panel', 'Linux'],
readTime: '4 min',
views: 528,
likes: 42
},
{
id: '2',
title: '探索本地大模型：从 Ollama 运行 DeepSeek R1 到 CPU 推理性能调优',
summary: '深度解析在纯 CPU 服务器上运行 DeepSeek R1 和通义千问 2.5 的真实表现，揭开 2050 Token 预填充延迟背后的机制。',
content: '# 探索本地大模型：从 Ollama 到 Open WebUI 性能调优实战\n\n近期 DeepSeek R1 推理思考模型火遍全球，我们在 4核16G 的服务器上进行了本地大模型的全链路压测。\n\n## 1. 架构搭建\n- **模型发动机**：`Ollama` 容器\n- **交互界面**：`Open WebUI` 容器\n- **网络通信**：通过 Docker 网关 `http://172.17.0.1:11434` 极速直连\n\n## 2. 性能排查与调优秘籍\n测试过程中遇到了“每次提问卡顿 50 秒”的问题，经过 `top` 分析和指标剖析：\n1. **解除容器 CPU 配额**：确保 4 线程全开（`eval rate` 提升至 14 tokens/s）；\n2. **内存永久常驻**：注入 `OLLAMA_KEEP_ALIVE=-1`，避免 5 分钟超时后重新读盘；\n3. **清空全局默认 Prompt**：消除了默认附带的 2050 历史 Token，读题耗时从 60s 骤降至 0.2s！\n\n```bash\n# 测试模型运行性能\ndocker exec -it 1Panel-ollama-nzre ollama run qwen2.5:1.5b --verbose\n```\n\n> 纯 CPU 跑 7B 参数是物理带宽瓶颈，日常开发推荐搭配 1.5B~3B 模型，速度与逻辑达到最佳平衡！',
author: '旺总',
date: '2026-10-22',
category: 'AI & 本地模型',
tags: ['DeepSeek', 'Ollama', 'OpenWebUI', '调优'],
readTime: '6 min',
views: 892,
likes: 68
},
{
id: '3',
title: '全栈工程师实战：Spring Boot 3 + Vue 3 博客与 Gitea CI/CD 自动化流水线',
summary: '从零手写前后端分离架构，配合私有 Gitea 仓库与自动化部署脚本，实现 push 代码后全自动打包上线。',
content: '# 全栈工程化实践：Spring Boot 3 + Vue 3 + CI/CD 自动化\n\n现代化开发的精髓在于**“把重复劳动交给自动化”**。我们搭建了一套小而美但功能极其完备的企业级全栈流水线。\n\n## 全栈架构一览\n```text\n[开发者本地 IDEA] ──git push──▶ [私有 Gitea 仓库]\n │\n (Webhook 触发流水线)\n ▼\n [deploy.sh 自动化脚本]\n │\n ┌─────────────┴─────────────┐\n ▼ ▼\n [Spring Boot 3 容器] [Nginx 静态反代容器]\n```\n\n## Nginx 反向代理配置关键点\n前端容器中通过反代 `/api/` 到后端服务容器，天然解决跨域和外部端口分散问题：\n\n```nginx\nlocation /api/ {\n proxy_pass http://backend:8080/api/;\n proxy_set_header Host $host;\n}\n```\n\n从此，改完代码只需一条 `git push`，剩下的事情交给服务器自动化即可！',
author: '旺总',
date: '2026-10-22',
category: '全栈开发 & CI/CD',
tags: ['Spring Boot', 'Vue 3', 'CI/CD', 'Docker Compose'],
readTime: '5 min',
views: 641,
likes: 55
}
];
// 获取后端数据
// 请求后端文章列表
async function fetchPosts() {
try {
const res = await fetch(`${API_BASE}/posts`);
const params = new URLSearchParams();
if (selectedCategory.value && selectedCategory.value !== '全部') {
params.append('category', selectedCategory.value);
}
if (searchKeyword.value.trim()) {
params.append('search', searchKeyword.value.trim());
}
const res = await fetch(`${API_BASE}/posts?${params.toString()}`);
if (res.ok) {
const data = await res.json();
posts.value = data;
const result = await res.json();
posts.value = result.data || result;
backendConnected.value = true;
fetchStats();
return;
}
} catch (e) {
console.warn('后端 API 未就绪，切换到高仿真离线模式:', e);
console.warn('后端 API 未就绪:', e);
}
posts.value = fallbackPosts;
backendConnected.value = false;
}
// 获取统计信息
// 获取全栈统计数据
async function fetchStats() {
try {
const res = await fetch(`${API_BASE}/stats`);
if (res.ok) {
stats.value = await res.json();
const result = await res.json();
stats.value = result.data || result;
}
} catch (e) {
// ignore
} catch (e) {}
}
function selectCategory(cat) {
selectedCategory.value = cat;
fetchPosts();
}
let debounceTimer = null;
function onSearchInput() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
fetchPosts();
}, 300);
}
// 查看文章详情并加载评论
async function openPostDetail(post) {
activePost.value = post;
post.views = (post.views || 0) + 1;
fetchComments(post.id);
if (backendConnected.value) {
fetch(`${API_BASE}/posts/${post.id}`).catch(() => {});
}
}
// 筛选文章
const filteredPosts = computed(() => {
return posts.value.filter(p => {
const matchCat = selectedCategory.value === '全部' || p.category === selectedCategory.value;
const keyword = searchKeyword.value.trim().toLowerCase();
const matchSearch = !keyword ||
p.title.toLowerCase().includes(keyword) ||
(p.summary && p.summary.toLowerCase().includes(keyword)) ||
(p.content && p.content.toLowerCase().includes(keyword));
return matchCat && matchSearch;
});
});
// 加载该文章的评论
async function fetchComments(postId) {
try {
const res = await fetch(`${API_BASE}/posts/${postId}/comments`);
if (res.ok) {
const result = await res.json();
comments.value = result.data || [];
}
} catch (e) {
comments.value = [];
}
}
// 阅读文章
function openPostDetail(post) {
activePost.value = post;
post.views = (post.views || 0) + 1;
if (backendConnected.value) {
fetch(`${API_BASE}/posts/${post.id}`).catch(() => {});
// 提交评论
async function submitComment() {
if (!newComment.value.content.trim()) {
alert('评论内容不能为空！');
return;
}
submittingComment.value = true;
try {
const res = await fetch(`${API_BASE}/posts/${activePost.value.id}/comments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newComment.value)
});
if (res.ok) {
newComment.value.content = '';
fetchComments(activePost.value.id);
}
} catch (e) {
alert('提交评论失败，请检查网络');
}
submittingComment.value = false;
}
// 删除文章
async function deletePost(post) {
if (!confirm(`确定要删除文章《${post.title}》吗？`)) return;
try {
const res = await fetch(`${API_BASE}/posts/${post.id}`, { method: 'DELETE' });
if (res.ok) {
activePost.value = null;
fetchPosts();
}
} catch (e) {
alert('删除失败');
}
}
@@ -517,19 +576,19 @@
}
}
// 打开写作框
function openPublishModal() {
newPost.value = {
title: '',
category: '全栈开发 & CI/CD',
categoryName: '全栈开发 & CI/CD',
author: '旺总',
tags: 'SpringBoot,MySQL',
summary: '',
content: ''
};
showPublishModal.value = true;
}
// 发布新文章
// 发布新文章至 MySQL
async function publishPost() {
if (!newPost.value.title.trim() || !newPost.value.content.trim()) {
alert('请至少填写文章标题和文章正文内容！');
@@ -537,45 +596,24 @@
}
publishing.value = true;
const createdPost = {
id: String(Date.now()),
title: newPost.value.title,
summary: newPost.value.summary || newPost.value.content.substring(0, 100),
content: newPost.value.content,
author: newPost.value.author || '旺总',
date: new Date().toISOString().split('T')[0],
category: newPost.value.category,
tags: [newPost.value.category.split(' ')[0]],
readTime: `${Math.max(2, Math.round(newPost.value.content.length / 300))} min`,
views: 1,
likes: 0
};
if (backendConnected.value) {
try {
const res = await fetch(`${API_BASE}/posts`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(createdPost)
});
if (res.ok) {
const saved = await res.json();
posts.value.unshift(saved);
} else {
posts.value.unshift(createdPost);
}
} catch (e) {
posts.value.unshift(createdPost);
try {
const res = await fetch(`${API_BASE}/posts`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newPost.value)
});
if (res.ok) {
showPublishModal.value = false;
fetchPosts();
} else {
alert('发布失败，请稍后重试');
}
} else {
posts.value.unshift(createdPost);
} catch (e) {
alert('发布失败，无法连接服务器');
}
publishing.value = false;
showPublishModal.value = false;
}
// Markdown 渲染
function renderMarkdown(content) {
if (!content) return '';
if (window.marked) {
@@ -584,7 +622,16 @@
return content.replace(/\n/g, '<br>');
}
// 明暗模式切换
function formatDate(dt) {
if (!dt) return '刚刚';
return String(dt).split('T')[0];
}
function parseTags(tags) {
if (!tags) return [];
return String(tags).split(',').map(t => t.trim()).filter(Boolean);
}
function toggleDarkMode() {
isDark.value = !isDark.value;
if (isDark.value) {
@@ -597,7 +644,6 @@
}
onMounted(() => {
// 初始化主题
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
isDark.value = true;
document.documentElement.classList.add('dark');
@@ -606,7 +652,6 @@
document.documentElement.classList.remove('dark');
}
// 配置 Marked 与代码高亮
if (window.marked && window.hljs) {
marked.setOptions({
highlight: function(code, lang) {
@@ -629,16 +674,23 @@
categories,
selectedCategory,
searchKeyword,
filteredPosts,
selectCategory,
onSearchInput,
activePost,
openPostDetail,
comments,
newComment,
submitComment,
deletePost,
likePost,
showPublishModal,
newPost,
openPublishModal,
publishPost,
publishing,
renderMarkdown
renderMarkdown,
formatDate,
parseTags
};
}
}).mount('#app');
mysql/init.sql
+88
View File
@@ -0,0 +1,88 @@
-- 创建数据库
CREATE DATABASE IF NOT EXISTS `my_blog` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE `my_blog`;
-- 1. 分类表
CREATE TABLE IF NOT EXISTS `category` (
`id` BIGINT AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(50) NOT NULL UNIQUE,
`description` VARCHAR(255),
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- 2. 文章表
CREATE TABLE IF NOT EXISTS `post` (
`id` BIGINT AUTO_INCREMENT PRIMARY KEY,
`title` VARCHAR(255) NOT NULL,
`summary` VARCHAR(500),
`content` LONGTEXT NOT NULL,
`author` VARCHAR(50) DEFAULT '旺总',
`category_name` VARCHAR(50) DEFAULT '技术杂谈',
`tags` VARCHAR(255),
`read_time` VARCHAR(20) DEFAULT '3 min',
`views` INT DEFAULT 0,
`likes` INT DEFAULT 0,
`status` VARCHAR(20) DEFAULT 'PUBLISHED',
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
`updated_at` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- 3. 评论表
CREATE TABLE IF NOT EXISTS `comment` (
`id` BIGINT AUTO_INCREMENT PRIMARY KEY,
`post_id` BIGINT NOT NULL,
`author` VARCHAR(50) NOT NULL,
`content` TEXT NOT NULL,
`created_at` DATETIME DEFAULT CURRENT_TIMESTAMP,
INDEX `idx_post_id` (`post_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
-- 插入默认分类
INSERT IGNORE INTO `category` (`name`, `description`) VALUES
('云原生 & Linux', '容器化编排、GCP/云服务器运维、系统调优与网络配置实战'),
('Java & Spring Boot', 'Spring Boot 3 微服务架构、JPA 数据库持久化与后端工程规范'),
('AI & 本地模型', 'Ollama 本地大模型部署、DeepSeek R1 性能压测与应用集成'),
('全栈开发 & CI/CD', '前后端分离架构、Gitea Actions 自动化流水线交付');
-- 插入预置精品文章
INSERT INTO `post` (`title`, `summary`, `content`, `author`, `category_name`, `tags`, `read_time`, `views`, `likes`, `created_at`)
SELECT
'云原生实践：在 Google Cloud 台湾节点搭建高性能 Ubuntu 与 1Panel',
'本文记录了如何通过 GCP 赠金在亚洲低延迟机房部署 4核16G 高性能云服务器，并使用现代化容器面板 1Panel 进行运维管理实录。',
'# 云原生实践：在 Google Cloud 台湾节点搭建高性能服务器\n\n在挑选云服务器的过程中，综合对比了各大厂商的免费策略与性能表现，最终选择了 **Google Cloud 台湾节点 (`asia-east1`)**。\n\n## 核心硬件与网络配置\n- **规格**：`e2-standard-4`（4 vCPU，16 GB 内存）\n- **系统**：Ubuntu 22.04 LTS (x86_64)\n- **延迟**：到中国大陆仅 30~50ms，操作极为丝滑。\n\n## 为什么采用 1Panel 面板？\n相比传统臃肿的面料，1Panel 深度拥抱 **Docker 容器化**，所有应用（MySQL、OpenResty、Gitea）完全容器隔离，真正做到“环境随用随建，数据挂载持久化”。\n\n```bash\n# 快速检查 Docker 运行状态\ndocker ps --format "table {{.Names}}\\t{{.Status}}\\t{{.Ports}}"\n```\n\n> 💡 **运维心得**：永远在云平台控制台统一放行防火墙端口，切勿盲目在系统内部启用 UFW，避免失联风险。',
'旺总',
'云原生 & Linux',
'GCP,Ubuntu,1Panel,Linux',
'4 min',
648,
52,
NOW()
WHERE NOT EXISTS (SELECT 1 FROM `post` WHERE `title` = '云原生实践：在 Google Cloud 台湾节点搭建高性能 Ubuntu 与 1Panel');
INSERT INTO `post` (`title`, `summary`, `content`, `author`, `category_name`, `tags`, `read_time`, `views`, `likes`, `created_at`)
SELECT
'探索本地大模型：从 Ollama 运行 DeepSeek R1 到 CPU 推理性能调优',
'深度解析在纯 CPU 服务器上运行 DeepSeek R1 和通义千问 2.5 的真实表现，揭开 2050 Token 预填充延迟背后的机制。',
'# 探索本地大模型：从 Ollama 到 Open WebUI 性能调优实战\n\n近期 DeepSeek R1 推理思考模型火遍全球，我们在 4核16G 的服务器上进行了本地大模型的全链路压测。\n\n## 1. 架构搭建\n- **模型发动机**：`Ollama` 容器\n- **交互界面**：`Open WebUI` 容器\n- **网络通信**：通过 Docker 网关 `http://172.17.0.1:11434` 极速直连\n\n## 2. 性能排查与调优秘籍\n测试过程中遇到了“每次提问卡顿 50 秒”的问题，经过 `top` 分析和指标剖析：\n1. **解除容器 CPU 配额**：确保 4 线程全开（`eval rate` 提升至 14 tokens/s）；\n2. **内存永久常驻**：注入 `OLLAMA_KEEP_ALIVE=-1`，避免 5 分钟超时后重新读盘；\n3. **清空全局默认 Prompt**：消除了默认附带的 2050 历史 Token，读题耗时从 60s 骤降至 0.2s！\n\n```bash\n# 测试模型运行性能\ndocker exec -it 1Panel-ollama-nzre ollama run qwen2.5:1.5b --verbose\n```\n\n> 纯 CPU 跑 7B 参数是物理带宽瓶颈，日常开发推荐搭配 1.5B~3B 模型，速度与逻辑达到最佳平衡！',
'旺总',
'AI & 本地模型',
'DeepSeek,Ollama,OpenWebUI,性能调优',
'6 min',
982,
88,
NOW()
WHERE NOT EXISTS (SELECT 1 FROM `post` WHERE `title` = '探索本地大模型：从 Ollama 运行 DeepSeek R1 到 CPU 推理性能调优');
INSERT INTO `post` (`title`, `summary`, `content`, `author`, `category_name`, `tags`, `read_time`, `views`, `likes`, `created_at`)
SELECT
'全栈工程师实战：Spring Boot 3 + MySQL 8.0 持久化与 Gitea CI/CD 自动化交付',
'从零构建工业级 Spring Boot 3 分层架构，结合 MySQL 8.0 数据库持久化存储与私有 Gitea Actions 自动化流水线。',
'# 全栈工程化实践：Spring Boot 3 + MySQL 8.0 + CI/CD 自动化\n\n现代化开发的精髓在于**“把数据交给专业数据库持久化，把重复劳动交给自动化流水线”**。\n\n## 全栈架构一览\n```text\n[开发者本地 IDEA] ──git push──▶ [私有 Gitea 仓库]\n │\n (Gitea Actions 触发流水线)\n ▼\n [Docker Compose 全栈构建]\n │\n ┌───────────────────────────┼───────────────────────────┐\n ▼ ▼ ▼\n [MySQL 8.0 容器] [Spring Boot 3 容器] [Nginx 静态反代容器]\n```\n\n## 数据持久化规范\n- 数据文件挂载至命名卷 `mysql_data`，容器重启或重建数据零丢失；\n- Spring Data JPA 实现对象关系映射，自动完成数据库结构维护；\n- 统一 RESTful API 与响应封装，全栈开发得心应手！',
'旺总',
'全栈开发 & CI/CD',
'Spring Boot,MySQL,JPA,CI/CD',
'5 min',
756,
64,
NOW()
WHERE NOT EXISTS (SELECT 1 FROM `post` WHERE `title` = '全栈工程师实战：Spring Boot 3 + MySQL 8.0 持久化与 Gitea CI/CD 自动化交付');