Javaweb学习笔记（一）

---

---

第一章 web前端

一、组成部分

1、HTML：负责网页的结构(页面元素和内容)
2、CSS：负责网页的表现 (页面元素的外观、位置等页面样式，如:颜色、大小等)
3、JavaScript：负责网页的行为(交互效果)。

二、HTML超文本标记语言

1、表单标签
（1）表单标签：

<form>

（2）表单属性:
①action：表单提交的url，往何处提交数据 . 如果不指定，默认提交到当前页面
②method：表单单提交方式
get: 在url后面拼接表单数据，比如: ?username=Tom&age=12 ，url长度有限制 ·默认值
post: 在消息体(请求体) 中传递的，参数大小无限制的。

三、JavaScript

3.1 JS基本语法

1、书写语法
(1) 区分大小写：与Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
(2) 每行结尾的分号可有可无
2、JS引入方式
(1) 内部脚本：将JS代码定义在HTML页面中
① JavaScript代码必须位于< script >< /script >标签之间
② 在HTML文档中，可以在任意地方，放置任意数量的< script >
③ 一般会把脚本置于< body >元素的底部，可改善显示速度

<script>
	alert(“Hello JavaScript”)
</script>

(2) 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
① 外部JS文件中，只包含JS代码，不包含< script >标签
② < script >标签不能自闭合

<script src=“js/demo.js”></script>

3、数据类型
JavaScript数据类型分为原始类型和引用类型

4、类型转换
(1) 字符串类型转为数字：将字符串字面值转为数字。 如果字面值不是数字，则转为NaN。
(2) 其他类型转为boolean：
① Number:0和NaN为false，其他均转为true。
② String:空字符串为false，其他均转为true。
③ Null和 undefined:均为false
5、运算符

//==会进行类型转换，===不会进行类型转换
var a = 10
alert(a == "10"); //true
alert(a ==="10"); //false
alert(a === 10); //true

6、变量
(1) JavaScript 中用 var 关键字来声明变量。

var a = 20;
a = "张三 ";

(2) JavaScript 是一门弱类型语言，变量可以存放不同类型的值
(3) 变量名需要遵循如下规则
① 组成字符可以是任何字母、数字、下划线()或美元符号(S)
② 数字不能开头
③ 建议使用驼峰命名
(4) 变量的特点
① 作用域较大，是全局变量
② 可以重复定义
(5) ECMAScript 6 新增了let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
(6) ECMAScript6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

3.2 JS函数

1、定义：函数(方法)是被设计为执行特定任务的代码块
2、语法
(1) JavaScript是弱类型语言，所以形式参数不需要类型
(2) 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

//定义方式一
function functionName(参数1,参数2..){
	//要执行的代码
}
//定义方式二
val functionName = function(参数1,参数2..){
	//要执行的代码
}

3.3 JS对象

3.3.1 Array

1、定义：JavaScript中Array对象用于定义数组
2、语法

//定义方式一：var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3,4);
//定义方式二：var 变量名 = [元素列表];
var arr = [1,2,3,4];

3、特点：长度可变，类型可变
4、Array的常用方法

var arr = [1,2,3,4];
arr.forEach(function(e){
	console.log(e);
})
//ES6 箭头函数
arr.forEach((e) => {
	console.log(e);
})

3.3.2 String

1、语法

//定义方式一：var 变量名 = new String("...");
var str = new String("Hello String");
}
//定义方式二：var 变量名 = "...";
var str = "Hello String";
}

2、String的常用方法

3.3.2 JSON

1、定义：JSON是JavaScript对象标记法，通过javaScript 对象标记法书写的文本。
2、JavaScript自定义对象

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

3、JSON的作用：由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
4、语法
value的数据类型为：数字(整数或浮点数)、字符串(在双引号中)、逻辑值 (true 或false)、数组(在方括号中)、对象(在花括号中)和null。

//定义：var 变量名 = '{"key1":value1,"key2":value2}';
var useStr = '{"name":"Joey","age":18,"addr":["北京","西安"]}';
//JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
//JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);

3.3.3 BOM

1、定义：BOM浏览器对象模型，允许JavaScript与浏览器对话，javaScript将浏览器的各个组成部分封装为对象。
2、组成
(1) Window: 浏览器窗口对象
(2) Navigator:浏览器对象
(3) Screen:屏幕对象
(4) History:历史记录对象
(5) Location:地址栏对象
3、Window浏览器窗口对象
(1) 获取：直接使用window，其中 window.可以省略。

window.alert("Hello window");
alert("Hello window");

(2) 属性
history:对 History 对象的只读引用。
location:用于窗口或框架的 Location 对象。
navigator:对 Navigator 对象的只读引用。
(3) 方法
① alert(): 显示带有一段消息和一个确认按钮的警告框
② confirm():显示带有一段消息以及确认按钮和取消按钮的对话框，会返回结果
③ setlnterval():按照指定的周期 (以毫秒计)来调用函数或计算表达式
④ setTimeout(): 在指定的毫秒数后调用函数或计算表达式

