nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)
好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的
----致 西安工程大学a-114舍友们
转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185453.html
没图片的教程都是耍流氓
准备工作:
- 安装nodejs ---还用我教了?
- 安装依赖包express4.x 点这里》》》nodeJS搭建本地服务器
- 安装vue-cli脚手架 点这里》》》vue-cli构建vue项目
这里强调一下,express是后端服务器,它是一个独立的服务器,vue启动的是前端服务器,vue-cli中已经集成了一个小型的express,这两个服务器是分开放的,但是它们都是基于nodejs的。
nodeJS部分:这里我已经认为你搭建好了express服务器,并且能在浏览器中访问到
- 在express目录下,安装cors包
- npm install cors --save
- //这里的--save是指把cors依赖注入到package.json中
- 在app.js中配置:开启cors //就如我下图配置的一样
//.............
var cors = require('cors'); //............... app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
alloweHeaders:['Conten-Type', 'Authorization']
})); - 在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界面
我告诉你原因: 因为我不会,就是这么有底气!还有,我再声明,如果这个项目里再结构方面有哪里不合理,还请请赐教,就是这么虚心求教
- 打开vue项目的入口文件
- 在入口文件中编写代码 这里可能有人问为什么不用模块化开发,我在说一遍,我现在还不会 -_- | -_-| -_-|
这里我用了百度静态资源库的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> - 因为vue项目是自动刷新的,如果没有,你就手动刷新一下,因为我还没搞明白它什么在哪些情况下会自动刷新,再不行就重启服务器,哈哈
这是现在的前端页面,我们点击以后看控制台,因为在ajax请求里写的,我们在访问成功success时,打印出传回来的数据
至此,我们的前后端入门就到此结束了。。。
我们从localhost:8080端口访问到了localhost:3000端口,并进行了交互,各位,像前后端分离进军吧!
如果这篇文档,帮助到了你,记得打赏一下啊,1块不嫌少,100不嫌多
参考:
nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)的更多相关文章
- vue+springboot前后端分离实现单点登录跨域问题处理
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- Spring Cloud 前后端分离后引起的跨域访问解决方案
背景 Spring Cloud 微服务试点改造,目前在尝试前后端分离. 前台A应用(本机8080端口),通过网管(本机8769端口)调用后台应用B(本机8082端口).应用C发布的http服务.. A ...
- 前后端分离下的CAS跨域流程分析
写在最前 前后端分离其实有两类: 开发阶段使用dev-server,生产阶段是打包成静态文件整个放入后端项目中. 开发阶段使用dev-server,生产阶段是打包成静态文件放入单独的静态资源服务器中, ...
- 08 Django REST Framework 解决前后端分离项目中的跨域问题
01-安装模块 pip install django-cors-headers 02-添加到INSTALL_APPS中 INSTALLED_APPS = ( ... 'corsheaders', .. ...
- 解决前后端分离后的Cookie跨域问题
一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...
- lf 前后端分离 (3) 中间建跨域
一.关于中间建跨域 为了减少跨域代码冗余,采用中间件 from django.utils.deprecation import MiddlewareMixin class CorsMiddleware ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
随机推荐
- Java防止SQL注入(转)
一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
- C#的接口
什么是接口?其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致.个人觉得,使用接口可以使程序更加清晰和条理化,这就是接口的好处,但并不是所有的编程语言都支持接口,C#是支持接口的. ...
- WinForm------DateEdit属性设置
1.只能选择年份属性设置
- JS中的动态表格
写法一:(有点啰嗦) //--------------XML DOM--------------------------------------function addTR(){ //1.取三个框的值 ...
- javascript中this
js函数中的this指向问题:(this对象是在运行时基于函数的执行环境绑定的) 与普通变量获取不同,内部函数在搜索this和arguments这两个变量时,只搜索到其活动对象为止,所以this无法像 ...
- windows 64位 安装apache+php+mysql
1.下载PHP.Apache和Mysql软件以及VC库. 下面分别是PHP.Apache和Mysql的官网地址. PHP:http://windows.php.net/qa/ 注意 选择Thread ...
- JS 循环给li绑定参数不同的点击事
以下内容纯属个人理解,不正确的地方还请大神留言,不胜感激! 源代码:(按个人方式选用一种即可) <ul> <li>1</li> <li>2</li ...
- quantum sets
the principles of quantum mechanics by p.a.m.dirac.
- hub,桥,交换机,路由器的区别
1.四种设备在网络中的物理位置 如下图 2.这四种设备的本质 这四种设备,不管怎样,他们都是进行包的转发,只不过转发的行为有些不一样而已 3.逐一介绍 对于hub,一个包过来后,直接将包转发到其他口. ...
- 初识virtual memory
一.先谈几个重要的东西 virtual memory是一个抽象概念,书上的原文是"an abstraction of main memory known as virtual memory& ...