课次34：新闻发布与列表
任务清单
前端实现发布新闻页面，调用 /news/add 接口。
前端首页调用 /news/page 分页接口，展示表格。
操作步骤
主要修改前端工程，后端工程已有相应的功能

步骤1：修改 api/news.js
全部替换为如下内容：

import request from '../utils/request'

export const getNewsPage = (page, size) => {
return request.get('/news/page', { params: { page, size } })
}

export const publishNews = (data) => {
return request.post('/news/add', data)
}

export const getNewsDetail = (id) => {
return request.get(/news/${id})
}

export const updateNews = (id, data) => {
return request.put(/news/${id}, data)
}

export const deleteNews = (id) => {
return request.delete(/news/${id})
}

export const likeNews = (id, likes) => request.patch(/news/${id}, { likes })
步骤2：修改 Home.vue（加载新闻列表）
替换template和script的内容，保留style中的内容，替换的内容如下：

步骤3：创建发布新闻页面
右键views文件夹，新建Publish.vue

目录结构：

Publish.vue中的代码：

步骤4：添加路由
在src/router/index.js 添加

import Publish from '../views/Publish.vue'
{ path: '/publish', component: Publish, meta: { requiresAuth: true } }
注意加上逗号，添加位置如下：

课次34结束时的项目状态
首页显示新闻列表（分页）。
点击发布新闻，填写表单提交，成功后跳转首页，列表自动刷新。
课次34：新闻发布与列表
任务清单
操作步骤
步骤1：修改 api/news.js
步骤2：修改 Home.vue（加载新闻列表）
步骤3：创建发布新闻页面
步骤4：添加路由
课次34结束时的项目状态

EOF