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 npm install全局安装和本地安装的区别
Jun 05 NodeJs
14款NodeJS Web框架推荐
Jul 11 NodeJs
Nodejs实现批量下载妹纸图
May 28 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
Jul 13 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
Nodejs处理异常操作示例
Dec 25 NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
Aug 05 NodeJs
5分钟教你用nodeJS手写一个mock数据服务器的方法
Sep 10 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定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
少先队入队活动方案
2014/02/08 职场文书
军训教官感言
2014/03/02 职场文书
宣传标语大全
2014/07/01 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
休学证明范本
2015/06/19 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript