前端复习05

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

前言

一、jQuery时代

1.JQuery

2.bootstrap：

3.easyui：

二、前后端分离

1.vue：

2.nodejs:

3. jwt

总结 :多记多练

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery时代

HTML：网页结构    
css：美化网页
JavaScript：给网页增加交互效果
盒子模型：标签之间的相互嵌套，通过内外边距控制盒子的所在位置，从而达到我们想要的布局效果
定位：绝对定位、相对定位    （脱离文档流）
偏移：

---

1.JQuery

简化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>

---

    2.bootstrap：

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

    3.easyui：

前端框架，快速搭建动态的管理界面，偏向后台开发
        layout：布局
        tree：左侧菜单
        tabs：选项卡
        datagrid：数据表格
        dialog：模态框
        form：对于表单进行ajax操作

---

二、前后端分离

1.vue：

渐进式框架ElementUI：基于vue的前台框架，里面封装了大量的vue组件

        生命周期/钩子函数：beforeCreate、created、beforeMount、mounted
          beforeUpdate、updated、beforedestory、destoryed

默认会执行的函数：

        beforeCreate、created、beforeMount、mounted

常用指令：

        v-model、v-on:事件名(@事件名)、v-bind:属性名（:属性）
        v-if/v-show/v-for

路由：做跳转，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})

---

2.nodejs:

前端运行环境，它就相当于后台中的tomcat
        npm:相当于后台中的maven，maven是用来构建项目，管理工程中的jar包
        管理前台的js依赖的
        Vuex：管理整个vue项目的变量的
        store.js 存储变量
        mutations.js 同步改变存储中的变量值
        actions.js 异步改变存储中的变量值
        Getter.js 获取存储中变量值

3. jwt

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

---

总结

提示：多记多练