Java项目 (SpringBoot+SpringCloud) 十次方:前端(一) 前端环境搭建

1 需求分析与技术架构

一.理解前后端分离开发

1. 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。
2. 以前老的方式是：
   1.产品经理/领导/客户提出需求
   2.UI做出设计图
   3.前端工程师做html页面
   4.后端工程师将html页面套成jsp页面（前后端强依赖，后端必须要等前端的html做好才能套jsp。如果html发生变更，就更痛了，开发效率低）
   5.集成出现问题
   6.前端返工
   7.后端返工
   8.二次集成
   9.集成成功
   10.交付
3. 新的方式是：
   1.产品经理/领导/客户提出需求
   2.UI做出设计图
   3.前后端约定接口&数据&参数
   4.前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）
   5.前后端集成
   6.前端页面调整
   7.集成成功
   8.交付

二.前端技术架构

1. 架构描述：以Node.js为核心的Vue.js前端技术生态架构
   

2 Node.js

一.什么是Node.js

1. 简单的说 Node.js 就是运行在服务端的 JavaScript。
2. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
3. Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

二.Node.js安装

1. 下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2. 选安装目录进行安装
3. 测试
   在命令提示符下输入命令
   
   会显示当前node的版本

三.快速入门

1. 控制台输出
   我们现在做个最简单的小例子，演示如何在控制台输出，创建文本文件demo1.js,代码内容
   
   我们在命令提示符下输入命令
   
2. 使用函数
   创建文本文件demo2.js
   
   命令提示符输入命令
   
   运行后看到输出结果为300
3. 模块化编程
   创建文本文件demo3_1.js
   
   创建文本文件demo3_2.js
   
   我们在命令提示符下输入命令
   
   结果为1000
4. 创建web服务器
   创建文本文件demo4.js
   
   http为node内置的web模块
   我们在命令提示符下输入命令
   
   服务启动后，我们打开浏览器，输入网址
   http://localhost:8888/
   即可看到网页输出结果Hello World
   Ctrl+c 终止运行
5. 理解服务端渲染
   我们创建demo5.js ，将上边的例子写成循环的形式
   
   我们在命令提示符下输入命令启动服务
   
   浏览器地址栏输入http://127.0.0.1:8888即可看到查询结果。
   我们右键“查看源代码”发现，并没有我们写的for循环语句，而是直接的10条Hello World，这就说明这个循环是在服务端完成的，而非浏览器（客户端）来完成。这与我们原来的JSP很是相似。
6. 接收参数
   创建demo6.js
   
   我们在命令提示符下输入命令
   
   在浏览器测试结果

3 包资源管理器NPM

一.什么是NPM

1. npm全称Node Package Manager，他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven .
2. 我们通过npm 可以很方便地下载js库，管理前端工程.
3. 最近版本的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

二.NPM命令

1. 初始化工程
   init命令是工程初始化命令。
   建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
   
   按照提示输入相关信息，如果是用默认值则直接回车即可。
   最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
2. 本地安装
   install命令用于安装某个模块，如果我们想安装express模块（node的web框架），输出命令如下：
   
   在该目录下已经出现了一个node_modules文件夹 和package-lock.json
   node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）
   package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。
   我们再打开package.json文件，发现刚才下载的express已经添加到依赖列表中了.
3. 全局安装
   刚才我们使用的是本地安装，会将js库安装在当前目录，而使用全局安装会将库安装到你的全局目录下。
   如果你不知道你的全局目录在哪里，执行命令
   
   我的全局目录在
   C:\Users\Administrator\AppData\Roaming\npm\node_modules
   比如我们全局安装jquery, 输入以下命令
   
4. 批量下载
   我们从网上下载某些代码，发现只有package.json,没有node_modules文件夹，这时我们需要通过命令重新下载这些js库.
   进入目录（package.json所在的目录）输入命令
   
   此时，npm会自动下载package.json中依赖的js库.
5. 淘宝NPM镜像
   有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
   输入命令，进行全局安装淘宝镜像。
   
   安装后，我们可以使用以下命令来查看cnpm的版本
   
   使用cnpm
   
