nginx渲染动态页面实现前后端分离
程序员文章站
2024-03-21 20:55:34
...
之前偶然听人提起使用nginx渲染页面而不是使用freemarker渲染，有些不理解nginx是如何渲染的，于是做了一个简单的尝试。以下是本次尝试的demo。
服务端
服务端就是一个正常的spring接口
@Controller
@RequestMapping("user")
@Slf4j
public class UserController {
@RequestMapping("userName")
@ResponseBody
public Map userNameAjax(ModelMap modelMap) {
Map<String, Object> map = new HashMap<>();
map.put("username", "张三");
return map;
}
}
前端页面
前端页面这里只是简单尝试，所以只是使用了html通过ajax加载动态数据，没有使用vue等框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/freemarker/user/userName",true);
xmlhttp.send();
</script>
<body>
<div id="myDiv">
</div>
</body>
</html>
nginx配置
通过增加a/b/c三个配置，实现前后端分离的形式请求页面加载数据，完成动态页面渲染
# a.后台服务ip、端口配置
upstream freemarkerapi {
server 192.168.3.111:8081 max_fails=3 fail_timeout=3s;
}
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# b.测试使用的页面，为了方便将页面放到了html目录下
location = /username.html {
root html;
index username.html;
}
# c.后台服务访问路径代理
location ~ ^/freemarker/(.*)$ {
proxy_pass http://freemarkerapi/$1;
}
}
总结
经过尝试，发现所谓的nginx渲染其实就是通过nginx实现前后端分离，而且对于前后端来说没有特别的变化，各自实现自己的功能即可，数据不是nginx渲染到页面，只是将请求与响应代理到另一方，渲染工作还是由前端实现。
上一篇： mysql面试题总结
下一篇： 安装pandas时我遇到的问题