JavaWeb学习笔记

学习路线

Web开发–介绍（画大饼）

什么是Web？
Web：全球广域网，也成为万维网，能通过浏览器访问的网站

Web网站的工作流程

网站大致是由三个部分组成的
第一部分就是我们能看到的网页程序，也叫做前端程序
主要负责将数据以好看的样式呈现出来
前端程序是运行在前端服务器当中的

第二个部分是数据库程序
数据是在数据库程序当中存储和管理的，也就是数据库服务器

第三个部分就是后端（咱写的爪洼程序）
后端Java程序是运行在后端服务器中的
这个后端程序主要负责数据的逻辑处理

初识web前端

网页有哪些部分组成呢？
文字，图片，音频，视频，超链接…

我们看到的网页，背后的本质是什么？
程序猿写的前端代码

前端的代码是如何转换成用户眼中的网页的？
通过浏览器转化（解析和渲染）成用户看到的网页
浏览器中对代码进行解析渲染的部分，称为浏览器内核
不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异。

web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium ，万维网联盟）负责指定。
三个部分组成
HTML：负责网页的结构（网页元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
JavaScript：负责网页的行为（交互效果）

HTML

HTML：超文本标记语言

what is 超文本？
超越了文本的限制，比普通的文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

how to understand 标记语言？
由标签构成的语言

HTML标签都是预定义好的。例如：使用展示超链接，使用展示图片，展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS：层叠样式表，用于控制页面的样式（表现）。

W3school：W3school官方文档查询
里面有些流氓小广告，但无伤大雅

html奇奇怪怪的小特点
1、HTML标签不区分大小写
2、HTML标签属性值单双引号都可以
3、HTML语法松散（但还是严谨一点比较好）

VS Code

Visual Studio Code（简称 VS Code）是Microsoft于2015年4月发布的一款代码编辑器
VS Code对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）
VS Code提供非常强大的插件库，大大提高了开发效率

注意事项：
作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

html相关笔记详情可见：
1、Web前端笔记记录
2、web前端笔记（2）
3、Web前端笔记（三）
4、Web前端笔记记录（四）

JavaScript

闲聊部分：

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互
JavaScript和Java是完全不同的语言，不论是概念还是设计。到那时基础语法类似。
JavaScript在1995由Brendan Eich发明，并在1997年成为ECMA标准
ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）。

ECMA：ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。

js引入方式

第一种方式：内部脚本，将js代码定义在HTML页面中

JavaScript代码必须位于标签之中
在HTML文档中，可以在任意地方，放置任意数量的不能不写）

<script src="js/demo.js">script>

//在外部js文件中
alert("Hello JavaScript")

书写语法

• 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
• 每行结尾的分号可有可无（但是最好还是有，没有是因为它会自动给你加上，当然你肉眼看不见，是他在编译的时候加的）
• 注释：//和/**/（和c++一样）
• 大括号表示代码块

输出语句：

• window.alert()警告框
• document.write()HTML输出
• console.log控制台输出（有很多网站的控制台输出的地方会有招人的信息）

<script>
	window.alert("Hello JavaScript");//浏览器弹出警告框
	
	document.write("Hello JavaScript");//写入HTML，在浏览器展示
	
	console.log("Hello JavaScript");//写入浏览器控制台
scropt>

变量

• JavaScript中用var关键字（variable的缩写）来声明变量。
• JavaScript是一门弱类型语言，变量可以存放不同类型的值。
• 变量名需要遵循的规则：由字母，数字，特殊符号组成；不能以数字开头；建议使用驼峰命名（在js取名字是件很苦恼的事情）

奇怪的js变量：

• js变量没有全局和局部变量之分，都是全局变量。
• 可以重复定义，后定义覆盖（正常逻辑）

ES6新增了let关键字来定义变量，它的用法类似于var，但是锁声明的变量，只在let关键字所在的代码块内有效（像其他编程语言起来了，简称正常起来了），且不允许重复声明。
ES6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不允许改变。（参照c++）

