WEB前端

HTML

• 超文本标记语言，不仅仅是纯文本还包括字体效果和多媒体（音频视频图片）

• 作用是搭建页面结构和内容

文本标签

• 内容标题： h1-h6 ，独占一行, 自带上下间距, 字体加粗

• 换行: br

• 段落标签 p ，独占一行, 自带上下间距

• 水平分割线:hr

• 加粗 b

• 斜体 i

• 下划线 u

• 删除线 s

列表标签

• 无序列表: ul 和 li 组合

• 有序列表: ol 和 li 组合

• 列表嵌套: 有序和无序可以任意无限嵌套

图片标签

• src: 资源路径

• 相对路径:访问站内资源使用

• 和页面同级目录: 直接写图片名

• 在页面的上级目录: ../图片名

• 在页面的下级目录: 文件夹名/图片名

• 绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险

• alt: 当图片不能正常显示时显示的文本

• title:图片标题 当鼠标悬停时显示的文本

• width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:

• 像素

• 百分比

• a 标签包裹文本为文本超链接 , 包裹图片为图片超链接

• 页面内部跳转, 在目的地元素里面添加 id 属性, 然后在超链接的 href 属性中写#id 这样点击时就可以跳转到目的地元素的位置

表格标签

• 相关标签:

• table 表格

• caption 表格标题

• th 表头

• tr 表示行

• td 表示列

• 相关属性:

• border 边框

• rowspan 跨行

• colspan 跨列

表单标签

• 作用: 获取用户输入的内容并提交给服务器

• 学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等

分区标签

• 作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理

• 常见的分区标签包括:

• div: 独占一行

• span: 共占一行

• HTML5 标准中新增的专门用于做页面布局的分区标签作用和 div 一样都是独占一行的:

• header 头

• nav 导航

• main 主体

• footer 脚

• section 区域

CSS

• Cascading Style Sheet, 作用: 美化页面, 相当于装修

• 引入方式

• 内联: 在标签的 style 属性中添加样式代码, 弊端:不能复用

• 内部: 在 head 标签里面添加 style 标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用

• 外部: 在单独的 css 样式文件中写样式代码,在 HTML 页面中通过 link 标签引入, 可以实现多页面复用

• 三大特性

• 继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色

• 层叠性: 多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效

• 优先级: 指选择器的优先级, 作用范围越小优先级越高，!important>id 选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)

选择器

• 作用: 用来查找元素的, 找到之后才能添加样式

• 标签名选择器: 通过标签的名称选择页面中所有同名元素。

• 格式: 标签名{样式代码}

• id 选择器: 通过页面中元素的 id 选择元素, 元素的 id 是唯一标识不能重复。

• 格式: #id{样式代码}

• 类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的 class 属性值,然后通过类选择器进行选择

• 格式: .class{样式代码}

• 分组选择器: 将多个选择器合并成一个选择器

• 格式: div,#id,.class{样式代码}

• 属性选择器: 通过元素的属性选择元素

• 格式: 标签名[属性名='值']{样式代码}

• 任意元素选择器: 选取页面中所有标签

• 格式: *{样式代码}

• 子孙后代选择器: 通过元素和元素之间的关系匹配元素

• 格式: body div div p{样式代码} 匹配 body 里面的 div 里面的 div 里面的所有 p(包括后代)

• 子元素选择器:通过元素和元素之间的关系匹配元素

• 格式: body>div>div>p{样式代码}匹配 body 里面的 div 里面的 div 里面的 p 子元素(不包括后代)

• 伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态

• 格式: a:link/visited/hover/active{样式代码}

颜色赋值

• 三原色 RGB Red，Green，Blue , 每种颜色的取值范围 0-255

• 五种赋值方式:

• 颜色单词赋值: red/green/blue/yellow/pink....

• 6 位 16 进制: #ff 00 00

• 3 位 16 进制: #f00

• 3 位 10 进制: rgb(255,0,0)

• 4 位 10 进制: rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

背景图片

• background-image:url("路径") 设置背景图片

