vue+node+mongodb实现的页面

视频的容积

　　源代码地址：https://github.com/GainLoss/vue-node-mongodb
　　目前这个项目实现的是：
　　1.利用vue-cli实现前台页面的编写
　　（1）页面的跳转利用的是vue-router：基本是$.router.push这种方法 还有就是使用命名路由 和动态路由
　　（2）页面每一部分使用的是组件components:里面涉及的有父子组件之间的数据传递 还有生命周期函数
　　2.使用vue-resource从后台获取数据
　　（1）不加参数的传递
　　（2）加参数的传递
　　3.使用express编写后台的接口
　　使用最多的就是路由中间件设计相关的接口
　　4.mongdb中的Schema和Model
　　定义每个集合和集合对应的对象 并且连接上数据库 还需要实现对数据库的增删改查
　　简单实现前后台交互的步骤：
　　1.下载npm和node；
　　2.我们前台框架用的是vue所以直接选用vue的脚手架vue-cli;下载安装执行 可以参考：http://www.cnblogs.com/GainLoss/p/6592729.html；
　　3.到这步我们已经可以用npm run dev打开一个vue的项目了，我们想从后台调取数据就需要编写后台代码和连接上数据库，在这里我们用的是mongodb作为数据库；
　　4.配置数据库的环境:http://www.cnblogs.com/GainLoss/p/6906937.html 这里面是数据库安装和启动完成
　　基本界面是：如果想深入了解mongodb:http://www.cnblogs.com/GainLoss/p/7416561.html(这里面是基本的一些操作) 可以直接在Robo 3T中创建集合和数据
　　需要注意的一点是：有时候直接打开这个连接数据库是连接不上的，因为mongodb没有启动，这时我们需要自己手动启动mongodb

　　5.数据库配置成功，现在需要用node编写后台代码，实现前台可以调取数据库中的数据
　　（1）在项目根目录下面创建一个文件夹是放置后台代码的取名为server,里面新建三个文件index.js(启动后台代码的入口)db.js(连接数据库，创建模型和对象)api.js(创建后台接口)
　　db.js
　　

var mongoose=require('mongoose');　　

//链接数据库　　
mongoose.connect('mongodb://localhost/test',{ useMongoClient: true });
　　

　　
const db=mongoose.connection;
　　
db.once('error',()=>console.log('链接数据库失败'));
　　
db.once('open',()=>console.log('链接数据库成功'))
　　
//创建模型
　　
const listSchema=mongoose.Schema({
　　title:String,
　　author:String,
　　
})
　　
//创建对象
　　
const Models={
　　list:mongoose.model('list',listSchema,'list'),
　　
}
　　
module.exports=Models;
　　

　　api.js
　　

//获取到对象　　
var models=require('./db.js');
　　
//使用node用的是express
　　
var express=require('express');
　　
//用的是路由中间件
　　
var router=express.Router();
　　

　　
router.get('/api/list/showlist',(req,res)=>{
　　models.list.find((err,data)=>{
　　if(err){
　　res.send(err)
　　}else{
　　res.send(data)
　　console.log(data)
　　}
　　})
　　
})
　　
module.exports=router;
　　

　　index.js
　　

//引入接口　　
var api=require('./api');
　　
var fs=require('fs');
　　
var path=require('path');
　　
//bodyParser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.
　　
var bodyParser=require('body-parser');
　　
var express=require('express');
　　
var app=express();
　　

　　
//将插件放入项目中
　　
app.use(bodyParser.json());
　　
app.use(bodyParser.urlencoded({extended:false}));
　　
app.use(api);
　　
app.use(express.static(path.resolve(__dirname,'../dist')));
　　

　　
//因为是单页面 所有请求都走/dist/index.html
　　
app.get('*',function(req,res){
　　const html=fs.readFileSync(path.resolve(__dirname,'../dist/index.html'),'utf-8')
　　res.send(html)
　　
})
　　
//监听端口
　　
app.listen(8811);
　　
console.log('连接上后台')
　　

　　这样后台代码基本写完了
　　6.还有需要代理一下
　　在config/index.js中
　　

dev: {　　env: require(
'./dev.env'),　　port:
8812,　　autoOpenBrowser:
true,　　assetsSubDirectory:
'static',　　assetsPublicPath:
'/',　　proxyTable: {
'/api': {　　target:
'http://localhost:8811/api',　　changeOrigin:
true,　　pathRewrite: {
'^/api': ''　　}
　　}
　　
},
　　

　　7.执行代码：(执行代码的命令可以查看pckage.json中的scripts，多说一句是packager.json里面有你下载的插件名和版本号)
　　在当前文件中打开cmd执行npm run dev
　　在当前文件的server文件夹打开cmd执行node index
　　遇到的问题和解决方案：
　　1.如果在mongodb创建一个集合，那么在你添加给这个集合添加数据之后，在数据库中会多一个这个集合名称+s的集合？
　　解决：在创建model的时候这个写：home:mongoose.model('home',homesSchema,'home') 添加第三个参数 设置为集合的名字 那么添加的数据就会到正确的集合中
　　2.在父组件给子组件传递一个数值，但是这个数值正好是子组建中http的参数，就有可能出现这种http参数没有获取到的情况？
　　解决：原因是参数传递和组件渲染顺序是不一致的，这时候可以用vue中的watch监听一下props中message也就是传过来的数据
　　3.需要注意的是：新版的mongoose可能是会先这种警告：
　　(node:2328) DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option
　　if using `connect()` or `createConnection()`. See http://mongoosejs.com/docs/connections.html#use-mongo-client
　　这是新版的mongoose出现的错误，解决是mongoose.connect('mongodb://localhost/test',{ useMongoClient: true });
　　4.一些其他的坑：http://www.cnblogs.com/GainLoss/p/6929299.html