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控制css中的float的代码
Aug 16 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
js+cavans实现图片滑块验证
Sep 29 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
一个查看session内容的函数
2006/10/09 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
医学生实习自荐信
2013/10/01 职场文书
庆祝儿童节标语
2014/10/09 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
导游词300字
2015/02/13 职场文书
员工家属慰问信
2015/03/24 职场文书
初婚初育证明范本
2015/06/18 职场文书
《山中访友》教学反思
2016/02/24 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
python小型的音频操作库mp3Play
2022/04/24 Python