openresty 前端开发进阶一之http后端

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

做前端开发,大多数情况下,都需要跟后端打交道,而最常见的方式则是通过http请求,进行通信。

在openresty中,通过http跟后端整合通信的方式又很多种,各有各的好处,可以根据情况交叉使用

1、直接proxy

这种方式最简单,也是我们最熟悉的,直接配置一个反向代理,跟nginx的用法一致

比如我们有一个后端服务,提供用户相关接口,是java写的,端口8080,为了简单起见,我直接在openresty里面配置一个server,模拟java端,通过一个简单的案例的来说明情况

nginx.conf


worker_processes  1;error_log logs/error.log;events {worker_connections 1024;
}http {lua_package_path "/Users/john/opensource/openresty-web-dev/demo7/lua/?.lua;/usr/local/openresty/lualib/?.lua";server {listen 80;server_name localhost;lua_code_cache off;location / {root html;index index.html;}location ~ ^/user {proxy_pass http://127.0.0.1:8080;}}# 这个只是模拟后端server {listen 8080;server_name localhost;lua_code_cache off;location ~ /user/(.+) {default_type text/html; content_by_lua_file lua/$1.lua;}}}

上面配置了两个location,将所有以/user开头的请求都转到后端的8080服务器,其他的则是静态页面,直接从html目录读取,然后返回,从这里开始就是前端开发了

为了简单起见,假设后端提供了一个登陆接口,我们这里直接用lua来实现一下就好了,检查用户名跟密码是admin,就返回成功,否则返回失败

lua/login.lua

local req = require "req"
local cjson = require "cjson"local args = req.getArgs()local username = args['username']
local password = args['password']local res = {}if username == "admin" and password == "admin" thenres['ret'] = trueres['token'] = ngx.md5('admin/' .. tostring(ngx.time()))
elseres['ret'] = false
endngx.say(cjson.encode(res))

index.html

<html>
<head><meta charset="UTF-8"><title>Login Page</title>
</head>
<body>UserName: <input type="text" id="username" value="admin">Password: <input type="password" id="password" value="admin"><a href="javascript:void(0)" onclick="login()">Login</a><script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><script>function login() {var username = $('#username').val();var password = $('#password').val();$.post('/user/login', {username: username, password: password}, function(res){console.log(res)var msg = res.ret ? "登录成功" : "登录失败"alert(msg)}, 'json')}</script>
</body>
</html>

2、使用ngx.location.captrue

这个方法主要用于发送内部请求,即请求当前server内的其他location,默认会将当前请求的参数带过去,也可以手动指定参数,GET参数通过args传递,post参数通过body传递

如:

local req = require "req" local args = req.getArgs()

GET 调用

local res = ngx.location.capture('/user/login', { method = ngx.HTTP_GET, args = args, });

POST 调用

local res = ngx.location.capture('/user/login', { method = ngx.HTTP_POST, body = ngx.encode_args(args), });

现在我们自己写一个lua来调用后台接口实现登陆,然后对请求做一点处理,实现一些额外的逻辑,比如在原来的参数上面加上一个from字段

lua/local-login.lua

local req = require "req"
local cjson = require "cjson"local args = req.getArgs()-- GET
local res = ngx.location.capture('/user/login', {method = ngx.HTTP_GET, args = args})
-- POST
-- local res = ngx.location.capture('/user/login', {method = ngx.HTTP_POST, body = ngx.encode_args(args)})-- print(res.status) -- 状态码if res.status == 200 thenlocal ret = cjson.decode(res.body)ret['from'] = 'local'ngx.say(cjson.encode(ret))
elseprint(res.body)ngx.say('{"ret": false, "from": "local"}')
end

index.html 也需要改一下,多加一个按钮,调用本地登陆接口

<html>
<head><meta charset="UTF-8"><title>Login Page</title>
</head>
<body>UserName: <input type="text" id="username" value="admin">Password: <input type="password" id="password" value="admin"><a href="javascript:void(0)" onclick="login()">Login</a><a href="javascript:void(0)" onclick="local_login()">Local Login</a><script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><script>function login() {var username = $('#username').val();var password = $('#password').val();$.post('/user/login', {username: username, password: password}, function(res){console.log(res)var msg = res.ret ? "登录成功" : "登录失败"alert(msg)}, 'json')}function local_login() {var username = $('#username').val();var password = $('#password').val();$.post('/lua/local-login', {username: username, password: password}, function(res){console.log(res)var msg = res.ret ? "本地登录成功" : "本地登录失败"alert(msg)}, 'json')}</script>
</body>
</html>

3、第三方模块lua-resty-http

这种方式跟上面那种不同的地方是调用的时候,不会带上本地请求的请求头、cookie、以及请求参数,不过这也使得请求更纯粹,不会带上那些没必要的东西,减少数据传输

最后local-login.lua 变成如下

local req = require "req"
local cjson = require "cjson"
local http = require "resty.http"local args = req.getArgs()-- GET
-- local res = ngx.location.capture('/user/login', {method = ngx.HTTP_GET, args = args})-- POST
-- local res = ngx.location.capture('/user/login', {method = ngx.HTTP_POST, body = ngx.encode_args(args)})-- http
local httpc = http.new()
local res = httpc:request_uri("http://127.0.0.1:8080/user/login", {method = "POST",body = ngx.encode_args(args),headers = {["Accept"] = "application/json",["Accept-Encoding"] = "utf-8",["Cookie"] = ngx.req.get_headers()['Cookie'],["Content-Type"] = "application/x-www-form-urlencoded",}
})
httpc:set_keepalive(60)print(res.status) -- 状态码if res.status == 200 thenlocal ret = cjson.decode(res.body)ret['from'] = 'local'ngx.say(cjson.encode(ret))
elseprint(res.body)ngx.say('{"ret": false, "from": "local"}')
end

到此,基本上已经能通过openresty,做一些前后端的交互了,下次介绍怎么使用openresty模板渲染,以及搭配react开发前端。

示例代码 参见demo7部分

转载于:https://my.oschina.net/362228416/blog/820754

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291759.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php集成环境

WampServer转载于:https://www.cnblogs.com/longhs/p/3583495.html

第7章 C控制语句:分支和跳转

学习笔记——《C Prime Plus》 第7章 C控制语句&#xff1a;分支和跳转7.1 if 语句7.2 if else 语句7.2.1 介绍 getchar() 和 putchar()7.4 一个统计单词的程序7.1 if 语句 下程序读取一列数据&#xff0c;每个数据都表示每日的最低温度&#xff08;℃&#xff09;&#xff0c…

Objective-C中的self和super

1.有过面向对象的人知道&#xff0c;self相当于this&#xff0c;super相当于调用父类的方法 2.self是类的隐藏的参数&#xff0c;指向当前调用方法的类&#xff0c;另一个隐藏参数是_cmd&#xff0c;代表当前类方法的selector。 super并不是隐藏的参数&#xff0c;它只是一个”…

ip校验和及udp校验和的计算方法

一、ip校验和的计算: 计算方法: 1. ip包头(共20个字节)按照每16个bit作为一个值依次进行相加 2. 将计算结果的进位加到低16位上 3. 将结果取反 ip包头的内存内容 eg: 45 00 00 20 0F B8 00 00 80 11 00 00 C0 A8 0A 9F C0 A8 0A C7 将 0x4500 0x0020 0x0FB8 0x0000 0x…

【Blog.Core开源】网关统一集成下游服务文档

一般看到公众号更新&#xff0c;就是大概率要开始上班了&#x1f602;上回书咱们说到了《【Blog.Core开源】快速预览Admin界面效果》&#xff0c;这样我们就可以专注于后端开发&#xff0c;而且也能快速的实现效果的预览。那今天我们继续来往下走&#xff0c;说一说网关相关的内…

android4.3 截屏功能的尝试与失败分析

1.背景 上一篇讲了在源码中捕获到了android手机的截屏函数&#xff08;同时按下电源键与音量减&#xff0c;详情http://blog.csdn.net/buptgshengod/article/details/19911909&#xff09;&#xff0c;经过一周的研究还是没有在手机上实现系统截屏功能&#xff0c;总结下尝试的…

numpy方法总结

2019独角兽企业重金招聘Python工程师标准>>> 一、数组方法 创建数组&#xff1a;arange()创建一维数组&#xff1b;array()创建一维或多维数组&#xff0c;其参数是类似于数组的对象&#xff0c;如列表等 反过来转换则可以使用numpy.ndarray.tolist()函数&#xff0…

一些移动端开发的细节记录

好久不来写东西了,最近太忙,给自己搞的很累,对自己选择的道路有些不自信了. 决定干够半年后,大概四月中旬,会离职休息两三个月,去几个喜欢的地方看看,锻炼打球减肥,再把最近想要做过的项目整理一下,编写一些自己的插件和库,把之前积累的一些书过一下. 对前端的热爱没有丝毫改变…

阿里云离线数据仓库

阿里云离线数据仓库第1章 数据仓库概念第2章 项目需求及架构设计2.1 项目需求分析2.2 阿里云技术框架2.2.1 技术选型2.2.2 系统数据流程设计第3章 数据生成模块3.1 埋点数据基本格式3.2 事件日志数据3.2.1 商品列表页&#xff08;loading&#xff09;3.2.2 商品曝光&#xff08…

C++之extern和string的find函数和substr函数和data()函数使用总结

1、extern使用总结 网上看的例子,特么没有一个看懂的,为什么会用到这个extern呢?因为有一个cpp文件需要另外一个cpp文件的里面的值,第一反应想到的是static,因为java 里面如果在变量前面加了static,一切就好说了,class.成员变量,然后特么我也去找c++里面的static…

技术分享 | 混合云模式下SaaS端前端最佳实践

导读&#xff1a;集成开放平台采用的是混合云部署架构&#xff0c;包含两个大的组件&#xff0c;管理控制台和引擎。管理控制台是SaaS的&#xff0c;部署在公有云&#xff0c;按租户隔离。引擎部署在客户私有云。一套SaaS版的管理控制台如何适配不同客户的引擎&#xff0c;本文…

统计素数个数

10:判决素数个数总时间限制:1000ms 内存限制:65536kB描述 输入两个整数X和Y&#xff0c;输出两者之间的素数个数&#xff08;包括X和Y&#xff09;。输入 两个整数X和Y&#xff08;1 < X,Y < 105&#xff09;。输出 输出一个整数&#xff0c;表示X&#xff0c;…

记一则Hadoop DataNode OOM故障,以及解决方案

一、故障症状最近公司一个集群跑大任务时&#xff0c;datanode日志报DataXceiveServer: Exiting due to:java.lang.OutOfMemoryError: unable to create new native thread异常&#xff0c;然后计算节点上的DataNode直接挂掉。DataNode异常日志截图如下&#xff1a;2014-03-06 …

阿里云实时数据仓库

阿里云实时数据仓库——学习笔记 课程目标 学习搭建一个实时数据仓库&#xff0c;掌握数据采集、存储、计算、输出、展示等整个业务流程。整个实时数据仓库系统是在阿里云架构上搭建&#xff0c;掌握并学会运用各个服务组件&#xff0c;及各个组件之间如何联动。前置知识要求&…

[转]svn常用命令

谢谢原作者:http://blog.sina.com.cn/s/blog_963453200101eiuq.html 1、检出svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码…

手动挡五个档位示意图_汽车档位越多越好?听听专业回答

如今的汽车市场百花齐放&#xff0c;汽车厂商们也不断在研发过程中寻找不同的突破口&#xff0c;其中汽车变速器的档位变化就是众多汽车品牌当做噱头的重点&#xff0c;不知从什么时候开始&#xff0c;自动变速箱档位数量变多成为了深受汽车品牌喜爱的突破点&#xff0c;渐渐的…

常用排序-基数排序,计数排序

基数排序 将整数每个位数分别比较&#xff0c;先找出最长位&#xff0c;针对每个位&#xff08;个位&#xff0c;十位…&#xff09;利用桶的思想&#xff0c;将每个位的元素个数统计&#xff0c;倒序读入temp[10]列表中&#xff0c; 时间复杂度O(d(nK)),k是10进制&#xff0c;…

Android之用netcfg命令获取手机虚拟网卡tun0的信息

1、在终端输入下面命令 adb shell adb netcfg 2、展示结果 3、使用总结 我们得到手机 tun0 地址为10.1.102.11 然后在vpn后台&#xff0c;我们先找到是哪个tun&#xff0c;我们可以使用ip route命令ip route show table2 这个允许结果就是 地址 哪个tun比如我们得到是tun2 然…

C# 基于事件的异步模式

点击蓝字 关注我们开工大吉EventBasedAsyncPattern 方法使用了基于事件的异步模式。这个模式定义了一个带有 “Async” 后缀的方法。示例代码再次使用了WebClient 类。对于同步方法DownloadString&#xff0c;WebClient类提供了一个异步变体方法 DownloadStringAsync。当请求完…

Tomcat 下 Memcached 集群与 Terracotta 集群比较

总结&#xff1a;Terracotta 集群配置要比Memcached 集群简单&#xff0c;但Terracotta 集群启动的速度要比Memcached 集群慢&#xff0c;性能Terracotta 集群要比Memcached 集群好。但性能都好不过weblogic单机的性能&#xff01;&#xff01; Terracotta 集群效果图如下&…