@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( ...
随机推荐
- CoreThink主题开发(七)使用H-ui开发博客主题之新闻资讯正文页面
感谢H-ui.感谢CoreThink! 效果图: 后台发文章有上传附件.封面的功能,但是前台代码中有,不能显示,去除了,前台页面还有社会化分享,百度的,页面也不显示. Blog/Cms/Index/d ...
- 剑指offer 面试15题
面试15题: 题目:二进制中1的个数 题:输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 解题思路一: 最佳方法:把一个整数减去1,再和原整数做“与运算”,会把该整数最右边的1变成0 ...
- 剑指offer 面试46题
面试46题: 题目:把数字翻译成字符串 题:给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成“a”,1翻译成“b”,……,11翻译成“1”,……,25翻译成“z”.一个数字可能有多个翻译.例如 ...
- Network Basic Knowledge
@1: 应用层的常用协议以及对应的端口号: DNS 53/tcp/udp SMTP 25/tcp POP3 110/tcp HTTP 80/tcp HTTPS 443/udp TELNET 23/tc ...
- [转+整理]linux shell 将字符串分割成数组
原文链接:http://1985wanggang.blog.163.com/blog/static/776383320121745626320/ a="one,two,three,four& ...
- python并发编程之多进程2-(数据共享及进程池和回调函数)
一.数据共享 1.进程间的通信应该尽量避免共享数据的方式 2.进程间的数据是独立的,可以借助队列或管道实现通信,二者都是基于消息传递的. 虽然进程间数据独立,但可以用过Manager实现数据共享,事实 ...
- MyEclipse工具栏的隐藏与显示及自定义
Myeclipse的工具栏 1.隐藏 工具栏---->右键---->hide toolbar 2.显示 window ----> show toolbar 3.自定义 ...
- 类百度DOC编辑区域
.mainarea{ position:absolute; top:151px; width:100%; bottom:0px; } .edit_wrap{ background:#fcfcfc; p ...
- Java泛型详解(转)
文章转自 importNew:Java 泛型详解 引言 泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用.本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理 ...
- linux上安装程序出现的问题汇总
1.程序在编译过程中出现:variable set but not used [-Werror=unused-but-set-variable] 解决方法:将configure文件和Makefile文 ...