vue-node-mongodb-blog

一款简约版本的 PC 博客。前端项目主要是采用 Vue2 和 Element-UI 来搭建的；采用 Webpack5 来构建、打包。后端项目主要采用 Node 框架 Koa2 以及 MongoDB 数据库来设计的。

1. PC 端博客线上预览地址：http://www.rasblog.com
2. PC 端博客仓库地址：https://github.com/Sujb-sus/vue-node-mongodb-blog
3. H5 端博客仓库地址：https://github.com/Sujb-sus/vue3-vite2-ts-blog-h5

主要功能

客户端

1. 文章功能：文章内容支持Markdown语法且代码高亮展示；
2. 标签功能：通过标签分类来检索文章数据；
3. 侧边栏功能：点击排行、站长推荐和标签分类等；
4. 搜索功能：通过关键词检索文章的标题和摘要，并支持搜索高亮；
5. 留言功能：可点赞、回复评论，统计评论以及回复总数，支持Emoji表情；
6. 其他功能：图片懒加载、分页、侧边栏吸顶以及一键置顶等；

管理端

1. 权限管理：CRUD 管理员，可分配权限；
2. 文章管理：CRUD 文章，文章封面支持本地上传、文章内容支持Markdown语法编辑；
3. 标签管理：CRUD 标签，标签背景色支持用Vue-Color插件自定义选择；
4. 留言管理：RD 评论以及回复；

项目结构

project-structure.png

技术运用

一. 自动化导入大量公共组件

1. 在components/common/index.js文件下通过require.context('文件路径', '是否遍历文件子目录', '匹配文件的正则')方法导入所有公共vue组件

// components/common/index.js
import Vue from "vue";
// 检索当前目录的vue文件且遍历子文件夹目录
const componentsContext = require.context("./", true, /.vue$/);
componentsContext.keys().forEach((component) => {
  // 获取文件中的 default 模块
  const componentConfig = componentsContext(component).default;
  componentConfig.name && Vue.component(componentConfig.name, componentConfig);
});

2. 在main.js导入components/common/index.js即可

import "src/components/common/index.js";

3. 这样所有components/common文件下的 vue 组件都被自动导入了，可在模板直接用组件，不需要在额外导入

二. 图片懒加载

原理：其实就是利用了img标签的src属性，我们先把所有图片的url置空，这样浏览器就不会去请求了；然后写个事件去监听可视区的范围；在进入该范围前拿到图片的url，在把它放到src属性中显示出来。

1. 安装vue-lazyload插件

yarn add vue-lazyload -S

2. 在main.js导入vue-lazyload

import VueLazyload from "vue-lazyload";
const loadimage = require("./images/loading.gif");
const errorimage = require("./images/load-error.jpeg");
Vue.use(VueLazyload, {
  preLoad: 1.3, // 提前加载高度（1 表示 1 屏的高度）
  error: errorimage, // 加载失败时显示的图片
  loading: loadimage, // 加载状态中显示的图片
  attempt: 1, // 加载错误后最大尝试次数
});

3. 将img标签的src属性直接替换为v-lazy即可

<img v-lazy="item.fileCoverImgUrl" @click="goto(item._id)" />

三. Vue-Color 自定义选择颜色

1. 安装vue-color插件

yarn add vue-color -S

2. 在组件内导入、解构出Sketch，并注册为组件便可运用

<sketch-picker v-model="currentColor" @input="colorValueChange"></sketch-picker>

import { Sketch } from "vue-color";
export default {
  name: "permissionAdd",
  components: {
    "sketch-picker": Sketch,
  },
  data() {
    return {
      currentColor: "rgba(70, 70, 70, 0.9)",
    };
  },
  methods: {
    // 颜色值改变事件处理，fmtObj可返回16进制、rgba等格式
    colorValueChange(fmtObj) {
      // 取颜色对象的 rgba 值
      const { r, g, b, a } = fmtObj.rgba;
      this.currentColor = `rgba(${r}, ${g}, ${b}, ${a})`;
    },
  },
};

四. less 全局变量导入

1. 安装style-resources-loader插件

yarn add style-resources-loader -D

2. 在webpack的module模块对后缀名为less的文件进行配置

