位置: 编程技术 - 正文

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)

  • 金税四期主要监管什么
  • 物业公司物业费不开发票
  • 管理费用和研发费用的区别
  • 去年的费用票会计分录
  • 材料溢价分录
  • 卖下脚料怎么做分录
  • 审计调整分录如何写
  • 未认缴出资的股东退股
  • 公司名字开错了,认证过了怎么处理
  • 租客一次性支付一年租金需要交个税吗
  • 领购增值税专用发票
  • 个体工商户税收怎么算
  • 职工教育经费进项
  • 企业发放防暑降温物品依据
  • 坏账损失怎么核算
  • 无偿取得土地使用权的会计分录
  • 个人所得税成本费用怎么算
  • 如何开锅
  • 未确认融资费用的期初余额
  • 出售原材料属于营业收入吗
  • 做金融服务要什么资格
  • 上期金额为上年同期报表的本期金额
  • 公司的职工教育是指什么
  • 广告联系电话
  • 公司预交一年的养老保险
  • 营业外支出是否需要发票
  • laravel 微服务架构
  • linux怎么设置读写权限
  • 餐饮发票可以计入什么费用
  • 辅导期一般纳税人标准
  • 安徽4岁男孩户口已解决
  • 非关联企业无偿借款涉及到税务会计分录处理
  • 莫尼莫克房车
  • wordpress文章编辑使用教程
  • 身份证php编写
  • 年报中投资总额怎么填
  • php中数据库怎么设计
  • 代开增值税额与实际缴款额差一分钱如何入账
  • 小规模纳税人残保金申报时间
  • php die exit
  • 汇算清缴补交所得税怎么做凭证
  • 专项应付款能转回来吗
  • 文化事业建设费征收范围及计税依据
  • python locator
  • 超简单的土法自制水泥
  • 商品流通企业的基本要素
  • 采用汇兑的方式归还前欠货款
  • mysql简单操作
  • 捐赠货物的增值税可以税前扣除吗
  • 政府补助收入的现金流属于什么
  • 企业零申报怎么办
  • 小规模免征增值税的会计处理办法
  • 房地产开发公司注册条件
  • 房地产按揭贷款放款条件
  • 关于母子公司的关系的表述,正确的是( )
  • 包工包料工程如何计税
  • 借主营业务成本贷库存商品什么意思
  • windows下mysql 5.7版本中修改编码为utf-8的方法步骤
  • 如何保证系统异常状态
  • appcrash是什么文件
  • windows server 2008 r2最大支持内存
  • 硬盘分几个区最好
  • linux datetime命令
  • Linux安装anaconda
  • win8系统停止服务
  • win7点关机关不了
  • win7息屏不断网
  • Host 'admin-PC' is not allowed to connect to this MySQL server
  • nodejs+websocket实时聊天系统改进版
  • jquery easyui开发指南
  • div.remove
  • python移动目标跟踪
  • python socket server
  • php守护进程的应用场景
  • 安卓手机照片压缩
  • jquery自定义函数
  • 大学的python选修课好学吗
  • Windows下python2.7.8安装图文教程
  • 贵州社保在线年审官网
  • 税控盘抵税申报表怎么填
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设