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

最新推荐文章于 2023-01-17 14:12:26 发布

-外星人-

最新推荐文章于 2023-01-17 14:12:26 发布

阅读量219

点赞数

分类专栏： openresty 文章标签： nginx openresty lua 前端开发

openresty 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

#### 做前端开发，大多数情况下，都需要跟后端打交道，而最常见的方式则是通过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" then
res['ret'] = true
res['token'] = ngx.md5('admin/' .. tostring(ngx.time()))
else
res['ret'] = false
end

ngx.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)" οnclick="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 then
local ret = cjson.decode(res.body)
ret['from'] = 'local'
ngx.say(cjson.encode(ret))
else
print(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)" οnclick="login()">Login</a>
<a href="javascript:void(0)" οnclick="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](https://github.com/pintsized/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 then
local ret = cjson.decode(res.body)
ret['from'] = 'local'
ngx.say(cjson.encode(ret))
else
print(res.body)
ngx.say('{"ret": false, "from": "local"}')
end
```

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

[示例代码](https://github.com/362228416/openresty-web-dev) 参见demo7部分

-外星人-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
openresty 前端开发进阶一之http后端

#### 做前端开发，大多数情况下，都需要跟后端打交道，而最常见的方式则是通过http请求，进行通信。在openresty中，通过http跟后端整合通信的方式又很多种，各有各的好处，可以根据情况交叉使用## 1、直接proxy这种方式最简单，也是我们最熟悉的，直接配置一个反向代理，跟nginx的用法一致比如我们有一个后端服务，提供用户相关接口，是java写的，端口808...
复制链接

扫一扫

专栏目录