客户端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)的更多相关文章

  1. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  2. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  3. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  4. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  5. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  6. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  7. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  8. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  9. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  10. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. C++语言的I/o使用方法详解

    构造器 语法: fstream( const char *filename, openmode mode ); ifstream( const char *filename, openmode mod ...

  2. MySQL数据库(8)_MySQL数据库总结

    sql语句规范 sql是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 在使用它时,只需要发出“做什么” ...

  3. PAT 天梯赛 L1-029. 是不是太胖了 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-029 AC代码 #include <iostream> #include <cstdio&g ...

  4. VC 取消warning

    #pragma warning (disable:4200) 4200是指具体哪个warning

  5. Oracle索引表

    索引组织表(Index-Organized Table)是按B-树的结构来组织和存储数据的.与标准表中的数据时无序存放的不同,索引表中数据按主键值有序存储. 叶子节点中存放的是表的主键值与所有非主键值 ...

  6. php大转盘抽奖

    抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ''; $ ...

  7. 《高级程序设计》8 BOM

    window对象 location对象 navigator对象 screen对象 history对象 一.window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,wind ...

  8. BEM(一种 CSS 命名规则)

    一. 什么是 BEM BEM的意思就是块(block).元素(element).修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论. 这种巧妙的命名方法让你的 CSS 类对其 ...

  9. 【iOS和HTML 5交互】iOS中加载html5调用html方法和修改html5内容

    近期项目开发中用到了这方面的技术了,那我们一起来看看. 1.利用webView控件加载本地html5或者网络上html5 2.设置控制器为webView的代理,遵守协议 3.实现代理方法webView ...

  10. Kubernetes addon-manager

    Addon-manager 附加组件管理器(Addon-manager)是运行在 Kubernetes 集群 Master 节点.用来管理附加组件(Addons)的服务.它管理着 $ADDON_PAT ...