nodeJS（express4.x）+vue（vue-cli）构建先后端分离详细教程(带跨域)

好想再回到大学宿舍，当时床虽小，房随小，可是心确是满的

----致  西安工程大学a-114舍友们

转载请注明出处：水车：http://www.cnblogs.com/xuange306/p/6185453.html

没图片的教程都是耍流氓

准备工做：

1. 安装nodejs ---还用我教了？
2. 安装依赖包express4.x  点这里》》》nodeJS搭建本地服务器
3. 安装vue-cli脚手架 点这里》》》vue-cli构建vue项目

　　这里强调一下，express是后端服务器，它是一个独立的服务器，vue启动的是前端服务器，vue-cli中已经集成了一个小型的express，这两个服务器是分开放的，可是它们都是基于nodejs的。

nodeJS部分：这里我已经认为你搭建好了express服务器，而且能在浏览器中访问到

1. 在express目录下，安装cors包
   1. npm install cors --save  
   2.  //这里的--save是指把cors依赖注入到package.json中　
2. 在app.js中配置：开启cors  //就如我下图配置的同样
   
   
   

   //.............
   var cors = require('cors');
   
   //...............
   
   app.use(cors({
       origin:['http://localhost:8080'],
       methods:['GET','POST'],
       alloweHeaders:['Conten-Type', 'Authorization']
   }));

3. 在routes/index.js中配置一条路由映射
   

   router.post('/first', function(req, res, next) {
     res.json({name:'aaa',pwd:'123'});
   });

说明：到这里后端就配置完了，我这里写了假数据，没有访问数据库，我只让返回了一个json对象 {name:'aaa', pwd:'123'}

只要是 http://localhost:8080/first 这个路由过来的访问均可以拿到这个返回的对象了

这里须要说明的是，后台本身原本的域名下也是能够访问到这个路由的，就是说明这个域名是能够共享的。

 --重启服务器

Vue部分：这里我已经认为你搭建好了vue服务器，而且能在浏览器中访问到

说明：咱们这里引入了jquery，目的是为了用他的ajax插件，这里有同窗可能会问了，为何不用vue-resource?

 vue-resource: 是Vue.js的一款插件，它能够经过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能作的事情，vue-resource插件同样也能作到，并且vue-resource的API更为简洁。另外，vue-resource还提供了很是有用的inteceptor功能，使用inteceptor能够在请求前和请求后附加一些行为，好比使用inteceptor在ajax请求时显示loading界面

 我告诉你缘由: 由于我不会，就是这么有底气！还有，我再声明，若是这个项目里再结构方面有哪里不合理，还请请赐教，就是这么虚心求教

1. 打开vue项目的入口文件
   

    

2. 在入口文件中编写代码   这里可能有人问为何不用模块化开发，我在说一遍，我如今还不会 -_- |       -_-|       -_-| 
   

   这里我用了百度静态资源库的cdn加载

   <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <button>获取json</button>
   <script>
       $('button').click(function(){
           $.ajax({
               type:'POST',
               url:'http://localhost:3000/first',
               headers:{
                   "Conten-Type":"http://localhost:3000/first"
               },
               success:function (backDate) {
                   // body...
                   console.log(backDate);
               }
           })
       })
   </script>

    

3. 由于vue项目是自动刷新的，若是没有，你就手动刷新一下，由于我还没搞明白它什么在哪些状况下会自动刷新，再不行就重启服务器，哈哈

这是如今的前端页面，咱们点击之后看控制台，由于在ajax请求里写的，咱们在访问成功success时，打印出传回来的数据

至此，咱们的先后端入门就到此结束了。。。

咱们从localhost:8080端口访问到了localhost:3000端口，并进行了交互，各位，像先后端分离进军吧！
若是这篇文档，帮助到了你，记得打赏一下啊，1块不嫌少，100不嫌多

 

 

 参考：

Vue.js——基于$.ajax实现数据的跨域增删查改

构建 Express Api 五个有用的中间件[译]

express中文文档