一步步完成jsRender + Spring MVC + Nginx前后端分离示例

2019独角兽企业重金招聘Python工程师标准>>>

本篇博文的目标是使用前端页面渲染插件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准备

Spring MVC结构

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()*/@Overridepublic String toString() {return "User [name=" + name + ", age=" + age + ", hobbies=" + hobbies + "]";}}

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();
}

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 {@Overridepublic List<User> findAllUsers() {return Arrays.asList(new User("Eric", 20, Arrays.asList("篮球", "跑步")),new User("Wang", 21, Arrays.asList("爬山")));}}

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 {@Autowiredprivate 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完成~

配置静态页面

指定js、css、html以及图片静态文件都从静态目录中获取~

  #静态资源    location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp)$ { root F:/static-pages/;    # 站点根目录index index.html index.htm;}

配置配置后端规则

添加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;                         }

自此，前端代码、后端REST API代码以及Nginx配置都完成了，接下来，就可以测试一下

测试一下

启动tomcat

将hello-springmvc工程，部署到tomcat/webapps/ROOT目录下~，如

启动~

启动Nginx

测试

浏览器输入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 {@Overridepublic List<User> findAllUsers() {return Arrays.asList(new User("Eric", 20, Arrays.asList("篮球", "跑步")),new User("Wang", 21, Arrays.asList("爬山")));}}

自此，一个简单的前后端分离，小工程就结束了~

至于jsRender的详细信息，有兴趣的读者可以参考【http://www.jsviews.com/】，本文将不做讨论~

代码下载

源码下载==> 点击~【源码下载】

转载于:https://my.oschina.net/wangmengjun/blog/1505516