前端知识总结

目录

前端

——————————jQuery时代——————————

HTML

css

JavaScript

JQuery

bootstrap

easyUI (api相当完善)

——————————前后端分离——————————

vue

ElementUI

---

前端

——————————jQuery时代——————————

HTML

网页结构

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

css

美化网页

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript

给网页增加交互效果

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

        ①盒子模型：标签之间的相互嵌套，通过内外边距控制盒子所在的位置，从而达到我们想要的布局效果。

        ②定位：绝对定位、相对定位 （脱离文档流）

        ③偏移：

JQuery

        简化js对网页的操作，是js库

        之前：document.getElementById("id")；

        之后：$("#id")

        常用的选择器：

                类、标签、id、*(通配符)、子代 div table、层级选择器 div>table 、伪类：checkbox

                html/text/each/append/siblings...

                ajax(JQuery与后台交互)：url/data/datatype/success/async       默认是异步

                        c    table     能选中table，给table标签添加样式，不管中间隔了多少级，只要里面  有，那就能够被选中。

                        c > table     不能，只有子代是对应的标签，才能够被选中。

<div class="c">
    <div class="d">
        <table border="" cellspacing="" cellpadding="">
	        <tr><th>Header</th></tr>
	        <tr><td>Data</td></tr>
	    </table>
    </div>
</div>

bootstrap

前端框架，能够快速进行网页布局，偏向前台开发。

 栅格布局 - 响应式

easyUI (api相当完善)

前端框架，能快速搭建动态的管理界面，偏向后台开发。

        layout：布局

        tree：左侧菜单

        tabs：选项卡

        datagrid：数据表格

        dialog：模态框

        form：对于标段进行ajax操作

——————————前后端分离——————————

vue

渐进式框架

ElementUI

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

        1.生命周期/钩子函数<笔试题>：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforedestory、destoryed.

        2.默认会执行的函数 ：

 4个  beforeCreate、created、beforeMount、mounted.

        3.常用的指令：

v-model：绑定的指令、v-on：事件名（@事件名）、v-bind：属性名 (：属性）

v-if / v-show / v-for

        4.路由：

做跳转，jsp是页面跳页面，vue是组件跳组件

原理是HTML中的锚点

      vue中，定义锚点，<router-view></router-view> 

      定义跳转，<vue-route to=" " ></vue-route>

      let routes = [ { abortme:"me" },{home:"/home"} ]

      进行挂载  new vue （{router}）

        5.nodejs：

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

        6.npm：

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

         7.vuex：

管理整个vue项目的变量的

      store.js 存储变量

      mutations.js   同不改变存储中的变量值

      actions.js    异步改变存储中的变量值

      getter.js    获取存储中变量值

        8.jwt

关于token令牌的解决方案

       之前：数据是存储再session中

       之后：前后端分离，用户数据存储再session中没有意义，前后端分离是跨服务器的；jwt通过request请求头，响应头的方式，管理数据。