环境搭建

======================== Angular2.x以上开发环境搭建 =====================
1、安装nodejs
需要下载的文件路径：https://nodejs.org/en/download/
验证：命令行输入node -v
2、nmp（nodejs项目包管理工具）安装及验证
新版的NodeJS已经集成npm，无需安装.
验证：命令行输入npm -v
3、配置npm全局路径存放位置及cache的路径
在nodejs主目录D:\DevelopTools\nodejs下新建“node_global”和"node_cache"两个文件夹。
cmd输入：
npm config set prefix "D:\DevelopTools\nodejs\node_global"
npm config set cache "D:\DevelopTools\nodejs\node_cachee"
配置环境变量：
新建"NODE_PATH"：D:\DevelopTools\nodejs\node_global\node_modules
path中添加：D:\DevelopTools\nodejs\node_global
4、安装js编译器TypeScript和工具Angular CLI
在利用`npm install -g typescript`安装编译器时，由于网络限制问题，直接运行安装不成功。
解决办法：
修改hosts文件（C:\Windows\System32\drivers\etc\hosts），添加华为云镜像：
172.30.163.193 mirrors.huaweicloud.com
172.30.163.142 repo.huaweicloud.com
运行命令`npm config set registry https://mirrors.huaweicloud.com/repository/npm/` 和 `npm cache clean -f`
行命令`npm config set SASS_BINARY_SITE https://mirrors.huaweicloud.com/node-sass `，防止Windows环境下安装node-sass失败
运行命令`npm install -g typescript`以安装最新版本的Typescript编译器
运行命令`tsc -v`查看Typescript的版本以确认安装成功
运行命令`npm install -g @angular/cli`
运行命令`ng -v`/‘ng version‘查看Angular x.x是否安装成功
Angular CLI 是一个命令行界面工具，可用于初始化、开发、构建和维护Angular 应用
TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。
5、创建Demo
可以在nodejs下面创建一个工作空间：md D:\nodejs\workspace
然后进入工作空间：cd D:\nodejs\workspace
新建一个项目：ng new hello-world
然后在hello-world文件夹内启动服务：ng serve（相当于起了一个本地服务器来访问html文件，也可以直接双击index.html来跑）
Angular服务默认监听4200端口，打开浏览器，输入localhost:4200或者输入下列命令，直接打开默认浏览器：ng serve --open
如果出现成功的页面，说明所有配置都成功了
6、开发工具IDE VSCode安装
https://code.visualstudio.com/download#
创建和编译Angular项目仍然要通过ng命令来实现，但修改项目代码可以通过VSCode。（注意修改代码，改的是文件index.html）
eg：https://blog.csdn.net/luanxiyuan/article/details/81171618
7、项目打包
直接使用ng build打包出来的目录过大（先进入项目根目录中）
可使用：ng build --prod --build--optimizer --base-href ./
参考文献：
https://blog.csdn.net/guiyunfan94/article/details/70231249
http://3ms.huawei.com/km/blogs/details/5709977
https://blog.csdn.net/White_Idiot/article/details/77871471
https://segmentfault.com/a/1190000012333731（打包到部署）
https://blog.csdn.net/jiezhaoliao9206/article/details/77880735（打包过大）

也可以利用bower包管理工具来安装Angular：https://hairui219.gitbooks.io/learning_angular/content/zh/chapter03.html

======================== Angular1.x开发环境搭建 =====================
1、安装nodejs（运行在服务端的JavaScript）（相对简单，无需安装包管理工具npm来装cli）
2、安装vscode即可.
使用Angular1.x库时，无需安装，直接通过<script>引入在线库文件即可。
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
Angular CLI是针对Angular 2.x以上推出的命令管理工具，编译项目的打包。（ng version可以查看Angular CLI和Angular的版本）
运行文件，直接双击index.html即可。
注：通过npm或bower（bower是npm的升级版）包管理工具来安装Angular CLI（同时把Angular也安装到本地了），相当于本地安装，使用时无需<script>引入在线包。（这样代码类似于跑在后台）
当然也可以将库安装到本地。1.5.x版本的Angular1基本兼容Angular2以下的特性。

