nginx+vue.js实现前后端分离的示例代码


Posted in Javascript onFebruary 12, 2018

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

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

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

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

占用内存少,秒启,能快速切换结点,防止宕机

2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,这是必须要学会的一门语言,推荐学习地址如下:http://es6.ruanyifeng.com/

3.vue.js是一款前端模板渲染引擎,类似于后端的jsp,beetl等模板引擎.当然结合node环境也可作为后端渲染用.(官网已支持)

说了上述几点,让我们来回答几个为什么?
1.实现前后端分离的好处是什么?主要应用场景在哪?
2.为什么有了后端模板引擎,为什么还要用前端的模板引擎?他们的优势和劣势?
3.实现前后端分离需要怎么改?

长长的分割线思考后……………………………

1.首先是发展的眼光看问题,以前的项目大多呈现的是PC端项目,且场景简单,固定.请求大多是有状态的.而现在我们常常是移动端项目较多,同一款app大多是原生和内嵌页面相结合的方式.并且现在的项目场景更多元化,这导致一个功能模块很可能是好几个项目的请求共同作用的结果.

2.如果还按照以前的做法,第一个问题是我只能用jsonp去解决调多个跨域请求的问题,实现起来代码太过冗余。对于同一功能,很有可能app端和PC端就有两套不同的写法。并且带宽是个很贵的东西,客户端总是去服务器端一起静态资源的请求,会导致速度慢。动静分离可以实现静态资源和动态资源分开获取,并且服务器也能动静分离,有效解决带宽问题。

3.后端开发人员对于css,js的掌握可能不如前端熟练,比如利用jsp填充数据时,往往需要后端开发人员去调样式和写js,这样会造成开发效率低下。

4.采用前端模板渲染可以释放服务器端的一部分压力,并且前端模板引擎支持的功能比后端丰富.比如用vue可以自定义组件,校验方式,深入式渐变等,这比后端模板引擎功能要更加丰富.

4.我们的解决方案如下

1.传统的交互方式:

客户端发起请求,服务器端响应,经过一系列操作生成动态数据,将动态数据交由后端模板引擎,经过渲染后,传递给前端.

2.改良的交互方式

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

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

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

1.基本的渲染

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

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

2.class与style绑定

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

 data: {
     isActive: true,
     hasError: false
    }

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

3.常用的绑定事件

//输出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处理.

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.常见的修饰符

6.实战举例

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
ztree实现权限横向显示功能
May 20 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Vue+webpack项目基础配置教程
Feb 12 #Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 #Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
原生js实现省市区三级联动代码分享
Feb 12 #Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
js同源策略详解
2015/05/21 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Python中的Numpy入门教程
2014/04/26 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python编写登陆接口的方法
2017/07/10 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
促销活动策划方案
2014/01/12 职场文书
《春酒》教学反思
2016/02/22 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
js实现自动锁屏功能
2021/06/02 Javascript