后端部分 (Go)
1. 首先创建文章相关的数据模型
go:app/model/article.go
package model
import (
"gorm.io/gorm"
)
// Article 文章主表
type Article struct {
gorm.Model
Status uint8 `json:"status" gorm:"default:1"` // 状态：0-禁用 1-启用
Sort int `json:"sort" gorm:"default:0"` // 排序
AuthorId uint `json:"authorId"` // 作者ID
CategoryId uint `json:"categoryId"` // 分类ID
Thumbnail string `json:"thumbnail"` // 缩略图
// 关联
Translations []ArticleTranslation `json:"translations"`
Category ArticleCategory `json:"category"`
}
// ArticleTranslation 文章翻译表
type ArticleTranslation struct {
gorm.Model
ArticleId uint `json:"articleId"`
Lang string `json:"lang" gorm:"size:5"` // 语言代码 如：zh-CN, en-US
Title string `json:"title"` // 标题
Description string `json:"description"` // 描述
Content string `json:"content" gorm:"type:text"` // 内容
Keywords string `json:"keywords"` // SEO关键词
Slug string `json:"slug" gorm:"uniqueIndex"` // URL友好的标题
}
// ArticleCategory 文章分类
type ArticleCategory struct {
gorm.Model
ParentId uint `json:"parentId"`
Status uint8 `json:"status" gorm:"default:1"`
Sort int `json:"sort" gorm:"default:0"`
Translations []ArticleCategoryTranslation `json:"translations"`
}
// ArticleCategoryTranslation 分类翻译表
type ArticleCategoryTranslation struct {
gorm.Model
CategoryId uint `json:"categoryId"`
Lang string `json:"lang" gorm:"size:5"`
Name string `json:"name"`
Description string `json:"description"`
Slug string `json:"slug" gorm:"uniqueIndex"`
}2. 创建服务层
go:app/service/article_service.go
package service
import (
"dagisku-server/app/model"
"dagisku-server/global"
)
type ArticleService struct{}
type ArticleListRequest struct {
Page int `json:"page" form:"page"`
PageSize int `json:"pageSize" form:"pageSize"`
Lang string `json:"lang" form:"lang"`
Status *uint8 `json:"status" form:"status"`
CategoryId *uint `json:"categoryId" form:"categoryId"`
}
func (s *ArticleService) GetList(req ArticleListRequest) (list []model.Article, total int64, err error) {
limit := req.PageSize
offset := req.PageSize * (req.Page - 1)
db := global.DB.Model(&model.Article{})
// 构建查询条件
if req.Status != nil {
db = db.Where("status = ?", *req.Status)
}
if req.CategoryId != nil {
db = db.Where("category_id = ?", *req.CategoryId)
}
// 预加载翻译数据
db = db.Preload("Translations", "lang = ?", req.Lang)
db = db.Preload("Category").Preload("Category.Translations", "lang = ?", req.Lang)
err = db.Count(&total).Error
if err != nil {
return
}
err = db.Order("sort desc, id desc").Limit(limit).Offset(offset).Find(&list).Error
return
}
func (s *ArticleService) Create(article *model.Article) error {
return global.DB.Create(article).Error
}
func (s *ArticleService) Update(article *model.Article) error {
return global.DB.Save(article).Error
}
func (s *ArticleService) Delete(id uint) error {
return global.DB.Delete(&model.Article{}, id).Error
}3. 创建控制器
go:app/controller/admin/article/article.go
package article
import (
"dagisku-server/app/model"
"dagisku-server/app/service"
"dagisku-server/utils/response"
"github.com/gin-gonic/gin"
)
type ArticleApi struct{}
// List 获取文章列表
func (api *ArticleApi) List(c *gin.Context) {
var req service.ArticleListRequest
if err := c.ShouldBindQuery(&req); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
if req.Page == 0 {
req.Page = 1
}
if req.PageSize == 0 {
req.PageSize = 10
}
service := service.ArticleService{}
list, total, err := service.GetList(req)
if err != nil {
response.FailWithMessage(err.Error(), c)
return
}
response.OkWithData(gin.H{
"list": list,
"total": total,
}, c)
}
// Create 创建文章
func (api *ArticleApi) Create(c *gin.Context) {
var article model.Article
if err := c.ShouldBindJSON(&article); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
service := service.ArticleService{}
if err := service.Create(&article); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
response.Ok(c)
}
// Update 更新文章
func (api *ArticleApi) Update(c *gin.Context) {
var article model.Article
if err := c.ShouldBindJSON(&article); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
service := service.ArticleService{}
if err := service.Update(&article); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
response.Ok(c)
}
// Delete 删除文章
func (api *ArticleApi) Delete(c *gin.Context) {
id := c.Param("id")
service := service.ArticleService{}
if err := service.Delete(uint(id)); err != nil {
response.FailWithMessage(err.Error(), c)
return
}
response.Ok(c)
}4. 注册路由
go:app/controller/admin/enter.go
// ... existing code ...
type ApiGroup struct {
LoginApi
system.DBApi
system.JwtApi
// ... other existing APIs ...
article.ArticleApi
article.ArticleCategoryApi
}
// ... existing code ...
go:router/admin.go
func InitAdminRouter(Router *gin.RouterGroup) {
adminRouter := Router.Group("admin")
// ... existing routes ...
// 文章相关路由
articleRouter := adminRouter.Group("article")
{
articleRouter.GET("list", articleApi.List)
articleRouter.POST("create", articleApi.Create)
articleRouter.PUT("update", articleApi.Update)
articleRouter.DELETE("delete/:id", articleApi.Delete)
}
}前端部分 (Nuxt 3)
1. 创建API请求
typescript:composables/api/article.ts
import { useFetch } from '#app'
export const useArticleApi = () => {
const config = useRuntimeConfig()
const baseURL = config.public.apiBase
const getList = async (params: {
page: number
pageSize: number
lang: string
status?: number
categoryId?: number
}) => {
return await useFetch('/admin/article/list', {
baseURL,
method: 'GET',
params
})
}
const create = async (data: any) => {
return await useFetch('/admin/article/create', {
baseURL,
method: 'POST',
body: data
})
}
const update = async (data: any) => {
return await useFetch('/admin/article/update', {
baseURL,
method: 'PUT',
body: data
})
}
const remove = async (id: number) => {
return await useFetch(`/admin/article/delete/${id}`, {
baseURL,
method: 'DELETE'
})
}
return {
getList,
create,
update,
remove
}
}2. 创建文章列表页面
vue:pages/admin/article/index.vue
<template>
<div>
<el-card>
<!-- 搜索栏 -->
<el-form :inline="true" :model="searchForm">
<el-form-item>
<el-select v-model="searchForm.lang" placeholder="选择语言">
<el-option label="中文" value="zh-CN" />
<el-option label="English" value="en-US" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadData">搜索</el-button>
<el-button @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column label="标题">
<template #default="{ row }">
{{ row.translations?.[0]?.title }}
</template>
</el-table-column>
<el-table-column label="分类">
<template #default="{ row }">
{{ row.category?.translations?.[0]?.name }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:total="total"
@current-change="loadData"
/>
</div>
</el-card>
<!-- 编辑弹窗 -->
<el-dialog
:title="dialogTitle"
v-model="dialogVisible"
width="800px"
>
<article-form
v-if="dialogVisible"
:form-data="formData"
@submit="handleSubmit"
@cancel="dialogVisible = false"
/>
</el-dialog>
</div>
</template>
<script setup lang="ts">
const { getList, remove } = useArticleApi()
// 状态定义
const searchForm = ref({
lang: 'zh-CN'
})
const loading = ref(false)
const tableData = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref<any>({})
// 加载数据
const loadData = async () => {
loading.value = true
try {
const { data } = await getList({
page: page.value,
pageSize: pageSize.value,
lang: searchForm.value.lang
})
tableData.value = data.value.list
total.value = data.value.total
} finally {
loading.value = false
}
}
// 处理新增
const handleAdd = () => {
formData.value = {
status: 1,
translations: [{ lang: searchForm.value.lang }]
}
dialogTitle.value = '新增文章'
dialogVisible.value = true
}
// 处理编辑
const handleEdit = (row: any) => {
formData.value = { ...row }
dialogTitle.value = '编辑文章'
dialogVisible.value = true
}
// 处理删除
const handleDelete = async (row: any) => {
try {
await ElMessageBox.confirm('确认删除该文章吗？')
await remove(row.id)
ElMessage.success('删除成功')
loadData()
} catch (err) {
// 取消删除时不显示错误
if (err !== 'cancel') {
ElMessage.error('删除失败')
}
}
}
// 处理表单提交
const handleSubmit = async (data: any) => {
try {
if (data.id) {
await update(data)
} else {
await create(data)
}
ElMessage.success('保存成功')
dialogVisible.value = false
loadData()
} catch (err) {
ElMessage.error('保存失败')
}
}
// 初始加载
onMounted(() => {
loadData()
})
</script>
<style scoped>
.pagination-container {
margin-top: 20px;
text-align: right;
}
</style>3. 创建文章表单组件
vue:components/ArticleForm.vue
<template>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
>
<el-tabs v-model="activeLang">
<el-tab-pane
v-for="lang in languages"
:key="lang.value"
:label="lang.label"
:name="lang.value"
>
<el-form-item
:prop="`translations.${getTransIndex(lang.value)}.title`"
label="标题"
>
<el-input
v-model="getTranslation(lang.value).title"
placeholder="请输入标题"
/>
</el-form-item>
<el-form-item
:prop="`translations.${getTransIndex(lang.value)}.description`"
label="描述"
>
<el-input
type="textarea"
v-model="getTranslation(lang.value).description"
placeholder="请输入描述"
/>
</el-form-item>
<el-form-item
:prop="`translations.${getTransIndex(lang.value)}.content`"
label="内容"
>
<editor
v-model="getTranslation(lang.value).content"
:height="400"
/>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item label="分类" prop="categoryId">
<el-select v-model="form.categoryId">
<el-option
v-for="item in categories"
:key="item.id"
:label="item.translations[0].name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="缩略图" prop="thumbnail">
<upload v-model="form.thumbnail" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch
v-model="form.status"
:active-value="1"
:inactive-value="0"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">保存</el-button>
<el-button @click="$emit('cancel')">取消</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
const props = defineProps<{
formData: any
}>()
const emit = defineEmits(['submit', 'cancel'])
// 表单数据
const form = ref({
...props.formData,
translations: props.formData.translations || []
})
// 语言配置
const languages = [
{ label: '中文', value: 'zh-CN' },
{ label: 'English', value: 'en-US' }
]
const activeLang = ref(languages[0].value)
// 获取翻译索引
const getTransIndex = (lang: string) => {
return form.value.translations.findIndex((t: any) => t.lang === lang)
}
// 获取或创建翻译
const getTranslation = (lang: string) => {
let trans = form.value.translations.find((t: any) => t.lang === lang)
if (!trans) {
trans = { lang }
form.value.translations.push(trans)
}
return trans
}
// 表单验证规则
const rules = {
categoryId: [{ required: true, message: '请选择分类' }],
translations: {
title: [{ required: true, message: '请输入标题' }],
content: [{ required: true, message: '请输入内容' }]
}
}
// 提交表单
const formRef = ref()
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate()
emit('submit', form.value)
}
</script>4. 多语言配置
typescript:plugins/i18n.ts
import { createI18n } from 'vue-i18n'
export default defineNuxtPlugin(({ vueApp }) => {
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: 'zh-CN',
messages: {
'zh-CN': {
article: {
title: '文章管理',
list: '文章列表',
add: '新增文章',
edit: '编辑文章',
// ... 其他翻译
}
},
'en-US': {
article: {
title: 'Article Management',
list: 'Article List',
add: 'New Article',
edit: 'Edit Article',
// ... 其他翻译
}
}
}
})
vueApp.use(i18n)
})5. 前端路由配置
typescript:middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
const token = useCookie('token')
if (!token.value && to.path.startsWith('/admin')) {
return navigateTo('/login')
}
})这个实现包含了：
- 后端完整的CRUD接口
- 多语言支持（中英文）
- 富文本编辑器支持
- 图片上传功能
- 分类管理
- 权限控制