aiwokache
aiwokache

vue，狂神，狂神和飞哥，前端一直在抄袭后端

Vue.js (vuejs.org)

Bootstrap可视化布局系统 (bootcss.com)

MyBatis入门学习-KuangStudy-文章

一 前端体系

  1. 此课程的重点
    1. 前端的话，页面我不会再给大家多讲了。重点难就难在，这些框架怎么使用，比如说前端化工程。
  2. java全栈工程师：
    1. 后台开发：主打
    2. 前端：html、css、js、jquery、bootstrap、layui、vue、react......
    3. 运维：项目发布；服务器如何运行一个项目？
  3. 前端组成，3要素
    1. html：结构层
    2. css：表现层。如改颜色、加边框、定位......
      1. CSS预处理器
        1. 业务：css不是编程语言，而是标记语言。语法不够强大，没有变量和合理的样式复用机制。
        2. 需求：
          1. 解决上面的问题。
          2. 作用：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性和开发效率。
        3. 思想（路）：CSS 预处理器定义了一种新的语言，这种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件（即程序本身并不是css言语写的，但这个程序运行的结果，它会产生一个css文件，即用程序的方式去编。类似于java程序编译打包完成，会产生一个.jar包一样。），然后开发者就只要使用这种语言进行 CSS 的编码工作。
             转化成通俗易 懂的话来说就是“ 用一种专门的编程语言，进行 Web 页面样式设计，再通过（前端）编译器转化为正常的 CSS 文件，以供项目使用” 。
        4. 流（原）：如淘宝每年都会有年中618、双11、双12是吧，而这3个购物节使用的css样式肯定不一样是吧。那怎么办呢？每到一个购物节，阿里的那些开发人员，肯定不会直接把css写死在页面中，这样写死地改来改去会非常消耗人力和时间，很麻烦。那到底怎么办呢？他们会想一些办法，跟编程一样，写一个程序让程序自动输出css。每到一个购物节，就去改程序，自动输出新的css样式即可。动态输出css（如定时输出），这就是所谓的css预处理器。
        5. 常用的css预处理器有哪些：
          1. SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
          2. LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用 LESS。
          3. 总结：几乎现在专业的前端都在用LESS写，如果做为一个前端还在用css写，那你效率会很低。
    3. javascript：行为层
      1. Native：最早，是原生JS开发。
        1. 原生 JS 开发，也就是让我们按照 ECMAScript（ES） 标准的开发的。
        2. 目前的情况：最高版本是es9，最流行的是es6，但很多浏览器还停留在es5，而且对于大多数浏览器厂商的最高版本也只是部分支持es6。对于不支持es6的浏览器（低版本）来说怎么办呢？开发时可以使用es6规范去开发，但需要用webpack打包工具把es6的代码降级成为es5，如let转var。
      2. TypeScript微软的标准
        1. 业务：javascript的缺陷
        2. 需求：解决这些缺陷
        3. 流（原）： 很神奇，微软的TypeScript编写的程序，运行的结果是变成一堆javascript代码。和上面的less一样，你用less编写的程序，运行的结果是不是生成css了。
    4. 常用的javascript构架：
      1. jquery： 就是一个类库。
      2. Angular：mvvm
        1. 如何理解：“将后台的 MVC 模式搬到了前端并增加了模块化开发的念”？
          1. mvc的3要素分别是，m（模型）、v（视图）、c（控制器）。
          2. 原来的前端：只有一个v（视图），即html + css + js。后面ajax出现了，使用ajax（Axios）以后，可以与后台进行通信、交互。而视图的数据（data，即m（模型））都是我们后端给它渲染过去的。
          3. Angular前端：在前端实现了mvc架构（模式），称为mvvm，其中m（模型）、v（视图）、vm（view model，即数据双向绑定）。
      3. React：虚拟化dom
        1. 原来的dom操作：是通过js（如document.getElementByTag/getElementById等），对dom树进行CRUD，或者在获取dom对象以后对dom对象的文档、css进行一定的调整。
        2. 虚拟dom：最大的特点是它利用了内存，利用内存来缓存一些dom元素，并在内存中操作dom，有效地提高了前端的渲染率。 你们都听过，vuejs的“计算属性、计算属性缓存 vs 方法 ”这2个东西是吧。以前学计算属性的时候，老师是不是跟你们讲了虚拟dom。“计算属性“是vue的特色，是vue独有的。而“计算属性“这个特色是怎么来的？就是利用虚拟dom来的。
      4. Vue：mvvm + 虚拟化dom
        1. 渐进式：就是逐步实现新特性的意思，比如vuejs会慢慢去实现es6的规范、慢慢去实现模块化的规范、慢慢实现虚拟化dom、慢慢模块化、慢慢路由、慢慢状态管理等等。
        2. vue集成了Angular和React的优点，即说明了vue中也有mvvm、也有虚拟化dom。
        3. 后端学习它并不会觉得很难，因为它是模块化开发的 。
      5. Axios
        1. 前端的通信框架，只做通信（soc原则），相当于ajax、jquery ajax 。
    5. 前端流行的UI框架
      1. Ant-Design
      2. ElementUI： 主要特点是桌面端支持较多
      3. iview： 主要特点是移动端支持较多
      4. ice
      5. Bootstrap
      6. AmazeUI
    6. javascript构建工具
      1. babel： 一般更多地是用于编译TypeScript 。
      2. webpack： 模块打包工具，一般会用它来打包咱们的前端程序 。
    7. 总结：前端也在发展（css框架成百上千、javascript的框架也成面上千），但发展的很乱，但始终有一些是流行的、受到行业追捧的东西。
  4. 前端知识，6要素
    1. 逻辑
      1. 判断：判断一下这东西该不该展示
      2. 循环
    2. 事件
      1. 那我们刚才跟你说的那堆javascript代码（BOM、DOM操作），它是在干嘛？是不是叫做事件呀。事件的话那就非常多了，但总的来说就两类：浏览器事件（BOM）和标签事件（DOM）。BOM事件，说得难听一点，其实也就两个window事件、document（文档）事件。DOM事件常见的：增、删、遍历、修改节点元素内容。
      2. 那么前端所说的事件，有没有框架来做呀？有呀，比如jquery（库）封装了大量的事件、vuejs、React......
    3. 视图：应该怎么画才好看
      1. 前端所说的视图视图说白了就是：第1点：给用户看；第2点：刷新后台，就是做这两件事情而已。
      2. 前端所说的视图由谁来做？html、cs、js呀。
      3. 其实前端最难的是css，一个像素都不能错，不然不好看。
      4. 基于html、css衍生出很多我们熟知的前端视图框架：bootstrap、layui、Vue-Ui即vue相关的视图组件框架库（如飞冰ice.work、Element-Ui）......
    4. 网络通信
      1. xhr：原生javascript
      2. ajax：jquery封装
      3. axios框架：vuejs
    5. 页面跳转：
      1. 路由（转发）：vue自己开发的组件：vue-router，来控制页面跳转的。
    6. 状态管理：
      1. 状态管理：就是vue会把所有的东西统一管理，这就是vuex来做的。
  5. Vue概述
    1. 前端3大框架：vue、AngularJS、React.js。
    2. vue是一个渐进式的前端框架。
    3. Vue 的核心库只关注视图层，这句话什么意思？其中视图层，就是html、css、js做的东西吧。而网络通信，vue用管吗？不用。使用的是axios框架，去管网络通信的部分。页面跳转，vue用得着管吗？也不用。使用的是vuejs自己开发的组件vue-router，去管页面跳转的部分。状态管理，vue用得着管吗？那也不用。使用的是，vuex来做的。也就是说vue只关注视图层的意思是，vue只跟上面的这3个（html、css、js）打交道。
         Vue只关注视图层，并遵守一个原则，叫做soc原则（Separation of concerns，关注点分离原则，关注点分离 - 中文维基百科【维基百科中文版网站】 (cljtscd.com)）。也就是说，它会把它的关注点分得特别散，vue只管视图层。
  6. webpack
    1. 原理：最高版本是es9，最流行的是es6，但很多浏览器还停留在es5，而且对于大多数浏览器厂商的最高版本也只是部分支持es6。对于不支持es6的浏览器（低版本）来说怎么办呢？开发时可以使用es6规范去开发，但需要用webpack打包工具把es6的代码降级成为es5，如let转var。webpack把es6的代码打包成浏览器能够认识的代码。
              我们后台有没有打包工具？有，maven就是我们后台的打包工具（构建、管理、打包工具），maven就是把java源代码打包成服务器能够认识的程序。

