一个完整的网站服务架构，包括：1.web框架---这里应用express框架2.web服务器---这里应用nodejs3，数据库---这里应用monggoDB4，前端展示---这里要应用vue，首先我们需要安装mongoDB（本例使用的mongoDB3.4.7版本）和nodejs（本例使用的nodejsv6.10.3）具体安装步骤可以参看百度和网上安装的例子很多，这里就不过多解释了。下面我们将重点介绍网站框架的搭建。对应以上几点，一一讲解，具体操作步骤：第一步：创建mongoDB数据库1、直接打开mongoDB安装目录下的binmongod.exe文件。如下图，数据库服务启动成功2.在浏览器中输入localhost:27017显示如下，证明数据库可用步骤二：生成vue框架1、全局生成vue框架，输入命令npmi-gvue-cli2、创建自己的文件夹3、执行以下命令进行项目初始化，一路自动创建目录E:/workspace/testyes生成的目录结构如下：执行命令到初始化项目：cdtestnpminstall4。在项目根目录src/main.js中添加代码importvueResourcefrom'vue-resource'Vue.use(vueResource)如图5所示。由于上一步添加了代码vue-resource，这里我们需要引入vue-resource执行命令如图显示如下，则正常执行步骤三：生成expressm框架1.执行命令npminstallexpress生成如下四步：搭建node服务器环境1.在项目根目录下新建一个目录叫server，用来放Node的东西。进入server目录，新建三个js文件：index.js（入口文件）db.js（设置数据库相关）api.js（写接口）index.js文件代码：//导入写好的apiconstapi=require('./api');//导入文件模块constfs=require('fs');//导入路径处理模块constpath=require('path');//导入后数据处理模块constbodyParser=require('body-parser')//IntroduceExpressconstexpress=require('express');constapp=express();app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));app.use(api);//这里访问静态资源文件是访问所有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);console.log('成功监听…………');db.js文件代码：//Schema、Model、Entity或Documents之间的关系，请记住Schema生成Model，Model创建Entity。Model和Entity都可以影响数据库操作，但Model比Entity更具可操作性。constmongoose=require('mongoose');//如果不创建默认的测试数据库连接数据库，会自动生成mongoose.connect('mongodb://127.0.0.1:27017');//地址为第一步对应的地址。//为这个连接绑定事件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=模型；api.js文件代码：//可能是我的node版本问题，如果不使用strict模式，使用ES6语法，会报错"usestrict"；constmodels=require('./db');constexpress=require('快递');constrouter=express.Router();/**************Create（创建）Read（获取）Update（更新）Delete（删除）****************///创建账户接口router.post('/api/login/createAccount',(req,res)=>{//如果这里可以使用req.body,constbodyParser=require('body-parser')letnewAccount=newmodels.Login({account:req.body.account,password:req.body.password});//保存数据newAccount数据到mongoDBnewAccount.save((err,data)=>{if(err){res.send(err);}else{res.send('createAccountsuccessful');}});});//获取现有账户Interfacerouter.get('/api/login/getAccount',(req,res)=>{//通过模型查找数据库models.Login.find((err,data)=>{if(err){res.send(err);}else{res.send(data);}});});module.exports=router;2、相对于node_modules目录，少了body-parser模块和mongoose模块，所以要添加这两个模块来执行命令：3、至此，我们的后台代码就写完了。进入服务器目录，输入nodeindex命令，节点就会运行起来。这个时候输入http://localhost:8088/api/log..就可以访问到这个界面，执行命令如下：4.现在我们本地开发环境的web服务器的接口在index.html中是8088。js，但是本地webpack生成的网页端口是8080，这两个不一致需要在config/index.js中进行代理（proxy）修改5.此时重启项目。我们在前端接口地址前加上/api，它会指向http://localhost:8088/api/，这样我们就可以访问后端接口了！第五步：前后端开发完成。最后一步是打包前端，部署后端。1.前端打包很简单，一个命令：npmrunbuild这会生成一个dist目录，里面就是打包好的东西。现在回头看看服务器中的入口文件index.js。最后我们在浏览器中输入http://localhost:8088/，会跳转到index.html。至此，我们完成了从前后端开发到正式部署的全过程。
