关于java前端的相关技术讲解

目录

  ----------------------------jQuery时代----------------------------

 1.  HTML

 2. css

 3.JavaScript

 4.JQuery

 5. bootstrap

 6.easyui

  ----------------------------前后端分离-------------------------------

1. vue

2.ElementUI

  (1)生命周期/钩子函数：

  (2)默认会执行的函数：   

  (3)常用指令：

  (4)路由：

3. nodejs

4.npm

5.Vuex

6. jwt

---

----------------------------jQuery时代----------------------------

 1.  HTML

网页结构    

 2. css

美化网页

 3.JavaScript

给网页增加交互效果

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

      

 4.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>

 5. bootstrap

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

 6.easyui

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

 ----------------------------前后端分离-------------------------------

1. vue

 渐进式框架

2.ElementUI

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

  (1)生命周期/钩子函数：

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

  (2)默认会执行的函数：   

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> 
                    定义跳转， <router-link to="/home">go to Home</router-link>
                    let routes=[{abortme:"/me"},{home:"/home"}]
                    进行挂载 new vue({router})

3. nodejs

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

4.npm

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

5.Vuex

管理整个vue项目的变量的

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

6. jwt

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