专栏首页孟君的编程札记一步步完成jsRender + Spring MVC + Nginx前后端分离示例

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

本篇博文的目标是使用前端页面渲染插件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/】,本文将不做讨论。

本文分享自微信公众号 - 孟君的编程札记(gh_0f0f5e0ae1de),作者:孟君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Thrift不同服务类型的使用探索

    Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发。它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP...

    孟君
  • 还在new对象吗?Builder构建对象了解一下?

    在平时开发中,我们经常需要去new一个对象。如果一个类的属性很多,就要设置较多的setXXX,这样实例化和赋值分开,较为分散。

    孟君
  • Lombok,简化代码的神器,你值得拥有

    本文给大家介绍一个Java代码简化的神器 -- Lombok。主要从如下几个方面进行展开:

    孟君
  • spring boot 登录注册 demo (二) -- 数据库访问

    通过data-jpa来访问数据库      <dependency> <groupId>org.springframework.boot...

    千往
  • struts2使用拦截器完成登陆显示用户信息操作和Struts2的国际化

      其实学习框架,就是为了可以很好的很快的完成我们的需求,而学习struts2只是为了替代之前用的servlet这一层,框架使开发更加简单,所以作为一个小菜鸟,...

    别先生
  • SpringBoot2.0 基础案例(09):集成JPA持久层框架,简化数据库操作

    JPA(Java Persistence API)意即Java持久化API,是Sun官方在JDK5.0后提出的Java持久化规范。主要是为了简化持久层开发以及整...

    知了一笑
  • 项目案例模板之登录注册的实现

    ********************************************************************************...

    泰斗贤若如
  • 把玩爬虫框架Gecco

    如果你现在接到一个任务,获取某某行业下的分类。 作为一个非该领域专家,没有深厚的运营经验功底,要提供一套摆的上台面且让人信服的行业分类,恐怕不那么简单。 找不到...

    JackieZheng
  • 快速学习-Spring 中的 JdbcTemplate

    除了默认构造函数之外,都需要提供一个数据源。既然有set方法,依据我们之前学过的依赖注入,我们可以在配置文件中配置这些对象。

    cwl_java
  • java之hibernate之crud

    Vincent-yuan

扫码关注云+社区

领取腾讯云代金券