手拉手带你用 vite2 + vue3 + elementPlus 做个博客尝尝鲜（三）

<template>
  <!--博文列表-->
  <el-row :gutter="12">
    <el-col :span="5">
      <!--分组-->
      <blogGroup :isDetail="true"/>
    </el-col>
    <el-col :span="18">
      <el-card shadow="hover"
        v-for="(item, index) in blogList"
        :key="'bloglist_' + index"
      >
        <template #header>
          <div class="card-header">
            <router-link :to="{name:'blogs', params:{id:item.ID}}">
              {{item.title}}
            </router-link>
            <span class="button">({{dateFormat(item.addTime).format('YYYY-MM-DD')}})</span>
          </div>
        </template>
        <!--简介-->
        <div class="text item" v-html="item.introduction"></div>
        <hr>
        <i class="el-icon-view"></i>&nbsp;{{item.viewCount}}&nbsp;&nbsp;
        <i class="el-icon-circle-check"></i>&nbsp;{{item.agreeCount}}&nbsp;&nbsp;
        <i class="el-icon-chat-dot-square"></i>&nbsp;{{item.discussCount}}&nbsp;
      </el-card>
      <!--没有找到数据-->
      <el-empty description="没有找到博文呢。" v-if="blogList.length === 0"></el-empty>
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:currentPage="blogState.page.pageIndex"
        :page-size="blogState.page.pageSize"
        :total="blogState.page.pageTotal">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script setup>
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()

<template>
   <el-row :gutter="12">
    <el-col :span="4">
      <!--分组-->
      <blogGroup/>
    </el-col>
    <el-col :span="5">
      <!--标题列表-->
      <blogArticle/>
    </el-col>
    <el-col :span="14">
      <!--写博文-->
      <el-input
        style="width:90%"
        :show-word-limit="true"
        maxlength="100"
        placeholder="请输入博文标题，最多100字"
        v-model="blogModel.title"
      />
      <el-button type="primary" plain @click="submit"> 发布文章 </el-button>
      {{dateFormat(blogModel.addTime).format('YYYY-MM-DD HH:mm:ss')}}
      <v-md-editor
        :include-level="[1, 2, 3, 4]"
        v-model="blogModel.concent" :height="editHeight+'px'"></v-md-editor>1
    </el-col>
  </el-row>
</template>

【引入的代码略】
// 组件
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) => {
    // 通知列表
  })
}