@angular/cli项目构建--http(2)
客户端GET设置参数查询:
search() {
const params = new HttpParams()
.set('userName', this.userName)
.set('fullName', this.fullName);
this.http.get('/api/users', {params})
.subscribe(data => {
this.users = data['users'];
});
}
reset() {
this.userName = '';
this.fullName = '';
this.search();
}
node服务器响应:
app.get('/users', (req, res) => {
if (_.isEmpty(req.query.userName)&&_.isEmpty(req.query.fullName)) {
res.json({users: users});
} else {
res.json({
users: users.filter(
(user) =>
((user.userName).indexOf(req.query.userName)) > 0 ||
((user.fullName).indexOf(req.query.fullName)) > 0
)
});
}
});
跨域设置:
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
bodyParse use:
var express = require('express')
var bodyParser = require('body-parser')
var app = express()
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))//extended为false表示使用querystring来解析数据,这是URL-encoded解析器
// parse application/json
app.use(bodyParser.json())//添加json解析器
app.use(function (req, res) {
res.setHeader('Content-Type', 'text/plain')
res.write('you posted:\n')
res.end(JSON.stringify(req.body, null, 2))
})
var jsonParser = bodyParser.json()//获取JSON解析器中间件
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })//url-encoded解析器
// POST /login gets urlencoded bodies
app.post('/login', urlencodedParser, function (req, res) {//注册URL解析器
if (!req.body) return res.sendStatus(400)
res.send('welcome, ' + req.body.username)
})
// POST /api/users gets JSON bodies
app.post('/api/users', jsonParser, function (req, res) {//使用json中间件获取json数据
if (!req.body) return res.sendStatus(400)
// create user in req.body
})
// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }))
// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }))
// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }))
GET,POST,DELTE,PUT:
app.get('/users', function (req, res) {
if (_.isEmpty(req.query.userName) && _.isEmpty(req.query.fullName)) {
res.json({users: users});
}
else {
res.json({
users: users.filter(function (user) {
return ((user.userName).indexOf(req.query.userName)) > 0 ||
((user.fullName).indexOf(req.query.fullName)) > 0;
})
});
}
});
app.post('/users', jsonParser, urlencodedParser, function (req, res) {
var user = req.body.user;
users.push(user);
res.send('save success');
}); app.delete('/users/:id', function (req, res) {
const deleteUser = users.findIndex(function (user) {
return user.id === req.params.id;
});
users.splice(deleteUser, 1);
res.send('delete success');
});
app.put('/api/tour/:id',function (req,res) {
var id = req.params.id;
var p = tours.some(function (p) {
return p.id == id;
});
if(p){
if(req.query.name) tours[id].name = req.query.name;
if(req.query.price) tours[id].price = req.query.price;
res.json({success:true,tours:tours,p:p});
}else{
res.json({error:'No such tour exists.'});
}
});
@angular/cli项目构建--http(2)的更多相关文章
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--路由3
路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...
- @angular/cli项目构建--httpClient
app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...
- @angular/cli项目构建--路由2
app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
随机推荐
- PyNest——Part1:neurons and simple neural networks
neurons and simple neural networks pynest – nest模拟器的界面 神经模拟工具(NEST:www.nest-initiative.org)专为仿真点神经元的 ...
- hadoop学习(一)概念理解
1.概念 1.1什么是hadoop? hadoop 是大数据存储和处理的框架,主要组成为文件存储系统hdfs和分布式计算框架mapreduce. 1.2能做什么,擅长做什么,不擅长做什么? 1.2.1 ...
- Linux基础系列:常用命令(3)
作业一: ) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/.txt(覆盖) cat /etc/passwd /etc/group > /test/.txt ) 将用户信息数据库文件 ...
- VMware虚拟机NAT模式的具体配置
NAT模式的具体配置 NAT方式:虚拟机可以上外网,可以访问宿主计算机所在网络的其他计算机(反之不行). 1.1.1. 查看虚拟机的网络参数 1) 打开虚拟机,选择菜单&q ...
- c# 接口(interface)与接口应用
using System; using System.Collections.Generic; using System.Linq; using System.Text; //接口(interface ...
- ubuntu: lightdm 登录root超级管理员方法
ubuntu 12.04 lts 默认是不允许root登录的, 在登录窗口只能看到普通用户和访客登录. 以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后, 修改系统配置文件需要切换到超级 ...
- Linux环境下的图形系统和AMD R600显卡编程(2)——Framebuffer、DRM、EXA和Mesa简介
转:https://www.cnblogs.com/shoemaker/p/linux_graphics02.html 1. Framebuffer Framebuffer驱动提供基本的显示,fram ...
- bowtie2用法
bowtie2的功能:短序列的比对 用法:bowtie2 [options]* -x <bt2-idx> {-1 <m1> -2 <m2> | -U <r&g ...
- easy_install
一 setuptools 和easy_install setuptools:setuptools 是一组由PEAK(Python Enterprise Application Kit)开发的 Pyth ...
- 2015 ACM/ICPC Asia Regional Changchun Online HDU 5444 Elven Postman【二叉排序树的建树和遍历查找】
Elven Postman Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...