导图社区 前端页面
- 35
- 3
- 2
- 举报
前端页面
java学习者的基础前端笔记，整理了 HTML、CSS 样式、javaScript 组件、Vue Cli: Vue脚手架、前端axios框架（配合vue框架）等知识。目前已终止更新，最新见另一个导图——web应用。
编辑于2023-05-25 10:56:31 山东省- 前端
- java
- 相似推荐
- 大纲
网络交互
HTML
作用: 搭建页面结构 , 类似盖房子(毛坯房) HyperTextMarkupLanguage 超文本标记语言 标记语言格式:<开始标签 属性='值'>标签体</结束标签> 超文本: 指不仅仅是纯文本,还包括字体相关和多媒体相关(音频,视频,图片) 学习HTML主要学习的就是有哪些html标签,以及用法
声明 <!DOCTYPE html>
<html></html>
头<title></title>
<br>标签:换行 <a>双标签:超链接,href属性用于指定连接地址. <table>标签:表格。属性border用于指定边框。 <table>标签中包含<tr>标签用于表示行 <tr>标签中包含<td>标签用于表示列 <td>标签中常见属性: align:对其方式。left左对齐,right右对齐,center剧中对其 colspan:跨列合并列，合并是从左向右合并列 rowspan:跨行合并列，合并是从上向下合并列
身体<body></body>
文本标签
属性+属性值 align 对齐 left（默认）左对齐 center 居中 right 右对齐
标题 <h1></h1>
<h1-h6>双标签:标题独占一行，有1级-6级标题。一级字体最大，自带加粗和外间距
段落 <p></p>
换行 <br/>
水平分割线 <hr/>
加粗 bold <b></b>
斜体 italic <i></i>
删除线 strikethrough <s></s>
列表标签
列表嵌套: 有序列表和无序列表可以任意无限嵌套
无序列表 unordered list <ul></ul>
列表项 list item <li></li>
ul>li*6>a
批量生成
list-style: none;
去圆点
ul li:nth-child(1) a{ color: red; }
有序列表 ordered list <ol></ol>
图片标签
<img/>
src="" 设置资源路径
相对路径：访问站内资源使用
同级：图片名
上级： ../图片名(../../图片名)
下级： 同级目录名/文件名
绝对路径：访问站外资源，称为图片盗链
alt="" 无资源标注
title="" 鼠标滑过显示的标题
width="" 像素 百分比，只设置一项时，另一项等比例缩放
height=""
超链接
<a></a>
href="": 资源路径,作用和src类似
a标签包裹文本为文本超链接,包裹图片为图片超链接
页面内部跳转: 在href属性中添加#xxx 在目的地元素的里面添加id属性值为xxx
text-decoration: none;
去下划线
表格
<table></table>
相关属性:
border=""边框
colspan=""跨列
rowspan=""跨行
行 table row <tr></tr>
表头 table head <th></th>
字体自行加粗并居中
单元格 table data cell <td></td>
表单
form表单 <form></form>
作用: 获取用户输入的内容并提交给服务器
action=""
method="get/post"
action="/regUser" method="get" form表单是用于将用户在页面上输入的信息提交给服务端使用的组件。 form表单中应当包含若干的输入组件. 注意:只有包含早form标签中间的输入组件中用户输入的信息才会提交给服务端!! form上有两个重要的属性: action:用于指定表单提交的路径，该路径需要服务端配合处理 method:表单提交的形式，有两个可选项: GET:地址栏形式提交，表单数据会拼接到地址栏的URL中传递 POST:表单数据会被包含在请求的消息正文中被提交 当表单数据含有用户隐私信息或附件上传时应当使用POST。 method属性不指定时，默认是GET请求提交。 由于请求当前注册页面时，浏览器地址栏上的路径为: http://localhost:8080/reg.html 因此在当前页面上我们定义的表单<form action="/regUser">时，表单提交后的实际请求路径为: http://localhost:8080/regUser 而提交后，我们的服务端拿到该URL中抽象路径(/regUser)后，第一个"/"首先去定位static目录下是否有 该文件，若有则直接发送给浏览器 表单用get形式提交后，浏览器地址栏的样子 http://localhost:8080/regUser?username=fancq&password=123456&nickname=chuanqi&age=22 表单中<form action="/regUser" method="get"> method的值为get时，表达用地址栏形式提交表单数据。 此时表单数据会被拼接到URL的抽象路径中。与抽象路径的请求部分以"?"形式分开 抽象路径格式: 请求路径(action指定的内容)?参数部分 /regUser?username=fancq&password=123456&nickname=chuanqi&age=22 参数部分的格式: 参数名1=参数值1&参数名2=参数值2&... 参数名是表单中某个输入框name属性指定的值 参数值是表单中该输入框用户在其中输入的内容 get请求提交形式: /regUser?username=fancq&password=123456&nickname=chuanqi&age=22 post请求提交时，表单信息会被包含在请求的消息正文中。 <input type="submit" value="注册"> type="submit" 这是一个提交按钮,该按钮点击后会将包含这个按钮的form表单进行提交
文本输入框 <input/>
name=""：命名，尽量全部命名（否则提交时会被忽略）
value="":设置默认值、提交值
placeholder="":占位文本
maxlength="":最大字符长度
readonly:只读(只需要写属性名即可)
type属性=""
<input>标签:用来表示可以在浏览器上获取用户输入信息的组件 输入组件有多种样式,可以通过type属性指定 常见的样式: type="text" : 文本框 type="password" : 密码框 type="button" : 按钮 单选框和多选框要使用name属性分组,名字相同的为一组 type="checkbox" : 多选框 type="radio" : 单选框
text 文本框
password 密码框
radio 单选框 命名相同的选项只有一个 checked 默认选中
checkbox 多选框
date 日期选择器
file 文件选择器
submit 提交按钮
reset 重置按钮
下拉选择
<select> 选择
<option></option> 选项
</select>
文本域
<boxarea></boxarea>
button 自定义按钮
<button></button>
分区标签
<div></div> 独占一行
HTML5的版本中 新增了一些分区标签,这些标签的作用和div一样, 为了提高代码可读性
header 头
main 主体
footer 脚
nav 导航
section 区域
<span></span> 共占一行
CSS 样式
Cascading Style Sheet:层叠样式表 层叠样式表, 作用:美化页面, 相当于装修 通过CSS样式相关代码对页面进行美化
引入
内联样式
sytle="样式代码"
不能复用
内部样式
<sytle>选择器{样式代码}</sytle>
可以复用,但不能多页面复用
外部样式
<link rel="stylesheet" href="xxx.css"/>
外部: 在单独的css样式文件中写样式代码,
在html页面中通过link标签引入
优点：以实现多页面复用, 而且可以将html代码和css样式代码分离开 便于维护
选择器
作用: 通过选择器找到页面中的元素, 找到后再添加样式代码
标签名选择器
标签名{ 属性名: 属性值； ... }
匹配页面中所有同名标签
id选择器
#id{样式代码}
当需要选择页面中某一个元素时使用
类选择器
.class{样式代码}
当需要选择多个不相干的元素的时使用
分组选择器
div,#id,.class{样式代码}
将多个选择器合并成一个选择器
属性选择器
标签名[属性名='值']{样式代码}
通过元素的属性选择元素
任意元素选择器
*{样式代码}
匹配所有元素
子孙后代选择器
body div div p{样式代码}
通过元素之间的层级关系选择元素
子元素选择器
body>div>div>p{样式代码} 没有body会没有下限
匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
伪类选择器
a:link未访问/hover悬停/active点击或激活/visited访问过{样式代码}
选择的是元素的状态,包括:未访问,访问过,悬停,点击
样式代码
宽高
不设置会根据里面的内容调整
width
height
盒子模型
部分标签自带外边距或内边距 外边距: body自带四个方向的外边距 , h1-h6自带上下外边距, p标签自带上下外边距, 列表标签自带上下外边距 内边距: 列表标签自带内边距
margin外边距
作用:控制元素的显示位置 元素距上级元素或相邻兄弟元素的距离称为外边距 行内元素上下外边距无效 上下相邻彼此添加外边距取最大值, 左右相邻两个值相加 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决
margin-left/right/top/bottom: 10px; 单独某一个方向赋值
margin: 50px; 四个方向赋值
margin: 10px 20px; 上下10 左右20 , 居中: 0 auto
margin: 10px 20px 30px 40px; 上右下左 顺时针赋值
border边框
border:粗细 样式 颜色; 四个方向添加边框
border-left/right/top/bottom:粗细 样式 颜色; 单独某个方向添加边框
圆角: border-radius:20px; 值越大越圆, 超过宽高的一半为正圆
背景
background-color: 背景颜色赋值
三原色: 红绿蓝 RGB RedGreenBlue , 每个颜色的取值范围0-255 五种颜色赋值方式: 颜色单词赋值: red/pink/yellow/green.... 6位16进制赋值: #ff0000 3位16进制赋值: #f00 3位10进制赋值: rgb(255,0,0) 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 代表透明度 值越小越透明
background-image:url("路径"); 设置背景图片
background-size:200px 300px; 设置背景图片的尺寸
background-repeat:no-repeat; 禁止重复
background-position: 横向偏移值/百分比 纵向偏移值/百分比; 设置背景图片的位置
padding内边距
作用: 控制元素内容的位置 默认情况下给元素添加内边距会影响元素的宽高, 添加以下样式后则不再影响 box-sizing:border-box;
padding-left/right/top/bottom:10px:单独某个方向赋值
padding:10px; 四个方向赋值
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左 顺时针赋值
context
内容（包括各种控件）
文本
color: 内容颜色赋值
text-align: left/right/center; 设置水平对齐方式
text-decoration: overline/underline/line-through/none; 文本修饰
text-shadow: 颜色 x偏移值 y偏移值 模糊度; 设置文本阴影
行
line-height: 20px; 设置行高，值等于
字体
font-size: 20px; 设置字体大小
font-weight: normal/bold; 设置加粗 和去掉加粗
font-style: italic; 设置斜体
font-family: xxx,xxx,xxx,xxx;设置字体
font: 20px xxx,xxx,xxx; 设置字体大小+字体
元素的显示方式
display
block: 块级元素, 特点: 独占一行,可以修改元素宽高, 包括: div,p,h1-h6
inline: 行内元素, 特点: 共占一行,不能修改元素宽高, 包括: span,a,b,i,u,s
如果行内元素需要修改宽高,可以将显示方式改成块级元素或行内块元素
inline-block:行内块元素,特点: 共占一行,可以修改元素宽高, 包括: input,img
none: 隐藏元素
flex
平行
定位
position
静态定位
static
元素默认的定位方式,也称为文档流定位
显示特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列,一般情况元素无法实现层叠显示的效果
格式: position:static
通过外边距控制元素的位置
相对定位
relative
格式: position:relative;
显示特点: 元素不脱离文档流(不管元素显示到哪里,仍然占着原来的位置,后面的元素不会顶上来)
通过left/right/top/bottom让元素相对于初始位置做偏移
绝对定位
absolute
格式: position:absolute;
显示特点: 元素脱离文档流(不占原来的位置)
通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做位置偏移,如果需要相对于某一个上级元素, 必须将上级元素改成相对定位
固定定位
fixed
格式: position: fixed;
显示特点: 元素脱离文档流,元素固定在窗口的某个位置, 不会随着内容位置的改变改变自身位置
通过left/right/top/bottom相对于窗口做位置偏移
float
浮动定位
格式: float:left/right;
显示特点: 元素脱离文档流,从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止移动.
浮动定位一行装不下会自动折行, 折行时有可能被卡住
当某个元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来导致显示异常, 通过给元素添加overflow:hidden解决此问题
应用场景: 将纵向排列的元素改成横向排列时使用
justify-content: space-around;
对齐文本
align-items:
center
项目居中
flex-direction:
column;
成行
缩放动画设置
transition-duration：1.5s
设置动画持续时间
transform: scale(1.1)
设置缩放x,y
溢出设置
overflow
visible 显示（默认）
hidden 隐藏
scroll 滚动显示
行内元素的垂直对齐方式
verical-align:
baseline 基线对齐（默认）
top
middle
bottom
元素的显示层级
z-index：
值越大元素显示越靠前，默认值为0
三大特性
继承性
指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响, 比如超链接字体颜色
层叠性
多个选择器可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效, 如果作用的样式相同
优先级
选择器的优先级, 选择器作用范围越小 优先级会越高, id>class>标签名>继承(间接选中)
！important; 标记为最高优先级
javaScript 组件
作用: 给页面添加动态效果
语法基础
数据类型
JS语言中只有对象类型，并且类型之间可自动转换
string 字符串: 可以用单引号或双引号修饰 "abc" 'abc'
number数值: 相当于Java中所有数值类型的总和
boolean布尔值: true和false
undefined未定义: 当变量只声明不赋值时,变量的类型为未定义.
变量
JS语言属于弱类型语言, 声明变量时不需要指定类型
let声明的变量作用域类似于Java语言
在作用域之外不会报错但访问不到
var声明的变量 作用域相当于是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=6 z=3
关系运算符: > < >= <= != ==和===
==: 先统一两个变量的类型再比较值, "666"==666 true
===:先比较类型,类型相同之后再比较值, "666"===666 false
逻辑运算符: && || ! 只支持短路与和短路或
赋值运算符: = += -= *= /= %=
三目运算符: 条件?值1:值2
语句结构
if else
for
while
switch case
语言特点:
1. 属于弱类型语言
2. 属于脚本语言,不需要编译,由浏览器解析执行.
3. 基于面向对象的语言
4. 安全性强: JS语言只能访问浏览器内部的数据,
浏览器以外用户磁盘上面的数据禁止访问
5. 交互性强: JS语言是嵌入到html页面中运行在客户端电脑中的语言,更接近用户所以交互性更强,Java语言是运行在服务器的语言用户要想与之交互必须经过网络
引入
内联: 在标签的事件属性中添加JS代码, 当事件触发时执行
事件: 指系统提供的一些特定时间点
点击事件: 当用户点击元素时触发的时间点
内部
<script>js代码</script>
外部
<script src="xxx.js"></script>
三种声明方法的方式:
function 方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}
let 方法名 = new Function("参数1","参数2","方法体");
方法可直接执行
JavaScript对象分类
内置对象: 指string,number,boolean等
JS语言自带的供开发者使用的对象，提供了一些常用的或是最基本而必要的功能。
Math对象
Date对象
Array对象
String对象
BOM
BrowserObjectModel浏览器对象模型, 包含和浏览器相关的内容
window对象
顶层对象，属于golbal对象，是所有变量的父亲 此对象中的属性和方法称为全局属性或全局方法, 访问时可以省略掉window.
window对象中常见的方法
isNaN() 判断变量是否是NaN(not a number)
parseInt()/parseFloat() 将字符串转成整数或小数, 将小数转成整数
alert("xxx") 弹出提示框
confirm("xxx") 弹出确认框
prompt("xxx") 弹出文本框
let timer = setInterval(方法名,时间间隔) 开启定时器
clearInterval(timer); 停止定时器
setTimeout(方法名,时间间隔) 开启只执行一次的定时器
history历史
history.length 得到历史页面数量
history.forward() 前往下一页面
history.back() 返回上一页面
history.go(n) n正值是前进 负值是后退 0是刷新
location位置
location.href="" 获取和修改浏览器的请求地址
location.reload() 刷新页面
location.search 相当于： ?+参数
localStorage
本地存储 localStorage 是 永久存储 的， 除非 手动清除 ，否则一直存在。 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。
setItem(key: string, value: string): void;
添加
DOM
DocumentObjectModel文档对象模型, 包含和页面相关的内容
document
document.cookie 保存的用户数据
通过选择器查找页面中的元素对象
let 元素对象 = document.querySelector("css选择器");
获取或修改元素的文本内容
元素对象.innerText
元素对象.innerText = "xxx";
获取或修改控件的值
控件对象.value
空间对象.value = "xxx";
创建元素对象
let 元素对象 = document.createElement("标签名");
把元素添加到某个元素中
元素对象.append(新元素对象);
自定义对象
实例化空对象
let 自定义对象 = {}
属性/方法=值
实例化自带属性和方法的对象
let 自定义对象 = {属性/方法: 值}；
框架
前端MVC设计模式
MVC设计模式 是将实现前端某业务的代码划分为三部分
Model: 模型, 对应的是数据模型
View: 视图, 对应的是页面标签相关代码
Controller: 控制器, 对应的是将数据展示到页面中的过程代码
前端MVC设计模式弊端: 在Controller控制器部分 把数据展示到页面中时,需要频繁进行DOM操作(查找元素,创建元素等),影响执行的效率, MVVM设计模式可以解决此问题
MVVM设计模式
Model: 模型, 对应的是数据模型
View: 视图, 对应的是页面标签相关代码
VM: 视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,并且会对变量进行监听, 当变量的值发生改变时,VM视图模型会自动从内存中找到对应的元素,这样就避免了每次通过DOM操作遍历查找元素了, 从而提高了执行效率
VUE
VUE是目前最流行的前端框架, 基于MVVM设计模式
VUE框架两种用法:
多页面应用, 在html页面中引入vue.js框架文件
引入外部vue.js文件的方式:
直接引入一个CDN服务器VUE框架的网址
把VUE框架文件（另存为）下载到本地,然后再引入
单页面应用, 通过脚手架的方式使用VUE框架
CDN服务器地址:以下推荐国外比较稳定的两个 CDN， 国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN（国内） :
unpkg：
cdnjs :
Vue框架工作原理: Vue对象相当于MVVM设计模式中的VM视图模型, 会将页面中可能发生改变的元素和data里面的某个变量进行绑定, 并且会不断监听变量值的改变, 当变量的值发生改变时,会自动从内存中找到对应的元素,并且将元素的显示内容修改掉.
VUE相关指令
new Vue({范围，属性，方法} ): v
el: "选择器"
data: {属性名:"属性值"， 属性名:"属性值"， 属性名:"属性值"} or data: function(){ return{ 属性名:"属性值"， 属性名:"属性值" } }（适用性更广）
属性
文本相关
{{变量}} : 插值, 让此处的文本内容和变量进行绑定
v-text="变量", 让元素的文本内容和变量进行绑定
v-html="变量", 让元素的标签内容和变量进行绑定
循环遍历
v-for: "变量 in 数组" 循环遍历指令, 遍历的同时生成当前元素
属性绑定
单向绑定
应用于标签属性
v-bind:属性名="变量", 让元素的某个属性的值和变量进行绑定
:属性名="变量" , 简写
双向绑定
一般用于input
v-model="变量", 让控件的值和某个变量进行双向绑定, 变量值改变回影响控件显示的内容,控件的内容发生改变也会影响变量的值
methods: {方法1,方法2,... }
行为
事件绑定
一般用于button 超链接
v-on:事件名="方法", 给元素添加事件
@事件名="方法" , 简写
javascript:void(0)
废掉超链接的功能
若超链接只是"",点击会回到当先页面，相当于一次刷新
eval() 可以将字符串变成代码运行
push(...items: T[]): number 往数组中添加对象
splice(start: number, deleteCount?: number): T[] 删除从下标start开始count个元素
显示隐藏相关
v-if=""
v-if让元素是否显示和变量进行绑定 true显示 false不显示(删除元素)
v-else=""
v-else是和v-if状态取反
v-show=""
v-show让元素是否显示和变量进行绑定 true显示 false不显示(隐藏元素)
created:function () { axios.get("/select").then( function (response) { //当axios框架发现响应的是JSON格式的字符串时，会自动将其转换为数组或js对象 v.arr = response.data } ) }
初始化过程中执行的方法
mounted
ElementUI
引入项
css
https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css
js
https://cdn.staticfile.org/element-ui/2.15.9/index.min.js
vue
https://cdn.staticfile.org/vue/2.6.14/vue.min.js
组件
basic
container 布局容器
el-container<><>
可嵌套
<el-header></el-header>
<el-main></el-main>
<el-footer></el-footer>
<el-aside width="200px"></el-aside>
layout 布局
<el-row></el-row> 行
<el-col></el-col> 列
span="" 列跨度共24格
gutter="" 间距
offset="" 分栏偏移
icon
<i></i>
class="el-icon-?"
icon="el-icon-?"
button
<el-button></el-button>
type=""
primary
success
info
warning
danger
plain 朴素
round 圆角
circle 圆形
form
input
keydown.native.enter="login()"
enter 键盘按下事件
select 下拉选框
<el-select></el-select>
<el-option></el-option>
label="" 选项
value="" 选中后显示的值
upload 文件上传
action=""
form表单
<el-form></el-form>
label-width="80px"
<el-form-item>?</el-form-item>
label="商品标题"
data
table
<el-table></el-table>
data 设置表格的全部数据
</el-table-column> 列
prop=property 属性
label 表头内容
<template></template>
自定义列里面必须添加template标签
slot-scope="scope" scope 变量中装着当前行的信息
scope.$index代表当前行的下标
scope.row代表当前行对应的数组里面的对象
notice
.$message（）
默认info("消息")
success("成功消息")
error('错了哦，这是一条错误消息')
{message: '', type: '' }
alert
navigation
navmenu 导航菜单
<el-menu></el-menu>
default-active设置激活位置
mode="horizontal" 设置横向 去掉为纵向
</el-menu-item></el-menu-item>
index="1"
亦可用来发送请求
</el-submenu></el-submenu>
index="2"
</el-menu-item></el-menu-item>
index="2-1"
dropdown 下拉菜单
<el-dropdown @command="handleCommand"></el-dropdown>
<el-dropdown-menu slot="dropdown"></el-dropdown-menu>
<el-dropdown-item></el-dropdown-item>
disabled 禁止使用
divided
command="" 发送指令
others
card
<el-card></el-card>
carousel 走马灯
<el-carousel></el-carousel>
</el-carousel-item>img</el-carousel-item>
Divider 分割线
<el-divider></el-divider>
content-position="left/center/right" 下划线文本位置
direction="vertical" 纵向分割线
主题
Vant
Vue Cli: Vue脚手架
单页面多视图 专注页面视图的 网络客户端服务器
axios 框架
npm i axios -S
main.js 引入
import axios from 'axios'; Vue.prototype.axios = axios;//属性
this.调用
在Vue脚手架项目中使用axios时，在then()的回调中不可以使用匿名函数，只能使用箭头函数。
this.axios.post(url,formdata).then((response) => { });
跨域问题
当尝试通过axios从前端项目（9000端口的项目）向后端项目（9080端口的项目）发起请求时，在浏览器中会提示错误信息
... ... has been blocked by CORS policy
网络服务器默认情况下，不允许执行跨域请求，即不允许某个项目向部署在另外一个服务器上的项目发起请求！
FormData格式
服务器端接收请求参数时，没有使用@RequestBody注解，客户端提交的请求参数必须是FormData格式的！如果客户端提交的请求参数是对象格式的，则服务器端接收到的各请求参数值均是null
xx=xx&xx=xx&xx=xx
qs框架
实现“将对象转换为FormData格式的数据”。
npm i qs -S
main.js 引入
import qs from 'qs'; Vue.prototype.qs = qs;//属性
this.调用
let formData = this.qs.stringify(this.ruleForm);
当使用qs后，转换得到的formData中，中文会是UrlEncode格式的，例如%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%86%8C1206&description=%E6%B5%8B%E8%AF%95%E7%AE%80%E4%BB%8B&sort=111，这是正常，且服务器端可以正常接收到中文字符！
特征
使用的是“单页面”的设计模式
整个项目中只有1个HTML，而这个HTML是由多个不同的视图组合而成的，每个视图都是可以随时替换为其它视图的，并且，每个视图都由独立的文件来开发。
项目结构
[.idea]
IntelliJ IDEA管理项目时使用到的相关文件
此文件夹不应该手动修改，如果此文件夹中出现错误，将此文件夹删除即可。使用IntelliJ IDEA打开的项目，都会生成此文件夹
[node_modules]
当前项目中的依赖项文件所在的文件夹（Vue脚手架项目的依赖项都在当前项目中，不像Java项目的依赖项统一在.m2\repository下），此文件夹不应该手动修改，在使用GIT管理项目时，此文件夹通常会被配置到.gitignore文件夹，以至于此文件夹不会被提交到GIT服务器，当从其它电脑上拉取项目时，也不会得到此文件夹及内部的文件，则项目是不可以运行的，需要在项目文件夹下执行npm install命令，会自动创建此文件夹，并根据package.json中配置的依赖项来下载所需的所有依赖项
[public]
静态资源文件夹
通常存放.css文件、.js文件、图片等，也可以自行创建文件夹来管理相关文件，当项目启动后，可以以此文件夹作为URL的根路径来访问相关静态资源
favicon.ico
此图标通常会显示在浏览器的标签栏、收藏夹等位置，
此文件的名称是固定的，如果要更换图标文件，必须使用新文件覆盖此文件，文件名不变
index.html
项目中唯一的.html文件
默认会显示此文件，通常不编辑此文件
[src]
项目的源文件文件夹
[assets]：资源文件夹，也可以用于存放.css文件、.js文件、图片等，与[public]不同的地方在于此文件是在编译范围之内的，此文件夹下的文件在使用时，应该是不随着程序运行而发生变化的
[components]：视图组件文件夹，通常用于存放.vue文件
[router]：路由配置文件夹
const routes = [{r1}，{r2}]
配置路由视图—— 数组元素是一个个的路由对象 路由配置 / 路由对象：即配置了path和component的对象
path: '/',
路径
component: HomeView,
视图组件
路径与视图绑定
children: [{r1}，{r2}]
嵌套路由
path: '/sys-admin/temp/admin/add-new',
关于component属性的值，有2种写法：
在当前文件顶部使用import语句导入某个视图组件，并指定名称，component属性的值就是此名称
通常，每个项目只有1个路由配置使用这种方式导入视图组件
import HomeView from '../views/HomeView.vue' ... component: HomeView
使用import()函数导入某个视图组件，作为component属性的值
component: () => import('../views/sys-admin/temp/AdminAddNewView.vue')
[store]：公共存储的数据的文件夹
[views]：一般视图组件的文件夹，通常用于存放.vue文件
HomeView.vue
<router-view/>
子路由视图 此标签表示此处将由别的视图组件来完成显示！具体由哪个视图来显示，取决于当前访问的URL在src/router/index.js中的routes常量中对应的配置！ 在任何一个视图组件中，最多只能有1个<router-view/>标签！
交由其它视图来负责显示
<script> export default { } </script>
App.vue：默认已经绑定到index.html的视图组件，可以理解为是任何一个页面的显示入口
<router-view/>
路由视图
交由其它视图来负责显示
main.js：项目的主配置文件，例如当安装了某个新的软件（添加了新的依赖）后，可能需要在此文件中添加一些配置
.gitignore
使用GIT管理项目都有此文件
用于配置GIT应该“忽略”的文件或文件夹
babel.config.js
Babel的配置文件
jsconfig.json
JavaScript的配置文件
package.json
当前项目的配置文件
在创建项目时需要指定此文件作为配置文件，此文件中主要配置了npm命令的相关脚本、当前项目的依赖项
"scripts": { "serve": "vue-cli-service serve --port 9000", "build": "vue-cli-service build" }
可修改端口号
项目在此开启
package-lock.json
锁定的配置文件
根据package.json自动生成的，不可手动修改
LICENSE
项目是授权许可文件
当把项目提交到GIT并开源时，需要选择某个开源协议，就会生成此文件
README.md
项目的介绍性文件
当第1次打开此项目，或在GITEE主页上，都会显示此文件的内容
vue.config.js
Vue的配置文件
view
template
style
script
import {areaList} from '@vant/area-data'
前端axios框架（配合vue框架）
axios.get("/xxx/xxx?参数").then( function(response){ } )
GET: 请求参数在请求地址的后面 可见, 由于参数可见,在传递一些敏感参数时不能使用Get请求,比如涉及密码 , 请求参数大小有限制,只能传递几k的数据
应用场景
一般查询请求都使用get,删除使用Get 因为删除数据时传递的参数一般都只传递个id
axios.post("",参数).then( function(response){ //处理回应的相关代码 } )
应用场景
POST:请求参数在请求体里面 不可见, 参数大小无限制
有敏感信息的请求,
上传请求 因为上传文件比较大 ,
一般传递参数较多时使用.
response.data=C回应的返回值，即响应正文
发送同步请求
单线程依次做几件事 指客户端只有一个主线程, 主线程负责页面渲染和监听操作, 如果需要发请求时,主线程会停止渲染页面(清空页面内容) 只负责发请求, 当服务器响应的数据之后,主线程再次恢复渲染工作, 把服务器响应的数据展示到页面中, 只能实现页面的整体改变(整体刷新),无法实现页面的局部改变(局部刷新)
超链接
href=""
href="hello"
当前页面所处位置
href="/hello"
第一个/，即工程的根目录
href="https://地址：端口/xxx/xxx"
访问站外资源
绝对路径
form表单
action="?"
网址输入
发送异步请求
指主线程只负责渲染页面和监听操作,由子线程负责发请求获取数据,获取到数据后可以将数据展示在原页面的基础之上,这种就称为页面的局部刷新, 只有通过异步请求才能实现页面的局部刷新
前后端分离
在Controller中不再写页面相关内容, 不管前端是浏览器还是手机 都只提供数据, 浏览器需要的页面必须在请求数据之前先发一次请求获得一个静态页面,然后在页面中发出异步请求获取到数据, 把数据展示到页面中(这个过程称为页面的局部刷新), 只有通过异步请求才能实现局部刷新, 这样的话 如果考虑实现前后端分离, 则只能使用异步请求, 因为同步请求不能实现页面的局部刷新.
Ajax
XMLHttpRequest
jQuery
npm仓库