• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    golang+vue打造高效多语言博客系统的完整指南

    发布者: 福建二哥 | 发布时间: 2025-8-14 10:57| 查看数: 58| 评论数: 0|帖子模式

    后端部分 (Go)


    1. 首先创建文章相关的数据模型
    1. package model

    3. import (
    4.         "gorm.io/gorm"
    5. )

    7. // Article 文章主表
    8. type Article struct {
    9.         gorm.Model
    10.         Status     uint8  `json:"status" gorm:"default:1"` // 状态：0-禁用 1-启用
    11.         Sort       int    `json:"sort" gorm:"default:0"`   // 排序
    12.         AuthorId   uint   `json:"authorId"`                // 作者ID
    13.         CategoryId uint   `json:"categoryId"`              // 分类ID
    14.         Thumbnail  string `json:"thumbnail"`               // 缩略图
    15.        
    16.         // 关联
    17.         Translations []ArticleTranslation `json:"translations"`
    18.         Category     ArticleCategory      `json:"category"`
    19. }

    21. // ArticleTranslation 文章翻译表
    22. type ArticleTranslation struct {
    23.         gorm.Model
    24.         ArticleId   uint   `json:"articleId"`
    25.         Lang        string `json:"lang" gorm:"size:5"`        // 语言代码 如：zh-CN, en-US
    26.         Title       string `json:"title"`                     // 标题
    27.         Description string `json:"description"`               // 描述
    28.         Content     string `json:"content" gorm:"type:text"`  // 内容
    29.         Keywords    string `json:"keywords"`                  // SEO关键词
    30.         Slug        string `json:"slug" gorm:"uniqueIndex"`   // URL友好的标题
    31. }

    33. // ArticleCategory 文章分类
    34. type ArticleCategory struct {
    35.         gorm.Model
    36.         ParentId     uint   `json:"parentId"`
    37.         Status       uint8  `json:"status" gorm:"default:1"`
    38.         Sort         int    `json:"sort" gorm:"default:0"`
    39.         Translations []ArticleCategoryTranslation `json:"translations"`
    40. }

    42. // ArticleCategoryTranslation 分类翻译表
    43. type ArticleCategoryTranslation struct {
    44.         gorm.Model
    45.         CategoryId  uint   `json:"categoryId"`
    46.         Lang        string `json:"lang" gorm:"size:5"`
    47.         Name        string `json:"name"`
    48.         Description string `json:"description"`
    49.         Slug        string `json:"slug" gorm:"uniqueIndex"`
    50. }
    复制代码
    2. 创建服务层
    1. package service

    3. import (
    4.         "dagisku-server/app/model"
    5.         "dagisku-server/global"
    6. )

    8. type ArticleService struct{}

    10. type ArticleListRequest struct {
    11.         Page     int    `json:"page" form:"page"`
    12.         PageSize int    `json:"pageSize" form:"pageSize"`
    13.         Lang     string `json:"lang" form:"lang"`
    14.         Status   *uint8 `json:"status" form:"status"`
    15.         CategoryId *uint `json:"categoryId" form:"categoryId"`
    16. }

    18. func (s *ArticleService) GetList(req ArticleListRequest) (list []model.Article, total int64, err error) {
    19.         limit := req.PageSize
    20.         offset := req.PageSize * (req.Page - 1)
    21.        
    22.         db := global.DB.Model(&model.Article{})
    23.        
    24.         // 构建查询条件
    25.         if req.Status != nil {
    26.                 db = db.Where("status = ?", *req.Status)
    27.         }
    28.         if req.CategoryId != nil {
    29.                 db = db.Where("category_id = ?", *req.CategoryId)
    30.         }
    31.        
    32.         // 预加载翻译数据
    33.         db = db.Preload("Translations", "lang = ?", req.Lang)
    34.         db = db.Preload("Category").Preload("Category.Translations", "lang = ?", req.Lang)
    35.        
    36.         err = db.Count(&total).Error
    37.         if err != nil {
    38.                 return
    39.         }
    40.        
    41.         err = db.Order("sort desc, id desc").Limit(limit).Offset(offset).Find(&list).Error
    42.         return
    43. }

    45. func (s *ArticleService) Create(article *model.Article) error {
    46.         return global.DB.Create(article).Error
    47. }

    49. func (s *ArticleService) Update(article *model.Article) error {
    50.         return global.DB.Save(article).Error
    51. }

    53. func (s *ArticleService) Delete(id uint) error {
    54.         return global.DB.Delete(&model.Article{}, id).Error
    55. }
    复制代码
    3. 创建控制器
    1. package article

    3. import (
    4.         "dagisku-server/app/model"
    5.         "dagisku-server/app/service"
    6.         "dagisku-server/utils/response"
    7.         "github.com/gin-gonic/gin"
    8. )

    10. type ArticleApi struct{}

    12. // List 获取文章列表
    13. func (api *ArticleApi) List(c *gin.Context) {
    14.         var req service.ArticleListRequest
    15.         if err := c.ShouldBindQuery(&req); err != nil {
    16.                 response.FailWithMessage(err.Error(), c)
    17.                 return
    18.         }
    19.        
    20.         if req.Page == 0 {
    21.                 req.Page = 1
    22.         }
    23.         if req.PageSize == 0 {
    24.                 req.PageSize = 10
    25.         }
    26.        
    27.         service := service.ArticleService{}
    28.         list, total, err := service.GetList(req)
    29.         if err != nil {
    30.                 response.FailWithMessage(err.Error(), c)
    31.                 return
    32.         }
    33.        
    34.         response.OkWithData(gin.H{
    35.                 "list": list,
    36.                 "total": total,
    37.         }, c)
    38. }

    40. // Create 创建文章
    41. func (api *ArticleApi) Create(c *gin.Context) {
    42.         var article model.Article
    43.         if err := c.ShouldBindJSON(&article); err != nil {
    44.                 response.FailWithMessage(err.Error(), c)
    45.                 return
    46.         }
    47.        
    48.         service := service.ArticleService{}
    49.         if err := service.Create(&article); err != nil {
    50.                 response.FailWithMessage(err.Error(), c)
    51.                 return
    52.         }
    53.        
    54.         response.Ok(c)
    55. }

    57. // Update 更新文章
    58. func (api *ArticleApi) Update(c *gin.Context) {
    59.         var article model.Article
    60.         if err := c.ShouldBindJSON(&article); err != nil {
    61.                 response.FailWithMessage(err.Error(), c)
    62.                 return
    63.         }
    64.        
    65.         service := service.ArticleService{}
    66.         if err := service.Update(&article); err != nil {
    67.                 response.FailWithMessage(err.Error(), c)
    68.                 return
    69.         }
    70.        
    71.         response.Ok(c)
    72. }

    74. // Delete 删除文章
    75. func (api *ArticleApi) Delete(c *gin.Context) {
    76.         id := c.Param("id")
    77.         service := service.ArticleService{}
    78.         if err := service.Delete(uint(id)); err != nil {
    79.                 response.FailWithMessage(err.Error(), c)
    80.                 return
    81.         }
    82.        
    83.         response.Ok(c)
    84. }
    复制代码
    4. 注册路由
    1. // ... existing code ...

    3. type ApiGroup struct {
    4.         LoginApi
    5.         system.DBApi
    6.         system.JwtApi
    7.         // ... other existing APIs ...
    8.         article.ArticleApi
    9.         article.ArticleCategoryApi
    10. }

    12. // ... existing code ...
    复制代码
    1. func InitAdminRouter(Router *gin.RouterGroup) {
    2.         adminRouter := Router.Group("admin")
    3.        
    4.         // ... existing routes ...
    5.        
    6.         // 文章相关路由
    7.         articleRouter := adminRouter.Group("article")
    8.         {
    9.                 articleRouter.GET("list", articleApi.List)
    10.                 articleRouter.POST("create", articleApi.Create)
    11.                 articleRouter.PUT("update", articleApi.Update)
    12.                 articleRouter.DELETE("delete/:id", articleApi.Delete)
    13.         }
    14. }
    复制代码
    前端部分 (Nuxt 3)


    1. 创建API请求
    1. import { useFetch } from '#app'

    3. export const useArticleApi = () => {
    4.   const config = useRuntimeConfig()
    5.   const baseURL = config.public.apiBase
    6.   
    7.   const getList = async (params: {
    8.     page: number
    9.     pageSize: number
    10.     lang: string
    11.     status?: number
    12.     categoryId?: number
    13.   }) => {
    14.     return await useFetch('/admin/article/list', {
    15.       baseURL,
    16.       method: 'GET',
    17.       params
    18.     })
    19.   }
    20.   
    21.   const create = async (data: any) => {
    22.     return await useFetch('/admin/article/create', {
    23.       baseURL,
    24.       method: 'POST',
    25.       body: data
    26.     })
    27.   }
    28.   
    29.   const update = async (data: any) => {
    30.     return await useFetch('/admin/article/update', {
    31.       baseURL,
    32.       method: 'PUT',
    33.       body: data
    34.     })
    35.   }
    36.   
    37.   const remove = async (id: number) => {
    38.     return await useFetch(`/admin/article/delete/${id}`, {
    39.       baseURL,
    40.       method: 'DELETE'
    41.     })
    42.   }
    43.   
    44.   return {
    45.     getList,
    46.     create,
    47.     update,
    48.     remove
    49.   }
    50. }
    复制代码
    2. 创建文章列表页面
    1. <template>
    2.   <div>
    3.     <el-card>
    4.       <!-- 搜索栏 -->
    5.       <el-form :inline="true" :model="searchForm">
    6.         <el-form-item>
    7.           <el-select v-model="searchForm.lang" placeholder="选择语言">
    8.             <el-option label="中文" value="zh-CN" />
    9.             <el-option label="English" value="en-US" />
    10.           </el-select>
    11.         </el-form-item>
    12.         <el-form-item>
    13.           <el-button type="primary" @click="loadData">搜索</el-button>
    14.           <el-button @click="handleAdd">新增</el-button>
    15.         </el-form-item>
    16.       </el-form>
    17.       
    18.       <!-- 数据表格 -->
    19.       <el-table :data="tableData" v-loading="loading">
    20.         <el-table-column prop="id" label="ID" width="80" />
    21.         <el-table-column label="标题">
    22.           <template #default="{ row }">
    23.             {{ row.translations?.[0]?.title }}
    24.           </template>
    25.         </el-table-column>
    26.         <el-table-column label="分类">
    27.           <template #default="{ row }">
    28.             {{ row.category?.translations?.[0]?.name }}
    29.           </template>
    30.         </el-table-column>
    31.         <el-table-column prop="status" label="状态">
    32.           <template #default="{ row }">
    33.             <el-tag :type="row.status === 1 ? 'success' : 'info'">
    34.               {{ row.status === 1 ? '启用' : '禁用' }}
    35.             </el-tag>
    36.           </template>
    37.         </el-table-column>
    38.         <el-table-column label="操作" width="200">
    39.           <template #default="{ row }">
    40.             <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
    41.             <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
    42.           </template>
    43.         </el-table-column>
    44.       </el-table>
    45.       
    46.       <!-- 分页 -->
    47.       <div class="pagination-container">
    48.         <el-pagination
    49.           v-model:current-page="page"
    50.           v-model:page-size="pageSize"
    51.           :total="total"
    52.           @current-change="loadData"
    53.         />
    54.       </div>
    55.     </el-card>
    56.    
    57.     <!-- 编辑弹窗 -->
    58.     <el-dialog
    59.       :title="dialogTitle"
    60.       v-model="dialogVisible"
    61.       width="800px"
    62.     >
    63.       <article-form
    64.         v-if="dialogVisible"
    65.         :form-data="formData"
    66.         @submit="handleSubmit"
    67.         @cancel="dialogVisible = false"
    68.       />
    69.     </el-dialog>
    70.   </div>
    71. </template>

    73. <script setup lang="ts">
    74. const { getList, remove } = useArticleApi()

    76. // 状态定义
    77. const searchForm = ref({
    78.   lang: 'zh-CN'
    79. })
    80. const loading = ref(false)
    81. const tableData = ref([])
    82. const page = ref(1)
    83. const pageSize = ref(10)
    84. const total = ref(0)
    85. const dialogVisible = ref(false)
    86. const dialogTitle = ref('')
    87. const formData = ref<any>({})

    89. // 加载数据
    90. const loadData = async () => {
    91.   loading.value = true
    92.   try {
    93.     const { data } = await getList({
    94.       page: page.value,
    95.       pageSize: pageSize.value,
    96.       lang: searchForm.value.lang
    97.     })
    98.     tableData.value = data.value.list
    99.     total.value = data.value.total
    100.   } finally {
    101.     loading.value = false
    102.   }
    103. }

    105. // 处理新增
    106. const handleAdd = () => {
    107.   formData.value = {
    108.     status: 1,
    109.     translations: [{ lang: searchForm.value.lang }]
    110.   }
    111.   dialogTitle.value = '新增文章'
    112.   dialogVisible.value = true
    113. }

    115. // 处理编辑
    116. const handleEdit = (row: any) => {
    117.   formData.value = { ...row }
    118.   dialogTitle.value = '编辑文章'
    119.   dialogVisible.value = true
    120. }

    122. // 处理删除
    123. const handleDelete = async (row: any) => {
    124.   try {
    125.     await ElMessageBox.confirm('确认删除该文章吗？')
    126.     await remove(row.id)
    127.     ElMessage.success('删除成功')
    128.     loadData()
    129.   } catch (err) {
    130.     // 取消删除时不显示错误
    131.     if (err !== 'cancel') {
    132.       ElMessage.error('删除失败')
    133.     }
    134.   }
    135. }

    137. // 处理表单提交
    138. const handleSubmit = async (data: any) => {
    139.   try {
    140.     if (data.id) {
    141.       await update(data)
    142.     } else {
    143.       await create(data)
    144.     }
    145.     ElMessage.success('保存成功')
    146.     dialogVisible.value = false
    147.     loadData()
    148.   } catch (err) {
    149.     ElMessage.error('保存失败')
    150.   }
    151. }

    153. // 初始加载
    154. onMounted(() => {
    155.   loadData()
    156. })
    157. </script>

    159. <style scoped>
    160. .pagination-container {
    161.   margin-top: 20px;
    162.   text-align: right;
    163. }
    164. </style>
    复制代码
    3. 创建文章表单组件
    1. <template>
    2.   <el-form
    3.     ref="formRef"
    4.     :model="form"
    5.     :rules="rules"
    6.     label-width="100px"
    7.   >
    8.     <el-tabs v-model="activeLang">
    9.       <el-tab-pane
    10.         v-for="lang in languages"
    11.         :key="lang.value"
    12.         :label="lang.label"
    13.         :name="lang.value"
    14.       >
    15.         <el-form-item
    16.           :prop="`translations.${getTransIndex(lang.value)}.title`"
    17.           label="标题"
    18.         >
    19.           <el-input
    20.             v-model="getTranslation(lang.value).title"
    21.             placeholder="请输入标题"
    22.           />
    23.         </el-form-item>
    24.         
    25.         <el-form-item
    26.           :prop="`translations.${getTransIndex(lang.value)}.description`"
    27.           label="描述"
    28.         >
    29.           <el-input
    30.             type="textarea"
    31.             v-model="getTranslation(lang.value).description"
    32.             placeholder="请输入描述"
    33.           />
    34.         </el-form-item>
    35.         
    36.         <el-form-item
    37.           :prop="`translations.${getTransIndex(lang.value)}.content`"
    38.           label="内容"
    39.         >
    40.           <editor
    41.             v-model="getTranslation(lang.value).content"
    42.             :height="400"
    43.           />
    44.         </el-form-item>
    45.       </el-tab-pane>
    46.     </el-tabs>
    47.    
    48.     <el-form-item label="分类" prop="categoryId">
    49.       <el-select v-model="form.categoryId">
    50.         <el-option
    51.           v-for="item in categories"
    52.           :key="item.id"
    53.           :label="item.translations[0].name"
    54.           :value="item.id"
    55.         />
    56.       </el-select>
    57.     </el-form-item>
    58.    
    59.     <el-form-item label="缩略图" prop="thumbnail">
    60.       <upload v-model="form.thumbnail" />
    61.     </el-form-item>
    62.    
    63.     <el-form-item label="状态" prop="status">
    64.       <el-switch
    65.         v-model="form.status"
    66.         :active-value="1"
    67.         :inactive-value="0"
    68.       />
    69.     </el-form-item>
    70.    
    71.     <el-form-item>
    72.       <el-button type="primary" @click="handleSubmit">保存</el-button>
    73.       <el-button @click="$emit('cancel')">取消</el-button>
    74.     </el-form-item>
    75.   </el-form>
    76. </template>

    78. <script setup lang="ts">
    79. const props = defineProps<{
    80.   formData: any
    81. }>()

    83. const emit = defineEmits(['submit', 'cancel'])

    85. // 表单数据
    86. const form = ref({
    87.   ...props.formData,
    88.   translations: props.formData.translations || []
    89. })

    91. // 语言配置
    92. const languages = [
    93.   { label: '中文', value: 'zh-CN' },
    94.   { label: 'English', value: 'en-US' }
    95. ]
    96. const activeLang = ref(languages[0].value)

    98. // 获取翻译索引
    99. const getTransIndex = (lang: string) => {
    100.   return form.value.translations.findIndex((t: any) => t.lang === lang)
    101. }

    103. // 获取或创建翻译
    104. const getTranslation = (lang: string) => {
    105.   let trans = form.value.translations.find((t: any) => t.lang === lang)
    106.   if (!trans) {
    107.     trans = { lang }
    108.     form.value.translations.push(trans)
    109.   }
    110.   return trans
    111. }

    113. // 表单验证规则
    114. const rules = {
    115.   categoryId: [{ required: true, message: '请选择分类' }],
    116.   translations: {
    117.     title: [{ required: true, message: '请输入标题' }],
    118.     content: [{ required: true, message: '请输入内容' }]
    119.   }
    120. }

    122. // 提交表单
    123. const formRef = ref()
    124. const handleSubmit = async () => {
    125.   if (!formRef.value) return
    126.   await formRef.value.validate()
    127.   emit('submit', form.value)
    128. }
    129. </script>
    复制代码
    4. 多语言配置
    1. import { createI18n } from 'vue-i18n'

    3. export default defineNuxtPlugin(({ vueApp }) => {
    4.   const i18n = createI18n({
    5.     legacy: false,
    6.     globalInjection: true,
    7.     locale: 'zh-CN',
    8.     messages: {
    9.       'zh-CN': {
    10.         article: {
    11.           title: '文章管理',
    12.           list: '文章列表',
    13.           add: '新增文章',
    14.           edit: '编辑文章',
    15.           // ... 其他翻译
    16.         }
    17.       },
    18.       'en-US': {
    19.         article: {
    20.           title: 'Article Management',
    21.           list: 'Article List',
    22.           add: 'New Article',
    23.           edit: 'Edit Article',
    24.           // ... 其他翻译
    25.         }
    26.       }
    27.     }
    28.   })

    30.   vueApp.use(i18n)
    31. })
    复制代码
    5. 前端路由配置
    1. export default defineNuxtRouteMiddleware((to) => {
    2.   const token = useCookie('token')
    3.   
    4.   if (!token.value && to.path.startsWith('/admin')) {
    5.     return navigateTo('/login')
    6.   }
    7. })
    复制代码
    这个实现包含了：

    • 后端完整的CRUD接口
    • 多语言支持（中英文）
    • 富文本编辑器支持
    • 图片上传功能
    • 分类管理
    • 权限控制
    以上就是golang+vue打造高效多语言博客系统的完整指南的详细内容，更多关于go vue多语言博客的资料请关注脚本之家其它相关文章！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    最新评论

    浏览过的版块

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表