网站做支付宝花呗分期,建站行业前景,谷歌地图网站代码,鄂尔多斯建设招投标网站2019独角兽企业重金招聘Python工程师标准 做前端开发#xff0c;大多数情况下#xff0c;都需要跟后端打交道#xff0c;而最常见的方式则是通过http请求#xff0c;进行通信。 在openresty中#xff0c;通过http跟后端整合通信的方式又很多种#xff0c;各… 2019独角兽企业重金招聘Python工程师标准 做前端开发大多数情况下都需要跟后端打交道而最常见的方式则是通过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 cjsonlocal 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
headmeta charsetUTF-8titleLogin Page/title
/head
bodyUserName: input typetext idusername valueadminPassword: input typepassword idpassword valueadmina hrefjavascript:void(0) onclicklogin()Login/ascript src//cdn.bootcss.com/jquery/2.2.4/jquery.min.js/scriptscriptfunction 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
/html2、使用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 cjsonlocal 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] localngx.say(cjson.encode(ret))
elseprint(res.body)ngx.say({ret: false, from: local})
end index.html 也需要改一下多加一个按钮调用本地登陆接口 html
headmeta charsetUTF-8titleLogin Page/title
/head
bodyUserName: input typetext idusername valueadminPassword: input typepassword idpassword valueadmina hrefjavascript:void(0) onclicklogin()Login/aa hrefjavascript:void(0) onclicklocal_login()Local Login/ascript src//cdn.bootcss.com/jquery/2.2.4/jquery.min.js/scriptscriptfunction 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
/html3、第三方模块lua-resty-http 这种方式跟上面那种不同的地方是调用的时候不会带上本地请求的请求头、cookie、以及请求参数不过这也使得请求更纯粹不会带上那些没必要的东西减少数据传输 最后local-login.lua 变成如下 local req require req
local cjson require cjson
local http require resty.httplocal 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] localngx.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
