当前位置 主页 > 服务器问题 > nginx问题汇总 > 最大化 缩小

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

    栏目:nginx问题汇总 时间:2019-03-15 16:24

    这篇文章主要介绍了nginx+vue.js实现前后端分离的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    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>