nginx渲染动态页面实现前后端分离

最新推荐文章于 2024-04-28 12:54:35 发布

future_1024

最新推荐文章于 2024-04-28 12:54:35 发布

阅读量1.6k

点赞数 1

分类专栏： nginx 文章标签： nginx 前后端分离动态页面渲染

本文链接：https://blog.csdn.net/future_1024/article/details/103337712

版权

nginx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

	之前偶然听人提起使用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渲染到页面，只是将请求与响应代理到另一方，渲染工作还是由前端实现。

future_1024

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
nginx渲染动态页面实现前后端分离

之前偶然听人提起使用nginx渲染页面而不是使用freemarker渲染，有些不理解nginx是如何渲染的，于是做了一个简单的尝试。以下是本次尝试的demo。服务端服务端就是一个正常的spring接口@Controller@RequestMapping("user")@Slf4jpublic class UserController { @RequestMapping("...
复制链接

扫一扫