Openresty front-end development advanced one http back-end

#### For front-end development, in most cases, you need to deal with the back-end, and the most common way is to communicate through http requests.
In openresty, there are many ways to integrate and communicate with the backend through http, each with its own advantages and can be used interchangeably according to the situation

## 1. Direct proxy

is the easiest and most familiar way to directly configure a reverse proxy. To the proxy, the usage of nginx is consistent. For

example , we have a back-end service that provides user-related interfaces, which are written in java and port 8080. For the sake of simplicity, I directly configure a server in openresty to simulate the java side, through a simple The case to illustrate the situation

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;
        }

    }

# This is just a mock backend
    server {
        listen 8080;
        server_name localhost;
        lua_code_cache off;
        location ~ /user/ (.+) {
            default_type text/html;
            content_by_lua_file lua/$1.lua;
        }
    }

}
```

There are two locations configured above, and all requests starting with /user are forwarded to the backend 8080 server, and the others are Static pages, read directly from the html directory, and then return, from here is the front-end development

For the sake of simplicity, assuming that the back-end provides a login interface, we can directly use lua to implement it here, check the username and password If it is admin, it returns success, otherwise it returns failure

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)" 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

This method is mainly used to send internal requests, that is, to request other locations in the current server. By default, the parameters of the current request will be taken over, or you can manually specify parameters. GET parameters are passed through args, and post parameters are passed through body.

For example :

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

GET call

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

POST call

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

Now we write a lua to call the background interface to log in, and then do a little processing of the request , to implement some additional logic, such as adding a from field

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)" 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) function local_login() { } }, 'json') alert(msg)
var msg = res.ret ? "Login successful" : "Login failed"

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 ? "Local login successful" : "Local login failed"
alert(msg)
}, 'json')
}

</script>
</body >
</html>
```

3. The third-party module [lua-resty-http](https://github.com/pintsized/lua-resty-http)

The difference between this method and the above is to call At the same time, it will not bring the request headers, cookies, and request parameters of the local request, but this also makes the request more pure, does not bring those unnecessary things, and reduces data transmission.

Finally local-login.lua becomes as
follows`` `
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) -- status code

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
```

At this point, you can basically do some front-end and back-end interactions through openresty, Next time, I will introduce how to use openresty template rendering and develop front-end with react.

[Sample code](https://github.com/362228416/openresty-web-dev) See demo7 section

Openresty front-end development advanced one http back-end

Guess you like