一个Java程序猿眼中的前后端分离以及Vue.js入门

发布时间：2019-04-30 06:50:24 所属栏目：建站来源：牧码小子

导读：前后端不分后端模板：Jsp、FreeMarker、Velocity 前端模板：Thymeleaf 前后端不分，Jsp 是一个很是典范写法，Jsp 将 HTML 和 Java 代码团结在一路，刚开始的时辰，确实进步了出产力，可是时刻久了，大伙就发明 Jsp 存在的题目了，对付后端工程师来说，可

副问题[/!--empirenews.page--]

前后端不分

后端模板：Jsp、FreeMarker、Velocity
前端模板：Thymeleaf

前后端不分，Jsp 是一个很是典范写法，Jsp 将 HTML 和 Java 代码团结在一路，刚开始的时辰，确实进步了出产力，可是时刻久了，大伙就发明 Jsp 存在的题目了，对付后端工程师来说，也许不太能干 css ，以是流程一样平常是这样前端计划页面-->后端把页面改革成 Jsp --> 后端发明题目 --> 页面给前端 --> 前端不会Jsp。这种方法服从低下。出格是在移动互联网鼓起后，公司的营业，一样平常除了 PC 端，尚有手机端、小措施等，凡是，一套靠山体系必要对应多个前端，此时就不行以继承行使前后端不分的开拓方法了。

一个Java措施猿眼中的前后端疏散以及Vue.js入门

在前后端不分的开拓方法中，一样平常来说，后端也许返回一个 ModelAndView ，渲染成 HTML 之后，赏识器虽然可以展示，可是对付小措施、移动端来说，并不能很好的展示 HTML(现实上移动端也支持HTML，只不外运行服从低下)。这种时辰，后端和前端数据交互，主流方案就是通过 JSON 来实现。

前后端疏散

前后端疏散后，后端不再写页面，只提供 JSON 数据接口(XML数据名目此刻用的较量少)，前端可以移动端、小措施、也可所以 PC 端，前端认真 JSON 的展示，页面跳转等都是通过前端来实现的。前端后疏散后，前端今朝有三大主流框架：

作者尤雨溪，Vue自己小心了 Angular，今朝GitHubstar数最多，提议后端工程师行使这个，最大的缘故起因是Vue上手轻易，可以快速学会，对付后端工程师来说，能快速搭建页面办理题目即可，可是假如你是专业的前端工程师，我会保举你三个都去进修。就今朝海内前端框架行使环境来说，Vue 算是行使最多的。并且今朝来说，有大量 Vue 相干的周边产物，各类 UI 框架，开源项目，进修资料很是多。

React

Facebook 的产物。是一个用于构建用户界面的 js 库，React 机能较好，代码逻辑简朴。

Angular

AngularJS 是一款由 Google 维护的开源 JavaScript 库，用来帮忙单一页面应用措施运行。它的方针是透过 MVC 模式(MVC)成果加强基于赏识器的应用，使开拓和测试变得越发轻易。

Vue简介

Vue (读音 /vjuː/，相同于 view) 是一套用于构建用户界面的渐进式框架。与其余大型框架差异的是，Vue 被计划为可以自底向上逐层应用。Vue 的焦点库只存眷视图层，不只易于上手，还便于与第三方库或既有项目整合。另一方面，当与当代化的器材链以及各类支持类库团结行使时，Vue 也完全可以或许为伟大的单页应用提供驱动。

只存眷视图层
MVVM 框架

各人在行使 jQuery 进程中，掺杂了大量的 DOM 操纵，修改视图可能获取 value ，都必要 DOM 操纵，MVVM 是一种视图和数据模子双向绑定的框架，即数据产生变革，视图会随着变革，视图产生变革，数据模子也会随着变革，开拓者再也不必要操纵 DOM 节点。

如下一个简朴的九九乘法表让各人感觉一下 MVVM ：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</head> 
<body> 
<div id="app"> 
 <input type="text" v-model="num"> 
 <table border="1"> 
 <tr v-for="i in parseInt(num)"> 
 <td v-for="j in i">{{j}}*{{i}}={{i*j}}</td> 
 </tr> 
 </table> 
</div> 
<script> 
 var app = new Vue({ 
 el: "#app", 
 data: { 
 num:9 
 } 
 }); 
</script> 
</body> 
</html>

用户修改输入框中的数据，引起变量的变革，进而实现九九乘法表的更新。

SPA

SPA(single page web application)，单页面应用，是一种收集应用措施或网站的模子，它通过动态重写当前页面来与用户交互，而非传统的从处事器从头加载整个新页面。这种要领停止了页面之间切换打断用户体验，使应用措施更像一个桌面应用措施。在单页应用中，全部须要的代码( HTML、JavaScript 和 CSS )都通过单个页面的加载而检索，可能按照必要(凡是是为相应用户操纵)动态装载恰当的资源并添加到页面。SPA 有一个弱点，由于 SPA 应用陈设后只有1个页面，并且这个页面只是一堆 js 、css 引用，没有其他有用代价，因此，SPA 应用不易被搜刮引擎收录，以是，一样平常来说，SPA 得当做大型企业靠山打点体系。

Vue 行使方法大抵上可以分为两大类：

直接将Vue在页面中引入，不做 SPA 应用
SPA应用

根基情形搭建

起首必要安装两个对象：

NodeJS
npm

直接搜刮下载 NodeJS 即可，安装乐成之后，npm 也就有了。安装乐成之后，可以在 cmd 呼吁哈验证是否安装乐成：

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/5

尾页

6个值得珍藏的搜索引擎	网站优化核心减少SEO污
网站seo优化三个基础知	什么时候宣布文章收录