nginx + vue.js + spring 实现前后端分离

原创 vue.js spring nginx

前言

nginx 是一个高性能的 HTTP 和反向代理服务器，常用于分布式服务器管理。

它常用于做负载均衡(通过调用多台服务器达到此目的)

静态资源输出更快，可以对资源实现 gzip 压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因)

适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生，跨域可导致 csrf 攻击，这是本文用它的第二个原因)

占用内存少，秒启，能快速切换结点，防止宕机
es6 是 ECMAScript 的第六个版本，如果想要学好 vue.js 等 js 框架，这是必须要学会的一门语言，推荐学习地址如下: http://es6.ruanyifeng.com/
vue.js 是一款前端模板渲染引擎，类似于后端的 jsp，beetl 等模板引擎。当然结合 node 环境也可作为后端渲染用(官网已支持)。

说了上述几点，让我们来回答几个为什么？

实现前后端分离的好处是什么？主要应用场景在哪？
为什么有了后端模板引擎，为什么还要用前端的模板引擎？他们的优势和劣势？
实现前后端分离需要怎么改？

思考的回答：

首先是发展的眼光看问题，以前的项目大多呈现的是 PC 端项目，且场景简单，固定，请求大多是有状态的，而现在我们常常是移动端项目较多，同一款 app 大多是原生和内嵌页面相结合的方式，并且现在的项目场景更多元化，这导致一个功能模块很可能是好几个项目的请求共同作用的结果。
如果还按照以前的做法，第一个问题是我只能用 jsonp 去解决调多个跨域请求的问题，实现起来代码太过冗余。对于同一功能，很有可能 app 端和 PC 端就有两套不同的写法。并且带宽是个很贵的东西，客户端总是去服务器端一起静态资源的请求，会导致速度慢。动静分离可以实现静态资源和动态资源分开获取，并且服务器也能动静分离，有效解决带宽问题。
后端开发人员对于 css、js 的掌握可能不如前端熟练，比如利用 jsp 填充数据时，往往需要后端开发人员去调样式和写 js，这样会造成开发效率低下。
采用前端模板渲染可以释放服务器端的一部分压力，并且前端模板引擎支持的功能比后端丰富，比如用 vue 可以自定义组件，校验方式，深入式渐变等，这比后端模板引擎功能要更加丰富。

解决方案

我们的解决方案如下

传统的交互方式:

客户端发起请求，服务器端响应，经过一系列操作生成动态数据，将动态数据交由后端模板引擎，经过渲染后，传递给前端。
改良的交互方式

客户端发起请求，nginx 拦截，若是静态资源，则交由文件服务器直接压缩后发送至前端。若是动态资源请求，则经过动态资源服务器生成动态数据，以 json 格式返回至前端，交由 vue.js 渲染处理后进行展示。

vue.js 2.x 版的重点功能讲解

1.怎样和 html 结构进行绑定，怎样和样式进行动态绑定，常用的监听事件有哪些。

基本的渲染：

//html结构
<div id="app">
 {{ message }}
</div>

//js模块
var app = new Vue({
//会检索绑定的id 如果是class 则是.class即可绑定
   el: '#app',
   data: {
    message: 'Hello Vue!'
   }
})

class 与 style 绑定

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<div class="static active"></div>

常用的绑定事件：

//输出html
<div v-html="rawHtml"></div>
//绑定id或class
<div v-bind:id="dynamicId"></div>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

2.和服务器怎样进行通讯

在这里推荐大家使用 axios 进行和服务端的请求，然后将请求后的数据交由 vue.js 处理。

关于 axios 的使用例子链接地址：https://www.daimafans.com/article/d16547993075318784-p1-o1.html

3.常见的流程控制语句数据校验自定义指令

//if 语句
<h1 v-if="ok">Yes</h1>
 
//for 循环语句
<ul id="example-1">
<li v-for="item in items">
 {{ item.message }}
</li>
</ul>

数据校验及其表单控件绑定链接地址(https://cn.vuejs.org/v2/guide/forms.html)

以下四点参考官网 api，不再做介绍了

4.深入响应式怎样实现(在第一次页面初始化填值后，如果发生改变要修改怎么做)?

5.自定义组件应用及其使用Render创建Html结构

6.路由的使用

7.常见的修饰符

实战举例

1.nginx 配置静态资源

server {
   listen    4000;
   server_name www.test.com;
   charset utf-8;
   index /static/index.html;//配置首页
 
   //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
   location = /sellingJson.html {
     proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
   }
 
   #配置Nginx动静分离，定义的静态页面直接从static读取。
   location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
   { 
   root /static/;
   #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以   节省带宽和缓解服务器的压力
   expires   7d; 
   }  
}

2.后端请求返回 json 数据（以java为例）

@RequestMapping("/vueHelpSellingcar.html")
public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
  //若干操作后,返回json数据
  JSONObject resultJson = new JSONObject();
 
  resultJson.put("carbrandList", carbrandList);
  resultJson.put("provinceList", provinceList);
 
  //进行序列化,返回值前端
  try {
    byte[] json =resultJson.toString().getBytes("utf-8");
    response.setHeader("Content-type", "text/html;charset=UTF-8");
    response.getOutputStream().write(json);
  } catch (Exception e) {
    e.printStackTrace();
  }
 
}

3.前端调用 vue 示例

//html模块
<div v-if="carbrandList.length" class="char_contain">
<p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>
</div>
 
//js模块 页面加载后,自动去获取动态资源
let v={};
$(function() {
axios.get('http://test.csx365.com:4000/sellingJson.html')
  .then(function(data){
    //定义一个vue对象,方便模板渲染
    v =Object.assign(v, new Vue({
    el : '.char_contain', //绑定事件名
    data : {
       carbrandList : data.data.carbrandList, //数据流
     }
    })); 
   })
   .catch(function(err){
     console.log(err);
   });
});