VUE3+GO个人博客系统:文章列表页和详情页的实现

在构建个人博客系统时，文章列表页和详情页是必不可少的两个界面。文章列表页用于展示所有文章的简略信息，详情页则用于显示文章的全文内容。在本篇博客中，我们将使用 Vue 3 作为前端框架，Go 作为后端语言，MySQL 作为数据库，来构建这两个页面。

配置环境

首先，确保你的开发环境已经安装了以下软件：

Node.js 和 npm
Go
MySQL
Vue CLI 4

你可以通过检查版本来验证是否已经安装：

node -v
npm -v
go version
mysql --version
vue --version

项目初始化

首先，我们需要通过 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令：

vue create my-blog

然后选择 "Manually select features"，选择 "Choose Vue version"，"Babel"，"Router"，"Linter / Formatter"，并在 "Choose Vue version" 中选择 Vue 3。

项目创建完成后，进入项目目录：

cd my-blog

构建文章列表页

首先，我们需要在 src/components 目录下创建一个新的组件 ArticleList.vue。这个组件将负责获取和显示文章列表。

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <h2>{
   
   { article.title }}</h2>
      <p>{
   
   { article.abstract }}</p>
      <router-link :to="`/article/${article.id}`">Read More</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      articles: [],
    };
  },
  async created() {
    const res = await axios.get('http://localhost:8080/articles');
    this.articles = res.data;
  },
};
</script>

在这个组件中，我们首先定义了一个 articles 数组用于存储文章数据。然后在组件创建完成后，我们使用 axios 向后端发送 GET 请求获取文章列表，并将获取到的数据赋值给 articles。

构建文章详情页

同样，我们需要在 src/components 目录下创建一个新的组件 ArticleDetail.vue。这个组件将负责获取和显示文章详情。

<template>
  <div>
    <h1>{
   
   { article.title }}</h1>
    <p>{
   
   { article.content }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      article: {},
    };
  },
  async created() {
    const id = this.$route.params.id;
    const res = await axios.get(`http://localhost:8080/articles/${id}`);
    this.article = res.data;
  },
};
</script>

这个组件的结构和 ArticleList.vue 类似，不同的是我们在组件创建完成后获取了当前路由的参数 id，然后使用这个 id 向后端发送 GET 请求获取文章详情。

配置路由

然后，我们需要在 src/router/index.js 文件中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import ArticleList from '../components/ArticleList.vue';
import ArticleDetail from '../components/ArticleDetail.vue';

const routes = [
  {
    path: '/',
    name: 'ArticleList',
    component: ArticleList,
  },
  {
    path: '/article/:id',
    name: 'ArticleDetail',
    component: ArticleDetail,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在这个配置文件中，我们为 ArticleList 组件定义了路径 '/'，为 ArticleDetail 组件定义了路径 '/article/:id'。

实现后端

接下来，我们需要实现后端服务。在 main.go 文件中，我们首先定义了两个结构 Article 和 Articles 用于存储文章数据。然后我们定义了一个处理函数 getArticles，用于处理 GET 请求并返回所有文章数据。同样，我们还定义了一个处理函数 getArticle，用于处理带有 id 参数的 GET 请求并返回对应的文章数据。

package main

import (
	"github.com/gin-gonic/gin"
	"net/http"
)

type Article struct {
	ID      int    `json:"id"`
	Title   string `json:"title"`
	Content string `json:"content"`
}

type Articles []Article

func getArticles(c *gin.Context) {
	articles := Articles{
		Article{1, "First Article", "This is the content of the first article."},
		Article{2, "Second Article", "This is the content of the second article."},
	}

	c.JSON(http.StatusOK, gin.H{"data": articles})
}

func getArticle(c *gin.Context) {
	id := c.Param("id")
	article := Article{1, "First Article", "This is the content of the first article."}

	if id == "1" {
		c.JSON(http.StatusOK, gin.H{"data": article})
	} else {
		c.JSON(http.StatusNotFound, gin.H{"data": "Not Found"})
	}
}

func main() {
	r := gin.Default()

	r.GET("/articles", getArticles)
	r.GET("/articles/:id", getArticle)

	r.Run(":8080")
}

连接MySQL数据库

为了从数据库中获取真实的数据，我们需要使用 database/sql 包来连接 MySQL 数据库。首先，我们需要在 main 函数中添加一个新的数据库连接：

import (
	"database/sql"
	_ "github.com/go-sql-driver/mysql"
	// other imports
)

func main() {
	db, err := sql.Open("mysql", "user:password@/dbname")
	if err != nil {
		log.Fatal(err)
	}
	defer db.Close()

	// other code
}

然后，我们需要在 getArticles 和 getArticle 函数中使用这个数据库连接来获取数据。因为这个任务涉及到了数据库操作，所以我无法在这里提供完整的代码。但基本的思路是：

使用 db.Query 或 db.QueryRow 函数执行 SQL 查询。
使用 rows.Scan 函数将查询结果存储到结构体中。

我希望这篇博客可以帮助你在 Vue 3 和 Go 中实现文章列表页和详情页。如果你有任何疑问，欢迎在评论区留言。