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
页:
[1]