2401_85194651

博客网站制作教程

首先就是技术框架：

后端：Java + Spring Boot
数据库：MySQL
前端：Vue.js
数据库连接：JPA (Java Persistence API)

1.项目结构

blog-app/
├── backend/
│ ├── src/main/java/com/example/blogapp/
│ │ ├── BlogApplication.java
│ │ ├── config/
│ │ │ └── DatabaseConfig.java
│ │ ├── controller/
│ │ │ └── BlogController.java
│ │ ├── model/
│ │ │ └── Blog.java
│ │ ├── repository/
│ │ │ └── BlogRepository.java
│ │ └── service/
│ │ └── BlogService.java
│ ├── src/main/resources/
│ │ ├── application.properties
│ │ └── data.sql
│ └── pom.xml
└── frontend/
├── public/
├── src/
│ ├── App.vue
│ ├── main.js
│ └── api.js
├── package.json
└── vue.config.js

2.后端实现

2.1创建后端项目

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
4.0.0
com.example
blogapp
0.0.1-SNAPSHOT
jar

BlogApp
A simple blog app

org.springframework.boot
spring-boot-starter-parent
2.7.4

UTF-8
UTF-8
11

org.springframework.boot
spring-boot-starter-web

org.springframework.boot
spring-boot-starter-data-jpa

mysql
mysql-connector-java

org.springframework.boot
spring-boot-maven-plugin

2.2主类

// backend/src/main/java/com/example/blogapp/BlogApplication.java
package com.example.blogapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class BlogApplication {
public static void main(String[] args) {
SpringApplication.run(BlogApplication.class, args);
}
}

2.3数据库配置

// backend/src/main/java/com/example/blogapp/config/DatabaseConfig.java
package com.example.blogapp.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

@Configuration
@EnableJpaRepositories(basePackages = "com.example.blogapp.repository")
public class DatabaseConfig {
}

2.4博客实体类

// backend/src/main/java/com/example/blogapp/model/Blog.java
package com.example.blogapp.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Blog {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String content;

// Getters and Setters
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 getContent() {
return content;
}

public void setContent(String content) {
this.content = content;
}
}

2.5博库仓库接口

// backend/src/main/java/com/example/blogapp/repository/BlogRepository.java
package com.example.blogapp.repository;

import com.example.blogapp.model.Blog;
import org.springframework.data.jpa.repository.JpaRepository;

public interface BlogRepository extends JpaRepository {
}

2.6博客服务类

// backend/src/main/java/com/example/blogapp/service/BlogService.java
package com.example.blogapp.service;

import com.example.blogapp.model.Blog;
import com.example.blogapp.repository.BlogRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BlogService {
@Autowired
private BlogRepository blogRepository;

public List getAllBlogs() {
return blogRepository.findAll();
}

public Blog saveBlog(Blog blog) {
return blogRepository.save(blog);
}
}

2.7博客控制器

// backend/src/main/java/com/example/blogapp/controller/BlogController.java
package com.example.blogapp.controller;

import com.example.blogapp.model.Blog;
import com.example.blogapp.service.BlogService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/blogs")
public class BlogController {
@Autowired
private BlogService blogService;

@GetMapping
public List getAllBlogs() {
return blogService.getAllBlogs();
}

@PostMapping
public Blog saveBlog(@RequestBody Blog blog) {
return blogService.saveBlog(blog);
}
}

2.8应用配置文件

# backend/src/main/resources/application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/blogdb
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

3.前端实现

3.1创建前端项目

npm install -g @vue/cli
vue create frontend
cd frontend

3.2 修改 main.js

// frontend/src/main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
render: h => h(App),
}).$mount('#app');