angular.min.js和angular.js的区别：
angular.min.js 是压缩版的angular.js,主要是删除了注释，去除了所有的回车和空格，也对函数变量等做了缩写处理，
在使用上没有任何区别，但是压缩版比较小，在正式环境中，越小的js文件，可以保证网站越快的被打开。

============== 卸载Angular CLI安装指定版本的AngularJS
参考：
https://blog.csdn.net/ItTvibe/article/details/79062838
Angular CLI介绍：https://angular.cn/cli

在线（或离线下载）angular1.x版本的各库文件引用地址可参考：https://code.angularjs.org/ （推荐离线下载再使用，点zip下）
github angular更新进度：https://github.com/angular/angular.js/releases?after=v1.2.31
Angular官网：https://angularjs.org/

============================== vscode使用技巧 ========================
vscode常用快捷方式：
ctrl+l：选中当前行
HOME：定位到行首
END：定位到行尾
alt + shift + F：格式化代码
F12或右键跳转：跳转到函数或变量的定义.
Ctrl+Shift+P：调出vscode的命令行输入栏
Alt + <—：返回上一个光标
Alt + —>：前进一个光标
vscode创建新项目：先在某位置新建一个文件夹，然后打开文件夹，之后即可新建文件了。

添加代码片：左下角齿轮->User Snippets->可以为当前项目创建snippets配置文件，也能为某种语言.
详见：
示例：https://blog.csdn.net/maokelong95/article/details/54379046
{
// Place your JsHello workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log(‘$1‘);",
// "$2"
// ],
// "description": "Log output to console"
// }

"html-controller":{ //"html-controller"表示代码片对象名,必须定义在最外{}内
"prefix": "test-hc", //代码片简写，可以是一个数组（每项均能表示该代码片）
"body": [ //body是字符串数组, 每行代码变为字符串, 代码中的字符串用‘‘。会自动格式化代码, 无需事先对齐
"<!-- just a test -->",
"<!DOCTYPE html>",
"<html>",
"<head>",
"<meta charset=‘utf-8‘>",
"<title>${1:html test}</title>", //${1:html test} 表示带有默认值的占位符（占位符间可按tab间切换到下一个）
"</head>",

"<body>",
"nihao $2", //$2表示占位符
"<script type=‘text/javascript‘ src=‘https://cdn.staticfile.org/angular.js/1.5.8/angular.min.js‘></script>",
"<script type=‘text/javascript‘>",
"$3",
"</script>",
"</body>",
"</html>"
],
"description": "my first snippets" //光标移到代码片选项上显示的文字
}
}

vscode推荐插件：
Live Server：实现跨域访问服务器，实时修改代码实时自动刷新界面
vscode-icons：给不同类型的文件和目录添加图标
Bracker Pair Colorizer：自动匹配括号并着色
Debugger for Chrome：Chrome浏览器调试工具
Chinese (Simplified) Language Pack for Visual Studio Code：中文包（一般安装重启即变中文界面，若无则在命令行输入"Configure Display Language”"选择zh-cn即可）
当安装多个文件主体插件时：F1->输入Preferences: File Icon Theme即可选择.
Local History：保存历史代码,以便恢复. 在.history目录中会保存历史代码.
比较两个文件的区别：在左侧目录栏右键需要比较的一个文件->选择以进行比较；然后再右键另一个需要比较的文件->与已选项目进行比较。

vscode控制台命令无效：右键vscode桌面快捷->属性->兼容性->以管理员身份运行此程序。再重启vscode即可.

vscode搜索目录过滤（eg：排除.history目录）：https://blog.csdn.net/ArisKing/article/details/84038430
注意：设置->文本编辑器->文件->在setting.json中编辑，排除搜索的目录应命名为"**/.history" 即加上**/

vscode根据文件名搜索文件位置：Ctrl+P

