本文将介绍如何使用nodejs+vuejs搭建个人博客。主要分为三个部分：环境准备博客后台管理系统（admin）后台服务（主要提供admin和web界面）博客前端展示（web）环境准备nodejs去官网下载最新稳定版即可，如下下载链接：https://nodejs.org/en/download/vue-cli这是一个强大的构建工具，使用它可以轻松管理一个vue项目，并且不需要更多的webpack配置。建议全局安装：npminstall--globalvue-climongodb后端要使用的数据库。去官网下载对应系统的版本即可，注意下载服务器版本。下载地址：http://downloads.mongodb.com/博客后台管理系统项目创建首先创建一个基本的vue后台项目，可以使用如下命令：vuecreateadmin对于出现的一些选项，选择默认即可。创建的目录结构如下：Routerintegration使用vue-cli轻松集成路由：vueaddrouter注意默认会使用history模式。为了以后方便，选择(n)使用hash模式，而不是浏览器的history模式。element-ui集成为了方便，我们使用element-ui提供的一些组件来实现后台页面，所以需要集成element-ui：vue添加元素提示选项，全部选择默认。好了，至此，后端工程的基本结构已经搭建完成。可以通过以下命令启动：npmrunserve启动后默认页面如下：页面的基本布局可以使用element-ui的layout-container，直接复制示例代码放在Home.vue模板。但是这里需要注意一点，因为在切换左侧菜单时，我们希望只改变右侧，而左侧应该保持不变，所以这里需要使用。将右侧更改的部分挂载到此处的。要创建一个新的分类页面，首先创建一个CategoryEdit.vue文件，然后添加路由。这里需要注意的是，右边的变量page要作为Home组件的子路由使用。这样CategoryEdit页面的内容就会显示在我们之前定义的的位置。好了，那么当我们在浏览器中输入“http://localhost:8080/#/categories/create”时，就会显示CategoryEdit页面。具体的页面内容这里就不介绍了。它们都使用element-ui组件。限于篇幅，其他页面不再详细介绍，具体源码已开源至GitHub。最终的项目页面结构将如下：分为分类管理、文章管理和用户管理三部分。页面中使用的接口将在下一个服务器部分介绍。后端服务部分由nodejs+mongodb实现。项目建设首先在根目录（admin同级目录）新建文件夹server。要创建新的package.json文件，您可以使用以下命令初始化npminit并选择所有默认值。取决于安装。后端主要使用以下依赖。"cors":"^2.8.5",//允许跨域请求"express":"^4.17.1",//后端框架"mongoose":"^5.6.12",//数据库"nodemon":"^1.19.2",//当文件改变时，后台服务会自动重启，并在安装上述依赖后创建一个新的index.js文件。constexpress=require('express')constcors=require('cors')constapp=express()//允许跨域app.use(cors())app.use(express.json())app.listen('3000',async(req,res)=>{console.log("http://localhost:3000")})后端服务可以通过以下命令启动：nodemonstartindex.jsroutedefinitionCreate新建一个Router文件夹，然后新建一个admin文件夹作为admin端的界面，同级新建一个web文件夹作为web端的界面。在admin文件夹下新建index.js文件module.exports=app=>{constexpress=require('express')constrouter=express.Router()//获取资源router.get('/getData',async(req,res)=>{res.send("helloworld")})app.use('/admin/api/rest',router)}注意这里的export是一个函数，它的好处是可以通过参数传入，这里我们将app作为参数传入。在根目录下的index.js文件中，需要引入：require('./routers/admin/index')(app)//直接执行函数，在输入"http://localhost:3000/admin/api/rest/getData”，你会看到“helloworld”。连接数据库接下来新建一个文件夹db，然后新建一个db.js文件：module.exports=app=>{constmongoose=require('mongoose')mongoose.connect('mongodb://localhost:27017/myblog',{useNewUrlParser:true})}mongodb安装后默认启动在27017端口，myblog是我们给数据库起的名字。然后需要在index.js文件中引入db.js。require('./db/db')(app)创建模型，新建models文件夹，文件夹下新建Category.js作为分类模型。constmongoose=require('mongoose')constschema=newmongoose.Schema({title:{type:String}})module.exports=mongoose.model('Category',schema)暂时只定义一个类名“title”数据查询在routers/admin/index.js中，可以通过如下代码查询categories表中的数据。//获取类别列表router.get('/categories',async(req,res)=>{constres=awaitCategory.find()res.send(res)})当输入"http://localhost:3000/admin/api/rest/categories”获取分类表的数据。好了，通过上面的介绍，我们应该可以实现一些简单的增删改查操作了。在开发中间件的过程中，我们肯定会遇到一个问题。前面提到，后台管理主要包括三个模块：分类管理、文章管理、用户管理。每个模块都会涉及增删改查操作。如果我们为每个模块定义一套自己的增删改查接口，势必会产生很多重码，如果类别很多，重码就更严重了。所以这里可以考虑自定义一个中间件。先创建一个文件夹中间件，然后新建一个resource.js文件（我们可以把每个分类理解为一个资源），统一对资源进行增删改查操作。唯一的区别是资源名称。module.exports=options=>{returnasync(req,res,next)=>{constinflection=require('inflection')constmodelName=inflection.classify(req.params.resource)req.Model=require(`....然后将routers/admin.index.js改成下面的方式//获取资源router.get('/',async(req,res)=>{constdata=awaitreq.Model.find()res.send(data)})app.use('/admin/api/rest/:resource',resourceMiddleware(),router)好了，限于篇幅，其他一些内容暂时不介绍了。详细代码请参考GitHub。博客的前端展示（web）项目搭建与admin类似。新建一个web项目，需要集成router，element-ui不是必需的。详见上文后台管理系统项目建设介绍。主题选择主题部分我直接从JekyllThemes主题库中选择了一个。因为我没有那么多时间而且我自己做，所以我很懒。原作者立伯雪贴于此。Statisticsofvisits访问统计这里使用了一个免费的开源库，非常轻量级，简单易用。主页面介绍完了，暂时就介绍这么多吧，还有很多内容就不一一展开了。如果您有任何问题，请留言。由于本人是前端出身，所以从事前端也有六七年了。后端也是新的，所以上面对前端部分的介绍可能比较少，相对于后端来说会比较多。如有错误，请指正。源码已经开源到GitHub，如果觉得对你有帮助，希望能给个Star。