module.exports = {
  module: {
    rules: [
      // 开发环境使用vue-style-loader可以重载样式模块
      {
        test: /\.less$/,
        use: [
          !isProd
            ? { loader: "vue-style-loader" }
            : MiniCssExtractPlugin.loader,
          { loader: "css-loader" },
          { loader: "less-loader" },
          {
            loader: "style-resources-loader",
            options: {
              patterns: path.resolve(__dirname, "../styles/theme.less"),
            },
          },
        ],
      },
    ],
  },
};

3. 这里有个缺点就是，修改了样式需要手动刷新页面，所以开发环境可以配合vue-style-loader使用，就可以重载样式模块

五. 支持 markdown 语法

1. 安装marked和highlightJs插件

yarn add marked highlightJs -S

2. 在组件内导入，通过计算属性将输入的文本格式转化为markdown语法

<textarea v-model="val"></textarea>
<div v-html="renderHtml"></div>

import marked from "marked";
import highlightJs from "highlight.js";

export default {
  computed: {
    renderHtml() {
      marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true, //允许 Git Hub标准的markdown.
        tables: true, //允许支持表格语法。该选项要求 gfm 为true。
        breaks: true, //允许回车换行。该选项要求 gfm 为true。
        pedantic: false, //尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
        sanitize: true, //对输出进行过滤（清理），将忽略任何已经输入的html代码（标签）
        smartLists: true, //使用比原生markdown更时髦的列表。 旧的列表将可能被作为pedantic的处理内容过滤掉.
        smartypants: false, //使用更为时髦的标点，比如在引用语法中加入破折号。
        highlight: function(code) {
          return highlightJs.highlightAuto(code).value;
        },
      });
      return marked(this.val);
    },
  },
  data() {
    return {
      val: this.value,
    };
  },
};

注意事项：

1. 项目启动前，需要在本地安装好 MongoDB 数据库
2. 在code/server/config.js文件配置数据库名、用户以及密码等一些必要的信息；这些信息都可以自定义，但是需要跟步骤 3同步起来

// code/server/config.js
export default {
  env: process.env.NODE_ENV,
  port,
  auth,
  log,
  mongodb: {
    username: "wall", // 数据库用户
    pwd: 123456, // 数据库密码
    address: "localhost:27017",
    db: "wallBlog", // 数据库名
  },
};

3. 启动本地的mongo服务，给数据库初始化在code/server/config.js配置的一些必要信息

> mongo // 开启mongo服务
> show dbs // 显示数据库列表
> use wallBlog // 新建一个wallBlog数据库
> db.createUser({user:"wall",pwd:"123456",roles:[{role:"readWrite",db:'wallBlog'}]}) // 在wallBlog数据库创建一个wall用户，密码为123456
> show users // 展示该库有哪些用户
> db.auth("wall", "123456"); // 数据库认证一下用户、密码，返回 1 认证成功

4. 登录管理后台时，需要给数据库创建users集合，并注册一个账号进行登录

> mongo // 开启mongo服务
> show dbs // 显示数据库列表
> use wallBlog // 进入到wallBlog数据库
> db.users.insert({  // 往该库的users集合插入一条数据，账号：admin  密码：123456
    "pwd" : "e10adc3949ba59abbe56e057f20f883e",
    "username" : "admin",
    "roles" : [
        "admin"
    ]
})
> show collections // 查询该库下的集合（类似于mysql的表）
> db.users.find() // 查询users集合下的所有数据

5. 初始化好了数据库就可以开启后台接口服务yarn server，数据库如果连接成功会在控制台打印提示
6. yarn dev:admin启动管理后台界面，用上面注册的账号密码登录，就可以添加数据了
7. yarn dev:client启动客户端页面预览

脚本命令

• yarn dev:admin // 本地开发管理端页面
• yarn dev:client // 本地开发客户端页面
• yarn build:admin // 项目打包 - 管理端
• yarn build:client // 项目打包 - 客户端
• yarn analyz // 查看打包信息
• yarn server // 启动后台接口服务

参考目录

1. vue-node-blog 开源项目：https://github.com/cd-dongzi/vue-node-blog
2. vue-color文档：https://www.npmjs.com/package/vue-color
3. vue-lazyload文档：https://www.npmjs.com/package/vue-lazyload