type
status
date
slug
summary
tags
category
icon
password
JavaWeb 前端基础笔记
Web开发
Web网站的开发模式
初识Web前端
Web标准：
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。
三个组成部分：
HTML:负责网页的结构（页面元素和内容）。
CSS:负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript:负责网页的行为（交互效果）。
HTML、CSS
HTML：
HTML(HyperText Markup Language):超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。 HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS：
CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式（表现）
HTML快速入门
1.HTML结构标签
2.特点
HTML标签不区分大小写
HTML标签属性值单双引号都可
HTML语法松散
基础标签&样式
基础标签
图片标签：<img>
- src:指定图像的url （绝对路径/相对路径）
- width:图像的宽度（像素/相对于父元素的百分比)
- height:图像的高度（像素/相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>
样式
css引入方式：
属性名：属性值；
- 行内样式：写在标签的style属性中（不推荐）
- 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
- 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入)
颜色表示形式
CSS选择器：用来选取需要设置样式的元素（标签）
CSS属性
color:设置文本的颜色
font-size:字体大小（注意：记得加px)
超链接
标签：<a>
属性：
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值，在当前页面打开
_blank:在空白页面打开
CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本。
color:定义文本的颜色
视频标签
视频标签：<video>
src:规定视频的url
controls:显示播放控件
width:播放器的宽度
height:播放器的高度
音频标签：<audio>
src:规定音频的url
controls:显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
CSS样式：
line-height:设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
注意：
在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：
页面布局
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
布局标签：实际开发网页中，会大量频繁的使用div和spn这两个没有语义的布局标签。
标签：<div> <span>
特点：
div标签：
一行只显示一个（独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高(width、height)
span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高(width、height)
CSS盒子模型
组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)
CSS属性：
width:设置宽度
height:设置高度
border:设置边框的属性，如：1 px solid#000;
padding:内边距
margin:外边距
注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如：padding-top、padding-left、padding-right…
表格、表单标签
表格标签
场景：在网页中以表格（行、列)形式整齐展示数据，如：班级表。
标签：
表单标签
场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签：<form>
表单项：不同类型的input元素、下拉列表、文本域等。
<input>:定义表单项，通过type属性控制输入形式
<select>:定义下拉列表
<textarea>:定义文本域
属性：
action：规定当提交表单时向何处发送表单数据，URL
method:规定用于发送表单数据的方式。GET、POST
表单标签：<form>
表单属性：
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面，?username=java,大小有限制
post:表单数据在请求体中携带，大小没有限制
注意：表单项必须有name属性才可以提交
表单项标签
<input>:表单项，通过type属性控制输入形式。
<select>:定义下拉列表，<option>定义列表项。
<textarea>:文本域
JavaScript
什么是JavaScript
JavaScript：(简称：JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
]avaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类以、
JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
ECMAScript6(ES6)是最新的JavaScript版本（发布于2015年）。
ECMA：ECMA国际（前身为欧州计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript,这种语言得到广泛应用。而avaScript;是遵守ECMAScript的标准的。
js引入方式
内部脚本：将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将JS代码定义在外部S文件中，然后引入到HTML页面中
外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合
js基础语法
书写语法
区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
单行注释：// 注释内容
多行注释：/*注释内容*/
大括号表示代码块
输出语句
使用window.alert()写入警告框
使用document..write()写入HTML输出
使用console.log()写入浏览器控制台
变量
JavaScript中用var关键字(variable的缩写)来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规侧：
- 组成字符可以是任何字母、数字、下划线（)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
注意事项
ECMAScript6新增了let关键字来定义变量。它的用法类似于var但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
数据类型
JavaScript中分为：原始类型和引用类型。
原始类型
number:数字（整数、小数、NaN(Not a Number))
string:字符串，单双引皆可
boolean:布尔。true,false
null:对象为空
undefined:当声明的变量未初始化时，该变量的默认值是undefined
使用typeof运算符可以获取数据类型：
运算符
- 算术运算符：+，-，*，/，%，+，
- 赋值运算符：=，=，=，*=，/=，%=
- 比较运算符：>，<，>=，<=，=，=，==
- 逻辑运算符：&&，‖，！
- 三元运算符：条件表达式？true_value:false_value
==和===：
- ==会进行类型转换，==不会进行类型转换
类型转换
字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NN。
其他类型转为poolean:
- Number：0和NaN为false,其他均转为true。
- String：空字符串为false,其他均转为true。
- Null和undefined：均转为false。
流程控制
语法和Java相同
if...else if ...else...
switch
for
while
do ... while
JS函数
函数
介绍：函数（方法）是被设计为执行特定任务的代码块。
定义：JavaScript函数通过function关键字进行定义，语法为：
注意：
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称（实际参数列表）
定义方式二：
注意事项：
JS中，函数调用可以传递任意个数的参数。
JS对象
Array
JavaScript中Array对象用于定义数组。
定义
访问
注意事项
JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。
属性
方法
箭头函数(ES6):是用来简化函数定义语法的。具体形式为：()=>{…}，如果需要给箭头函数起名字：var xxx=(…)=>{...}
类似Lamda表达式
String
String字符串对象创建方式有两种：
属性
方法
JavaScript自定义对象
定义格式：
调用格式：
JSON
概念：JavaScript Object Notation，JavaScript对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
定义
示例
value的数据类型为：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值(true或false)
- 数组（在方括号中）
- 对象（在花括号中）
- null
JSON字符串转为S对象
JS对象转为JSON字符串
BOM
概念：Browser Object Model浏览器对象模型，允许avaScript.与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
Window
介绍：浏览器窗口对象。
获取：直接使用window,其中window.可以省略。
属性
- history:对History对象的只读引用。请参阅History对象。
- location:用于窗口或框架的Location对象。请参阅Location对象。
- navigator:对Navigator对象的只读引用。请参阅Navigator对象。
方法
- alert():显示带有一段消息和一个确认按钮的警告框。
- confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
- setinterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout():在指定的毫秒数后调用函数或计算表达式。
Location
介绍：地址栏对象。
获取：使用window.location获取，其中window.可以省略。
属性：
href:设置或返回完整的URL。
DOM
概念：Document Object Model,文档对象模型。
DOM树
JavaScript通过DOM,就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对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:<img>
- Button:<input type='button'>
HTML中的Element对象可以通过Document对象获取，而Documenti对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1.根据id属性值获取，返回单个Element对象
2.根据标签名称获取，返回Element对象数组
3.根据name属性值获取，返回Elementi对象数组
4.根据class属性值获取，返回Element对象数组
案例
通过DOM操作，完成如下效果实现。
1.点亮灯泡
2.将所有的div标签的标签体内容后面加上：very good
3.使所有的复选框呈现被选中的状态
js事件监听
事件：HTML事件是发生在HTML元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScripti可以在事件被侦测到时执行代码。
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定
常见事件
案例
通过事件监听及DOM操作，完成如下效果实现。
1.点击“点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡。
2.输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
3.点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现取消勾选的状态。
Vue
什么是Vue
Vue是一套前端框架，免除原生)avaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
框架：
是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
快速入门
新建HTML页面，引入Vue.js文件
在JS代码区域，创建Vue核心对象，定义数据模型
编写视图
形式：{{表达式}}
内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算
Vue常用指令
指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for.…
常用指令
v-bind
v-model
注意事项
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。
v-on
v-if
年龄{{age}},经判定为：
v-show
年龄{{age}},经判定为：
v-if和v-show的区别
v-if会判断是否渲染，v-show是全部渲染，然后操作css的display来选择是否展示
v-for
案例
通过Vue完成表格数据的渲染展示
Vue生命周期
生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
生命周期
mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据
前端相关
Ajax
概念：Asynchronous JavaScript And XML,异步的JavaScript和XML。
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
同步与异步
原生Ajax
2.创建XMLHttpRequest对象：用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
较为繁琐，推荐使用Axios
Axios
介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。
使用：
1.引入Axiosl的js文件
2.使用Axios发送请求，并获取响应结果
请求方式别名
发送GET请求
发送POST请求
案例
基于Vue及Axios完成数据的动态加载展示
2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面（性别：1代表男，2代表女）。
前后端分离开发
介绍
YAPI
介绍：YApi是高效、易用、功能强大的pi管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
前端工程化
介绍：是指在企业级的前端项目开发中，把前端开发所需的工具，技术、流程、经验等进行规范化、标准化。
环境准备
vue-cli
介绍：Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS
安装：
Vue项目简介
Vue项目-创建
命令行：
图形化界面：
Vue项目-目录结构
基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
Vue项目-启动
Vue项目开发流程
Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>。
Vue组件库Element
什么是Element
Element:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
快速入门
安装ElementUl组件库(在当前工程的目录下)，在命令行执行指令：
引入ElementU1组件库 （main.js）
访问官网，复制组件代码，调整
常见组件
表格
Table表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或淇他自定义操作。
分页
Pagination分页：当数据量过多时，使用分页分解数据。
对话框
Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
表单
Form表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
案例
根据页面原型完成员工管理页面开发，并通过Axos完成数据异步加载。
步骤：
- 创建页面，完成页面的整体布局规划
- 布局中各个部分的组件实现
- 列表数据的异步加载，并渲染展示
Vue路由
前端路由：URL中的hash(#号)与组件之间的对应关系
Vue Router
介绍：Vue Router是Vue的官方路由。
组成：
- VueRouter:路由器类，根据路由请求在路由视图中动态渲染选中的组件
- <router-link>:请求链接组件，浏览器会解析成<a>
- <router-view>:动态视图组件，用来渲染展示与路由路径对应的组件
安装（创建Vue项目时已选择）
案例
通过Vue的路由VueRouter?完成左侧菜单栏点击切换效果
打包部署
打包
部署
使用Nginx部署上线静态网站
将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。
Maven项目管理
- 作者:lveMonsi
- 链接:https://blog.lvems.top/article/231123
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。