• background-size:100px 200px; 设置背景图片尺寸

• background-repeat: no-repeat; 禁止重复

• background-position:200px 100px; 设置背景图片位置

• background-position:50% 100%; 设置背景图片位置

文本和字体相关样式

• text-align:left/right/center; 水平对齐方式

• text-decoration:overline/underline/line-through/none; 文本修饰

• line-height:20px; 设置行高

• text-shadow:颜色 x 偏移值 y 偏移值 模糊度; 设置阴影

• font-size:20px; 字体大小

• font-weight:bold 加粗/normal 去掉加粗;

• font-style:italic; 斜体

• font-family:xxx,xxx,xxx; 设置字体

• font: 20px xxx,xxx,xxx; 字体大小+字体设置

元素的显示方式 display

• block: 块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div

• inline: 行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b 加粗,i 斜体,u 下划线,s删除线,a 超链接等

• inline-block:行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img

• none: 隐藏元素

• 行内元素不能修宽高,如必须要修改则需要设置为 block 块级元素或 inline-block 行内块元素

盒子模型

• 盒子模型= content 内容+margin 外边距+padding 内边距+border 边框

• 作用: 控制元素的显示效果

• content 内容: 控制元素的显示大小

• 通过 width 和 height 设置元素的内容大小

• 两种赋值方式

• 像素

• 占上级元素的百分比

• 行内元素不能修改宽高,如必须要修改则需要设置为 block 块级元素或 inline-block 行内块元素

• margin 外边距: 控制元素的显示位置

• 赋值方式:

• margin-left/right/top/bottom:10px; 单独某一个方向赋值

• margin:20px; 四个方向赋值

• margin:10px 20px; 上下和左右赋值

• margin:10px 20px 30px 40px; 上右下左顺时针赋值

• 行内元素上下外边距无效

• 上下相邻彼此添加外边距 取最大值, 左右相邻 两者相加

• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加 overflow:hidden 解决

• 部分标签自带外边距,比如: h1-h6 内容标题, p 段落标签, 列表标签,body

• padding 内边距: 控制元素内容的位置

• 赋值方式: 和外边距类似

• padding-left/right/top/bottom:10px; 单独某个方向添加

• padding:10px; 四个方向添加

• padding:10px 20px; 上下和左右

• padding:10px 20p 30px 40px; 上右下左顺时针添加

• 给元素添加内边距会影响元素的宽高,box-sizing: border-box;给元素添加此样式后边框和内边距则不再影响宽高

• 列表标签自带内边距

• border 边框: 控制元素的边框效果

• 赋值方式:

• border:粗细 样式 颜色; 四个方向添加边框

• border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框

• border-radius:10px; 设置圆角 值越大越圆, 超过宽高的一半时为正圆

居中

• text-align:center; 让元素的文本内容和行内子元素居中 ,不能让块级子元素居中

• margin:0 auto; 让块级元素自身居中

定位方式

• 静态定位

• 格式: position:static;元素默认的定位方式

• 特点: 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列,一般情况下不能实现元素层叠效果. 通过外边距控制元素的位置

• 相对定位

• 格式: position:relative;

• 特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom 控制元素的位置, 让元素相对于初始位置做偏移.

• 应用场景: 当需要对某个元素位置进行调整,并且不影响其它元素时使用

• 绝对定位

• 格式: position:absolute

• 特点: 元素脱离文档流(不占原来的位置) ,通过 left/right/top/bottom 控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.

• 应用场景: 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位

• 固定定位

• 格式: position:fixed;

• 特点: 元素脱离文档流, 通过 left/right/top/bottom 控制元素的位置,让元素相对于窗口做位置偏移.

• 应用场景: 当需要让某个元素固定在窗口某个位置时使用.

• 浮动定位

• 格式: float:left/right;

• 特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止

• 浮动元素一行装不下时会自动折行, 折行时有可能被卡住.

• 当某个元素的所有子元素全部浮动时, 元素自动识别的高度为 0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加 overflow:hidden 解决此问题

