模板部分：
{{item.title}}
{{item.viewCount}}
{{item.agreeCount}}
{{item.discussCount}}
模板部分没有太大变化自己实现elementui表格自己实现elementui表格，还是一样的。 我使用 el-row 做了一个简单的布局：
代码部分：
import { watch, reactive } from 'vue'
import { useRoute } from 'vue-router'
import blogGroup from '../components/blog-group.vue'
import blogStateManage from '../model/blogState'
import { blogManage } from '../model/blogManage'
// 日期格式化
const dateFormat = dayjs
// 博文管理
const { getBlogList, getBlogCount } = blogManage()
// 状态管理
const { getBlogState } = blogStateManage()
// 博文的状态
const blogState = getBlogState()
// 博文列表
const blogList = reactive([])
【后面就不写这些引入的代码了】
/**
* 按照首页、分组、查询显示博文列表。
* 显示第一页，并且统计总记录数
*/
const showBlog = () => {
// 分组ID
let groupId = blogState.currentGroupId
if (groupId === 0) {
// 首页，清空查询条件，显示第一页
blogState.findQuery = {}
blogState.page.pageIndex = 1
} else {
// 分组的博文列表，设置分组条件，显示第一页
blogState.findQuery = {
groupId: [401, groupId]
}
blogState.page.pageIndex = 1
}
// 统计符合条件的总记录数
getBlogCount().then((count) => {
blogState.page.pageTotal = count
})
// 获取第一页的数据
getBlogList().then((data) => {
blogList.length = 0
blogList.push(...data)
})
}
const route = useRoute()
// 如果是首页，把 当前分组ID设置为 0 ，以便于显示所有分组的博文。
watch(() => route.fullPath, () => {
if (route.fullPath === '/' || route.fullPath === '/blog') {
blogState.currentGroupId = 0
}
})
// 监控选择的分组的ID
watch(() => blogState.currentGroupId, () => {
showBlog()
})
// 监听页号的变化，按照页号显示博文列表
watch(() => blogState.page.pageIndex, () => {
getBlogList().then((data) => {
blogList.length = 0
blogList.push(...data)
})
})
// 默认执行一遍
showBlog()
代码有点长，请问这是什么意思？ 还有优化的空间。
脚本设置更加简洁，省去了很多“麻烦”。 比如引入组件时，直接引入即可，无需再次注册。
const后无需返回，直接读取模板即可。
看看效果：
我是后端出身，不懂CSS，也没有美术功底，所以有点丑。 我希望你能理解我。
发布博客文章的表单
我们来学习一下《简书》的编辑方法。 我个人认为非常方便。 左边是群组目录，中间是所选群组的博客文章列表，右边是编辑博客文章的区域。
发布文章
{{dateFormat(blogModel.addTime).format('YYYY-MM-DD HH:mm:ss')}}
1
使用了简单的编辑方法后，感觉这个非常方便。
代码部分：
【引入的代码略】
// 组件
import blogGroup from '../components/blog-group.vue'
import blogArticle from '../components/blog-article.vue'
// 可见的高度
const editHeight = document.documentElement.clientHeight - 200
// 管理
const { updateBlog, getArtcileById } = blogManage()
// 表单的model
const blogModel = reactive(blogForm())
// 监控编辑文章的ID
watch(() => blogState.editArticleId, (v1, v2) => {
getArtcileById(v1).then((data) => {
Object.assign(blogModel, data)
})
})
// 发布文章
const submit = () => {
blogModel.ID = blogState.editArticleId
blogModel.state = 2 // 改为发布状态
updateBlog(blogModel).then((id) => {
// 通知列表
})
}
还有一个功能可以手动保存草稿并稍后创建。
我也体验过各个平台的发帖方式，我还是很喜欢这些方式，所以我的个人博客也采用这些方式来实现编辑博文的功能。
看看效果：
目录导航：
v-md-editor提供的目录导航功能还是很强大的。 看看大纲汇编，思路就清晰多了。
博客内容+讨论
{{blogInfo.title}}
({{dateFormat(blogInfo.addTime).format('YYYY-MM-DD')}})
【引入的代码略】
// 组件的属性，博文ID
const props = defineProps({
id: String
})
// 管理
const { getArtcileById } = blogManage()
// 表单的model
const blogInfo = reactive({})
getArtcileById(props.id).then((data) => {
Object.assign(blogInfo, data)
})
这段代码很简单，因为只实现了发布讨论和显示讨论的基本功能，其他功能暂略。
看功效：
嗯，这个讨论还是比较敷衍的。 其实说法很多，但篇幅有限。 稍后我会介绍他们。
组件级代码
虽然在vue上，除了js文件，还有vue文件，但是我觉得应该分解一下。
例如前面的是页面级代码，后面的是“组件”级代码。
博客文章分组
对多次提及的博客文章进行分组。
{{item.label}}
{{item.label}}
暂时使用el-card来实现，后续会改为NavMenu。
【引入的代码略】
// 组件的属性
const props = defineProps({
isDetail: Boolean
})
/**
* 博文的分组列表
*/
const blogGroupList = reactive([
{
value: '1000',
label: '前端',
children: [
{ value: '1001', label: 'vue基础知识', },
{ value: '1002', label: 'vue组件', },
{ value: '1003', label: 'vue路由', }
]
},
{ value: '2000', label: '后端',
children: [
{ value: '2001', label: 'MySQL', },
{ value: '2002', label: 'web服务', }
]
}
])
// 选择分组
const { setCurrentGroupId } = blogStateManage()
const router = useRouter()
const changeGroup = (id) => {
setCurrentGroupId(id)
// 判断是不是要跳转
// 首页、编辑页不跳，博文详细页面调整
if (props.isDetail) {
// 跳转到列表页
router.push({ name: 'groups', params: { groupId: id }})
}
}
分组数据暂时被硬编码，无法以以后创建的方式进行维护。
博客文章列表，用于编辑
添加新文章
{{item.ID}}：{{item.title}} ({{dateFormat(item.addTime).format('YYYY-MM-DD')}})
使用 el-card 列一个清单。 顶部是添加博客文章的按钮，底部是博客文章列表。 单击进行更改。
【引入的代码略】
// 博文列表
const blogList = reactive([])
// 博文管理
const { addNewBlog, getBlogListByGroupId } = blogManage()
// 状态管理
const { getBlogState, setEditArticleId } = blogStateManage()
// 博文的状态
const blogState = getBlogState()
// 更新列表
const load = () => {
getBlogListByGroupId(blogState.currentGroupId).then((data) => {
blogList.length = 0
blogList.push(...data)
})
}
load()
// 监控选择的分组的ID
watch(() => blogState.currentGroupId, () => {
load()
})
// 添加新文章，仅标题、时间
const addNewArticle = () => {
const newArticle = blogForm()
// 选择的分组ID
newArticle.groupId = blogState.currentGroupId
// 用日期作为默认标题
newArticle.title = dayjs(new Date()).format('YYYY-MM-DD')
addNewBlog(newArticle).then((id) => {
// 设置要编辑的文章ID
setEditArticleId(id)
// 通知列表
newArticle.ID = id
blogList.unshift(newArticle)
})
}
// 选择要编辑的文章
const changeArticle = (id) => {
setEditArticleId(id)
}
讨论列表
{{item.discusser}}
{{item.agreeCount}}
我们用 el-card 做一个列表，用 el-empty 做一个提示，不讨论。
【引入的代码略】
// 组件的属性
const props = defineProps({
id: String
})
// 管理
const { getDiscussListByBlogId } = blogManage()
// 获取状态
const { getBlogState } = blogStateManage()
const blogState = getBlogState()
// 表单的model
const discussList = reactive([])
getDiscussListByBlogId(props.id).then((data) => {
discussList.push(...data)
})
watch(() => blogState.isReloadDiussList, () => {
getDiscussListByBlogId(props.id).then((data) => {
discussList.length = 0
discussList.push(...data)
})
})
由于功能比较简单，所以代码也很简单。 只需要绑定并显示讨论数据即可。 寻呼功能尚未实现。
讨论形式
发表讨论
取消
使用 el-form 制作表单。
【引入的代码略】
// 组件的属性
const props = defineProps({
id: String
})
// 管理
const { addDiuss } = blogManage()
// 获取状态
const { getBlogState, setReloadDiussList } = blogStateManage()
const blogState = getBlogState()
// 表单的model
const dicussModel = reactive(discuss())
// 发布讨论
const submit = () => {
dicussModel.blogId = props.id // 这是博文ID
addDiuss(dicussModel).then((id) => { // 可以想象成 axios 的提交
// 通知列表
setReloadDiussList()
})
}
分成多个组件，每个组件的代码可以很小，更容易维护。
发布讨论功能，首先使用blogManage函数提交数据，并在回调函数之上，使用状态管理功能提醒讨论列表刷新数据。
源代码
在线演示
