JAVA前端

简化js对网页的操作，是js库
       之前：document.getElementById("id");
       之后：$("#id");
       常用的：
           选择器：类、标签、id、*、子代 div table、层级 div>table、伪类 :checkbox
           html/text/each/append/siblings...
           ajax：url/data/datatype/success/async

<!-- 
					c table 能命中table，给table标签添加样式，不管中间隔了多少层级，只要里面有，那就能够选的中
					d > table 不能，只有儿子是对应的标签，才能够选的中
				-->
				<div class="c">
					<div class="d">
							<table border="" cellspacing="" cellpadding="">
								<tr><th>Header</th></tr>
								<tr><td>Data</td></tr>
							</table>
					</div>
				</div>

3.2jQuery 库中的 $() 是什么？

() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器

字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

3.3为什么要使用 jquery？

因为 jQuery 是轻量级的框架，大小不到 30kb, 它有强大的选择器，出色的 DOM 操作的封装，有可靠的事件处理机制(jQuery 在处理事件绑定的时候相当的可靠)，完善的 ajax(它的 ajax 封装的非常的好，不需要考虑复杂浏览器的兼容性和 XMLHttpRequest 对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery 的文档也非常的丰富。

3.4jquery 中的选择器和 css 中的选择器的区别

jQuery 选择器支持 CSS 里的选择器，jQuery 选择器可用来添加样式和添加相应的行为

CSS 中的选择器是只能添加相应的样式

4.bootstrap

前端框架，能够快速进行网页布局，偏向前台开发栅格布局-响应式

4.1为什么要使用 Bootstrap

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以 Bootstrap 被广泛应用。

4.2什么是 Bootstrap 网格系统（Grid System）

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

4.3Bootstrap 网格系统列与列之间的间隙宽度

间隙宽度为 30px（一个列的每边分别是 15px）。

二.前后端分离

1.vue

渐进式框架

1.1使用 Vue 的好处

vue 两大特点：

响应式编程
组件化

vue 的优势：

轻量级框架
简单易学
双向数据绑定
组件化
视图
数据和结构的分离
虚拟 DOM
运行速度快

1.2vue 几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

1.3.v-if 和 v-show 区别

v-if 按照条件是否渲染， v-show 是 display 的 block 或 none

1.4.vue 常用的修饰符？

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture:

事件侦听，事件发生的时候会调用

2.ElementUI：

基于vue的前台框架，里面封装了大量的vue组件

2.1生命周期/钩子函数：

beforeCreate
created
beforeMount
mounted beforeUpdate
updated
beforedestory
destoryed

2.3 默认会执行的函数：

beforeCreate、created、beforeMount、mounted

2.4 常用指令：
v-model、v-on:事件名(@事件名)、v-bind:属性名（:属性）
v-if/v-show/v-for

3. 路由：

做跳转，jsp是页面跳页面，vue是组件跳组件原理是HTML中的锚点

           vue中，定义锚点， <router-view></router-view>
                   定义跳转， <router-link to="/home">go to Home</router-link>
                   let routes=[{abortme:"/me"},{home:"/home"}]
                   进行挂载 new vue({router})

4.nodejs:

前端运行环境，它就相当于后台中的tomcat

5. npm:

相当于后台中的maven，maven是用来构建项目，管理工程中的jar包
管理前台的js依赖的

6.Vuex：

管理整个vue项目的变量的

           store.js 存储变量
           mutations.js 同步改变存储中的变量值
           actions.js 异步改变存储中的变量值
           Getter.js 获取存储中变量值

7. jwt

           关于token令牌的解决方案
           之前：数据是存储在session中
           之后：前后端分离，用户数据存储在session中没有意义，前后端分离
           是跨服务器的；jwt通过request请求头，响应头的方式，管理数据

为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？

优点：

前端专门负责前端页面和特效的编写，后端专门负责后端业务逻辑的处理，前端追求的是页面美观、页面流畅、页面兼容等。
后端追求的是三高（高并发、高可用、高性能）让他们各自负责各自的领域，让专业的人负责处理专业的事情，提高开发效率

缺点：

1 、当接口发生改变的时候，前后端都需要改变
2、当发生异常的时候，前后端需要联调--联调是非常浪费时间的