美文网首页饥人谷技术博客
angular2 post 与express 后端模拟交互小细节

angular2 post 与express 后端模拟交互小细节

作者: KingRan945 | 来源:发表于2017-08-08 11:06 被阅读0次

     楼主的第一篇文章。之前没记录的习惯,感觉到现在学的东西有点像斜坡的泥土,一下雨都给冲刷没了!导致最不能忍受的同样的坑,可能还是踩第二次!每次找到问题心里都在默默骂自己煞笔。说完感想,步入正题!

背景:楼主学习历程angular1(略懂) => vue(入门) => angular(这篇文章都指angular2+)。angular也是刚学,在自己写写demo玩玩没,实现登陆功能。后端使用node express框架,也是自己写。

声明:目前这里都是本地测试代码,生产后面更新。


问题:angular,发http.post请求到后端,后端收到不前端发来信息。(大佬忽略这篇文章

上代码 !node :(.ts)   ps:本来上图的,想想方便ctrl + c嘛

 import * as express from 'express'

 // import * as bodyParser from 'body-parser' // 先不要看注销

 const app = express();

// app.use(bodyParser.json())                         // 先不要看注销

 app.post('/api/login', (req, res) => {

     console.log(req.body);

     res.send(req.body);

 });

 const server = app.listen(8081, () => {

     let host = server.address().address;

     let port = server.address().port;

     console.log("访问接口:http://%s%s", host, port)

 })

运行代码:

最初使用Postman来测试:

使用Postman 发射


接受结果

在网上找了各种问题总结(坑):发送http请求,需要http的MIME字段(装个B昨天晚上刚刚看的书)。通俗讲header,需要告诉http,你发送的文件格式。

楼主这里是json

我们来测试一下:

并没有什么卵用

http,json格式发送出去到express代码里面去了。但是express,需要解开json转成Object的呀!注释代码里面解开,工具:body-parser

npm install --save body-parser

import * as bodyParser from 'body-parser'

app.use(bodyParser.json())      //json 格式,更多格式参照google,baidu. github楼主采集English。

后端测试好了,调试前端anuglar:

    前面问题的原因都知道了(angular需要header的添加),直接上正确代码:

这里有一个小细节:楼主在去找资料的时候有人说angular的header,可不用添加,angular有默认的json模式的添加;然后楼主拿着这里没有添加的haeder的代码去测试,测不出来!各种小坑

import {Http,Headers} from '@angular/http';

import 'rxjs/Rx';

submitForm() {

//let headers= new Headers();  修改办法  添加头部

//headers.append('Content-Type','application/json'); 修改办法  http 文件格式

const myData= JSON.stringify({ userName:1111, password:1111})

this._http.post('/api/login',myData, {headers})

.map(res=>res.json())

.subscribe(

data=>console.log(data),

err=>console.log('Something went wrong!')

)}

解开注销代码。这里你可以能会遇到跨域的问题:(不同端口也算跨域) 

再次强调这里是本地测试解决办法,生产环境后续更新。

解决办法: 1,主目录添加:proxy.config.json

 {

 "/api":{

    "target":"http://localhost:8081"

   } }

2,修改主目录package.json文件

"scripts": {

"ng":"ng",

"start":"ng serve --proxy-config proxy.config.json",

"build":"ng build --prod --aot",

"test":"ng test",

"lint":"ng lint",

"e2e":"ng e2e"

},

修改完记得,重启angular程序。

测试:

前端 后端

楼主的第一次,文字,排版辣鸡,见谅!  后面我会继续更新踩坑记录

相关文章

  • angular2 post 与express 后端模拟交互小细节

    楼主的第一篇文章。之前没记录的习惯,感觉到现在学的东西有点像斜坡的泥土,一下雨都给冲刷没了!导致最不能忍受的同...

  • 2018-02-08

    前端与后端的数据交互 前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后...

  • vue与express搭建易书

    express搭建后端,vue做页面交互

  • python中的ajax

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 前端与后端的数据交互(jquery ajax+python fl

    前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的...

  • 前端项目mock数据

    需要用的库 express(模拟后端代码) https://www.expressjs.com.cn/ axio...

  • 自定义中间件

    1. 需求描述与实现步骤 自己手动模拟一个类似于 express.urlencoded这样的中间件,来解析POST...

  • 前后端交互-Express框架

    一. Express框架简介及初体验 1 - Express框架是什么 Express是一个基于Node平台的we...

  • 前后端交互如何保证安全性?

    前言 web与后端,andorid与后端,ios与后端,像这种类型的交互其实就属于典型的前端与后端进行交互。在与B...

  • 小程序与后端联调踩坑

    小程序与后端联调踩坑 本次练习是以springboot作为后端开发框架、微信小程序做前端交互。 后端代码截图: s...

网友评论

    本文标题:angular2 post 与express 后端模拟交互小细节

    本文链接:https://www.haomeiwen.com/subject/jovynttx.html