=============== Web开发的调试方法 =================
方法1：F12打开调试界面—>Source—>点击html行号旁就可以设断点。
方法2：在代码需要中断的位置，加行JS代码"debugger;"（功能同手动设断点）
方法3：借助console和alert来打印调试
选中某个标签后，可以在console界面中输入$($(0)).scope()查看当前DOM元素的作用域对象.（$(0)表示当前DOM元素，再加个$表示转成jQuery对象）
详见：Chorme调试工具的使用
https://www.jianshu.com/p/d01eb74bf06c
https://www.cnblogs.com/zourong/p/5020526.html

========================= Tomcat配置和使用 =======================
免安装版直接双击：bin/startup.bat和bin/shutdown.bat即可启动和关闭Tomcat服务；（关闭也可直接在cmd窗口ctrl+c关闭）
然后在浏览器输入127.0.0.1:8080即可看到tomcat的页面。
配置：
创建CATALINA_HOME环境变量，值为Tomcat根目录；（这个必须创建否则只加bin目录到path会报错说该变量创建不正确）
将tomcat解压的bin目录加入到path环境变量中。
然后直接在cmd输入startup即可启动服务（但bash中无效），关闭shutdown由于和系统shutdown命令重了。所以关闭时直接ctrl+c即可。

Http状态码详解：https://www.runoob.com/http/http-status-codes.html

========================= Chrome网页调试工具DevTools的使用 =======================
详见：https://www.cnblogs.com/soyxiaobi/p/9598761.html
https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn
常用快捷键：
F12：打开调试工具；
Ctrl+Shift+C：鼠标移到页面某个元素即可查看对应的css样式；再按Ctrl+Shift+C即关闭该功能；
Ctrl+L：清屏console；
详见：https://blog.csdn.net/crper/article/details/48098625

调试技巧：
当进入调试状态时，右上角所有功能图标均会激活；当切换到实际页面去操作时，右上角所有功能图标均会失活。
当设置断点后，若在页面操作时，触发了最先执行的代码断点，调试模式下会自动跳到该断点，此时即可查看相应变量的值（以发现问题）。
因此，若想调试某部分的代码块，只需要给该代码块打上断点，然后在页面操作能触发该代码段的动作即可。
有时直接看代码不清楚变量代表啥，也可以通过chrome调试器来查看当前变量的值，更直观
当有链式回调函数时，调试器会一个执行调试（若打断点了）
若报错（或异常，eg：返回错误码），则调试器会停止
当代码是一坨难以阅读时，可以点击下面的{}大括号按钮将代码转成可读格式
右上角调试功能图标：
右箭头：F9单步前进；
向上箭头：当进入到某函数的循环后，若想直接跳出该函数的调试，去继续执行下一个函数，可点击它
跨越箭头：直接跳过当前函数的所有断点
Paused in Dbugger：表示页面当前处于调试状态，不可操作；
Resume script exception：表示重启调试工具
Toggle device toolbar：位于左上角，可以切换PC/手机间调试。
Sources页面，右下角菜单可查看：（一般在该页面下调试）
Scope，即当前作用域变量的值，也可直接将鼠标移到变量上查看。（密码也能看到）
Beakpoints：显示所有断点（默认就已经激活了所有断点，若再点右上角"deactivate breakpoints"，则会使所有断点失活）；
在该区域右键菜单可清楚所有文件打的断点（Deactivate breakpoints只是临时禁用所有断点）
Callback：展示当前触发的回调函数（eg：鼠标键盘事件函数）
Watch：可以调试需要监视的变量（eg：全局localStorage等）
当想在console测试运行代码段时，由于在console上回车即会执行当前行代码，因此无法编辑并执行代码段。此时，可使用Sources页面的snippets，它可以创建一个脚本文件来执行（右下角有执行按钮）

Elements页面：
当鼠标移到代码某行时，页面会凸显该行对应的html元素；
当ctrl+shift+c后，鼠标移到html元素，elements页面会跳到该元素对应的代码段，可利用此来确定每个元素对应的div并与相应的代码对应.
Performance页面：可以用于测试网站的性能，通过录制网页操作来测试运行速度、CPU消耗等
Network：网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求
可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

