一.http请求:get和post
1.app.module.ts 中引入HttpClientModule 并注入
// 引入跟服务器交互的模块,进行get和post请求
// 第二个是使用jsonp解决跨域问题
import { HttpClientModule,HttpClientJsonpModule } from '@angular/common/http';
imports: [
HttpClientModule, // 注入
HttpClientJsonpModule,
],
2.在组件中引入HttpClient 并在构造函数中声明 news.components.ts
// 第二个模块:使用post请求时需要设置请求头
import { HttpClient,HttpHeaders } from '@angular/common/http';
constructor(public http:HttpClient) { }
3.get请求函数
public data:any;
getData(){
let api='http://127.0.0.1:8000/api/getData/'
// HttpClient模块底层使用的是Rxjs,所以使用subscribe获取数据
this.http.get(api).subscribe((resp)=>{
console.log(resp);
// 将返回的json数据赋值给data,即可通过双向数据绑定动态的修改页面数据
this.data=resp;
})
}
4.post请求
postData(){
let api='http://127.0.0.1:8000/api/postData/'
let data={username: 'kzzf', age: 20};
// post请求时需要额外设置请求头
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
// 默认接收json的返回值,返回字符串时报错
this.http.post(api, data, httpOptions).subscribe(resp=>{
console.log(resp);
})
}
二.后端解决跨域问题——cors
上述两种请求返回的都是json数据,会造成跨域问题,可通过CORS解决
django的配置部分参考:
https://blog.csdn.net/weixin_43667990/article/details/100716858
1.get视图
def get_data(request):
data = [
{"id": 1, "title": "西红柿"},
{"id": 2, "title": "番茄"},
{"id": 3, "title": "土豆"},
]
# django 2.2.4 版本,非字典格式的json数据需要设置safe属性
return JsonResponse(data, safe=False)
2.post视图
def post_data(request):
# 前后端分离后,前端提交的json数据存在request.body中
data = json.loads(request.body)
username = data.get('username')
age = data.get('age')
print('username=%s, age=%s' % (username, age))
return JsonResponse({'status': 'ok'})
三.axios请求
angular中除了使用HttpClientModule,还可使用第三方模块axios请求数据
简单示例
1.安装axios
项目根目录中执行
# --save会把axios加到package.json文件中
cnpm install axios --save
2.组件中引入axios
import axios from 'axios';
3.get请求示例
getDataAxios(){
let api='http://127.0.0.1:8000/api/getData/'
axios.get(api).then(function(resp){
// 正常响应后执行
console.log(resp);
console.log(resp.data) // data属性为后端返回的数据
}).catch(function(error){
// 异常响应后执行
console.log(error)
}).finally(function(){
// 都会执行
console.log("finnally")
})
}
四.jsonp解决跨域问题
无需修改django的配置,但需要修改对应的视图函数
1.请求函数
getDataJsonp(){
// 这个get请求也会有跨域问题
let api='http://127.0.0.1:8000/api/getData/'
// 第二个参数需要跟后端对应上,会作为参数拼接在url后面,后端根据callback字段获取函数名,函数名是自动生成的
// 示例:http://127.0.0.1:8000/api/getData/?callback=ng_jsonp_callback_0
this.http.jsonp(api,'callback').subscribe(resp=>{
console.log(resp);
})
}
2.后端处理
def get_data(request):
# jsonp时获取前端传递的回调函数名,字段名需前后端统一
func = request.GET.get("callback")
data = [
{"id": 1, "title": "西红柿"},
{"id": 2, "title": "番茄"},
{"id": 3, "title": "土豆"},
]
# jsonp解决跨域问题时的返回值
return HttpResponse("%s(%s)" % (func, json.dumps(data)))
参考:https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418