yunzerwebsite/yunzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改接口匹配新前端

Browse Source
This commit is contained in:
hero920103
2025-12-24 17:41:33 +08:00
parent 5691a3f677
commit 2161113eae
18 changed files with 1134 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/article.ts
+110
View File
@@ -0,0 +1,110 @@
import axios from 'axios'
import ENV_CONFIG from '@/config/env'
// 创建axios实例
const api = axios.create({
baseURL: ENV_CONFIG.API_BASE_URL,
timeout: ENV_CONFIG.REQUEST_TIMEOUT,
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截器 - 添加token
api.interceptors.request.use(
(config) => {
const token = localStorage.getItem(ENV_CONFIG.TOKEN_KEY)
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器 - 处理错误
api.interceptors.response.use(
(response) => {
const data = response.data
// 检查后端返回的状态码
if (data.code === 0) {
// 成功，返回data字段的内容
return data.data
} else {
// 失败，抛出错误
return Promise.reject(new Error(data.msg || '请求失败'))
}
},
(error) => {
if (error.response?.status === 401) {
// token过期，清除本地存储
localStorage.removeItem(ENV_CONFIG.TOKEN_KEY)
localStorage.removeItem(ENV_CONFIG.USER_INFO_KEY)
window.location.href = '/#/login'
}
return Promise.reject(error)
}
)
// 文章接口
export interface Article {
id: number
title: string
cate: string
image: string
desc: string
author: string
content: string
publishdate: string
sort: number | null
status: number
views: number
likes: number
is_trans: string
transurl: string | null
push: string
create_time: string
update_time: string | null
delete_time: string | null
}
// 获取文章列表的响应类型
export interface ArticleListResponse {
data: Article[]
count: number
}
// 获取文章列表
export const getArticleList = (params?: {
page?: number
pageSize?: number
search?: string
category?: string
}): Promise<ArticleListResponse> => {
return api.get('/admin/articles/articlelist', { params })
}
// 删除文章
export const deleteArticle = (id: number) => {
return api.delete(`/admin/articles/${id}`)
}
// 发布/取消发布文章
export const publishArticle = (id: number, status: number) => {
return api.put(`/admin/articles/${id}/status`, { status })
}
// 编辑文章
export const updateArticle = (id: number, data: Partial<Article>) => {
return api.put(`/admin/articles/${id}`, data)
}
// 创建文章
export const createArticle = (data: Partial<Omit<Article, 'id' | 'create_time' | 'update_time' | 'delete_time'>>) => {
return api.post('/admin/articles', data)
}
export default api
frontend/src/config/env.ts
+1 -1
View File
@@ -2,7 +2,7 @@
const ENV_CONFIG = {
// API配置
API_BASE_URL: import.meta.env.VITE_APP_API_BASE_URL,
API_BASE_URL: import.meta.env.VITE_APP_API_BASE_URL || (import.meta.env.DEV ? 'http://localhost:8000/api' : 'https://www.yunzer.cn/api'),
REQUEST_TIMEOUT: 10000,
// 应用配置
frontend/src/views/articles/articlelist.vue
+236 -83
View File
@@ -34,15 +34,43 @@
border
>
<el-table-column prop="id" label="ID" width="80" align="center" />
<el-table-column prop="title" label="标题" min-width="200" />
<el-table-column prop="title" label="标题" min-width="200">
<template #default="scope">
<div class="title-cell">
<span class="title-text">{{ scope.row.title }}</span>
<el-tag v-if="scope.row.is_trans === '是'" size="small" type="warning">转</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="cate" label="分类" width="120" />
<el-table-column prop="author" label="作者" width="120" />
<el-table-column prop="category" label="分类" width="120" />
<el-table-column prop="create_time" label="创建时间" width="180" />
<el-table-column label="操作" width="220">
<el-table-column prop="views" label="浏览" width="80" align="center" />
<el-table-column prop="likes" label="点赞" width="80" align="center" />
<el-table-column label="状态" width="100" align="center">
<template #default="scope">
<el-tag :type="scope.row.status === 2 ? 'success' : 'info'">
{{ scope.row.status === 2 ? '已发布' : '草稿' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="publishdate" label="发布时间" width="180" />
<el-table-column label="操作" width="250">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
<el-button size="small" type="primary" @click="handlePublishSingle(scope.row)">发布</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.row)"
>
删除
</el-button>
<el-button
size="small"
:type="scope.row.status === 2 ? 'warning' : 'success'"
@click="handlePublishSingle(scope.row)"
>
{{ scope.row.status === 2 ? '取消发布' : '发布' }}
</el-button>
</template>
</el-table-column>
</el-table>
@@ -58,16 +86,16 @@
</div>
</el-card>
<!-- 发布文章对话框 -->
<el-dialog v-model="publishDialogVisible" title="发布文章" width="500px">
<el-dialog v-model="publishDialogVisible" title="发布文章" width="600px">
<el-form :model="publishForm" label-width="80px">
<el-form-item label="标题">
<el-input v-model="publishForm.title" />
<el-form-item label="标题" required>
<el-input v-model="publishForm.title" placeholder="请输入文章标题" />
</el-form-item>
<el-form-item label="作者">
<el-input v-model="publishForm.author" />
<el-form-item label="作者" required>
<el-input v-model="publishForm.author" placeholder="请输入作者姓名" />
</el-form-item>
<el-form-item label="分类">
<el-select v-model="publishForm.category" placeholder="请选择分类">
<el-form-item label="分类" required>
<el-select v-model="publishForm.cate" placeholder="请选择分类">
<el-option
v-for="item in categoryOptions"
:key="item"
@@ -76,91 +104,172 @@
/>
</el-select>
</el-form-item>
<el-form-item label="内容">
<el-form-item label="是否转载">
<el-radio-group v-model="publishForm.is_trans">
<el-radio label="否">原创</el-radio>
<el-radio label="是">转载</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="原文链接" v-if="publishForm.is_trans === '是'">
<el-input v-model="publishForm.transurl" placeholder="请输入原文链接" />
</el-form-item>
<el-form-item label="内容" required>
<el-input
v-model="publishForm.content"
type="textarea"
:rows="4"
:rows="6"
placeholder="请输入文章内容"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="publishDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitPublish">发布</el-button>
<el-button type="primary" @click="submitPublish" :loading="loading">发布</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 这里假设有文章API
// import { getArticleList } from '@/api/article'
import { ref, onMounted, computed } from 'vue'
import { getArticleList, deleteArticle, publishArticle, createArticle, Article, ArticleListResponse } from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus'
const articles = ref<any[]>([])
const articles = ref<Article[]>([])
const loading = ref(false)
const search = ref('')
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const selectedCategory = ref('')
const categoryOptions = ref<string[]>([
'前端', '后端', '数据库', '架构', '安全', '运维', '测试'
])
// 从文章数据中提取分类选项
const categoryOptions = computed(() => {
const categories = new Set<string>()
articles.value.forEach(article => {
categories.add(article.cate)
})
return Array.from(categories).sort()
})
// 发布文章相关
const publishDialogVisible = ref(false)
const publishForm = ref({
title: '',
author: '',
category: '',
content: ''
cate: '',
content: '',
is_trans: '否',
transurl: ''
})
function fetchArticles() {
async function fetchArticles() {
loading.value = true
// 这里用模拟数据，实际请替换为API请求
setTimeout(() => {
// 假数据
const all = [
{ id: 1, title: 'Vue3 入门', author: '张三', category: '前端', create_time: '2024-06-01 10:00' },
{ id: 2, title: 'TypeScript 实践', author: '李四', category: '前端', create_time: '2024-06-02 11:00' },
{ id: 3, title: 'PHP 高级技巧', author: '王五', category: '后端', create_time: '2024-06-03 12:00' },
{ id: 4, title: '数据库优化', author: '赵六', category: '数据库', create_time: '2024-06-04 13:00' },
{ id: 5, title: '云原生架构', author: '钱七', category: '架构', create_time: '2024-06-05 14:00' },
{ id: 6, title: '安全最佳实践', author: '孙八', category: '安全', create_time: '2024-06-06 15:00' },
{ id: 7, title: '性能调优', author: '周九', category: '运维', create_time: '2024-06-07 16:00' },
{ id: 8, title: '微服务设计', author: '吴十', category: '架构', create_time: '2024-06-08 17:00' },
{ id: 9, title: '前端工程化', author: '郑十一', category: '前端', create_time: '2024-06-09 18:00' },
{ id: 10, title: '测试驱动开发', author: '冯十二', category: '测试', create_time: '2024-06-10 19:00' },
{ id: 11, title: '持续集成', author: '褚十三', category: '运维', create_time: '2024-06-11 20:00' }
]
let filtered = all
if (search.value) {
filtered = filtered.filter(a => a.title.includes(search.value))
try {
const params = {
page: page.value,
pageSize: pageSize.value,
search: search.value || undefined,
category: selectedCategory.value || undefined
}
if (selectedCategory.value) {
filtered = filtered.filter(a => a.category === selectedCategory.value)
}
total.value = filtered.length
const start = (page.value - 1) * pageSize.value
articles.value = filtered.slice(start, start + pageSize.value)
const result = await getArticleList(params)
articles.value = result.data
total.value = result.count
} catch (error: any) {
console.error('获取文章列表失败:', error)
ElMessage.error(error.message || '获取文章列表失败')
// 如果API调用失败，使用模拟数据作为后备
loadMockData()
} finally {
loading.value = false
}, 500)
}
}
function handleEdit(row: any) {
// 后备模拟数据
function loadMockData() {
const all: Article[] = [
{
id: 1,
title: 'Vue3 入门',
cate: '前端',
author: '张三',
create_time: '2024-06-01 10:00',
views: 0,
status: 1,
image: '',
desc: '',
content: '',
publishdate: '2024-06-01 10:00',
sort: null,
likes: 0,
is_trans: '否',
transurl: null,
push: '0',
update_time: null,
delete_time: null
},
{
id: 2,
title: 'TypeScript 实践',
cate: '前端',
author: '李四',
create_time: '2024-06-02 11:00',
views: 0,
status: 1,
image: '',
desc: '',
content: '',
publishdate: '2024-06-02 11:00',
sort: null,
likes: 0,
is_trans: '否',
transurl: null,
push: '0',
update_time: null,
delete_time: null
}
]
let filtered = all
if (search.value) {
filtered = filtered.filter(a => a.title.includes(search.value))
}
if (selectedCategory.value) {
filtered = filtered.filter(a => a.cate === selectedCategory.value)
}
total.value = filtered.length
const start = (page.value - 1) * pageSize.value
articles.value = filtered.slice(start, start + pageSize.value)
}
function handleEdit(row: Article) {
// 编辑文章逻辑
alert('编辑文章: ' + row.title)
ElMessage.info('编辑功能开发中: ' + row.title)
// TODO: 跳转到编辑页面或打开编辑对话框
}
function handleDelete(row: any) {
// 删除文章逻辑
if (confirm('确定要删除文章 "' + row.title + '" 吗？')) {
// 实际应调用API
articles.value = articles.value.filter(a => a.id !== row.id)
total.value--
async function handleDelete(row: Article) {
try {
await ElMessageBox.confirm(
`确定要删除文章 "${row.title}" 吗？此操作不可恢复。`,
'确认删除',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
await deleteArticle(row.id)
ElMessage.success('删除成功')
fetchArticles()
} catch (error: any) {
if (error !== 'cancel') {
console.error('删除文章失败:', error)
ElMessage.error(error.message || '删除失败')
}
}
}
@@ -169,42 +278,73 @@ function handlePageChange(val: number) {
fetchArticles()
}
// 点击“发布文章”按钮
// 点击"发布文章"按钮
function handlePublish() {
publishForm.value = {
title: '',
author: '',
category: '',
content: ''
cate: '',
content: '',
is_trans: '否',
transurl: ''
}
publishDialogVisible.value = true
}
// 单条发布（模拟，实际应调用API）
function handlePublishSingle(row: any) {
alert('发布文章: ' + row.title)
// 单条发布/取消发布
async function handlePublishSingle(row: Article) {
try {
const newStatus = row.status === 1 ? 2 : 1
const actionText = newStatus === 2 ? '发布' : '取消发布'
await publishArticle(row.id, newStatus)
ElMessage.success(`${actionText}成功`)
fetchArticles()
} catch (error: any) {
console.error('发布操作失败:', error)
ElMessage.error(error.message || '操作失败')
}
}
// 提交发布
function submitPublish() {
if (!publishForm.value.title || !publishForm.value.author || !publishForm.value.category) {
alert('请填写完整信息')
async function submitPublish() {
if (!publishForm.value.title || !publishForm.value.author || !publishForm.value.cate || !publishForm.value.content) {
ElMessage.error('请填写完整信息')
return
}
// 实际应调用API，这里直接添加到表格
const newId = Math.max(...articles.value.map(a => a.id), 0) + 1
articles.value.unshift({
id: newId,
title: publishForm.value.title,
author: publishForm.value.author,
category: publishForm.value.category,
create_time: new Date().toISOString().slice(0, 16).replace('T', ' ')
})
total.value++
publishDialogVisible.value = false
// 可选：重置分页到第一页
page.value = 1
fetchArticles()
if (publishForm.value.is_trans === '是' && !publishForm.value.transurl) {
ElMessage.error('转载文章必须填写原文链接')
return
}
try {
// 准备提交的数据
const submitData = {
title: publishForm.value.title,
author: publishForm.value.author,
cate: publishForm.value.cate,
content: publishForm.value.content,
desc: publishForm.value.content.substring(0, 200), // 摘要，取前200字符
image: '',
publishdate: new Date().toISOString().slice(0, 19).replace('T', ' '),
sort: null,
status: 1,
views: 0,
likes: 0,
is_trans: publishForm.value.is_trans,
transurl: publishForm.value.is_trans === '是' ? publishForm.value.transurl : null,
push: '0'
}
await createArticle(submitData)
ElMessage.success('发布成功')
publishDialogVisible.value = false
fetchArticles()
} catch (error: any) {
console.error('发布文章失败:', error)
ElMessage.error(error.message || '发布失败')
}
}
onMounted(() => {
@@ -231,4 +371,17 @@ onMounted(() => {
margin-top: 20px;
text-align: right;
}
.title-cell {
display: flex;
align-items: center;
gap: 8px;
}
.title-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
frontend/src/views/login/index.vue
+2
View File
@@ -10,6 +10,7 @@
<el-input
:prefix-icon="User"
v-model="loginForm.account"
placeholder="请输入您的邮箱"
></el-input>
</el-form-item>
<el-form-item>
@@ -17,6 +18,7 @@
type="password"
:prefix-icon="Lock"
v-model="loginForm.password"
placeholder="请输入您的密码"
show-password
></el-input>
</el-form-item>