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
jquery下载文件请求
⼀.什么是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版本:
2. 选安装⽬录进⾏安装
z型钢镀锌钢卷3. 测试
在命令提⽰符下输⼊命令
会显⽰当前node的版本
三.快速⼊门
1. 控制台输出
我们现在做个最简单的⼩例⼦，演⽰如何在控制台输出，创建⽂本⽂件demo1.js，代码内容
div居中左对齐
我们在命令提⽰符下输⼊命令
2. 使⽤函数
创建⽂本⽂件demo2.js
命令提⽰符输⼊命令
运⾏后看到输出结果为300
3. 模块化编程
创建⽂本⽂件demo3_1.js
创建⽂本⽂件demo3_2.js
我们在命令提⽰符下输⼊命令
结果为1000
4. 创建web服务器
创建⽂本⽂件demo4.js
http为node内置的web模块
我们在命令提⽰符下输⼊命令
服务启动后，我们打开浏览器，输⼊⽹址
localhost:8888/
即可看到⽹页输出结果Hello World
Ctrl+c 终⽌运⾏
5. 理解服务端渲染
我们创建demo5.js ，将上边的例⼦写成循环的形式
我们在命令提⽰符下输⼊命令启动服务
浏览器地址栏输⼊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的l
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. 运⾏⼯程innodb
如果我们想运⾏某个⼯程，则使⽤run命令
如果package.json中定义的脚本如下
dev是开发阶段测试运⾏
html文件怎么制作
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. 创建配置⽂件fig.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. 修改fig.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。