• 应用场景: 当需要将纵向排列的元素改成横向排列时使用.

溢出设置

• 使用overflow

• visible 显示(默认)

• hidden 隐藏

• scroll 滚动显示

行内元素垂直对其方式

• 使用vertical-align

• top 上对齐

• middle 中间对齐

• bottom 下对齐

• baseline 基线对齐

显示层级

• 使用z-index

• 当元素脱离文档流出现层叠显示时,可以通过 z-index 设置显示层级 z-index 的值越大显示约靠前

• 此样式只能添加给非静态定位的元素,静态定位添加无效

JavaScript

• 作用: 给页面添加动态效果

• 语言特点:

• 基于面向对象的语言

• 属于弱类型语言

• 属于脚本语言, 不需要编译由浏览器解析执行.

• 安全性强:JS 语言只能访问浏览器内部的数据,浏览器以外的禁止访问

• 交互性强: 由于 JS 语言是嵌入到 HTML 页面中,最终执行在客户端的浏览器中的语言,和用户是直接接触, Java 语言是运行在服务器的语言, 用户需要进行交互的话必须通过网络才可以,所以 JS 语言的交互性会更强.

• 引入方式

• 内联: 在标签的事件属性中添加 js 代码, 事件触发时执行

• 内部: 在页面的任意位置写 script 标签,标签体内写 js 代码

• 外部: 在单独的 js 文件中写 js 代码, 在 html 页面中通过 script 标签的 src 属性引入

变量

• JS 语言属于弱类型语言,声明变量的时候不需要指定类型

• 通过 let 或 var 声明变量

• let 声明的变量,作用域和 java 语言类似

• var 声明的变量,作用域是全局的，即使是全局中的也可以访问局部的变量

for(var i=0;i<10;i++){

var j = i+1;

}

var x = i+j; // 此时可以访问到 i 和 j 的值,因为 var 声明的变量相当于是全局的

对象

• JavaScript 中只有对象类型，包括内置对象，BOM对象，DOM对象

• 内置对象

• number 数值: 相当于 Java 中所有数值类型的总和

• string 字符串: 可以用单引号或双引号修饰

• boolean 布尔值: true/false

• undefined 未定义: 当变量只声明不赋值的时候变量为未定义类型

• BOM对象

• Browser Object Model: 浏览器对象模型, 包含和浏览器相关的内容.

• window 对象: 此对象里面的属性和方法称为全局属性和全局方法, 访问时可以省略 window.

• 常见的方法：

• isNaN(); 判断变量是否是 NaN

• parseInt()/parseFloat(); 将字符串转成整数或小数, 还可以将小数转成整数

• alert(); 弹出提示框

• confirm();弹出确认框

• prompt(); 弹出文本框

• let timer = setInterval(方法,时间间隔); 开启定时器

• clearInterval(timer); 停止定时器

• setTimeout(方法,时间间隔); 开启只执行一次的定时器

• window 中常见的属性:

• location: 位置

• location.href 获取和修改浏览器的请求地址

• location.reload() 重新加载/刷新

• history: 历史

• history.length 得到历史页面数量

• history.back() 返回上一页面

• history.forward() 前往下一页面

• DOM对象

• Document Object Model 文档对象模型, 包含和页面相关的内容

• 通过选择器找到页面中的元素对象

• let 元素对象 = document.querySelector("选择器");

• 获取和修改元素的文本内容

• 元素对象.innerText = "xxxx"; 修改

• 元素对象.innerText 获取

• 获取和修改控件的值

• 文本框对象.value = "xxx"; 修改

• 文本框对象.value 获取

• 创建元素对象

• let 元素对象 = document.createElement("标签名");

• 添加元素对象

• 已经在页面中显示的元素对象.append(元素对象);

• 获取页面 body 元素对象

• document.body

• 方法：

• typeof 变量; 获取变量类型

运算符

• 算术运算符+ - * / %

• 除法和 java 不一样, JS 语言会自动根据结果转换整数或小数

• - java : int x = 5; int y = 2; int z = x/y; z=2

