nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)


Posted in NodeJs onJuly 05, 2017

准备工作:

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中 

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

2.在app.js中配置:开启cors  //就如我下图配置的一样

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

//.............
var cors = require('cors');

//...............

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

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

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

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项目的入口文件

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)

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

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

这里我用了百度静态资源库的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项目是自动刷新的,如果没有,你就手动刷新一下,因为我还没搞明白它什么在哪些情况下会自动刷新,再不行就重启服务器,哈哈

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

这是现在的前端页面,我们点击以后看控制台,因为在ajax请求里写的,我们在访问成功success时,打印出传回来的数据

nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域) 

至此,我们的前后端入门就到此结束了。。。

我们从localhost:8080端口访问到了localhost:3000端口,并进行了交互,各位,像前后端分离进军吧!

参考:

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

express中文文档  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
NodeJS 模块开发及发布详解分享
Mar 07 NodeJs
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
Jan 01 NodeJs
浅析Nodejs npm常用命令
Jun 14 NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
nodejs取得当前执行路径的方法
May 13 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
nodejs中使用archive压缩文件的实现代码
Nov 26 NodeJs
浅谈vue websocket nodeJS 进行实时通信踩到的坑
Sep 22 NodeJs
nodejs模块学习之connect解析
Jul 05 #NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 #NodeJs
nodejs 子进程正确的打开方式
Jul 03 #NodeJs
Express+Nodejs 下的登录拦截实现代码
Jul 01 #NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 #NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
Jun 28 #NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 #NodeJs
You might like
PHP 加密解密内部算法
2010/04/22 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
Element中Slider滑块的具体使用
2020/07/29 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python实现最大优先队列
2019/08/29 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Python面试题集
2012/03/08 面试题
应届护士推荐信
2013/11/16 职场文书
简单的项目建议书模板
2014/03/12 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server