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.基本的渲染
//js模块
var app = new Vue({
//会检索绑定的id 如果是class 则是.class即可绑定
el: '#app',data: {
message: 'Hello Vue!'
}
})2.class与style绑定
data: {
isActive: true,hasError: false
}
渲染结果为:<div class="static active">
3.常用的绑定事件
2.和服务器怎样进行通讯
在这里推荐大家使用axios进行和服务端的请求,然后将请求后的数据交由vue.js处理.
3.常见的流程控制语句 数据校验 自定义指令
//for 循环语句
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
数据校验及其表单控件绑定链接地址(https://cn.vuejs.org/v2/guide/forms.html)
以下四点参考官网api,不再做介绍了
4.深入响应式怎样实现(在第一次页面初始化填值后，如果发生改变要修改怎么做)?
5.自定义组件应用及其使用Render创建Html结构
6.路由的使用
7.常见的修饰符
6.实战举例
1.Nginx 配置静态资源
//这边可使用正则表达式,<a href="https://www.jb51.cc/tag/lanjie/" target="_blank" class="keywords">拦截</a>动态数据的请求,从而<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>跨域问题
location = /sellingJson.html {
proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
}
#配置<a href="https://www.jb51.cc/tag/Nginx/" target="_blank" class="keywords">Nginx</a>动静分离，定义的静态<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>直接从static读取。
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
{
root /static/;
#expires定义<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>浏览器缓存的时间为7天，如果静态<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>不常更新，可以设置更长，这样可以 节省带宽和缓解服务器的压力
expires 7d;
} }
2.后端请求返回json数据（以java为例）
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.g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>utputStream().write(json);
} catch (Exception e) {
e.<a href="https://www.jb51.cc/tag/printstacktrace/" target="_blank" class="keywords">printstacktrace</a>();
}}
3.前端调用vue示例
//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);
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