//confirm()-对话框--确认：true,取消：false
var flag = confirm("您确认删除该记录吗？");
alert(flag);
//定时器:setlnterval-周期性的执行某一个函数
setlnterval(function(){
	i++;
	console.log("定时器执行了"+i);
},2000);
//定时器:setTimeout-延迟指定时间执行一次
setTimeout(function(){
	alert("JS");
},2000);

4、Location地址栏对象
(1) 获取：使用 window.location 获取，其中 window.可以省略。

window.location.属性;
location.属性;
location.href= "https://www.itcast.cn";

(2) 属性
href：设置或返回完整的UPL

3.3.4 DOM

1、定义：Document Object Model，文档对象模型。将标记语言的各个组成部分封装为对应的对象。
2、分类
(1) core DOM——所有文档类型的标准模型
① Document:整个文档对象
② Element:元素对象
③ Attribute: 属性对象
④ Text:文本对象
⑤ Comment:注释对象
(2) XML DOM-XML文档的标准模型
(3) HTML DOM-HTML文档的标准模型
① lmage: < img >
② Button : < input type=‘button’>
3、获取：HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
(1) 根据id属性值获取，返回单个元素对象

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

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

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

(3) 根据name名称获取，返回Element对象数组

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

(4) 根据class名称获取，返回Element对象数组

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

3.3.4 DOM

四、Vue

1、定义：Vue 是一套前端框架免除原生]avaScript中的DOM操作，简化书写。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
2、语法
(1) 新建HTML页面，引入Vue.js文件

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

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

<script>
	//插值表达性 形式:{{表达式}} 内容可以是变量、三元运算符、函数调用和算术运算
	new Vue({
		el:"#app",
		data:{
			message:"Hello Vue!"
		}
	})
</script>

(3) 编写视图

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

3、Vue常用指令
(1) 定义：HTML标签上带有 V- 前缀的特殊属性，不同指令具有不同含义
(2) 常用指令

<div id="app">
	//v-bind
	<a v-bind:href="url">传智教育</a>
	<a :href="url">传智教育</a> 
	//v-on 
	<input type="button" value="按钮" v-on:clink="handle()">
	<input type="button" value="按钮" @clink="handle()">
	//v-if
	年龄<input type="text" v-model="age">经判定，为:
	<span v-if="age<=35">年轻人</span>
	<span v-else-if="age>35&&age<60">中年人</span>
	<span v-else>老年人</span>
	//v-show
	<span v-show="age<=35">年轻人</span>
	//v-for:遍历addrs
	<div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
	<div v-for="addr in addrs">{{addr}}</div>
</div>

<script>
	new Vue({
		el:"#app",
		data:{
			href:"https://www.baidu.com"
			age:20
			addrs:["北京","上海","天津","杭州"]
		},
		//生命周期挂载完成提示
		mounted(){
			console.log("Vue挂载完成，发送请求获取数据");
		},
		methods:{
			handle:function(){
				alert("我被点击了");
			}
		},
	})
</script>

4、Vue生命周期
(1) 定义：生命周期 指一个对象从创建到销毁的整个过程。Vue生命周期有八个阶段: 每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

五、Axios

1、定义：Ajax是异步的JavaScript和XML。Axios对原生的Ajax进行封装，简化书写，快速开发。
2、Ajax的作用：
(1) 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
(2) 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。
3、语法
(1) 新建HTML页面，引入Axios的js文件

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

(2) 使用Axios发送请求，并获取响应结果。其中method代表请求方式，url代表请求路径，result代表返回结果

<script>
    function get(){
        //通过axios发送异步请求-get
        //写法一
        axios({
            method:"get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result => {
            console.log(result.data);
        })
        //写法二
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }
    function post(){
        //通过axios发送异步请求-post
        //写法一
        axios({
            method:"get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data:"id=1"
        }).then(result => {
            console.log(result.data);
        })
        //写法二
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>

4、vue项目中使用Axios
(1) 在项目目录下安装axios

axios:npm install axios

(2) 需要使用axios时，导入axios

import axios from 'axios';

六、前端工程化

1、环境准备：vue-cli，依赖环境NodeJS
2、Vue项目创建
(1) 命令行

vue create vue-project

(2) 图形化界面

vue ui

3、Vue组件文件：以.vue结尾，每个组件由三部分组成:< template >< script >< style >
(1) < template >：模板部分，用于生成HTML代码
(2) < script >：JS代码控制模板的数据来源和行为
(3) < style >：CSS样式部分

<template>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default{
  //数据模型
  data(){
    return{
      message:"hello vue"
    }
  },
  //方法
  methods:{
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

4、Vue路由——Vue Router
(1) 组成
① VueRouter:路由器类，根据路由请求在路由视图中动态渲染选中的组件
② < router-link >:请求链接组件，浏览器会解析成
③ < router-view >:动态视图组件，用来渲染展示与路由路径对应的组件

(2) 安装

npm install vue-router@3.5.1

(3) 定义路由
src/router/index.js

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

5、Element
(1) 定义：Element是为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。例如超链接、按钮、图片、表格、表单、分页条等等。
(2) 官网：https://element.eleme.cn/#/zh-CNListener