数据类型

很奇怪的玩意，明明不区分，但是还是有的，就像有嘴巴但是不用嘴巴吃饭一样

JavaScript中分为原始类型和引用类型

• number：数字（整数、小数、NaN（指的是这玩意不是一个数，但是它是一个数））
• string：字符串，单双引号都可以
• boolean：布尔逻辑。t，f
• null：空对象，是空的对象不是对象是空
• undefined：当声明的变量未初始化时，该变量的默认值是undefined，未定义

虽然有嘴巴但是不用嘴巴吃饭，但是还是给了辨别是不是嘴巴的方法;

• typeof,可以获取数据类型

运算符

• 算数运算符：+，-，*，/，%，++，–
• 赋值运算符：=，+=，-=，*=，/=。%=
• 比较运算符：>，<，>=，<=，！=，==，===
• 逻辑运算符：&&，||，！
• 三元运算符：条件表达式？true_value：false_value

==会进行类型转换（隐式类型转换），然后比较大小
===不会类型转换，直接比较类型和大小

about类型转换

• 字符串类型转为数字：如果字面值不是数字，就转为NaN
• Number转布尔：0和NaN为false，其他都为true
• 字符串转布尔：空字符串为false，其他均为true
• Null和undefined：均转为false

流程控制

• if…else if … else …
• switch
• for
• while
• do … while

js函数

函数是被设计为执行特定任务的代码块

function fun(参数1,参数2,...){
	//要执行的代码
}
//或者
var fun = function(参数1,参数2,...){
	//要执行的代码
}

• 形式参数不需要类型。因为js是弱类型语言
• 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
• 函数调用可以传递任意个数的参数。

Array数组

顾名思义数组使用来定义数组的

//定义
var 变量名 = new Array(元素列表)
var 变量名 = [元素列表];
//访问
arr[索引] = 值;

奇怪的数组

• 这里的数组相当于java的集合，数组的长度是可变的，而js是弱类型，里面可以存储任意类型的数据。

about数组

• length：设置或返回数组中元素的数量。
• forEach（）：遍历数组中的每个有值的元素，并调用一次传入的函数
• push（）：将新元素添加到数组的末尾，并返回新的长度。
• splice（）：从数组中删除元素。

箭头函数（ES6）：是用来简化函数定义语法的。具体格式为：( ... ) => { ... }，如果需要给箭头函数起名字：var xxx = ( ... ) => { ... }

String

//定义字符串对象
var 变量名 = new String("...");
var 变量名 = "...";

about字符串

• length：字符串的长度
• charAt（）：返回在指定位置的字符。
• indexOf（）：检索字符串。
• trim（）：去除字符串两边的空格
• substring（）：提取字符串两个指定的索引号之间的字符。

JSON

//定义格式
var 对象名 = {
	属性名1:属性值1,
	属性名2:属性值2,
	...
	函数名称:function(形参列表){}
};
//调用格式
对象名.属性名;
对象名.函数名();

闲聊时见到
JSON概念：JavaScript Object Notation，JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络张总进行数据传输

JSON语法定义

var 变量名 = '{"key1" : value1, "key2":value2}';

value的数据类型为

• 数字（整数或者浮点数）
• 字符串（在双引号中）
• 逻辑值（true或false）
• 数组（在方括号）
• 对象（在花括号中）
• null

JSON字符串转为JS对象

var jsobject = JSON,parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsobject);

BOM

BOM：Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分分装为对象。

• Window：浏览器窗口对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象

Window

浏览器窗口对象
直接使用window，其中window.可以忽略

• history：对History对象的只读引用。
• location：用于窗口或框架的Location对象
• navigator：对Navigator对象的只读引用
• alert（）：显示嗲有一段消息和一个确认按钮的警告框。
• comfirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框
• setInterval（）：按照指定的周期（以毫秒计）来调用函数或计算表达式。
• setTimeout（）：在指定的毫秒数后调用或计算表达式。

Location

地址栏对象

