Vue+Node+MongoDB前后端分离搭建一个简单的个人博客系统
vue-node-mongodb-blogPC博客的简易版。前端项目主要使用Vue2和Element-UI搭建；它是用Webpack5构建和打包的。后端工程主要使用Node框架Koa2和MongoDB数据库进行设计。PC博客在线预览地址：http://www.rasblog.comPC博客仓库地址：https://github.com/Sujb-sus/vue-node-mongodb-blogH5博客仓库地址：https://github.com/sujb-sus/vue3-vite2-ts-blog-h5主要功能客户端文章功能：文章内容支持Markdown语法和代码高亮显示；标签功能：通过标签分类检索文章数据；侧边栏功能：点击排名、站长推荐、标签分类等；搜索功能：通过关键词检索文章的标题和摘要，支持搜索高亮显示；留言功能：可以点赞、回复评论，统计评论和回复总数，支持Emoji表情；其他功能：图片懒加载、分页、侧边栏吸顶、一键置顶等；管理权限管理：CRUD管理员，可以分配权限；文章管理：文章CRUD，文章封面支持本地上传，文章内容支持Markdown语法编辑；标签管理：增删改查标签，标签背景色支持使用Vue-Color插件自定义选择；消息管理：RD评论和回复；项目结构技术应用1.自动导入components/common/index.js文件中的大量公共组件接下来通过require.context('文件路径','是否遍历文件子目录','regularityofmatchingfiles')//components/common/index.jsimportVuefrom"vue";//搜索当前目录下的vue文件并遍历子文件夹目录constcomponentsContext=require.context("./",true,/.vue$/);componentsContext.keys().forEach((component)=>{//获取文件默认模块constcomponentConfig=componentsContext(component).default;componentConfig.name&&Vue.component(componentConfig.name,组件配置);});只需在main.js中导入components/common/index.jsmport"src/components/common/index.js";这样就自动导入了components/common文件下的所有vue组件，无需额外导入，直接在模板中使用组件即可。2、图片延迟加载的原理：其实就是利用img标签的src属性，我们先清空所有图片的url，这样浏览器就不会去请求了；然后写一个事件监听可见区域的范围；获取图片进入范围前的url，放在src属性中显示安装vue-lazyload插件yarnaddvue-lazyload-Simportvue-lazyloadimportVueLazyloadfrom"vue-lazyload"inmain.js;constloadimage=require("./images/loading.gif");consterrormage=require("./images/load-error.jpeg");Vue.use(VueLazyload,{preLoad:1.3,//预加载高度（1表示1个屏幕的高度）error:errormage,//显示的图像加载失败时loading:loadimage,//加载状态下显示的图片attempt:1,//加载错误后的最大尝试次数});直接把img标签的src属性换成v-lazy即可3.Vue-Color自定义选择颜色安装vue-colorpluginyarnaddvue-color-S在组件中导入并解构Sketch，注册为组件使用import{Sketch}from"vue-color";exportdefault{name:"permissionAdd",components:{"sketch-picker":Sketch,},data(){return{currentColor:"rgba(70,70,70,0.9)",};},methods:{//颜色值变化事件处理，fmtObj可以返回十六进制、rgba等格式colorValueChange(fmtObj){//获取颜色对象的rgba值const{r,g,b,a}=fmtObj.rgba;this.currentColor=`rgba(${r},${g},${b},${a})`;},},};4.导入less全局变量并安装style-resources-loader插件yarnaddstyle-resources-loader-D在webpack的module模块中配置less后缀的文件module.exports={module:{rules:[//开发环境可以使用vue-style-loader重载stylesModule{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"),},},],},],},};这里的缺点是修改样式后需要手动刷新页面,所以开发环境可以配合vue-style-loader重新加载style模块5.支持markdown语法安装marked和highlightJs插件yarn在import组件内添加markedhighlightJs-S，将输入的文本格式转换成markdown通过计算属性
import标记的语法从“标记”；从“highlight.js”导入highlightJs；导出默认值:true,//Allowsupportfortablesyntax该选项要求gfm为truebreaks:true,//启用回车换行该选项要求gfm为truepedantic:false,//兼容markdown.pl尽可能模糊的部分。不要纠正原始模型的任何不良行为和错误。sanitize:true,//过滤（清理）输出，并忽略任何已输入的html代码（标签）smartLists:true,//使用比原生markdown更时尚的列表。旧列表可能会被过滤掉作为迂腐的处理内容。smartypants:false,//使用更时尚的标点符号，例如在引用语法中添加破折号。highlight:function(code){返回highlightJs.highlightAuto(code).value;},});返回标记（this.val）；},},data(){return{val:this.value,};},};注意：项目启动前，需要在本地安装MongoDB数据库，并在code/server/config.js文件中配置数据库名称、用户、密码等必要信息；这些信息可以自定义，但是需要按照步骤3同步databaseuserpwd:123456,//数据库密码地址:"localhost:27017",db:"wallBlog",//数据库名},};启动本地mongo服务，并使用code/server/config.js中配置的一些必要信息初始化数据库>mongo//启动mongo服务>showdbs//显示数据库列表>使用wallBlog//创建一个新的wallBlog数据库>db.createUser({user:"wall",pwd:"123456",roles:[{role:"readWrite",db:'wallBlog'}]})//在wallBlog数据库中创建一个wall用户，密码为123456>showusers//显示图书馆的用户>db.auth("wall","123456");//验证数据库中的用户和密码，返回1验证成功后登录管理后台，需要为数据库创建一个users集合，并注册一个账号登录>mongo//启用mongoservice>showdbs//显示数据库列表>usewallBlog//进入wallBlog数据库>db.users.insert({//向数据库的users集合中插入一条数据，帐号：admin密码：123456"pwd":"e10adc3949ba59abbe56e057f20f883e","username":"admin","roles":["admin"]})>showcollections//查询library下的集合（类似mysql表）>db.users.find()//查询users集合下的所有数据并初始化数据库即可启动后台接口服务yarnserver。如果数据库连接成功，会在控制台打印提示。yarndev:admin启动管理后台界面，使用上面注册的账号密码登录，可以添加数据yarndev:client启动客户端页面预览脚本命令yarndev:admin//本地开发管理页面yarndev:client//本地开发客户端页面yarnbuild:admin//项目打包-管理终端yarnbuild:client//项目打包-客户端yarnanalyzez//查看打包信息yarnserver//启动后台接口服务参考目录vue-node-blogopen源码项目：https://github.com/cd-dongzi/vue-node-blogvue-color文档：https://www.npmjs.com/package/vue-colorvue-lazyload文档：https://www.npmjs.com/package/vue-colornpmjs.com/package/vue-lazyload