当定位到html页面DOM元素时, 控制台通过$0可以获取到该DOM对象，并可通过调用该DOM对象的DOM API来获取属性等(可以认为$0即是js代码中的element对象)

审查或检查：查看到的是实时的经过渲染后的DOM文档(显示的是js处理后的真实页面)；
查看网页源代码：看到的是未经渲染的源代码。

快速清缓存并重新加载的方法：先F12，然后左上角右键重新加载的按钮，选择清空缓存并硬性重新加载。
打完断点直接刷新，就可再次进入调试.
在Elements页选中Dom元素后，可以直接在右侧的Styles修改css样式，直接看到效果（无需重新加载）
点击Elements页左边的手机按钮，然后在上方输入浏览器窗口大小可以查看不同大小的页面效果。
查看请求选中XHR，否则会将图片等资源请求也显示.
======================== Angular2.x以上开发环境搭建 =====================
1、安装nodejs
需要下载的文件路径：https://nodejs.org/en/download/
验证：命令行输入node -v
2、nmp（nodejs项目包管理工具）安装及验证
新版的NodeJS已经集成npm，无需安装.
验证：命令行输入npm -v
3、配置npm全局路径存放位置及cache的路径
在nodejs主目录D:\DevelopTools\nodejs下新建“node_global”和"node_cache"两个文件夹。
cmd输入：
npm config set prefix "D:\DevelopTools\nodejs\node_global"
npm config set cache "D:\DevelopTools\nodejs\node_cachee"
配置环境变量：
新建"NODE_PATH"：D:\DevelopTools\nodejs\node_global\node_modules
path中添加：D:\DevelopTools\nodejs\node_global
4、安装js编译器TypeScript和工具Angular CLI
在利用`npm install -g typescript`安装编译器时，由于网络限制问题，直接运行安装不成功。
解决办法：
修改hosts文件（C:\Windows\System32\drivers\etc\hosts），添加华为云镜像：
172.30.163.193 mirrors.huaweicloud.com
172.30.163.142 repo.huaweicloud.com
运行命令`npm config set registry https://mirrors.huaweicloud.com/repository/npm/` 和 `npm cache clean -f`
行命令`npm config set SASS_BINARY_SITE https://mirrors.huaweicloud.com/node-sass `，防止Windows环境下安装node-sass失败
运行命令`npm install -g typescript`以安装最新版本的Typescript编译器
运行命令`tsc -v`查看Typescript的版本以确认安装成功
运行命令`npm install -g @angular/cli`
运行命令`ng -v`/‘ng version‘查看Angular x.x是否安装成功
Angular CLI 是一个命令行界面工具，可用于初始化、开发、构建和维护Angular 应用
TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。
5、创建Demo
可以在nodejs下面创建一个工作空间：md D:\nodejs\workspace
然后进入工作空间：cd D:\nodejs\workspace
新建一个项目：ng new hello-world
然后在hello-world文件夹内启动服务：ng serve（相当于起了一个本地服务器来访问html文件，也可以直接双击index.html来跑）
Angular服务默认监听4200端口，打开浏览器，输入localhost:4200或者输入下列命令，直接打开默认浏览器：ng serve --open
如果出现成功的页面，说明所有配置都成功了
6、开发工具IDE VSCode安装
https://code.visualstudio.com/download#
创建和编译Angular项目仍然要通过ng命令来实现，但修改项目代码可以通过VSCode。（注意修改代码，改的是文件index.html）
eg：https://blog.csdn.net/luanxiyuan/article/details/81171618
7、项目打包
直接使用ng build打包出来的目录过大（先进入项目根目录中）
可使用：ng build --prod --build--optimizer --base-href ./
参考文献：
https://blog.csdn.net/guiyunfan94/article/details/70231249
http://3ms.huawei.com/km/blogs/details/5709977
https://blog.csdn.net/White_Idiot/article/details/77871471
https://segmentfault.com/a/1190000012333731（打包到部署）
https://blog.csdn.net/jiezhaoliao9206/article/details/77880735（打包过大）

也可以利用bower包管理工具来安装Angular：https://hairui219.gitbooks.io/learning_angular/content/zh/chapter03.html

======================== Angular1.x开发环境搭建 =====================
1、安装nodejs（运行在服务端的JavaScript）（相对简单，无需安装包管理工具npm来装cli）
2、安装vscode即可.
使用Angular1.x库时，无需安装，直接通过<script>引入在线库文件即可。
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
Angular CLI是针对Angular 2.x以上推出的命令管理工具，编译项目的打包。（ng version可以查看Angular CLI和Angular的版本）
运行文件，直接双击index.html即可。
注：通过npm或bower（bower是npm的升级版）包管理工具来安装Angular CLI（同时把Angular也安装到本地了），相当于本地安装，使用时无需<script>引入在线包。（这样代码类似于跑在后台）
当然也可以将库安装到本地。1.5.x版本的Angular1基本兼容Angular2以下的特性。

angular.min.js和angular.js的区别：
angular.min.js 是压缩版的angular.js,主要是删除了注释，去除了所有的回车和空格，也对函数变量等做了缩写处理，
在使用上没有任何区别，但是压缩版比较小，在正式环境中，越小的js文件，可以保证网站越快的被打开。

============== 卸载Angular CLI安装指定版本的AngularJS
参考：
https://blog.csdn.net/ItTvibe/article/details/79062838
Angular CLI介绍：https://angular.cn/cli

在线（或离线下载）angular1.x版本的各库文件引用地址可参考：https://code.angularjs.org/ （推荐离线下载再使用，点zip下）
github angular更新进度：https://github.com/angular/angular.js/releases?after=v1.2.31
Angular官网：https://angularjs.org/

============================== vscode使用技巧 ========================
vscode常用快捷方式：
ctrl+l：选中当前行
HOME：定位到行首
END：定位到行尾
alt + shift + F：格式化代码
F12或右键跳转：跳转到函数或变量的定义.
Ctrl+Shift+P：调出vscode的命令行输入栏
Alt + <—：返回上一个光标
Alt + —>：前进一个光标
vscode创建新项目：先在某位置新建一个文件夹，然后打开文件夹，之后即可新建文件了。

添加代码片：左下角齿轮->User Snippets->可以为当前项目创建snippets配置文件，也能为某种语言.
详见：
示例：https://blog.csdn.net/maokelong95/article/details/54379046

{
// Place your JsHello workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log(‘$1‘);",
// "$2"
// ],
// "description": "Log output to console"
// }

"html-controller":{ //"html-controller"表示代码片对象名,必须定义在最外{}内
"prefix": "test-hc", //代码片简写，可以是一个数组（每项均能表示该代码片）
"body": [ //body是字符串数组, 每行代码变为字符串, 代码中的字符串用‘‘。会自动格式化代码, 无需事先对齐
"<!-- just a test -->",
"<!DOCTYPE html>",
"<html>",
"<head>",
"<meta charset=‘utf-8‘>",
"<title>${1:html test}</title>", //${1:html test} 表示带有默认值的占位符（占位符间可按tab间切换到下一个）
"</head>",

"<body>",
"nihao $2", //$2表示占位符
"<script type=‘text/javascript‘ src=‘https://cdn.staticfile.org/angular.js/1.5.8/angular.min.js‘></script>",
"<script type=‘text/javascript‘>",
"$3",
"</script>",
"</body>",
"</html>"
],
"description": "my first snippets" //光标移到代码片选项上显示的文字
}
}

vscode推荐插件：
Live Server：实现跨域访问服务器，实时修改代码实时自动刷新界面
vscode-icons：给不同类型的文件和目录添加图标
Bracker Pair Colorizer：自动匹配括号并着色
Debugger for Chrome：Chrome浏览器调试工具
Chinese (Simplified) Language Pack for Visual Studio Code：中文包（一般安装重启即变中文界面，若无则在命令行输入"Configure Display Language”"选择zh-cn即可）
当安装多个文件主体插件时：F1->输入Preferences: File Icon Theme即可选择.
Local History：保存历史代码,以便恢复. 在.history目录中会保存历史代码.
比较两个文件的区别：在左侧目录栏右键需要比较的一个文件->选择以进行比较；然后再右键另一个需要比较的文件->与已选项目进行比较。