使用window.location获取，其中的window.可以省略
window.location.属性；,location.属性；

• herf：设置或返回完整的URL

DOM

概念：Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

• 改变HTML元素的内容
• 改变HTML元素的样式
• 对HTML DOM事件作出反应
• 添加和删除HTML元素

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
1、Core DOM - 所有文档类型的标准模型

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象
  2、XML DOM - XML 文档的标准模型
  3、HTML DOM - HTML 文档的标准模型
• Image：
• Button：

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
Document对象中提供了一下获取Element元素对象的函数：
1、根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

2、根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

3、根据name属性值获取，返回Element对象数组

var hobbys = document.getElementByName('hobby');

4、根据class属性值获取，返回Element对象数组

var clss = document.getElementByClassName('cls');

事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

• 按钮被点击
• 鼠标移动到元素上
• 按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

1、通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
	function on(){
		alert('我被点击了!');
	}
</script>

2、通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
	document.getElementById( ' btn ' ).onclick=function(){
		alert('我被点击了!');
	}
</script>

常见事件

• onclick：鼠标单击事件
• onblur：元素失去焦点
• onfocus：元素获得焦点
• onload：某个页面或图像被完成加载
• onsubmit：当表单提交时触发该事件
• onkeydown：某个键盘的键被按下
• onmouseover：鼠标被移到某元素之上
• onmouseout：鼠标从某元素移开

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点都放在数据上。
官网：官网

框架:是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

<script>
	new Vue({
	el: "#app",
	data: {
		message: "Hello Vue ! "
	}
})
</script>

编写视图

<div id="app">
	<input type="text" v-model="message">
	{{ message }}
</div>

常用指令

HTML标签上带有v-前缀二点特殊属性，不同指令具有不同含义。例如：v-if，v-for…

常用指令：

• v-bind：为HTML标签绑定属性值，如设置hLef , css样式等
• v-model：在表单元素上创建双向数据绑定
• v-on：为HTML标签绑定事件
• v-if
• v-else-if：条件性的渲染某元素，判定为true时渲染,否则不渲染
• v-else
• v-show：根据条件展示某元素，区别在于切换的是display属性的值
• v-for：列表渲染，遍历容器的元素或者对象的属性

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

• beforeCreate：创建前
• created：创建后
• beforeMount：挂载前
• mounted：挂载完成
• beforeUpdate：更新前
• updated：更新后
• beforeDestroy：销毁前
• destroyed：销毁后

new vue ( {
	el: "#app", // vue接管区域
	data : {
	
	},
	methods : {
	
	} ,
	mounted (){
		alert ( "vue挂载完成,发送请求到服务端")
	}
})

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

Ajax

Asynchronous JavaScript And XML，异步的JavaScript

作用：

• 数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据。
• 异步交互：可以不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

Axios

Axios对原生的Ajax进行了封装，简化书写，快速开发
官网：https://www.axios-http.cn/

1．引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2．使用Axios发送请求，并获取响应结果

axios({
	method: "get",	
	url: "http://yapi.smartxwork.cn/mock/169327/emp/list"
}).then((result)=>{
	console.log(result.data); 
});

axios(i
	method: "post",
	url: "http:/lyapi.smartxwork.cn/mock/169327/emp/deleteByld" ,
	data: "id=1"
}).then((result)=> {
	console.log(result.data);
});

请求方式别名

axios.get(url [, config])
axios.delete(url [, Eonfig])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]l)

• 发送GET请求

axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list").then((result)=>{
	console.log(result.data);
});

• 发送POST请求

axios.post("http://yapi.smartxwork.cn/mock/169327/emp/deleteByld" "id=1").then((result)=>{
	console.log(result.data);
});

YApi

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
http://yapi.smart-xwork.cn/

前端工程化

前端工程化是指在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。

环境准备

Vue-cil是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

Vue-cil的功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

依赖环境：NodeJS

vue目录结构

Vue的组件文件以.vue结尾，每个组件由三个部分组成: