Angular中使用HttpClientModule模块实现get请求数据和post提交数据

乐观积极的现实理想的 發表於 2020-5-16 16:29:00

Angular中使用HttpClientModule模块实现get请求数据和post提交数据

<h1>场景</h1>
Angular介绍、安装Angular Cli、创建Angular项目入门教程：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017 
Angular新建组件以及组件之间的调用：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
通过以上搭建起Angular项目。
注：
博客： https://blog.csdn.net/badao_liumang_qizhi
 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
<h1>实现 </h1>
Angular5.x 以后get、post 和和服务器交互使用的是HttpClientModule 模块。

<h2>使用HttpClientModule实现get请求数据 </h2>
1.在app.module.ts 中引入HttpClientModule 并注入 
<div class="cnblogs_code">
<pre>import {HttpClientModule} from '@angular/common/http';</pre>
</div>
注入
<div class="cnblogs_code">
<pre>imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule
],</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162545336-1165682066.jpg" alt="">
 
 
<img alt="">
2.在用到的地方引入HttpClient 并在构造函数声明
<div class="cnblogs_code">
<pre>import {HttpClient} from "@angular/common/http";</pre>
</div>
 
<div class="cnblogs_code">
<pre>constructor(public http:HttpClient) { }</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162615923-805492067.jpg" alt="">
 
 
<img alt="">
3.get请求数据
在用到请求数据的html中添加一个button并添加点击事件，然后再添加一个ul来显示获取到的数据
<div class="cnblogs_code">
<pre><button (click) = "getData()">get请求数据</button>
 
<hr>

<ul>
<li *ngFor = "let item of list">{{item.title}}</li>
</ul></pre>
</div>
 
在ts中首先声明一个list数组来存储响应的数据 
<div class="cnblogs_code">
<pre>public list:any[] = [];</pre>
</div>
 
然后在按钮的点击事件中 
<div class="cnblogs_code">
<pre>getData()
{
var api = "http://xxx.com/api/productlist";
this.http.get(api).subscribe((response:any) =>{
 console.log(response);
 this.list = response.result;
});
}</pre>
</div>
 
其中api是获取数据的后台接口，这里数据在响应的result中，所以获取数据使用response.result
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162648904-1681796632.jpg" alt="">
 
 
 
<img alt=""> 
然后运行项目，点击按钮看效果
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162657657-1579256636.jpg" alt="">
 
 
 
<img alt=""> 
<h2>使用HttpClientModule实现post提交数据 </h2>
1.在app.module.ts 中引入HttpClientModule 并注入 
<div class="cnblogs_code">
<pre>import {HttpClientModule} from '@angular/common/http';</pre>
</div>
 
注入 
<div class="cnblogs_code">
<pre>imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule
],</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162714374-13069048.jpg" alt="">
 
 
<img alt="">
2.在用到的地方引入HttpClient 和HttpHeaders并在构造函数声明HttpClient
<div class="cnblogs_code">
<pre>import {HttpClient,HttpHeaders} from "@angular/common/http";</pre>
</div>
 
<div class="cnblogs_code">
<pre>constructor(public http:HttpClient) { }</pre>
</div>
 
3.post提交数据 
为了测试效果搭建一个后台服务端，这里使用node 
<h3>搭建node服务端 </h3>
新建文件夹nodejs_serve,然后在此文件夹下新建两个文件
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162736079-1551965121.jpg" alt="">
 
 
 
<img alt=""> 
其中app.js代码为 
 
<div class="cnblogs_code">
<pre>var express = require('express');

var app= express();

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/*express允许跨域*/

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
if(req.method=="OPTIONS") res.send(200);
elsenext();
});

//app.use(express.static(path.join(__dirname, 'public')));

app.get('/',function(req,res){

res.send('首页');

})

app.post('/dologin',function(req,res){

console.log(req.body);

res.json({"msg":'post成功'});

})

app.get('/news',function(req,res){

//console.log(req.body);
res.jsonp({"msg":'这是新闻数据'});

})

app.listen(3000,'127.0.0.1');

</pre>
</div>
 
然后package.json代码为 
<div class="cnblogs_code">
<pre>{
"dependencies": {
"ejs": "^2.5.6",
"express": "^4.15.3",
"socket.io": "^2.0.3",
"body-parser": "~1.17.1"
}
}</pre>
</div>
 
然后在此目录下打开cmd输入 
<div class="cnblogs_code">
<pre>npm install</pre>
</div>
 
或者 
<div class="cnblogs_code">
<pre>cnpm install</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162807677-667167236.jpg" alt="">
 
 
<img alt="">
 安装依赖完成后运行项目
<div class="cnblogs_code">
<pre>node app.js</pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162826339-1241618299.jpg" alt="">
 
 
<img alt="">
然后打开浏览器输入
http://localhost:3000/
看到如下则是项目运行成功
<img alt="">
 <img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162839352-871088888.jpg" alt="">
 
 
<h3> post提交数据  </h3>
首先在页面上添加一个按钮并设置按钮的点击事件 
<div class="cnblogs_code">
<pre><button (click) = "doLogin()">post提交数据</button></pre>
</div>
 
然后在点击事件多对应的方法中 
<div class="cnblogs_code">
<pre>doLogin()
{
const httpOptions = {
 headers: new HttpHeaders({ 'Content-Type': 'application/json' })
 };
 var api = "http://127.0.0.1:3000/doLogin";
 this.http.post(api,{username:'霸道',age:'24'},httpOptions).subscribe(response => {
 console.log(response);
 });

}</pre>
</div>
 
注意上面headers的书写方式 
然后运行项目点击按钮 
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162911098-112235787.jpg" alt="">
 
 
此时查看node服务端控制台
 
<img src="https://img2020.cnblogs.com/blog/1328191/202005/1328191-20200516162923817-197378678.jpg" alt="">
 
 
 
 
<img alt="">

</div>
<div id="MySignature" role="contentinfo">
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。 
来源：https://www.cnblogs.com/badaoliumangqizhi/p/12901052.html

頁: [1]

琼殿技术论坛's Archiver

Angular中使用HttpClientModule模块实现get请求数据和post提交数据