二 前端：三端统一开发

  1. 混合开发（Hybrid App）
    1. 主要目的是实现一套代码三端统一（PC、Android:.apk、IOS:.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
      1. 云打包：HBuild -> HBuildX ，DCloud出品；API Cloud
      2. 本地打包：Cordova（前身是 PhoneGap）
  2. 微信小程序
    1. 详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI。

三 后端技术：前端所需后端技术

        前端人员为了方便开发也需要掌握一定的后端技术，但我们 Java 后台人员知道后台知识体系极其庞大复 杂，所以为了方便前端人员开发后台应用，就出现了 NodeJS 这样的技术。
        NodeJS 的作者已经声称放弃 NodeJS （说是架构做的不好，再加上笨重的 node_modules ，可能让作者不爽了吧），开始开发全新架构的 Deno 。
        既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS 框架及项目管理工具如下：
  1. Express：NodeJS 框架
  2. Koa：Express 简化版
  3. NPM：项目综合管理工具，类似于 Maven。npm install（安装）其实就相当于java maven下载依赖包，且进行包管理。
  4. YARN：NPM 的替代方案，类似于 Maven 和 Gradle 的关系。

四 前后端分离的演变史

  1. 第1阶段，2005年之前（web 1.0）：后端为主的 MVC 时代，如springmvcvue，狂神，狂神和飞哥，前端一直在抄袭后端_第1张图片
    1. 流程
      1. 发起请求到前端控制器( DispatcherServlet )
      2. 前端控制器请求 HandlerMapping 查找 Handler ，可以根据 xml 配置、注解进行查找
      3. 处理器映射器 HandlerMapping 向前端控制器返回 Handler
      4. 前端控制器调用处理器适配器去执行 Handler
      5. 处理器适配器去执行 Handler
      6. Handler 执行完成给适配器返回 ModelAndView
      7. 处理器适配器向前端控制器返回 ModelAndView ， ModelAndView 是 SpringMVC 框架的 一个底层对象，包括 Model 和 View
      8. 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图( JSP )
      9. 视图解析器向前端控制器返回 View
      10. 前端控制器进行视图渲染，视图渲染将模型数据(在 ModelAndView 对象中)填充到 request 域
      11. 前端控制器向用户响应结果
      12. 注：图里面的所有东西，只有一个controller是开发者需要做的而已。
    2. 缺点
      1. 前后端职责纠缠不清
  2. 第2阶段：2005年（web 2.0）：基于 AJAX 带来的 SPA 时代
  3. 第3阶段：now现在：大前端时代，即前端为主的 MV* 时代
    1. MV*
      1. MVC（同步通信为主）：Model、View、Controller
      2. MVP（异步通信为主）：Model、View、Presenter
      3. MVVM（异步通信为主）：Model、View、ViewModel
    2. 1 ~ 1.8 ~ 3
    3. 分布式、微服务、大数据
  4. 第4阶段：NodeJS 带来的全栈时代
    1. 如nodejs前后端都可以做了。
    2. 但nodejs永远都不可能干掉java，因为js语言有它天生的弊端。