• - JS : let x =5; let y = 2; let z = x/y; z=2.5 x=4 z=2

• 关系运算符 > < >= <= != == ===

• ==和===区别: ==先统一等号两边变量的类型 再比较值, ===先比较两个变量的类型,类型一致后再比较值. "666"==666 true "666"===666 false

• 逻辑运算符: && || !

• 赋值运算符: = += -= *= /= %=

• 三目运算符: 条件?值 1:值 2

分支循环语句

• if else

• while

• for

• switch case

方法体

• function 方法名(参数列表){方法体}

• let 方法名 = function(参数列表){方法体}

• let 方法名 = new Function("参数 1","参数 2","参数 3","方法体");

NaN

• Not a Number, 代表不是一个数字

• isNaN(变量) 返回值 true 代表是 NaN false 代表不是 NaN，BOM对象的方法

• NaN 和任何数值进行任何运算 结果都是 NaN

前端设计模式

MVC 设计模式

• MVC 设计模式就是将实现一个业务的所有代码划分为 3 部分.

• M: Model 模型, 数据模型 指和数据相关的代码

• V:View 视图, 指和页面相关的代码

• C:Controller 控制器, 指将数据展示到页面中的过程代码

• MVC 设计模式的 Controller 中需要频繁的进 DOM 操作(查找页面中元素,创建元素等),会浪费资源,MVVM 设计模式可以解决此问题

MVVM 设计模式

• MVVM 设计模式也是将实现一个业务的所有代码划分为 3 部分.

• M:Model 模型, 数据模型 指和数据相关的代码

• V:View 视图, 指和页面相关的代码

• VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和变量在内存中进行绑定, 当需要改变页面中元素时,只需要修改变量, 视图模型会不断监听变量值的改变, 当值发生改变时会从内存中找到对应元素让其跟着改变

• 由于前后端分离后,客户端浏览器需要先请求页面,然后在页面加载完之后再请求数据,把请求到的数据显示到页面中,这个过程属于页面的局部刷新, 所以以后考虑了前后端分离问题 就不能再使用同步请求了, 因为只有异步请求才能实现局部刷新

VUE框架

• 目前最流行的前端框架, 此框架基于 MVVM 设计模式

• 两种使用方式:

• vue.js 文件引入 html 页面中使用

• 脚手架环境下使用

• 下载方式

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• 引入方式

• 把 js 文件下载到本地 然后引入的到自己的页面中

• 直接引入一个 CDN 服务的地址

• 工作流程：VUE 框架中 创建的 Vue 对象相当于是 MVVM 设计模式中的 VM 视图模型, 该对象会将页面中可能发生改变的元素和变量在内存中进行绑定, 并且会一直监听变量值的改变, 当值发生改变时会从内存中的对应关系找到对应的页面元素,并对其进行修改, 以后需要改变页面时只需要找到页面对应的变量,让变量改动 页面会自动跟着改变

• 指令

• {{变量}} , 插值: 让此处的文本和变量进行绑定 , 不写在标签里面也可以使用

• v-text="变量", 让元素的文本内容和变量进行绑定

• v-html="变量", 让元素的 html 标签内容 和变量进行绑定

• v-bind:属性名="变量", 让元素某个属性的值和变量进行绑定 可以省略 v-bind 直接写:属性名进行绑定

• v-model="变量", 让控件的值和变量进行双向绑定, 控件的值改变变量的值会跟着改变,同时变量的值改变也会影响控件的值, 应用场景: 当需要获取控件的值的时候使用双向绑定

• v-for="(对象,下标) in 数组" 让显示的元素内容和数组进行绑定

• v-if="变量" 让元素是否显示和变量进行绑定, true 显示, false 不显示(删除元素)

• v-else 让元素的显示状态和 v-if 元素的状态相反

• v-show="变量" 让元素是否显示和变量进行绑定, true 显示, false 不显示(隐藏)

• v-on:事件名="方法" 事件绑定, 绑定的方法必须写在 Vue 对象中的 methods 属性里面, @事件名="方法" 简写

