一 网页技术HTML
1.概念
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。
2.结构
1.文档声明，用来声明HTML文档所遵循的HTML规范。
2.头部分<head>，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
<title>编辑网页的标题<title>
3.体部分<body>，用来存放网页要显示的数据。
4.声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
2.1常用嵌套关系：
1.<HTML>
<head></head>
<body></body>
</HTML>
2.<table>
<tr>
<td></td>
</tr>
</table>
3.<form>
<input/>
<select>
<option>下拉选项</option> 配合select使用
</select>
</form>
4. <ol>或<ul>
<li> 只能在<ol>或<ul>中使用
</li>
</ol>或</ul>
3.语法
3.1HTML标签是什么
HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。
如果开始和结束中间没有内容，可以合并成一个自闭标签
3.2HTML属性
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来
如：<a href="" target="" name="" id=""> </a>
属性声明格式：<标签名 属性名=属性值 ...属性名N=属性值N>标签内容</>
属性的特性：
属性必须要声明在标签的开始标签的<>内，不能独立存在
一个标签可以声明多个属性，属性与属性之间必须使用空格隔开。
属性的值可以使用双引号或单引号隔开。
3.3注释：
特性：不会被浏览器解析的信息。
作用： 为代码添加解释信息
注释暂时不需要执行的代码。
3.4空格和换行：
换行：<br/>
空格：
英文空格： ；
中文空格： 
3.5各种标签
<br/>：自闭换行符
<h1>： 标题标签 独占一行 共6级标签
<ul> ： 声明范围内是无序列表unorder list 独占一行
<ol> ： 声明范围内是有序列表order list 独占一行
<li>： 与<ul> <ol>搭配使用 每个标签代表一行
<img src="图片路径" width="600px" height="400px " />：
图片标签，可以设置成自闭标签
<a>:跳转到其它网页或在同一网页的其它部分:
<a href="http://www.baidu.com" target="_blank"> 百度一下 </a>：
超链接标签 a 属性名=属性值 属性名固定为href（点击） 属性值为链接目标路径 target="_blank" 跳转目标为新窗口，文字可替换为图片等其他。
<a name="top">我是顶部</a> <a href="#top">我是顶部</a>：
锚定，回到顶部 一对a name角标和一对a href角标构成
< input type=" ">:
双引号内属性值代表 框的特性,可以有
登录按钮：
<input type="button" value="保存" /><br />
登录按钮：
<button> 登录</button><br /> <!-- button只是个按钮没有提交功能，提交功能需要用submit-->
提交按钮：
<input type="submit" value="注册" /><br /> <!-- 默认框名为提交 ，通过value="注册" 覆盖默认名-->
提交按钮：
<button type="submit" /> 提交</button>
选择框：
<input type="checkbox" />
选择颜色框：
<input type="color" />
年月日框：
<input type="date" value=""/>
输入时间框：
<input type="datetime" value=""/>
选择本地时间框：
<input type="datetime-local"/>
邮箱：
<input type="email" />
传文件：
<input type="file" />
隐藏框：
<input type="hidden" />
图片框：
<input type="image" />
选择到月：
<input type="month" />
输入数字的框：
<input type="number" />
输入密码的框：
<input type="password" />
单选框：
<input type="radio" />：<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
各个单选框中name属性值一样才能进行单选。
进度条：
<input type="range" />
重置框：
<input type="reset" />
查找框：
<input type="search" />
输入电话框：
<input type="tel" />
文本框：
<input type="text" />
选择时间框（小时：分钟）：
<input type="time" />
链接框：
<input type="url" value="http://tv.cctv.com/cctv3" />
选择第几周框：
<input type="week" />
<table >：
表格标签一对table为一个表格,格式为
<table>
<th> 表头名</th>
<tr>
<td align="center">： align属性代表位置 可选择居中
<textarea>请输入描述信息 </textarea>：一对<textarea>为文本域，域可手动调整大小
<select>：获取标签，与<option>搭配使用，<option>内为下拉菜单内容
<option>--请选择--</option>
<option>--北京--</option>
<option>--上海--</option>
<option>--广州--</option>
</select>
</td>
</tr>
</table>
一对tr为一行，一对td为一列 一对th为一列表头，角标内可以设置属性border="2px" 边框等于2像素 width="800px" 宽800像素 bgcolor背景色 bordercolor边框色 cellspacing="1px" 单元格间距。
在行列角标内设置： rowspan 合并行 colspan 合并列
<form>：
带form标签的可以提交数据给java处理，
要使用submit作为提交按钮，
提交的数据要使用name指定的变量接收值。
<iframe>标签:
作用：实现画中画功能
重要属性：src:url
用于指定嵌套在该标签内部的网页的url.
<div>:
块级元素，各个标签内容独占一行，包裹大量文字， 行间距小
<p>:
块级元素，各个标签内容独占一行，包裹大量文字，代表段落，行间距比<div>更大
<span>:
行级元素，各个标签内容在一行，包裹大量文字
<audio controls =”contrlis”> : 向网页中添加音频
controls属性：添加控件。
<source src=”音频链接”>
</source>
</audio>
<video controls =”contrlis”>:向网页中添加视频
controls属性：添加控件。
<source src=”视频链接”>
</source>
</video>
3.6 html标签分类
3.6.1块级标签：
表现形式：标签独占一行，可指定宽、高。
特性：能够识别宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起，默认排列方式为从上至下
可以使用margin:0 auto居中对齐
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
3.6.2内联(行级)标签：
表现形式：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
特性：无法设置宽高
margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。
不会自动换行
常用的内联元素有：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3.6.3内联块状标签（inline-block）：
表现形式：就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
特性：
不会自动换行
能够设置宽高
默认排列方式为从左到右
以使用text-align:center使内容相对于父盒子水平居中对齐，例如img标签，可以使用text-align:center，相对父盒子居中对齐、margin:0 auto无效
水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。
常用的内联块状元素有：<img>、<input>
HTML标签类型是可以转换的：
display:inline;转换为行内元素
display:linline-block;转换为行内块元素
display:block;转换为块级元素
3.7<form>提交数据的两种方式：get、post
get:被拼接在地址栏，方便看，但不安全，且最多2000个字符。
post：不方便看，但是安全
method属性:用来指定数据的提交方式，默认是get
method修改：<form method=”post”>
action 属性:用来指定数据提交给哪个程序。
action修改：<form action =”目标程序ip地址+端口号+ Mapping()中的规则>
4. 前端学习网站：
www.w3school.com.cn、www.runoob.com
5.创建网页的思路
5.1 构思页面
5.1.1 页面布局
登录/注册
用户界面
详情页面
后台页面
二 网页技术CSS技术
1.什么是CSS
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
2.为什么使用CSS:
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高CSS代码的复用性,更改html属性时直接调用CSS即可。
3.怎么用
3.1 语法：
3.1.1 css代码位置：
- 行内用法： <标签名 style="Css代码"> 只作用于本标签
- 内部用法：可置于<head> 或<body>中
<style>
/*CSS全局语法1：标签选择器*/
div{ text-align: center; } 选中所有div添加属性
h1{ text-align: center; } 选中所有h1添加属性
/* CSS全局语法2：class选择器*/
p角标中标记class属性：
<p class=”a”>
.a{ text-align: center; }选中所有class=”a” 值添加属性
p角标中标记class属性：
<p class=”a b”>
.b{ text-align: center; } 选中所有class=”b”值添加属性
/*CSS全局语法3：ID选择器*/
根据ID属性的值选中元素，要求ID的值不能相同，优先级最高，效率最高。
步骤：给元素添加ID属性然后在<style>中通过#值设属性。
#a{ text-align: center; } 选中所有id=”a” 值添加属性
/*CSS全局语法4：分组选择器*/
.a，.b,#a { text-align: center; }
/*CSS全局语法5：属性选择器*/
标签名[ 属性名 ]{ font-size: 30px; }
标签名[属性条件]{ font-size: 30px;background-color: aqua; opacity: 0.1; } 设置透明度为0.1
标签名[属性条件]:hover{ font-size: 30px;background-color: aqua; opacity: 1; } 设置鼠标放置后透明度为1
</style>
- 外部用法 ：把CSS代码和html代码分离，在Html中引入CSS文件，引入样式：
<head>
<link rel="stylesheet" href="小票.css"/>
</head>
class属性：<p class=”a b c”>
3.1.2要求： css代码不可出现中文
3.1.3选择器：标签名
{属性名1：属性值1：;属性名2：属性值2：....}
4.盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
4.1margin（外边距）
盒子间的距离，可以设置上下左右边距
<input type="text" style="margin-left: 105px;"/> 设置左边距为105像素
4.2 border（边框）
盒子的边框，可以设置宽度，颜色，样式
4.3 padding（内边距）
盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下
4.4 内容
可以设置 width 和 height
三．网页技术JavaScript
1. JS概述
1.1什么是JS：动态网页
JS是一门 基于对象和事件驱动的 脚本语言，通常用来提高网页与用户的交互性。
1.1.1JavaScript 是 web 前端开发者必学的三种语言之一：
HTML 定义网页的内容 H5
CSS 规定网页的布局 CSS3
JavaScript 实现网站的交互 ES6
1.1.2来历
因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。实际上Java和JavaScript根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。
1.1.3现状
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。
1.2 名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
1.3 特点和优势
1.3.1特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
(3) JS跟java一样严格区分大小写
1.3.2优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
2.怎么用
2.1位置
与CSS一样有行内、内部、外部，CSS通过<style>设置属性，JS通过<script>编制函数
行内时通过onclick等调用预编译或自编译的函数。
<script>
function 方法名(参数){ 方法体 } //JS自编译方法结构
</script>
2.2基本数据类型
2.2.1 数据类型：
number：number类型可以直接赋值不需要像JAVA指定short,int,long一样指定number
string：双引号，单引号引起来的都是string类型
boolean：ture,false
null: 意思是无值
undefined: 意思是未声明的
2.2.2运算符
算术运算符: +，-，*，/，%，++，–
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=, =，!, > ，< ，>=，<=，===（比较值和类型）
位运算符: & ， |
逻辑运算符: &&，||
前置逻辑运算符: ! (not)
三元运算符: a?b :c
2.3变量
2.3.1变量必须以字母开头。
2.3.2变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）。
2.3.3变量名称对大小写敏感（y 和 Y 是不同的变量）。
2.2.4声明变量关键字
var:可以声明任何数据，且没有作用域，原因是底层做了提升，声明后自动提升到顶层
方法内，出了方法不可用。
let:区别于var。let是有作用域的，出了声明的代码块就不可用
const:与final类似声明常量
2.4数组
1、var arr1 = new Array();//声明一个空数组
2、var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
alert(arr2.length);//3
3、var arr4 = [];//声明一个空数组
alert(arr4.length);//0
arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
alert(arr4);
(1) JS数组中可以存放任意的数据类型
(2) JS中的数组长度随时可以被改变
2.5函数
document.write("<h1>这是一个标题</h1>"); //直接输出字符流到网页，提示尽量不要用
console.log(typeof a+b); //console.log()输出到网页控制台 ,typeof判断后面是什么类型
var n=prompt('请输入分数'); //获取网页弹窗输入的内容，且内容都是字符串类型。
document.write() //动态向页面写入内容
document.getElementById(id) //获得指定id值的元素
document.getElementsByName(name) //获得指定Name值的元素
var n=document.getElementById('n1').value*1; // 搜索n1，因为从<input id=’n1’> 中获取的值是String类型，所以需要强转为数字，方法1:(number)value 方法2:value*1
οnclick="num()"//通过onclick(点击) 获取num()
alert( ‘1’ ) // 弹窗输出1
οnmοuseenter="alert('来了')"//通过鼠标滑入 获取 弹窗alert(‘来了’)
2.6自定义函数
2.6.1 作用：具有功能的代码块, 可以反复调用
2.6.2声明关键词 function：
定义函数方式一：function 函数名称([参数列表]){ 函数体 }
定义函数方式二：var函数名称=new function([参数列表]){ 函数体 }
定义函数方式三：匿名函数（自调用）：function( 参数 ){ 函数体 }
调用方式：（function(name,addr){statement})("刘德华","中国香港");
定义函数方式四：Lambda表达式：(参数)=>{函数体}
$(()=>{
$("#sidebar-menu").on("click","#menuPerson,#menuAdmini",changeIcon)
let elem = document.getElementById("menuAdmini");
$("#sidebar-menu").data("elem", elem);
$("#loadInfo").click(loadEmpInfo)
$("#contentMain").html("<div style='text-align: center'><h2>公司介绍</h2></div>")
})
2.7调用:
调用内部：函数名称([参数列表]);
调用外部js： <script src="测试json.js"></script>
2.8内置对象
window.document网页文本框：
-获取对象: window.document
--调用方法:
getElementById("元素的id的属性的值")--返回1个元素
getElementsByName("元素的name属性的值")--返回多个元素(标签名)(用数组)
getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式 或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素(网页)的内容
innerText--设置或返回元素(网页)的内容
window.alert('100'); //弹出框
window.confirm('确认框'); //确认框
window.prompt('输入框'); //输入框
2.9自定义对象
(1)方式一：
声明对象：function Person(){}
创建对象：var p1 = new Person();
设置属性：p1.name = "张飞"; p1.age = 18;
设置方法(与第二种定义函数一样)：p1.run = function(){ alert(this.name+" : "+this.age); }
访问p1对象：
( 2)方式二:
创建对象同时声明了对象，可以同时设置属性和方法，属性方法间用逗号隔开。调用同方法一相同。
var p2 ={
“pname” ： "赵云"，
“page” ：19，
“psay”：function( ){ console.log ( this.pname+this.page ) }
}
2.10 DOM
通过js操作DOM对象实现对html页面的操作.
DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。
window.document网页文本框对象
2.11 JSON
存储和交换文本信息的语法,将JS、JSON 相互转换，本质上就是一个字符串。
给服务器（后端）发送数据: JS对象=> JSON字符串 JSON.stringify( Js对象)
接受服务器（后端）的数据: JSON字符串=>JS对象 JSON.parse("json字符串")
四．网页技术Vue 框架
1. 概念
Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建，封装了JS的功能，提供了一套由适用于JS开发的API，需要遵守JS的语法。
渐进式：
就是我们可以由浅入深，由简单到复杂的方式使用vue.js进行开发。比如：我们可以在html文档中引入vue.js完成简单的前端页面的开发。同时，还可以使用vue.js特有的单文件组件和路由等复杂功能，实现当下流行的单页富应用的前端项目。
可以只使用核心vue.js
可以只使用核心vue.js + components组件
可以只使用核心vue.js + components组件 + router路由
可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）
2. MVVM框架
2.1 解释：
将vue自有或通过特有机制获取的数据，通过vue特有机制传递给页面展示。
M：数据层，代表大数据
V：视图层
VM：提供渲染，不用再手动刷新渲染,通过虚拟DOM把后台内存数据实时传给页面
3.怎么用
3.1 调用：
方式一：引入本地下载好的vue.js文件
vue.js粘贴至目录下，vue框架本身是由js语言编写而成，所以引入方式为JS语言引入方式： <script src="vue.js"></script>
方式二：从cdn上加载vue.js
不需要预先下载拷贝vue.js文档，但是运行效率差
3.2 vue入门案例
3.3基础语法
3.3.1 viewModel 对象区
el（element）： 可以是单一id属性“#app” 可以是多个class属性“.app”
data：方式一：data : 数据区对象名
方式二：data:{ 数据区对象名，
数据属性名1：属性值 ，
数据属性名1：属性值 ，
对象名：{
数据属性名3：属性值 ，
数据属性名4：属性值 ，
}}
方式三：data(){ return{数据属性名：属性值} }
3.3.2 Model数据区（可直接在对象区声明数据）
a : { 数据 }
3.3.3 view展示区
通过插值表达式将数据展现在页面
3.3.1运算符 operator
<p> 加法:{{2+3}} </p>
<p> 减法:{{2-3}} </p>
<p> 乘法:{{2*3}} </p>
<p> 除法:{{3/2}} </p>
<p> 取余:{{10%2}} </p>
<p> 三元表达式: {{age>10?'yes':'no'}}</p>
字符串操作: <p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}} </p>
3.4高级用法：v-命令
3.4.1 v-model :
双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。
3.4.2 v-on:
某种操作触发事件，可缩写为@
3.4.3 v-if:
将根据表达式的值( true 或 false )来决定是否插入 p 元素，满足条件加载，不满足不加载，逻辑同JAVA
3.4.4 v-show
将根据表达式的值( true 或 false )来决定是否插入 p 元素，无论满不满足都加载，只是如果不满足条件则被隐藏不运行。
3.4.5 v-for:
循环语句，遍历数组，V-for : “数据 in 数组”，或V-for : “数据,下标 in 数组”
3.4.6 v-cloak:
使用css隐藏插值表达式,加v-cloak属性的标签内的插值表达式都将被隐藏，v-cloak 在 CSS中设置为。
<styal>
[v-cloak]{
display: none;
}
</styal>
3.4.7 v-bind:
属性的值是变量而不是字符串时，通过v-bind进行标识，如 : href 冒号开头(省略了v-bind)就说明后面跟的href是变量。
3.5 Vue组件
3.5.1概述
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
可创建一个页面。
3.5.2 使用
注册一个全局组件(所有实例都能用)：Vue.component(组件或标签名, 配置选项)
<script>
Vue.component( 组件名, { template: 配置的选项(组件要展示的功能或内容) }) </script>
注册一个局部组件(只能本new Vue实例范围能用，一个对象可创建多个组件)：
new Vue({
el:'#app',
components:{
starter1:{ //组件名1
template:'组件要展示的功能或内容 '
}
starter2:{ //组件名2
template:'组件要展示的功能或内容 '
}
}
})
调用组件：<组件名> </组件名>
3.6 Vue的Ajax—>AXIOS
3.6.1 原有AJAX概述
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
3.6.2原有AJAX原理
1、AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
2、ajax 根据http和https协议将js对象转成json串传给后端。
3.后端发送json串使用 对象可以转化为json串@responseBody
后端接收json串使用 json串可以转为对象@requestBody
4. ajax的contentType：默认为application/x-www-form-urlencoded,这时发送post/put请求时，不需要使用@RequestBody注解描述形参
5. axios的contentType: 默认为application/json，因此必须使用@RequestBody注解描述形参。
3.6.3 AXIOS
1、Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2、使用步骤: 要使用一个单独的js文件,注意导入顺序
先导入 <script src="vue.js"></script>
再导入 <script src="axios.min.js"></script> 无min的为完整版。
使用后端程序资源（查询：get方法）最好把@requstmapping换成@getmapping
1. get简单使用：
axios.get("资源的url ","参数信息").then(res=>{console.log(res.data);})
本处res为get到的数据为其命的名，=> 后面对数据进行操作。
2.根据ID动态查询：id需要拼接到url后面
let id=1
let url2="http://localhost:8080/findUserById?id="+id
axios.get(url2).then(function(promise){console.log(promise.data)})
3.传递的参数是个对象(多参数查询) delete请求与之一致
let user3 ={age:18,sex:"女"} //封装对象，要传的参数
let url3="http://localhost:8080/findUserByAS" //url地址
axios.get ( url3 , { params:user3 } )
.then(function(promise){console.log(promise.data)})
4. 传递的参数是个对象
http协议是支持GET请求是带请求体的，后端也是可以接受GET请求中的请求体，但是web浏览器会限制GET请求不携带请求体。
2、 post简单使用：
发送资源给后端（新增：post方法）：后端接受参数使用注解@postmapping
post传递的参数是个对象(多参数查询) put请求与之一致
let user3 ={age:18,sex:"女"} //封装对象，要传的参数
let url3="http://localhost:8080/findUserByAS" //url地址
axios.get ( url3 , user3 ) 不用{ params: }
.then(function(promise){console.log(promise.data)})
3、delete简单使用：
发送资源给后端（删除：delete方法）：后端接受参数使用注解@deletemapping
4、put简单使用：
发送资源给后端（更新改：put方法）：后端接受参数使用注解@putmapping
5、map参数
后端接受map参数前端需要用put请求，后端使用put接收
public Result testget(@RequestBody Map map) { }
SprinMVC接收参数
@RestController @RequestMapping
3.6.4 AXIOS作用
axios作用发起请求(form请求有11种，常用4种，post\delete\put\ get
对应增删改查)，接受请求
请求：
1.常规方式：/user?key=value,key2=value2
2.post/put方式: data: js对象 后端使用@ RequestBody接收
3.restful风格：/url/arg1/arg2使用对象接受，每个参数，接收加 @PathVariable
3.6.5 跨域问题
浏览器解析ajax时，要求浏览器的网址，与ajax请求的网址必须满足三要素，如果有一项不满足则为跨域访问
1.协议相同
2.域名相同
3.端口号相同：http协议默认80，https协议默认443，所以不写也满足端口号相同
3.6.6跨域问题解决：
第一种：前端使用vue框架时修改vue.config.js配置文件信息：是对vue本身的配置
module.exports = {
lintOnSave: false,
devServer: {
proxy: {
'/api': { //*通过本url代理
target: 'http://127.0.0.1:8010', // 后端的地址
ws: true, / / webSocket协议:本协议常用于聊天工具
changeOrigin: true, // 允许跨域请求
pathRewrite: { // 路径重写
'^/api': '/'
}
}
}
}
}
第二种：后端加注解
在Controller类上加上@CrossOrigin
3.7 Vue路由router
接受浏览器的请求，根据不同的请求的方式找到匹配的组件（网页），页面跳转。
3.7.1 路由功能导入
<script src=" vue-router.js"></script>
3.7.2路由功能创建过程
//1,定义组件
let home = { template:"<h3>这是主页</h3>" }
let help = { template:"<h3>这是帮助页</h3>" }
//2,创建路由的实例VueRouter, routes指定每个路由映射的一个组件
let router =new VueRouter({ routes: [
{path:"/home 链接路径",component: 组件名home},
{path:"/help链接路径",component: 组件名help}
] })
//3,通过router注入路由,从而让整个应用都有路由功能
new Vue({ el:"#app" ,
// router:router 健值相同可简写为router
router })
3.7.3 路由功能使用
<div id="app">
<!-- 将被解析成a标签,还有href属性 -->
<router-link to="/home">主页</router-link>
<router-link to="/help">帮助页</router-link>
<!-- 路由出口,匹配成功后,在这里展示 -->
<router-view></router-view>
</div>
3.7.4 路由三要素
路由配置：路由的创建过程
目标组件：路由要跳转的页面
路由出口：<router-view></router-view>展示的位置
3.7.5 http 请求三要素
请求方式：有11种，常用4种，get\post\put\delete
请求的url：统一资源定位器，它是WWW的统一资源定位标志，就是指网络地址。
请求时携带的参数：
4. Vue的生命周期
页面创建时，页面加载时，页面更新时，页面销毁时四个过程，每个过程都会触发一些方法（生命周期钩子函数/组件钩子）共8个，初始化4个（创建前后，加载前后各两个），运行（更新）前后两个，销毁前后两个。
五．nodejs
是一种javascript的运行环境，能够使得javascript脱离浏览器运行。
1. npm
1.1概念：
npm（node package manager）：nodejs的包管理器，Nodejs中包含了npm，用于node插件管理（包括安装、卸载、管理依赖等）。
它是世界上最大的软件注册表，包含超过 600000 个 包（package） （即，代码模块）。
官网：
https://docs.npmjs.com/about-npm 英文官网
https://www.npmjs.cn/ 中文官网
修改npm的镜像(下载的快，下载各种包的路径) :
npm config set registry https://registry.npm.taobao.org
2 webpack 概念
前端自动化构建工具，它基于nodejs实现，可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
3. vue-cli脚手架
3.1概念
vue-cli就是Vue的脚手架工具既vue的客户端，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。
它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成（vue+webpack）的项目模板，vue-cli和webpack是什么关系：vue-cli 里面包含了初始化webpack， 配置webpack打包规则的方法。
3.2脚手架2.0怎么用
3.2.1下载安装脚手架
npm install vue-cli –g //需要安装完npm
3.2.2 创建vue工作空间
D:\workspace\vue
3.2.3生成vue项目
1.下载基于vue.js的官方webpack模板：D:\workspace\vue>vue init webpack jt01
2.配置项目文件：
3.2.4 启动项目 & 停止项目
cd jt01 //# 进入项目目录
npm run dev // # 自动启动服务，ctrl+c 停止,可能要等几分钟
3.2.5测试访问
注意：端口号可能不同，默认为8080，如果发现端口占用npm很聪明，它会自动改变端口号，以其具体提示的端口信息为准。
3.2.6 HBuilderX管理Vue项目
可以在HbuilderX中打开Vue项目
组件需要引入到APP.VUE中注册才能正常使用，或将APP.vue交给main.js管理，main.js中import。
vue-cli 脚手架有现成模板
3.3.脚手架Vue CLI v4.5.14怎么用
3.3.1安装
npm i @vue/cli –g --force
3.3.2配置
安装完成后使用可视化页面配置vue-cli脚手架v4.5.14，默认端口号为8000
创建新项目
在工作空间下创建新项目>给新项目命名>预设最好选择手动>功能：补充点选router和使用配置文件>配置：pick a linter/formatter config 选择eslint+standard config 标准配置
配置>eslint configuration>保存时检查最好关闭否则频繁报错
插件>安装element-ui的1.0.1版本最好
依赖>安装axios的0.23.0版本
查看vue项目：
导入和操作旧版本项目需要把旧版本项目放到新版本工作空间下，但是不能展现完整内容
3.3.3与vue-cli脚手架2.0区别
1、2.0版本依赖于dos窗口使用dos命令安装和配置第三方插件，Vue CLI v4.5.14只需要在可视化界面安装即可。
2、2.0通过vue init webpack jt01创建结构完整的项目，3.0通过可视化界面创建项目
3、3.0以上版本比2.0版本项目结构中多了plugins（存放各种插件代码）和views（可存放各种以vue命名的template自定义组件，主要是用户要访问的页面）文件夹，而2.0版本只存放在node_modules文件夹和components中。
3.4 vue中蕴含的webpack打包的项目结构
view 就是用户要访问的页面都存放在这个目录下，如Index.vue
static中保存一些静态的资源，如jquery、css、图片等
src 目录是一个很大的目录，包罗万象
components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vue
router 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。Router非常强大，老系统是url改变是在服务端进行刷新，而router支持在客户端刷新，就是url变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。此处不好理解，后期专门章节论述，不必心急，先记录下这个特点
重要文件说明：
Vue项目这么多文件，它们什么关系？写代码该从哪里下手呢？
常见操作: 1, 在components里写自定义组件 2, 在App.vue里注册自定义组件 3, 在main.js里引入第三方js
index.html 首页，Vue是SPA单页面开发，页面入口，定义了一个div,并设置id=app
src/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
components：1、 创建自定义组件的文件夹，结构是：
<template> <div></div></template> //HTML代码区，只能有一个div区
<script> export default { name:”与本vue文件名保持一致”
data(){return{}}//data区必须return}</script>// 提供一个支持导出的组件
<script></script> //写css的代码
App.vue：2、把自定义组件,引入到这个文件里
在<script> 导入区使用import export default{ component:{名与导入名一致}}
<template> <div> 此处使用component 中名标签</div></template>
main.js：3、引入elementui或ant design需要修改main.js 引入方式：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4. 第三方插件的配置文件丢失：
如果没有node_modules library root（所有第三方插件的配置文件），可以在项目根目录下运行cmd然后使用npm install 安装所有需要的插件，前提是项目中还存在package.json和package—lock.json
六element-ui
- 是什么：
饿了么团队基于js开发的UI 设计语言，现已无人维护
2.vue-cli2.0版本中怎么用：
2.1安装（哪个工程就在哪个工程下下载安装）
访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南
在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui –D // # 下载element资料,这可能要等几分钟
2.2修改 main.js,引入Element
你可以引入整个 Element，或是根据需要仅引入部分组件。
完整引入：
import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css'; //导入element的css
Vue.use(ElementUI);//使用element
2.3使用特点
element-ui中引入的标签名大多为el开头
<el-row>：行
<el-col>:列，默认24列
<el-col :span="8" >: 合并8列
2.4 自定义列模板
<el-table-column> 中插入template标签
<template slot-scope="scope"> 命名作用域插槽名
{{ scope .row.type ==A ? B : C }} 利用作用域插槽插入数据
</template>
</el-table-column>
2.5 点击某按钮，跳转到画中画页面
<el-dialog :visible.sync="addItemCatDialogVisible = false " > //会话框开关
2.6 点击新增按钮，跳转到新增页面
3.同类产品ant design
蚂蚁金服基于js开发的一套企业级 UI 设计语言和 React 组件库
浏览器向服务器发起请求：
get方法：
网页地址栏直接输入：
<a href="http://localhost:8080/order/save/10/100/phone">练习3</a>
表单<form method=”get” > ：
<form action =”目标程序ip地址+端口号+ Mapping()中的规则>
post方法
put 方法
delete 方法
七．用户列表案例：
1.实现用户列表展现
1.1需求1：
用户访问页面（初始化）的时候，就要求访问后台服务器，发起ajax请求，实现用户列表页面的渲染。
beforecreate、created、beforemout、mouted四个初始化结束，在此之前的函数都可用。
mounted() {
/* 页面初始化完成之后mounted立刻调用findUserList()方法 */
this.findUserList() }
1.1需求2：用户新增（有input标签就要考虑双向绑定）
扫一扫
5483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
