声明：文章来自【Vue+Node+MongoDB从开发到正式部署】仅作为个人收藏我想搭建一个可以运行的Vue+Node+MongoDB项目经历了整个开发到部署的过程，经过一个多星期的折腾，终于搞定了~看了很多教学文章，发现里面有很多教大家搭建Vue开发环境的，还有很多Expressbuilds，但是我真的没有找到一个完整的从开发到正式部署的。教程，所以我必须自己填补这个坑。Node正在学习和销售中，文中如有错误请指正。我提到的各种有用的资源将穿插在文本中。1.整理从开发到部署的思路首先，我们需要对整个工作流程进行整理：前后端分离，分别开发。这里的前后端分离是这样的：前端使用Vue开发静态页面，通过Vue-Router进行路由，后端使用Node编写API供前端调用获取数据。Vue-Cli中提供的proxyTable用于前端开发时进行代理，从而实现跨域调用Node编写的API。前后端开发完成。测试无误后，前端通过webpack打包压缩，后端拉取前端打包压缩的文件，部署完成。2、以登录功能为例，跑完这个流程。这里用一个不完善的登录函数来演示这个过程。功能非常简单。填写好账号密码，点击登录按钮后，账号密码就会被插入到数据库中，找到已有的数据。使用的工具：Vue-CliVue-ResourceNode+ExpressMongoDB下面正式开始：安装Vue-Clinpmi-gvue-cli到你要放置项目的目录，初始化vueinitwebpackXXX（项目名称你想要的）按照提示进行下一步。完成后按cdXXXnpminstall（这里推荐使用淘宝镜像cnpm，不然墙外的东西。。。）npmrundev不出意外的话会看到下图，证明是的成功的。这时候我们就可以去开发我们的登录页面了。开发过程我就不说了，风格怎么样也无所谓。这里只需要两个输入框填写账号和密码，还有一个请求后台接口的登录按钮。记得安装Vue-Resource。核心代码：登录这时候，回到浏览器。如果不出意外，应该有两个输入框和一个登录按钮。当然现在点击登录按钮请求接口是不可能的。所以我们现在需要构建Node。在项目根目录下新建一个目录叫server，用来放Node的东西。进入server目录，新建三个js文件：index.js（入口文件）db.js（设置数据库相关）api.js（编写接口）现在整体的目录结构是这样的：OK，现在开始做Node。这里使用的Node框架是Express。安装Express：npminstallexpress–saveindex.js://import写好的apiconstapi=require('./api');//导入文件模块constfs=require('fs');//引入处理路径模块constpath=require('path');//引入处理post数据的模块constbodyParser=require('body-parser')//引入Expressconstexpress=require('express');constapp=express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));app.use(api);//访问静态资源文件这里是访问dist中的所有静态资源directoryFileapp.use(express.static(path.resolve(__dirname,'../dist')))//因为是单页应用，所以所有请求都走/dist/index.htmlapp.get('*',function(req,res){consthtml=fs.readFileSync(path.resolve(__dirname,'../dist/index.html'),'utf-8')res.send(html)})//monitorport8088app.listen(8088);console.log('successlisten…………');db.js：这个js文件主要用来配置mongoDB相关的东西。mongoDB相关概念可以自行搜索学习。这里我们使用mongoose中间件连接mongoDB。mongoDB的安装可以自行百度。需要注意的一点是，在安装完mongoDB之后，我们需要手动新建一个文件夹来存放mongoDB的数据。我的mongoDB是安装在E盘的，所以我也在E盘的根目录下新建了一个名为mongo-data的文件夹（随便起个名字），进入这个文件夹，新建一个名为db的文件夹。我们需要在启动mongoDB服务时指定该路径。如何启用mongoDB服务？进入mongoDB所在目录，再进入其bin目录，输入命令：mongod.exe–dbpathe:mongo-datadb不出意外MongoDB就可以顺利启动了。至于如何使用mongoose中间件操作mongoDB，建议大家移步mongoose官网，点击快速入门。//请记住Schema、Model、Entity或Documents之间的关系。Schema生成Model，Model创建Entity，Model和Entity都可以影响数据库的操作，但是Model比Entity更具可操作性。constmongoose=require('mongoose');//如果不创建默认的test数据库连接数据库，会自动生成mongoose.connect('mongodb://localhost/test');//Bind此连接的事件constdb=mongoose.connection;db.once('error',()=>console.log('Mongoconnectionerror'));db.once('open',()=>console.log('Mongo连接成功'));/**************定义模式loginSchema***************/constloginSchema=mongoose.Schema({account:String,password:String});/**************定义模型Model***************/constModels={登录：mongoose.model('Login',loginSchema)}module.exports=Models;api.js：“使用严格”；constmodels=require('./db');constexpress=require('快递');constrouter=express.Router();/***************创建（创建）读取（获取）更新（更新）删除（删除）***************//创建Accountinterfacerouter.post('/api/login/createAccount',(req,res)=>{//这里可以使用req.body，index.js中引入了constbodyParser=require('body-parser')letnewAccount=newmodels.Login({账户：req.body.account,p密码：req.body.password});//保存数据newAccount数据到mongoDBnewAccount.save((err,data)=>{if(err){res.send(err);}else{res.send('createAccountsuccessful');}});});//获取现有账户接口router.get('/api/login/getAccount',(req,res)=>{//通过模型查找数据库models.Login.find((err,data)=>{if(err){res.send(err);}else{res.send(data);}});});module.exports=router;至此我们的帖子终端代码写完了，进入server目录，输入nodeindex命令，node就可以运行了。这时在浏览器中输入http://localhost:8088/api/login/getAccount就可以访问到这个界面。回到前端尝试请求接口：现在我们点击登录按钮请求接口，当然还是不行，因为在使用npmrundev开发的时候，webpack实际上会启动一个8080的web服务供我们开发，而我们的后端是在8088端口上的，那么如果我们确定请求不到后端接口怎么办？相信前端对跨域问题是非常熟悉的。我们是否要再次这样做来解决这些问题？我们只是希望在开发的时候能够中转后台接口……贴心的脚手架其实已经帮我们解决了这个问题。进入我们会发现有一个proxyTable，用来开启代理服务来解决我们的问题：【Vue-Cli官方说明】。所以，我们这样写：proxyTable:{'/api':{target:'http://localhost:8088/api/',changeOrigin:true,pathRewrite:{'^/api':''}}}这时候我们在前端接口地址前加上/api，它会指向http://localhost:8088/api/，这样我们就可以访问后端接口了！我们点击登录按钮，会发现接口请求成功！再次进入数据库！也插入了一条新的数据！成功！前后端开发完成。最后一步是打包前端，部署后端。前端打包很简单，一个命令：npmrunbuild这会生成一个dist目录，里面就是打包好的东西。现在回头看server中的入口文件index.js//这里访问静态资源文件就是访问dist目录下的所有静态资源文件app.use(express.static(path.resolve(__dirname,'../dist')))//因为是单页应用，所以所有的请求都走/dist/index.htmlapp.get('*',function(req,res){consthtml=fs.readFileSync(path.resolve(__dirname,'../dist/index.html'),'utf-8')res.send(html)})//监听8088端口app.listen(8088);这里的关键是express.static，[使用Express来托管静态文件]。这样我们就可以访问到前端打包好的静态页面index.html了。最后我们在浏览器中输入http://localhost:8088/，会跳转到index.html。至此，我们完成了从前后端开发到正式部署的全过程。
