位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

准备工作:

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 //就如我下图配置的一样

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

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

只要是 这个路由过来的访问都可以拿到这个返回的对象了

这里需要说明的是,后台自己本来的域名下也是可以访问到这个路由的,就是说明这个域名是可以共享的。

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

--重启服务器

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加载

3.因为vue项目是自动刷新的,如果没有,你就手动刷新一下,因为我还没搞明白它什么在哪些情况下会自动刷新,再不行就重启服务器,哈哈

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

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

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

参考:

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

express中文文档

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

本文链接地址:https://www.jiuchutong.com/biancheng/382137.html 转载请保留说明!

上一篇:nodejs模块学习之connect解析(nodejs基础教程)

下一篇:Node.js利用js-xlsx处理Excel文件的方法详解(nodejs处理excel)

  • 工资薪金和工资薪金总额区别
  • 劳务公司开出的工程服务费专用发票怎么计费
  • 快递费运费物流费一样吗
  • 企业所得税季度申报表A类
  • 增值税专用发票使用规定 最新
  • 开票不确认收入可以吗
  • 抵债资产计提折旧怎么算
  • 货运代理公司会计涉及的科目
  • 年终奖社保怎么算
  • 收不回来应收账款会计分录
  • 跨年度冲减收入
  • 营改增金融商品范围
  • 国家税务总局13号文
  • 产生的多缴税款怎么做账
  • 收取会员费收入会计分录
  • 税控系统维护费280会计分录
  • 会计当年是指哪一年
  • 股权无偿赠与子女怎么办理手续
  • 什么情况可以出境
  • 包工不包料都包括什么
  • 社保缴费申报表文件
  • 技术服务的大类包括
  • 华为手机怎么删除多余的桌面
  • 软件无法运行解决方法
  • win10电脑文件夹打不开
  • 金税卡服务费抵扣政策
  • excel2019文件加密
  • linux命令用法
  • PHP:getallheaders()的用法_Apache函数
  • vue解决跨域问题
  • PHP:pg_connection_reset()的用法_PostgreSQL函数
  • 2021前端面试题目100及最佳答案
  • 怎么检查当年的核酸结果
  • 员工提前预支工资借条
  • 个人出租住房如何开增值税专用发票
  • php请求接口数据
  • 营业外收入不计入所有者权益吗
  • 罗卡购物村
  • php的implode
  • vue @hook
  • 定时任务java
  • promise基本使用
  • tomcat的安装配置
  • php使用什么开发工具
  • 会员信息查询系统
  • 外购商品转为自用固定资产,进项税
  • 暂未取得发票的费用怎么入账
  • 销售费用和管理费用占比多少合理
  • 修理费账务处理
  • 旧设备入账
  • sqlserver远程连接失败
  • 购入固定资产印花税税目是什么
  • 委托加工业务中需要计算缴纳增值税销项税
  • 经营项目里没有纹身可以纹身吗
  • 邮寄快递费用计算
  • 发票冲红重新开具怎么做账务处理
  • 商贸企业涉税问题
  • 银企对账如何操作
  • 怎样查企业注册地址
  • 企业利润的构成内容
  • 电脑开机显示xp后无反应
  • ubuntu crontab
  • winxp不显示桌面图标
  • 内存故障会不断重启么
  • RegSrvc.exe - RegSrvc是什么进程 有什么用
  • windows8如何关闭杀毒软件
  • win7系统设置鼠标灵敏度
  • win7系统电脑蓝牙怎么开
  • cocos2d-x引擎
  • opengl csdn
  • javascript entries
  • Android自定义控件高级进阶与精彩实例
  • 用git打更新包的代码
  • css制作动画
  • python到底怎么学
  • 复制链接
  • javascript基础教程答案
  • python教程目录
  • jquery入门
  • 非贸付汇代扣代缴增值税可以抵扣吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设