五 MVVM模式

1 MVVM模式的组成部分

vue，狂神，狂神和飞哥，前端一直在抄袭后端_第2张图片

  1.  从上图可知道MVVM的组成部分：
    1. V - View
      1. HTML
      2. CSS
      3. Template（如jsp、Thymeleaf，通过${ooo}（#{ooo}，即Template模板）获取数据）
    2. 双向数据绑定
      1. M层（数据）会通过VM层去跟V层（前端，即html、css、Template）进行双向数据绑定。
        1. 情况1：VM层会去监听M层（数据），如果M层（数据）发生了改变，那么V层也要发生变化。M是1，V显示为1；当M变成2，V显示为2。
        2. 情况2：VM层会去监听V层（前端，即html、css、Template），如果V层（前端，即html、css、Template）发生了改变，那么M层（数据）也要发生变化。
    3. VM - ViewModle
      1. JavaScript
      2. Runtime：即时运行。当M变成2，V及时显示为2。
      3. Compiler：即时编译。当M变成2，V及时显示为2。
    4. ajax & json
      1. ajax请求java业务逻辑（数据库），java业务逻辑（数据库）返回json数据。
    5. M - Model
      1. java业务逻辑层
        1. 数据库
  2. mvvm双向数据绑定的工作流程：vue，狂神，狂神和飞哥，前端一直在抄袭后端_第3张图片
    1. 第一步：v层（view）与vm层（viewModel）进行双向数据绑定（操作虚拟dom，页面显示快、流畅；区别于js使用document来操作真实的dom元素，页面显示卡顿。）
    2. 第二步：vm层通过ajax访问java后台（数据库），java后台（数据库）返回json数据。

