//发送 数据
　　　　　this.$root.Bus.$emit('showing',this.b);
　　　　　//接受
　　　　　this.$root.Bus.$on('showing', (data)=>{ this.pic=data.pic; this.name=data.name; this.author=data.author; this.src=data.src; }
　　　　

 　　至此大部分组件通信能搞定了，涉及到复杂的话，那就要使用vuex了，这里就不再谈了。

　　4.axios 发送异步请求，获取数据

　　　1.先安装

cnpm i axios -D

 　　在main.js中 import axios，然后悲催的发现在其它组件中无法使用，而它也不支持Vue.use().gg..。一顿疯狂百度之后发现了简单的解决方案：改写原型链，为Vue实例的原型添加axios属性　

Vue.prototype.$axios = axios

　　　其他组件调用

this.$axios({});

　　　2.好了，愉快的搞定了使用问题。然后在App.vue中发起了第一个ajax请求，这是请求自己写好的后台的一个api。

this.$axios.post('http://www.guoaihua.com:3000/users/saveInfo',{ ip:returnCitySN.cip, adress:returnCitySN.cname, time:new Date() }).then(function (res) { console.log(res); })

　　　　很不幸返回了一串英文，禁止跨域访问。

　　　　想到CROS，就跑到服务器上给服务端的express中加了一个头部

app.all('*',function (req,res,next) { res.header("Access-Control-Allow-Origin","*"); 　 res.header("Access-Control-Allow-Headers","Content-Type"); next(); });

 　　　　然而，事情往往并不是那么简单的就结束了。当我调用一个搜狐查询api时，同样返回了禁止跨域访问。我去。。开玩笑吧，我总不能去改它服务器吧。那。。那我就用webpack的proxy吧。在config下的index.js中找到了proxyTable

'/cityjson': { target: 'http://pv.sohu.com'

　　　　好，贼溜。故事的最后是上线的时候发现打包后部署到不行，它只适用与开发环境。崩溃了。。。。

　　　　冷静一大下，想起来了跨域还有一个“”神奇的东西” script标签 ，我去这个好，非常愉快的在html.index加上了。

<script src="http://pv.sohu.com/cityjson"></script>

 　　5.这些东西搞完之后，页面也就差不多了，至于样式布局啥的就不写了。

　　六.开始撸后端代码了

　　1. 首先惯例，创建项目模版 

npm install express-generator -g // 这要管理员权限
express project // 创建项目
npm i
npm start //ok

 　　2.这个模版路由啥的已经写好了，进去配置就ok

　　　　之前有一个音乐获取的api ：:3000/users/001 

　　　　这个001是可以变化的，对应不同的歌曲，所以这里使用了路由参数，这个：id及对应001，获取参数需要中间件bodyParser解析

router.use(bodyParser.urlencoded({extended: false})); router.use(bodyParser.json());

　　　　然后在路由中，用req.param.id获取。这样就避免了写无数个。因为这个是要返回music的，所以用了sendFile();并通过path将当前目录映射到了musics

router.get('/:id', function(req, res, next) { res.sendFile(path.join(__dirname,'../musics',req.params.id+'.mp3')); });

　　3.mongodb ，在express框架中用mongoose模块来控制mongodb

　　Schema ： 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力

   　  Model ： 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对

　　  Entity ： 由Model创建的实体，他的操作也会影响数据库

　　　mongodb的安装就不说了。安装mongoose

cnpm i mongoose -D

 　　编写配置文件 mongoose.js

var mongoose=require('mongoose'); var db=mongoose.connect('mongodb://localhost/test'); var DataSchema=new mongoose.Schema({ ip:{type:String}, adress:{type:String}, time:{type:Date,default:Date.now} }); var MesSchema=new mongoose.Schema({ name:{type:String}, qq:{type:Number}, email:{type:String}, phone:{type:Number}, message:{type:String}, time:{type:Date,default:Date.now} }); mongoose.model('usersInfo',DataSchema); mongoose.model('mesInfo',MesSchema);

 　　首先创建Schema collections  相当于mysql中的表

　　 然后用mongoose将Schema发布为model

　　调用，先通过mongoose.model获取到发布的model，再利用这个model创建一个实例，最后save。

var usersModel=mongoose.model('usersInfo'); var data=new usersModel({ ip:req.body.ip, adress:req.body.adress, time:req.body.time }); data.save(function(err){ console.log(err); });

 七.将项目部署到服务端

　　首先打包前端项目

npm run build

 　　然后将dist拷贝到了服务端新建的一个express项目中，并在它上面加上了，并npm start 开启

　　app.use(express.static(path.join(__dirname, 'dist')));

 　　后端代码就不管了，不想改很多api接口，所以直接扔到服务端上。在开启这个之前要先打开服务端的mongodb，然后node ./bin/www

　　好，至此一个完整的从前端界面设计到后端的数据库项目都搞定了，页面也非常越快的跑起来了。哈哈哈，然而，还有很多事情去做，性能优化，安全啥的.....

八.结语