欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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渲染到页面,只是将请求与响应代理到另一方,渲染工作还是由前端实现。