基于Golang+Vue3快速搭建的博客系统

以下是一个简化的代码实例，展示了如何在Go中使用Gin框架和Vue 3创建一个简单的博客系统。

Go (Gin + GORM):

package main
 
import (
    "github.com/gin-gonic/gin"
    "github.com/gin-gonic/gin/binding"
    "gorm.io/driver/sqlite"
    "gorm.io/gorm"
)
 
type Post struct {
    gorm.Model
    Title   string
    Content string
}
 
func main() {
    r := gin.Default()
    db, err := gorm.Open(sqlite.Open("blog.db"), &gorm.Config{})
    if err != nil {
        panic("failed to connect database")
    }
    db.AutoMigrate(&Post{})
 
    // 创建博客
    r.POST("/posts", func(c *gin.Context) {
        var post Post
        if err := c.ShouldBindBodyWith(&post, binding.JSON); err != nil {
            c.JSON(400, gin.H{"error": err.Error()})
            return
        }
        db.Create(&post)
        c.JSON(200, post)
    })
 
    // 获取博客列表
    r.GET("/posts", func(c *gin.Context) {
        var posts []Post
        db.Find(&posts)
        c.JSON(200, posts)
    })
 
    r.Run()
}

Vue 3 (Vue CLI + Axios):

<template>
  <div>
    <input v-model="post.title" placeholder="Title" />
    <textarea v-model="post.content" placeholder="Content"></textarea>
    <button @click="createPost">Create Post</button>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      post: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    async createPost() {
      try {
        const response = await axios.post('http://localhost:8080/posts', this.post);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

这个简单的例子展示了如何使用Gin和GORM在Go端创建RESTful API，以及如何在Vue 3中使用Axios与该API进行交互。这个系统可以扩展，添加更多的功能，比如用户认证、分页、搜索等。