文档章节

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

王孟君
 王孟君
发布于 2017/08/09 21:28
字数 1111
阅读 476
收藏 3

本篇博文的目标是使用前端页面渲染插件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()
	 */
	@Override
	public 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 {

	@Override
	public 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 {

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

配置静态页面

指定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 {

	@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/】,本文将不做讨论~

代码下载

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

© 著作权归作者所有

王孟君

王孟君

粉丝 227
博文 94
码字总数 221044
作品 0
杭州
高级程序员
私信 提问
nginx redirect问题

本人nginx初学者,现在遇到问题,求大神解答。谢谢! 现在自己做的一个demo,希望把前端和后端分离,所以用nginx做转发,所有静态文件都放在D:\workspace\app目录下,后端服务器用的是tomca...

Jason.Xie
2016/01/12
1K
2
一步步开发 Spring MVC 应用

Spring MVC 框架 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,可以选择是使用内置的 Spring Web 框架还是 Struts 这样的 Web 框架。通过策略接口...

justjavac
2013/02/23
822
1
[CentOS 7专用] Spring MVC/Maven 部署、入门与示例(纯菜鸟专用,一气呵成)

[CentOS 7专用] Spring MVC/Maven 部署、入门与示例(纯菜鸟专用,一气呵成) 前言 针对Spring MVC和Maven的入门教程,网上有较多参考资料。这里重点分享一下在Linux系统上,进行安装、部署和...

暗夜在火星
2018/11/02
413
0
spring+springMVC+mybatis的整合 part6

登录注册 首先,我们webapp要实现用户登录,必须得能新建用户。所以先把注册用户放在前面。 预期功能:打开注册页面 填写注册信息 点击注册 显示注册后的提示信息 一个web注册页面 web页面能...

ben4
2017/07/18
0
0
Spring boot入门教程

1、Spring Boot简介 Spring Boot是用来简化Spring应用初始搭建以及开发过程的全新框架,被认为是Spring MVC的“接班人”。 简化配置,化繁为简。 备受关注,是下一代框架。 微服务的入门级微...

AKyS佐毅
2018/01/05
0
1

没有更多内容

加载失败,请刷新页面

加载更多

新建作业20191011121223

2.编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound,Sally shouted,"By the Great Pumpkin,what was that!" #include<stdio.h>int main(){printf("\a");......

电子197朱妍
27分钟前
3
0
家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
47分钟前
6
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
48分钟前
6
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
51分钟前
10
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
55分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部