🗒️JavaWeb 前端基础笔记
00 分钟
2023-11-23
2024-3-18
type
status
date
slug
summary
tags
category
icon
password

JavaWeb 前端基础笔记

Web开发

Web网站的开发模式
notion image
notion image

初识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>
notion image

样式

css引入方式
属性名:属性值;
  • 行内样式:写在标签的style属性中(不推荐)
  • 内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
  • 外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)
颜色表示形式
notion image
CSS选择器:用来选取需要设置样式的元素(标签)
notion image
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中无论输入多少个空格,只会显示一个。可以使用空格占位符:&nbsp;

页面布局

盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
notion image
布局标签:实际开发网页中,会大量频繁的使用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…

表格、表单标签

表格标签

场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表。
标签:
notion image

表单标签

场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。 标签:<form> 表单项:不同类型的input元素、下拉列表、文本域等。 <input>:定义表单项,通过type属性控制输入形式 <select>:定义下拉列表 <textarea>:定义文本域 属性: action:规定当提交表单时向何处发送表单数据,URL method:规定用于发送表单数据的方式。GET、POST
notion image
表单标签:<form>
表单属性:
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面,?username=java,大小有限制
post:表单数据在请求体中携带,大小没有限制
注意:表单项必须有name属性才可以提交

表单项标签

<input>:表单项,通过type属性控制输入形式。
<select>:定义下拉列表,<option>定义列表项。
<textarea>:文本域
notion image
notion image

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()写入浏览器控制台
notion image

变量

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是弱类型,所以可以存储任意的类型的数据。
属性
notion image
方法
notion image
箭头函数(ES6):是用来简化函数定义语法的。具体形式为:()=>{…},如果需要给箭头函数起名字:var xxx=(…)=>{...}
类似Lamda表达式

String

String字符串对象创建方式有两种:
属性
notion image
方法
notion image

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树
notion image
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.使所有的复选框呈现被选中的状态
notion image

js事件监听

事件:HTML事件是发生在HTML元素上的“事情”。比如:
  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键
事件监听:JavaScripti可以在事件被侦测到时执行代码。

事件绑定

方式一:通过HTML标签中的事件属性进行绑定
方式二:通过DOM元素属性绑定

常见事件

notion image

案例

通过事件监听及DOM操作,完成如下效果实现。
1.点击“点亮”按钮点亮灯泡,点击“熄灭”按钮熄灭灯泡。
2.输入框鼠标聚焦后,展示小写;鼠标离焦后,展示大写。
3.点击“全选”按钮使所有的复选框呈现被选中的状态,点击“反选”按钮使所有的复选框呈现取消勾选的状态。
notion image

Vue

什么是Vue

Vue是一套前端框架,免除原生)avaScript中的DOM操作,简化书写。
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。
notion image
框架:
是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。

快速入门

新建HTML页面,引入Vue.js文件
在JS代码区域,创建Vue核心对象,定义数据模型
编写视图
形式:{{表达式}}
内容可以是:
  • 变量
  • 三元运算符
  • 函数调用
  • 算术运算
notion image

Vue常用指令

指令:HTML标签上带有V-前缀的特殊属性,不同指令具有不同含义。例如:V-if,V-for.…
常用指令
notion image

v-bind

v-model

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

v-on

v-if

年龄{{age}},经判定为:

v-show

年龄{{age}},经判定为:
notion image
v-if和v-show的区别
v-if会判断是否渲染,v-show是全部渲染,然后操作css的display来选择是否展示

v-for

案例

通过Vue完成表格数据的渲染展示
notion image
notion image

Vue生命周期

生命周期:指一个对象从创建到销毁的整个过程。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
notion image
生命周期
notion image
mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。(发送请求到服务端,加载数据

前端相关

Ajax

概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。
作用:
  • 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
同步与异步
notion image

原生Ajax

2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
较为繁琐,推荐使用Axios

Axios

介绍:Axios对原生的Ajax进行了封装,简化书写,快速开发。
使用:
1.引入Axiosl的js文件
2.使用Axios发送请求,并获取响应结果
请求方式别名
发送GET请求
发送POST请求

案例

基于Vue及Axios完成数据的动态加载展示
2.在页面加载完成后,自动发送异步请求,加载数据,渲染展示页面(性别:1代表男,2代表女)。
notion image
notion image

前后端分离开发

介绍

notion image
notion image

YAPI

介绍:YApi是高效、易用、功能强大的pi管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务
notion image

前端工程化

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

环境准备

vue-cli
介绍:Vue-cli是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。
Vue-cli提供了如下功能:
  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线
依赖环境:NodeJS
安装:

Vue项目简介

Vue项目-创建
命令行:
图形化界面:
Vue项目-目录结构
基于Vue脚手架创建出来的工程,有标准的目录结构,如下:
notion image
Vue项目-启动
notion image

Vue项目开发流程

notion image
notion image
Vue的组件文件以.vue结尾,每个组件由三个部分组成:<template>、<script>、<style>。

Vue组件库Element

什么是Element

Element:是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
组件:组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等等。
notion image

快速入门

安装ElementUl组件库(在当前工程的目录下),在命令行执行指令:
引入ElementU1组件库 (main.js)
访问官网,复制组件代码,调整
notion image

常见组件

表格
Table表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或淇他自定义操作。
分页
Pagination分页:当数据量过多时,使用分页分解数据。
对话框
Dialog对话框:在保留当前页面状态的情况下,告知用户并承载相关操作。
表单
Form表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。

案例

根据页面原型完成员工管理页面开发,并通过Axos完成数据异步加载。
notion image
步骤:
  • 创建页面,完成页面的整体布局规划
  • 布局中各个部分的组件实现
  • 列表数据的异步加载,并渲染展示

Vue路由

前端路由:URL中的hash(#号)与组件之间的对应关系
Vue Router
介绍:Vue Router是Vue的官方路由。
组成:
  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成<a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件
notion image
安装(创建Vue项目时已选择)

案例

通过Vue的路由VueRouter?完成左侧菜单栏点击切换效果
notion image

打包部署

打包
notion image
部署
使用Nginx部署上线静态网站
将打包好的dist目录下的文件,复制到nginx安装目录的html目录下。

Maven项目管理

 

评论
  • Twikoo