6. 运行工程
   如果我们想运行某个工程，则使用run命令
   如果package.json中定义的脚本如下
   dev是开发阶段测试运行
   build是构建编译工程
   lint 是运行js代码检测
   我们现在来试一下运行dev
   
7. 编译工程
   我们接下来，测试一个代码的编译.编译后我们就可以将工程部署到nginx中啦~
   编译后的代码会放在dist文件夹中，首先我们先删除dist文件夹中的文件,进入命令提示符输入命令
   
   生成后我们会发现只有个静态页面，和一个static文件夹
   这种工程我们称之为单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

4 Webpack

一.什么是Webpack

1. Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
   
2. 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二.Webpack安装

1. 全局安装
   
2. 安装后查看版本号
   

三.快速入门

1. JS打包
   1. 创建src文件夹，创建bar.js
      
   2. src下创建logic.js
      
   3. src下创建main.js
      
   4. 创建配置文件webpack.config.js ，该文件与src处于同级目录
      
      以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
   5. 执行编译命令
      
      执行后查看bundle.js 会发现里面包含了上面两个js文件的内容
   6. 创建index.html ,引用bundle.js
      
      测试调用index.html，会发现有内容输出
2. CSS打包
   1. 安装style-loader和 css-loader
      Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用loader 进行转换。
      Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
      
   2. 修改webpack.config.js
      
   3. 在src文件夹创建css文件夹,css文件夹下创建css1
      
   4. 修改main.js ，引入css1.css
      
   5. 重新运行webpack
   6. 运行index.html看看背景是不是变成红色

5 开发工具VsCode

一.VsCode简介

1. VSCode（ Visual Studio Code）是微软出的一款轻量级代码编辑器 ，重要的是它在Windows, OS X 和Linux操作系统的桌面上均可运行。Visual Studio Code内置了对JavaScript, TypeScript和Node.js语言的支持，并且为其他语言如C++, C#, Python, PHP等提供了丰富的扩展库和运行时。

二.VsCode安装与配置

1. 安装
   官网下载 https://code.visualstudio.com/
2. 插件安装
   VsCode可以通过安装插件来使编辑器变的更加强大
   以下为前端开发工程师常用插件
   （1）HTML Snippets
   超级实用且初级的 H5代码片段以及提示
   （2）HTML CSS Support
   让 html 标签上写class 智能提示当前项目所支持的样式 新版已经支持scss文件检索
   （3）Debugger for Chrome
   让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试
   （4）vetur
   vue框架所需的插件 语法高亮、智能感知、Emmet等
   （5）VueHelper
   snippet代码片段

6 ES6

一.什么是ES6

1. 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：
   语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
   类型 – 布尔型、数字、字符串、对象等。
   原型和继承
   内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

二.Node.js中使用ES6

很多高级功能node是不支持的,就需要使用babel转换成ES5

1. babel转换配置,项目根目录添加.babelrc 文件
   
2. 安装es6转换模块
   
3. 全局安装命令行工具
   
4. 使用
   

三.语法新特性

1. 变量声明let
   我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。
   接下来ES6主角登场：
   我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。
2. 常量声明
   const 用于声明常量
   
3. 模板字符串
   第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
   
   第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
   
4. 函数默认参数
   ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
   看例子代码
   
5. 箭头函数
   ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
   箭头函数最直观的三个特点。
   1不需要function关键字来创建函数
   2省略return关键字
   3继承当前上下文的 this 关键字
   看下面代码（ES6）
   
   相当于ES5代码
   
6. 对象初始化简写
   ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如
   
   以上代码可以简写为
   
7. 解构
   数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
   ES5我们提取对象中的信息形式如下
   
   ES6的解构能让我们从对象或者数组里取出数据存为变量，例如
   
8. Spread Operator
   ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。 组装对象或者数组
   
9. import 和 export
   import导入模块、export导出模块
   lib.js
   
   demo9.js
   
   注意：node(v8.x)本身并不支持import关键字，所以我们需要使用babel的命令行工具来执行（配置详见6.2小节内容）