wallBlog

一款简洁的集体博客零碎

  1. wallBlog 线上地址：http://dzblog.cn/article/5a69609c3c04164b0bd4b964
  2. Gitub地址：https://github.com/Sujb-sus/wallBlog

次要性能

客户端

  • 文章性能：文章内容反对Markdown语法且代码高亮展现；
  • 标签性能：通过标签分类来检索文章数据；
  • 侧边栏性能：点击排行、站长举荐和标签分类等；
  • 搜寻性能：通过关键词检索文章的题目和摘要，并反对搜寻高亮；
  • 留言性能：可点赞、回复评论，统计评论以及回复总数，反对Emoji表情；
  • 其余性能：图片懒加载、分页、侧边栏吸顶以及一键置顶等；

治理端

  • 权限治理：CRUD 管理员，可调配权限；
  • 文章治理：CRUD 文章，文章封面反对本地上传、文章内容反对Markdown语法编辑；
  • 标签治理：CRUD 标签，标签背景色反对用Vue-Color插件自定义抉择；
  • 留言治理：RD 评论以及回复；

我的项目构造

技术利用

  • 前端：Vue、Element-UI、ES6、Webpack、Less、Axios、Markdown-Editor、Highlight、Vue-Color、Vue-Lazyload等；
  • 后端：Node、Koa2、Jwt、MongoDB、Busboy、Log4、Node-Notifier、Ora、Chalk、Rimraf等；
  • 运维：宝塔 Linux 面板、Nginx、PM2管理工具等；

注意事项：

  1. 我的项目启动前，须要在本地装置好MongoDB服务，请自行装置；
  2. 启动本地的 mongo 服务，开始给数据库初始化一些必要数据；
  • 数据库名可自行批改，然而须要跟code/server/config.js文件同步上；
  • 登录治理后盾时，须要给数据库创立users汇合，并注册一个账号进行登录；
> 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"); // 数据库认证一下用户、明码> db.users.insert({  // 往该库的users汇合插入一条数据，账号：admin  明码：123456    "pwd" : "e10adc3949ba59abbe56e057f20f883e",    "username" : "admin",    "roles" : [        "admin"    ]})> show collections // 查问该库下的汇合（相似于mysql的表）> db.users.find() // 查问users汇合下的所有数据
  1. 初始化好本地的MongoDB数据库，就能够在code/server/config.js文件下配置账号、明码以及数据库名称；
  2. npm run dev:server开启后盾接口服务；
  3. npm run dev:admin启动治理后盾界面，用下面注册的账号密码登录，并录入文章数据；
  4. npm run dev:client启动客户端页面；

脚本命令

本我的项目是基于 Webpack5.5 来构建与打包的。

  • npm run dev:admin // 本地开发治理端页面
  • npm run dev:client // 本地开发客户端页面
  • npm run build:admin // 我的项目打包 - 治理端
  • npm run build:client // 我的项目打包 - 客户端
  • npm run analyz // 查看打包信息
  • npm run server // 启动后盾接口服务