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

import webSQLHelp from '../store/websql-help'
import { blog, blogForm, blogList, articleList, discuss, discussList } from './blogModel'
import blogStateManage from '../model/blogState'
// 连接数据库 
const help = new webSQLHelp('vite2-blog', 1.0, '测试用的博客数据库')
// =====================数据库==============================
/**
 * 建立 vite2-blog 数据库，blog表、discuss表
 * @returns 建立数据库和表
 */
export const databaseInit = () => {
  help.createTable('blog', blog())
  help.createTable('discuss', discuss())
}
/**
 * 删除：blog表、discuss表
 * @returns 删除表
 */
export const deleteBlogTable = () => {
  help.deleteTable('blog')
  help.deleteTable('discuss')
}
/**
 * 博客的管理类
 * @returns 添加、修改、获得列表等
 */
export const blogManage = () => {
  // =====================博文==============================
  /**
   * 添加新的博文
   * @param { object } blog 博文 的 model
   * @return {*} promise，新博文的ID
   */
  const addNewBlog = (blog) => {
    return new Promise((resolve, reject) => {
      const newBlog = {}
      Object.assign(newBlog, blog, {
        addTime: new Date(), // 添加时间
        viewCount: 0, // 浏览量
        agreeCount: 0, // 点赞数量
        discussCount: 0 // 讨论数量
      })
      help.insert('blog', newBlog).then((id) => {
        resolve(id)
      })
    })
  }
  /**
   * 修改博文
   * @param { object } blog 博文 的 model
   * @return {*} promise，修改状态
   */
  const updateBlog = (blog) => {
    return new Promise((resolve, reject) => {
      help.update('blog', blog, blog.ID).then((state) => {
         resolve(state)
      })
    })
  }
  /**
   * 根据博文ID获取博文，编辑博文、显示博文用
   * @param { number } id 博文ID
   * @returns 
   */
  const getArtcileById = (id) => {
    return new Promise((resolve, reject) => {
      help.getDataById('blog', id).then((data) => {
        if (data.length > 0) {
          resolve(data[0])
        } else {
          console.log('没有找到记录', data)
          resolve({})
        }
      })
    })
  }
  /**
   * 依据分组ID获取博文列表，编辑博文列表用。
   * @param {number} groupId 分组ID
   * @returns 
   */
  const getBlogListByGroupId = (groupId) => {
    return new Promise((resolve, reject) => {
      help.select('blog', articleList(), {groupId: [401, groupId]})
        .then((data) => {
          resolve(data)
        })
    })
  }
  // 状态管理
  const { getBlogState } = blogStateManage()
  const blogState = getBlogState()
  /**
   * 依据状态，分页查询博文
   * @returns 博文列表
   */
  const getBlogList = () => {
    // 根据状态设置查询条件和分页条件
    const _query = blogState.findQuery || {}
    _query.state = [401, 2] // 显示发布的博文，设置固定查询条件
    return new Promise((resolve, reject) => {
      help.select('blog', blogList(), _query, blogState.page).then((data) => {
        resolve(data)
      })
    })
  }
  const getBlogCount = () => {
    // 根据状态设置查询条件和分页条件
    const _query = blogState.findQuery || {}
    _query.state = [401, 2] // 显示发布的博文，设置固定查询条件
    return new Promise((resolve, reject) => {
      help.getCountByWhere('blog', _query).then((count) => {
        resolve(count)
      })
    })
  }
  // =====================讨论==============================
  /**
   * 添加一个新讨论
   * @param {object}} discuss 讨论的model
   * @returns 
   */
  const addDiuss = (discuss) => {
    return new Promise((resolve, reject) => {
      const newDiscuss = {}
      Object.assign(newDiscuss, discuss, {
        addTime: new Date(), // 添加时间
        agreeCount: 0 // 点赞数量
      })
      help.insert('discuss', newDiscuss).then((id) => {
        resolve(id)
      })
    })
  }
  /**
   * 依据博文ID获取讨论列表。
   * @param {number} blogId 分组ID
   * @returns 
   */
   const getDiscussListByBlogId = (blogId) => {
    return new Promise((resolve, reject) => {
      help.select('discuss', discussList(), {blogId: [401, blogId]})
        .then((data) => {
          resolve(data)
        })
    })
  }
  return {
    addDiuss, // 添加新讨论
    getDiscussListByBlogId, // 依据博文ID获取讨论列表。
    addNewBlog, // 添加 新博文
    updateBlog, // 修改博文
    getArtcileById, // 根据博文ID获取博文
    getBlogListByGroupId, // 获取博文列表
    getBlogList, // 获取博文列表
    getBlogCount // 统计数量
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/vue3-blog/', // 修改发布网站的目录
  build: {
    outDir: 'blog' // 修改打包的默认文件夹
  }
})

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/home.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/write',
    name: 'write',
    component: () => import('../views/write.vue')
  },
  {
    path: '/blogs/:id',
    name: 'blogs',
    props: true,
    component: () => import('../views/blog.vue')
  },
  {
    path: '/groups/:groupId',
    name: 'groups',
    props: true,
    component: Home
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite2 + vue3 做的简单的个人博客</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

import { createApp, provide, reactive } from 'vue'
import App from './App.vue'
import router from './router' // 路由
// UI库
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// Markdown 编辑插件
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
VueMarkdownEditor.use(vuepressTheme)
// markdown 显示插件
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'
// 引入你所使用的主题 此处以 github 主题为例
// import githubTheme from '@kangc/v-md-editor/lib/theme/github'
VMdPreview.use(vuepressTheme)
// 建立数据库
import { databaseInit, deleteBlogTable } from './model/blogManage'
// deleteBlogTable()
databaseInit()
// 注入状态
import { blogState } from './model/blogState'
const state = reactive(blogState)
createApp(App)
  .provide('blogState', state) // 注入状态
  .use(router) // 路由
  .use(ElementPlus, { locale, size: 'small' }) // UI库
  .use(VueMarkdownEditor) // markDown编辑器
  .use(VMdPreview) // markDown 显示
  .mount('#app')