ElementUI框架

• 目前比较流行的前端框架, 基于 HTML,CSS,JavaScript,Vue 的一款前端框架, 可以让程序员高效的开发出前端页面

WEB基础

请求同异步

• 同步请求: 指客户端只有一个主线程, 主线程既要负责页面展示相关,也需要负责发请求获取数据,由于只有一个线程,当获取数据时不能同时显示着内容(清空页面), 当服务器把数据响应回来之后再次显示内容, 这样的话只能实现页面的整体改变(整体刷新),无法实现页面的局部刷新.

• 异步请求: 指客户端由主线程负责页面展示相关, 由子线程负责发请求获取数据,这样的话主线程只负责展示页面相关,页面内容就不需要清空, 子线程得到数据后可以在原页面的基础上做改动,这种就叫做页面的局部刷新.

• 同步:指单线程依次做几件事

• 通过浏览器的地址栏输入路径 回车后发出请求

• 通过超链接发出动态请求

• 通过form表单翻出动态请求

• 异步:指多线程同时做几件事

• 通过Axios框架发出异步请求

• Axios框架是一个前端js框架, 使用此框架的话需要在html页面中引入 axios.js文件https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js

请求方式

• GET: 请求参数在请求地址的后面, 由于参数在地址中可见所以不能传递敏感信息, 参数大小有限制只能传递几k的数据

• 应用场景: 一般情况下查询请求都是用Get请求, 删除数据一般也使用get请求

• POST:请求参数是在请求体里面, 由于参数在请求体中,用户不可见所以可以传递敏感信息,没有大小的限制

• 应用场景: 因为参数是写在请求地址后面通过拼接的方式传递参数,如果参数较多推荐使用post请求, 参数中包含敏感信息时使用, 上传文件时使用

脚手架

Vue脚手架项目

• Vue脚手架项目是一个单页面的应用，即整个项目中只有1个html页面，它认为这个页面是由若干个视图组合而成的，每个视图都只是该页面中的一个部分，并且，都是可以被替换的！

Node.js

• 安装完之后只需要通过简单的命令就可以下载对应的前端框架文件类似于maven，npm是Node包的资源管理器,VueCLI的下载和安装需要用到Node.js

• 安装

• 在网站下载Node.js,然后安装完成后就可以在cmd中输入命令下载文件，安装完以后需要重启IDEA才能正常使用。

• 然后配置npm源，默认是国外地址

• npm config set registry https://registry.npmmirror.com

• npm config get registry//查看配置源文

• npm -v查看版本

安装Vue CLI

• Vue CLI是Vue框架的客户端工具，创建Vue项目、运行Vue项目都需要事先安装此工具。

• 安装Vue CLI的命令:npm install -g @vue/cli,只要不出现error就没问题

• 查看是否安装成功的命令:vue -V

创建启动项目

• 基于Vue CLI下,在cmd下通过命令创建项目

• vue create xxx//创建名为xxx的项目

• Manually select features

• Babel / Vuex / Router

• 2.x

• 直接回车

• In package.json

• 直接回车

• 在Idea中打开项目,Idea的Terminal（终端）面板中，可以执行启动项目的命令：npm run serve

项目目录结构

• [.idea]：仅当使用IntelliJ IDEA打开此项目后，才会有这个文件夹，是IntelliJ IDEA管理项目时使用的，无需关注此文件

• [node_modules]：此项目中使用的各个库的文件，注意：通常，提交到GIT的项目代码中并不包含此文件夹，需要先执行npm install命令，则会自动下载此项目中的各个库的文件，然后才可以运行项目

• [public]：此项目的静态资源文件夹，通常用于存放图片、自行编写的js、自行编写的css等文件，此文件夹下的资源的访问路径都是根路径

• public/favicon.ico：此项目的图标文件，此文件必须在这个位置，且必须是这个文件名

• public/index.html：此项目中唯一的html文件，也是项目打开页面的入口

• [src]：源文件的文件夹

