当前位置 主页 > 服务器问题 > 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>



下一篇:没有了
缩小 缩小 缩小 缩小
IIS7整站下载工具 IIS7批量查询排名 IIS7远程桌面连接工具 iis7-iis网站批量管理 iis7批量替换工具 IIS7服务器专用下载工具 IIS7日志分析工具 IIS7批量PING,服务器批量添加网卡IP小工具 IIS7远程同步备份工具
IIS7网站监控 站群批量SEO查询 批量获取排名域名 批量关键词排名查询 模拟各种蜘蛛 批量友情链接监测 批量检测死链 搜索引擎大全 批量查询外链
批量查询网站标题 批量查询KeyWords 批量查询描述 批量查询网站IP 批量百度收录查询 批量查询百度日收录 批量查询百度周收录 批量查询百度月收录 批量查询360总收录 批量查询360日收录 批量查询网站年龄 批量查询360PC权重 批量查询爱站移动权重 批量查询站长移动权重 批量查询360移动权重 批量查询神马权重 批量查询谷歌PR 批量查询搜狗PR 批量查询百度反链 批量查询爱站首页反链 批量查询爱站内页反链 批量查询百度快照 批量查询搜狗快照 批量icp备案查询 批量网站ip地址查询 批量查询导出链接 批量查询百度V认证 批量查询百度安全 批量查询站长PC权重 批量查询爱站PC权重 批量查询搜狗总收录 站长资源大全 IIS7-cms大全 IIS7站群大全 IIS7虚拟空间大全 IIS7服务器大全 IIS7-VPS大全 服务器代购 站群专用 美国站群服务器 香港站群服务器 特供站群vps 亚洲服务器 菲律宾HS 韩国首尔 香港PCCW 香港沙田电信 香港PowerLine 日本多机房 新加坡多机房 韩国大带宽 香港新世界 香港Pangnet 台湾 美国服务器 加州RS 美国vps母鸡租用 洛杉矶MC 洛杉矶C3 特价促销区 洛杉矶NS 洛杉矶Cera高防 洛杉矶HS高防 SK高防 洛杉矶WX 加州RH 芝加哥AT VPS云主机 香港沙田电信 韩国首尔 香港Pangnet 新加坡SG 香港PL 洛杉矶SK 抗攻击 洛杉矶C3 日本大阪 洛杉矶Cera 抗攻击 洛杉矶MC 纽约 SSD 抗攻击 大容量备份VPS 国庆大促 俄罗斯