六 第一个vue程序（vue是MVVM 模式的实现者，他的核心就是实现了 DOM 监听 与 数据绑定）

  1. 环境准备
    1. 第一步：创建vue工程（文件夹）
    2. 第二步：使用vscode的open project（目录）打开工程
    3. 第三步：官网下载vue.js
      1. 开发版本
        1. 包含完整的警告和调试模式： https://vuejs.org/js/vue.js
        2. 删除了警告，30.96KB min + gzip ： https://vuejs.org/js/vue.min.js
      2. CDN​​​​​​（在线，即在线的CDN）
        1. ​​​​​​ ：min.js是压缩版的，就一行代码。
        2. ​​​​​​：这个是完整版的代码。
    4. 注   意：如果是idea，需要安装vue插件
  2. 开发
    1. 第一步：新建demo1.html
    2. 第二步：导包（要用vue，就要导包），使用在线的cdn方式：​​​​​​
    3. 第三步：
      1. 第1步：创建vue对象（VM层，监听，即双向数据绑定）
        1. 第（1）步：el：绑定元素，相当于document.getElementById()
        2. 第（2）步：data对象：键值对（M层，即数据）
        3. 第（3）步：method方法：方法必须定义在method中。键值对。
    4. 第四步：html标签（V层）
      1. 第1步：使用{{}}（{{}}，即Template模板），获取data对象中的数据
    5. 第五步：浏览器
      1. 第1步：演示双向数据绑定

七 基础语法

  1. 指令：v- 开头
    1. v-bind：除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）
      1. 手动：我们在控制台操作对象属性，界面可以实时更新！
      2. 自动：我们还可以使用 v-bind 来绑定元素特性 !
      3. 案例： 
            
        
        
            
            
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
        
            
            
        我是标题
    2. v-if 系列
      1. v-if
      2. v-else-if
      3. v-else
      4. 案例 
        
 
        
    
    
        A
        
    
        B
        
    
        C
        
    
        who
    3. v-for 
      
    
      
        
    4. 
            {{ item.message }}
        
      5.

八 事件：v-on，我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript（方法、函数）。

九 双向数据绑定：Vue.js的精髓之处：v-model

  1. Vue.js的精髓之处：
    1. Vue.js是一个MVVM框架，即数据双向绑定。
      1. 即当数据发生变化的时候，视图也就发生变化。
      2. 而当视图发生变化的时候，数据也会跟着同步变化。
  2. 在表单中使用双向数据绑定
    1. 你可以用v-model指令在表单 、