• [src/assets]：资源文件夹，此处的资源文件应该是不随程序运行而发生变化的

• [src/components]：视图组件文件夹，此文件夹下的视图组件通常是被视为封装的视图，且将会被其它视图调用

• [src/router]：此项目中配置路径的文件所在的文件夹

• src/router/index.js：默认的路由配置文件

• [src/stroe]：此项目的配置全局共享变量的文件所在的文件夹

• src/store/index.js：默认的配置全局共享变量的文件，此处声明的变量，在任何一个视图组件中均可使用

• [views]：一般的视图组件所在的文件夹

• src/App.vue：默认绑定到index.html中的<div id="app"></div>的视图组件，可简单理解为页面的入口，此视图组件不需要配置路由，默认就会显示

• src/main.js：此项目的主配置文件，通常，在项目中安装了软件之后，都需要在此文件中补充配置

• .gitignore：使用GIT时的忽略文件清单，即：用于配置哪些文件不会提交到Git

• package.json：项目的配置文件，例如配置了此项目的依赖项等

• package-lock.json：锁定的配置文件，不需要，也不建议手动修改此文件中的任何内容

视图组件

• 在Vue脚手架项目中，以.vue为作文件名后缀的，就是视图组件,包含三个部分

• <template>：设计界面的源代码部分，此标签下可以使用HTML或相关技术（例如Element UI）来设计界面.注意：在<template>标签下，只能有1个直接子标签

• <script>：编写JavaScript代码

• <style>：编写CSS代码

• 在设计界面时，可以使用<router-view/>表示此视图组件不确定的内容！例如在App.vue中就使用了这个标签，此标签将显示的内容取决于URL（地址栏中的网址）。

路由

• 在Vue脚手架项目中，使用“路由”来配置URL与视图组件的对应关系。通过src/router/index.js可以配置路由。

import HomeView from '../views/HomeView.vue'

const routes = [
 {
    path:'/',
    name:'home',
    component:HomeView
 },
 {
    path:'/about',
    name:'about',
    component:() => import('../view/AboutView.vue')
 }
]

• 以上配置中，path表示路径，name表示名称，可以不必配置，component表示视图组件。

• 通常，在每个项目中，只有1个视图组件是静态导入的。

嵌套路由

• 当某个显示在<router-view/>位置的视图组件中也设计了<router-view/>，则出现了<router-view/>的嵌套，在配置路由时，需要使用嵌套路由

• 需在路由对象中配置children属性，这个children属性的配置方法与routes完全相同

安装Element UI

• 能够快速构建页面UI

• 在终端中执行命令安装Element UI：npm i element-ui -S

• 在项目的src/main.js中添加配置：

import ElementUI from 'Element-ui';
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

安装axios

• 可以使用异步请求

• 在终端中执行命令安装axios的：npm i axios -S

• 在项目的src/main.js中添加配置：

import axios from 'axios';

Vue.prototype.axios = axios;

安装qs

• 此框架的工具可以轻松的将JavaScript对象转换成FormData格式

• 在终端中执行命令安装qs的：npm i qs -S

• 在项目的src/main.js中添加配置：

import qs from 'qs';

Vue.prototype.qs = qs;

• 在项目中使用方法

let formData = this.qs.stringify(this.ruleForm);
console.log('formData：' + formData);

Vant

• Vant是一个轻量，可靠的移动端组件库,和ElementUI相比较,ElementUI是开发计算机浏览器(非移动端)页面的组件库,而Vant是开发移动端页面的组件库

• 在终端中执行命令安装qs的：npm i vant@latest-v2 -S,安装成功可能会出现added 4 packages in 3s的字样

• 在项目的src/main.js中添加配置：

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

• 以Google浏览器为例按F12进入调试模式后点击移动端调试即可

• 可以在官网查看里面的每个组件的样式以及使用:https://youzan.github.io/vant/v2/#/zh-CN/

• 如果需要一个全国省市区的数据可以在终端输入:npm i @vant/area-data,安装成功的话可能会出现added 1 package in 2s的字样