javascript
一步步完成jsRender + Spring MVC + Nginx前后端分离示例
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
本篇博文的目標是使用前端頁面渲染插件jsRender做前后端分離，后端采用Spring MVC給出REST API，并結(jié)合Nginx完成配置。
結(jié)構(gòu)如下圖所示：
注：
前后端分離的做法很多，這里只是使用jsRender而已，本文不會討論為什么不使用vue等~
在一步一步完成如上目標之前，先來看看什么是jsRender~
什么是jsRender？
jsRender是基于Jquery的一個前端頁面渲染插件。可以做到前后端口分離，前端通過ajax請求后臺數(shù)據(jù)，后臺拿到響應(yīng)請求，返回Json格式的數(shù)據(jù)，然后前端通過 JsRender插件對json數(shù)據(jù)進行渲染達到前后端分離（后臺只管傳Json數(shù)據(jù)，前端Jsrender渲染數(shù)據(jù)）。
可以去官網(wǎng)獲取更多的信息【http://www.jsviews.com/】
前端頁面準備
- 創(chuàng)建一個靜態(tài)文件夾（本文中static-pages），用于存放HTML、css、js以及圖片等文件。
- 準備jquery以及jsrender的js庫
- 準備HTML文件，如demo文件夾下的index.html
其內(nèi)容如下：
<!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>從上述簡單示例中，可以看出，表格內(nèi)容是通過Ajax請求從后端獲取的，格式為JSON，本文的示例，后臺的REST API采用Spring MVC完成~
后端REST API準備
Spring MVC結(jié)構(gòu)
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
用戶服務(wù)接口 -- 用戶定義接口方法~
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
服務(wù)實現(xiàn)~
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完成~
配置靜態(tài)頁面
指定js、css、html以及圖片靜態(tài)文件都從靜態(tài)目錄中獲取~
#靜態(tài)資源 location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp)$ { root F:/static-pages/; # 站點根目錄index index.html index.htm;}配置配置后端規(guī)則
添加upstream以及proxy_pass
動靜規(guī)則配置后，配置文件如下圖所示：
upstream tomcat{server localhost:8082;}server {listen 19000; # 監(jiān)聽本機所有 ip 上的 80 端口server_name _; # 域名：www.example.com 這里 "_" 代表獲取匹配所有#靜態(tài)資源 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
顯示的內(nèi)容，正是我們REST API返回的內(nèi)容~ UserServiceImpl中的方法內(nèi)容如下~
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("爬山")));}}自此，一個簡單的前后端分離，小工程就結(jié)束了~
至于jsRender的詳細信息，有興趣的讀者可以參考【http://www.jsviews.com/】，本文將不做討論~
代碼下載
源碼下載==> 點擊~【源碼下載】
轉(zhuǎn)載于:https://my.oschina.net/wangmengjun/blog/1505516
總結(jié)
以上是生活随笔為你收集整理的一步步完成jsRender + Spring MVC + Nginx前后端分离示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 绝不是剧透！全角度解析EMC Unity
- 下一篇： ThinkPHP框架学习（二）