一步步完成jsRender + Spring MVC + Nginx前后端分离示例
- 2019 年 10 月 6 日
- 筆記
本篇博文的目标是使用前端页面渲染插件jsRender做前后端分离,后端采用Spring MVC给出REST API,并结合Nginx完成配置。
结构如下图所示:

注: 前后端分离的做法很多,这里只是使用jsRender而已,本文不会讨论为什么不使用vue等。
在一步一步完成如上目标之前,先来看看什么是jsRender。
一、什么是jsRender?
jsRender是基于Jquery的一个前端页面渲染插件。可以做到前后端口分离,前端通过ajax请求后台数据,后台拿到响应请求,返回Json格式的数据,然后前端通过 JsRender插件对json数据进行渲染达到前后端分离(后台只管传Json数据,前端Jsrender渲染数据)。 可以去官网获取更多的信息【http://www.jsviews.com/】
二、前端页面准备
- 创建一个静态文件夹(本文中static-pages),用于存放HTML、css、js以及图片等文件。

- 准备jquery以及jsrender的js库

- 准备HTML文件,如demo文件夹下的index.html。

其内容如下:
<!DOCTYPE html> <!-- To run the current sample code in your own environment, copy this to an html page. --> <html> <head> <script src="../js/jquery-1.12.4.min.js"></script> <script src="../js/jsviews.js"></script> </head> <meta charset="utf-8"/> <body> <div id="result"></div> <table> <thead><tr><th>名字</th><th>愛好</th></tr></thead> <tbody id="userListTable"></tbody> </table> <script id="usersTemplate" type="text/x-jsrender"> <tr> <td>{{>name}}</td> <td> {{props hobbies}} <div> <b>{{>key}}</b>: {{>prop}} </div> {{/props}} </td> </tr> </script> <script type="text/javascript"> $.ajax({ type: "POST", url: "../user/list", dataType: "json", success: function (data) { $("#userListTable").html( $("#usersTemplate").render(data) ); } }); </script> </body> </html>
从上述简单示例中,可以看出,表格内容是通过Ajax请求从后端获取的,格式为JSON,本文的示例,后台的REST API采用Spring MVC完成。
三、后端REST API准备
3.1 Spring MVC结构

3.2 User.java
User用户类,包含名字、年龄和爱好的属性。
package com.xxx.tutorial.demo.model; import java.io.Serializable; import java.util.List; /** * * @author wangmengjun * */ public class User implements Serializable { private static final long serialVersionUID = -8725858518508034119L; private String name; private int age; private List<String> hobbies; public User() { super(); } public User(String name, int age, List<String> hobbies) { super(); this.name = name; this.age = age; this.hobbies = hobbies; } /** * @return the name */ public String getName() { return name; } /** * @param name * the name to set */ public void setName(String name) { this.name = name; } /** * @return the age */ public int getAge() { return age; } /** * @param age * the age to set */ public void setAge(int age) { this.age = age; } /** * @return the hobbies */ public List<String> getHobbies() { return hobbies; } /** * @param hobbies * the hobbies to set */ public void setHobbies(List<String> hobbies) { this.hobbies = hobbies; } /* * (non-Javadoc) * * @see java.lang.Object#toString() */ @Override public String toString() { return "User [name=" + name + ", age=" + age + ", hobbies=" + hobbies + "]"; } }
3.3 UserService.java
用户服务接口 — 用户定义接口方法。
package com.xxx.tutorial.demo.service; import java.util.List; import com.xxx.tutorial.demo.model.User; /** * * @author wangmengjun * */ public interface UserService { List<User> findAllUsers(); }
3.4 UserServiceImpl.java
用户服务类实现如下:
package com.xxx.tutorial.demo.service.impl; import java.util.Arrays; import java.util.List; import org.springframework.stereotype.Service; import com.xxx.tutorial.demo.model.User; import com.xxx.tutorial.demo.service.UserService; @Service public class UserServiceImpl implements UserService { @Override public List<User> findAllUsers() { return Arrays.asList(new User("Eric", 20, Arrays.asList("篮球", "跑步")), new User("Wang", 21, Arrays.asList("爬山"))); } }
3.5 UserController.java
用户控制器类如下:
package com.xxx.tutorial.demo.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.xxx.tutorial.demo.model.User; import com.xxx.tutorial.demo.service.UserService; @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @RequestMapping("/list") public ResponseEntity<List<User>> findAllUsers() { List<User> users = userService.findAllUsers(); return new ResponseEntity<List<User>>(users, HttpStatus.OK); } }
四、Nginx动静分离配置
本文使用的Nginx版本为1.11.7

配置动静分离,可以通过修改conf目录下的nginx.conf完成。

4.1 配置静态页面
指定js、css、html以及图片静态文件都从静态目录中获取。

#静态资源 location ~ .*.(js|css|htm|html|gif|jpg|jpeg|png|bmp)$ { root F:/static-pages/; # 站点根目录 index index.html index.htm; }
4.2 配置配置后端规则
添加upstream以及proxy_pass

动静规则配置后,配置文件如下图所示:
upstream tomcat{ server localhost:8082; } server { listen 19000; # 监听本机所有 ip 上的 80 端口 server_name _; # 域名:www.example.com 这里 "_" 代表获取匹配所有 #静态资源 location ~ .*.(js|css|htm|html|gif|jpg|jpeg|png|bmp)$ { root F:/static-pages/; # 站点根目录 index index.html index.htm; } # 反向代理 location / { proxy_pass http://tomcat; }
自此,前端代码、后端RESTAPI代码以及Nginx配置都完成了,接下来,就可以测试一下。
五、测试一下
5.1 启动tomcat
将hello-springmvc工程,部署到tomcat/webapps/ROOT目录下, 如

启动:

5.2 启动Nginx

5.3 测试
浏览器输入http://localhost:19000/demo/index.html

显示的内容,正是我们REST API返回的内容。UserServiceImpl中的方法内容如下:
package com.xxx.tutorial.demo.service.impl; import java.util.Arrays; import java.util.List; import org.springframework.stereotype.Service; import com.xxx.tutorial.demo.model.User; import com.xxx.tutorial.demo.service.UserService; @Service public class UserServiceImpl implements UserService { @Override public List<User> findAllUsers() { return Arrays.asList(new User("Eric", 20, Arrays.asList("篮球", "跑步")), new User("Wang", 21, Arrays.asList("爬山"))); } }
自此,一个简单的前后端分离,小工程就结束了。至于jsRender的详细信息,有兴趣的读者可以参考【http://www.jsviews.com/】,本文将不做讨论。