当前位置: 首页 > news >正文

@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.'});
    }
});

 

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/7890101.html

相关文章:

  • 利用ansible-cmdb统计主机配置信息并以web页面展出来
  • 学习JAVA自我总结
  • 201621123075作业10-异常
  • 深入Atlas系列:Web Sevices Access in Atlas(7) - RTM中的客户端支持
  • tomcat7配合redis实现session共享
  • KeyPass密码管理软件使用说明
  • 禁止一个指定的程序运行
  • Linux 系统如何在开机时修改root密码
  • 论秋招中的排序(排序法汇总-------上篇)
  • Anaconda 安装tensorflow(GPU)
  • sudo的用法记录
  • 查看文件源代码功能实现
  • chomperwu
  • 在SpringMVC中使用拦截器(interceptor)拦截CSRF攻击
  • 一、网络的基本概念
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 【前端学习】-粗谈选择器
  • angular2开源库收集
  • create-react-app做的留言板
  • JavaScript 一些 DOM 的知识点
  • JavaScript中的对象个人分享
  • Odoo domain写法及运用
  • Redis的resp协议
  • 产品三维模型在线预览
  • 关于Java中分层中遇到的一些问题
  • 类orAPI - 收藏集 - 掘金
  • 七牛云假注销小指南
  • 深入 Nginx 之配置篇
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 微信小程序开发问题汇总
  • 系统认识JavaScript正则表达式
  • 湖北分布式智能数据采集方法有哪些?
  • ​卜东波研究员:高观点下的少儿计算思维
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • (2021|NIPS,扩散,无条件分数估计,条件分数估计)无分类器引导扩散
  • (floyd+补集) poj 3275
  • (windows2012共享文件夹和防火墙设置
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (附源码)计算机毕业设计SSM基于健身房管理系统
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • (转载)CentOS查看系统信息|CentOS查看命令
  • .Net Attribute详解(上)-Attribute本质以及一个简单示例
  • .Net Winform开发笔记(一)
  • .vue文件怎么使用_我在项目中是这样配置Vue的
  • @Transaction注解失效的几种场景(附有示例代码)
  • [1] 平面(Plane)图形的生成算法
  • [AIGC] SQL中的数据添加和操作:数据类型介绍
  • [CF226E]Noble Knight's Path
  • [C语言]——分支和循环(4)
  • [GPT]Andrej Karpathy微软Build大会GPT演讲(上)--GPT如何训练
  • [Hadoop in China 2011] Hadoop之上 中国移动“大云”系统解析
  • [HJ56 完全数计算]
  • [IOI2018] werewolf 狼人