vscode控制台命令无效：右键vscode桌面快捷->属性->兼容性->以管理员身份运行此程序。再重启vscode即可.

vscode搜索目录过滤（eg：排除.history目录）：https://blog.csdn.net/ArisKing/article/details/84038430
注意：设置->文本编辑器->文件->在setting.json中编辑，排除搜索的目录应命名为"**/.history" 即加上**/

vscode根据文件名搜索文件位置：Ctrl+P

=============== Web开发的调试方法 =================
方法1：F12打开调试界面—>Source—>点击html行号旁就可以设断点。
方法2：在代码需要中断的位置，加行JS代码"debugger;"（功能同手动设断点）
方法3：借助console和alert来打印调试
选中某个标签后，可以在console界面中输入$($(0)).scope()查看当前DOM元素的作用域对象.（$(0)表示当前DOM元素，再加个$表示转成jQuery对象）
详见：Chorme调试工具的使用
https://www.jianshu.com/p/d01eb74bf06c
https://www.cnblogs.com/zourong/p/5020526.html

创建CATALINA_HOME环境变量，值为Tomcat根目录；（这个必须创建否则只加bin目录到path会报错说该变量创建不正确）

将tomcat解压的bin目录加入到path环境变量中。

F12：打开调试工具；

Ctrl+Shift+C：鼠标移到页面某个元素即可查看对应的css样式；再按Ctrl+Shift+C即关闭该功能；

Ctrl+L：清屏console；

当进入调试状态时，右上角所有功能图标均会激活；当切换到实际页面去操作时，右上角所有功能图标均会失活。

当设置断点后，若在页面操作时，触发了最先执行的代码断点，调试模式下会自动跳到该断点，此时即可查看相应变量的值（以发现问题）。

有时直接看代码不清楚变量代表啥，也可以通过chrome调试器来查看当前变量的值，更直观

当有链式回调函数时，调试器会一个执行调试（若打断点了）

若报错（或异常，eg：返回错误码），则调试器会停止

当代码是一坨难以阅读时，可以点击下面的{}大括号按钮将代码转成可读格式

右箭头：F9单步前进；

向上箭头：当进入到某函数的循环后，若想直接跳出该函数的调试，去继续执行下一个函数，可点击它

跨越箭头：直接跳过当前函数的所有断点

Paused in Dbugger：表示页面当前处于调试状态，不可操作；

Resume script exception：表示重启调试工具

Toggle device toolbar：位于左上角，可以切换PC/手机间调试。

Scope，即当前作用域变量的值，也可直接将鼠标移到变量上查看。（密码也能看到）

Beakpoints：显示所有断点（默认就已经激活了所有断点，若再点右上角"deactivate breakpoints"，则会使所有断点失活）；

Callback：展示当前触发的回调函数（eg：鼠标键盘事件函数）

Watch：可以调试需要监视的变量（eg：全局localStorage等）

当想在console测试运行代码段时，由于在console上回车即会执行当前行代码，因此无法编辑并执行代码段。此时，可使用Sources页面的snippets，它可以创建一个脚本文件来执行（右下角有执行按钮）

当鼠标移到代码某行时，页面会凸显该行对应的html元素；

当ctrl+shift+c后，鼠标移到html元素，elements页面会跳到该元素对应的代码段，可利用此来确定每个元素对应的div并与相应的代码对应.

常见报错：

404错误码：一般是前台透传文件配的有问题（后台接口url），以及前台调后台的接口代码与后台不匹配，导致请求找不到。

500错误码：一般是后台服务有问题，或接口调用返回失败。

环境搭建

原文：https://www.cnblogs.com/luckyboylch/p/12329889.html