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 相关文章推荐
golang、python、php、c++、c、java、Nodejs性能对比
Mar 12 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
nodejs实现获取某宝商品分类
May 28 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
Nodejs爬虫进阶教程之异步并发控制
Feb 15 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
Mar 15 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
nodejs中函数的调用实例详解
Oct 31 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php实现图片添加水印功能
2014/02/13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
如何在PHP中使用数组
2020/06/09 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python数据结构之单链表详解
2017/09/12 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
大学班级计划书
2014/04/29 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
听证通知书
2015/04/24 职场文书