JavaWeb学习 | 前端部分
Web前端概述
Web标准也称为网页标准,由一系列的标准组成,用于统一不同浏览器的展示效果,大部分由W3C( World Wide web onsortium,万维网联盟)负责制定。
三个组成部分:
- HTML:负责网页的结构 (页面元素和内容)。
- CSS:负责网页的表现 (页面元素的外观、位置等页面样式,如:颜色、大小等)。
- JavaScript:负责网页的行为 (交互效果)。
HTML & CSS
什么是html、css?
html:HyperText Markup Language,超文本标记语言
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、 视频等内容。
- 标记语言:由标签构成的语言。HTML标签都是预定义好的。例如: 使用<a>展示超链接,使用<img>展示图片,<video>展示视频。HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
CSS: Cascading Style Sheet,层叠样式表,用于控制页面的样式(表现)。
HTML快速入门
操作
- 新建文本文件,后缀名改为 .html
- 编写HTML结构标签
- 在
<body>
中填写内容
例子:
1 | <html> |
小结
- HTML标签不区分大小写
- HTML标签的属性值,采用单引号、双引号都可以
- HTML语法相对比较松散 (建议编写HTML标签的时候尽量严谨一些)
VSCode开发工具
安装详细教程:VS Code 安装教程 | Threewood (threewood1.top)
基础标签 & 样式
文章标题
标题排版
- 图片标签:
<img src="", width="", height="">
,src: 指定图像url;width和height设置图像的宽度和高度 - 标题标签:
<h1> - \<h6> ... </h?>
- 水平线标签:
<hr>
标题样式
CSS引入方式:
- 行内样式:写在标签的style属性中 (不推荐)
- 内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
- 外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入),例如:
<link rel="stylesheet" href="css/news.css">
CSS选择器:
- 元素选择器:
span{color: red;}
- 类选择器:
.类名{color: red;}
- id选择器:
#id名称{color: red;}
使用:<span class="类名" id="id名称"> 文本内容 <\span>
超链接
标签:
<a href="..." target="...">央视网\</a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开
文章正文
视频标签:
<video>
- src: 规定视频的url
- controls: 显示播放控件
- width: 播放器的宽度
- height: 播放器的高度
音频标签:
<audio>
- src: 规定音频的url
- controls: 显示播放控件
段落标签:
<p>
换行:
<b>
文本加粗标签:
<b> / <strong>
页面布局
盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型组成:内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域 (margin)
布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签:
<div> <span>
特点:
- div标签:
- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高 (width、height)
- span标签:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
- div标签:
表格、表单标签
表格标签
场景: 在网页中以表格(行、列)形式整齐展示数据,如:班级表
标签:
标签 描述 属性/备注 <table>
定义表格整体,可以包裹多个 <tr>
border: 规定表格边框的宽度
width: 规定表格的宽度
cellspacing: 规定单元之间的空间<tr>
表格的行,可以包裹多个 <td>
<td>
表格单元格(普通),可以包裹内容 如果是表头单元格,可以替换为 <th>
表单标签
场景: 在网页中主要负责数据采集功能,如注册、登录等数据采集
标签:
<form>
表单项: 不同类型的input 元素、下拉列表、文本域等。
1
2
3<input>: 定义表单项,通过type属性控制输入形式
<select>: 定义下拉列表
<textarea>: 定义文本域属性:
action: 规定当提交表单时向何处发送表单数据,URL
method: 规定用于发送表单数据的方式。GET、POST
- get: 表单数据拼接在url后面,?username=java ,大小有限制
- post: 表单数据在请求体中携带,大小没有限制
表单项
1 | <input> 的type属性: text、password、radio、checkbox、file、date、datetime-local、time、 number、 hidden、button、submit |
JavaScript
什么是 JavaScript ?
- JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互。
- JavaScript和Java是完全不同的语言,不论是概念还是设计。但是基础语法类似。
- JavaScript在1995年由 Brendan Eich 发明,并于1997年成为ECMA标准。
- ECMAScript 6(ES6)是最新的JavaScript 版本(发布于2015年)。
js引入方式
内部脚本:将JS代码定义在HTML页面中
- JavaScript代码必须位于
<script></script>
标签之间 - 在HTML文档中,可以在任意地方,放置任意数量的
<script>
- 一般会把脚本置于
<body>
元素的底部,可改善显示速度
- JavaScript代码必须位于
外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中
- 外部JS文件中,只包含JS代码,不包含
<script>
标签 <script>
标签不能自闭合
- 外部JS文件中,只包含JS代码,不包含
js基础语法
书写语法
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释:
- 单行注释:// 注释内容
- 多行注释:/* 注释内容 */
大括号表示代码块
输出语句
使用
window.alert()
写入警告框使用
document.write()
写入 HTML 输出使用
console.log()
写入浏览器控制台
1 | <script> |
变量
- JavaScript 中用
var
关键字(variable 的缩写)来声明变量 ,全局变量,全局作用域/函数作用域,允许重复声明。 - JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
- 变量名需要遵循如下规则:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
注意事项
- ECMAScript 6 新增了
let
关键字来定义变量,局部变量。它的用法类似于 var,但是所声明的变量,只在 let 关键字所在的代码块内有效,且不允许重复声明。- ECMAScript 6 新增了
const
关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。
数据类型
JavaScript 中的数据类型分为:原始类型 和 引用类型。
原始类型:
number
:数字(整数、小数、NaN(Not a Number))string
:字符串,单双引皆可boolean
:布尔。true,falsenull
:对象为空undefined
:当声明的变量未初始化时,该变量的默认值是 undefined
使用 typeof 运算符可以获取数据类型:
1 | var a = 20; |
运算符
运算符
- 算术运算符:+ , - , * , / , % , ++ , –
- 赋值运算符:= , += , -= , *= , /= , %=
- 比较运算符:> , < , >= , <= , != , == , ===
- 逻辑运算符:&& , || , !
- 三元运算符:条件表达式 ? true_value: false_value
注:== 会进行类型转换,=== 不会进行类型转换
类型转换
字符串类型转为数字
parseInt()
:将字符串字面值转为数字。 如果字面值不是数字,则转为NaN。
其他类型转为boolean:
Number
:0 和 NaN为false,其他均转为true。String
:空字符串为false,其他均转为true。Null
和undefined
:均转为false。
流程控制语句
- if…else if …else…
- switch
- for
- while
- do … while
参考官方文档:https://www.w3school.com.cn/jsref/jsref_statements.asp
js函数
介绍:函数(方法)是被设计为执行特定任务的代码块。
定义:JavaScript 函数通过 function 关键字进行定义,语法为:
1
2
3function functionName(参数1,参数2..){
//要执行的代码
}调用:函数名称(实际参数列表)
注意:
形式参数不需要类型。因为 JavaScript 是弱类型语言
返回值也不需要定义类型,可以在函数内部直接使用
return
返回即可
定义方式二:
1
2
3var functionName = function (参数1,参数2..){
//要执行的代码
}
注意:JS中,函数调用可以传递任意个数的参数。
js对象
Array
JavaScript 中 Array对象用于定义数组。
定义
1
2var 变量名 = new Array(元素列表); //方式一
var 变量名 = [元素列表]; //方式二访问
1
变量名[索引] = 值;
注意:JavaScript 中的数组相当于 Java 中集合,数组的长度是可变的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
属性
属性 描述 length 设置返回数组中元素的数量 方法
方法 描述 forEach() 遍历数组中的每个有值的元素,并调用一次传入的函数 push() 将新元素添加到数组的末尾,并返回新的长度。 splice() 从数组中删除元素。
**箭头函数(ES6)**:是用来简化函数定义语法的。具体形式为: (…) => { … } ,如果需要给箭头函数起名字: var xxx = (…) => { … }
String
String字符串对象创建方式有两种:
1
2var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二属性
属性 描述 length 字符串长度 方法
方法 描述 charAt() 返回在指定位置的字符。 index0f() 检索字符串 trim() 去除字符串两边的空格 substring() 提取字符串中两个指定的索引号之间的字符。
JSON
概念:JavaScript Object Notation,JavaScript对象标记法。
JSON 是通过 JavaScript 对象标记法书写的文本。
由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。
定义格式:
1
2
3
4
5
6var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};调用格式:
1
2对象名.属性名;
对象名.函数名();基础语法
定义
1
var 变量名 = '{"key1": value1, "key2": value2}';
示例
1
var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}';
JSON字符串转为JS对象
1
var jsObject = JSON.parse(userStr);
JS对象转为JSON字符串
1
var jsonStr = JSON.stringify(jsObject);
BOM
概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话, JavaScript 将浏览器的各个组成部分封装为对象。
组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
Window
介绍:浏览器窗口对象。
获取:直接使用window,其中
window.
可以省略。属性
方法
alert()
:显示带有一段消息和一个确认按钮的警告框。confirm()
:显示带有一段消息以及确认按钮和取消按钮的对话框,点击确定返回 true,否则返回false。setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式。setTimeout()
:在指定的毫秒数后调用函数或计算表达式。
Location
- 介绍:地址栏对象。
- 获取:使用
window.location
获取,其中window.
可以省略。 - 属性:href:设置或返回完整的URL。
DOM
概念:Document Object Model ,文档对象模型。DOM是 W3C(万维网联盟)的标准,定义了访问 HTML 和 XML 文档的标准,分为3个不同的部分:
Core DOM - 所有文档类型的标准模型
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
- Image:
<img>
- Button :
<input type='button'>
- Image:
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数:
根据id属性值获取,返回单个Element对象
1
var h1 = document.getElementById('h1');
根据标签名称获取,返回Element对象数组
1
var divs = document.getElementsByTagName('div');
根据name属性值获取,返回Element对象数组
1
var hobbys = document.getElementsByName('hobby');
根据class属性值获取,返回Element对象数组
1
var clss = document.getElementsByClassName('cls');
js事件监听
- 事件:HTML 事件是发生在 HTML 元素上的 “事情”。比如:
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
- 事件监听:JavaScript 可以在事件被侦测到时执行代码。
事件绑定
方式一:通过 HTML标签中的事件属性进行绑定
1 | <input type="button" onclick="on()" value="按钮1"> |
方式二:通过 DOM 元素属性绑定
1 | <input type="button" id="btn" value="按钮2"> |
常见事件
事件名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onkeydown | 某个键盘的键被按下 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
Vue
什么是Vue?
- Vue 是一套前端框架,免除原生 JavaScript 中的DOM操作,简化书写。
- 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。
- 官网: https://v2.cn.vuejs.org/
Vue快速入门
- 新建HTML页面,引入Vue.js文件
1 | <script src="js/vue.js"></script> |
- 在JS代码区域,创建Vue核心对象,定义数据模型
1 | <script> |
- 编写视图
1 | <div id="app"> |
插值表达式
形式:。
内容可以是:
- 变量
- 三元运算符
- 函数调用
- 算术运算
Vue常用指令
指令:HTML 标签上带有 v- 前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for…
常用指令
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if v-else-if v-else | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind
1
2
3<a v-bind:href="url">传智教育</a>
//简化写法:
<a :href="url">传智教育</a>v-model
1
<input type="text" v-model="url">
注意:通过v-bind或者v-model绑定的变量,必须在数据模型中声明。
v-on
1
2
3<input type="button" value="按钮" v-on:click="handle()">
//简化写法:
<input type="button" value="按钮" @click="handle()">1
2
3
4
5
6
7
8
9
10
11
12
13
14//模板
<script>
new Vue({
el: "#app",
data: {
//...
},
methods: {
handle:function(){
alert('我被点击了');
}
},
})
</script>v-if
1
2
3
4//年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>v-show
1
2//年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>v-for
1
2
3
4//方式一
<div v-for="addr in addrs">{{addr}}</div>
//方式二
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>1
2
3
4
5//
data: {
. . .
addrs: ['北京','上海','广州','深圳','成都','杭州']
},
Vue生命周期
- 生命周期:指一个对象从创建到销毁的整个过程。
- 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
- mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。(发送请求到服务端,加载数据)
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
Ajax & Axio
概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。
作用:
- 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
原生Ajax
- 准备数据地址:https://mock.apifox.cn/m1/3128855-0-default/emp/list
- 创建XMLHttpRequest对象:用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
Axios
介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
使用步骤:
引入Axios的js文件
1
<script src="js/axios-0.18.0.js"></script>
使用Axios发送请求,并获取响应结果
1
2
3
4
5
6axios({
method: "get",
url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
}).then((result) => {
console.log(result.data);
});1
2
3
4
5
6
7axios({
method: "post",
url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
data: "id=1"
}).then((result) => {
console.log(result.data);
});
请求方式别名
1
2
3
4axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])发送GET请求
1
2
3axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
console.log(result.data);
});发送POST请求
1
2
3axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
console.log(result.data);
});
接口文档管理平台——YAPI
- 介绍:YAPI是一款功能强大的API管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。此处用于前后端分离开发的接口文档的管理。
- 地址:YApi Pro-高效、易用、功能强大的可视化接口管理平台
- 常用功能:
- 添加项目
- 添加分类
- 添加接口
前端工程化
前端工程化:是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
- 模块化:JS、CSS
- 组件化:UI结构、样式、行为
- 规范化:目录结构、编码、接口
- 自动化:构建、部署、测试
环境准备
vue-cli
介绍: Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板。
Vue-cli提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境:NodeJS
安装vue-cli:
1
npm install -g @vue/cli
安装NodeJS:Node.js (nodejs.org)
Vue项目简介
命令行:
1
vue create vue-project01
图形化界面:vue ui
基于Vue脚手架创建出来的工程,有标准的目录结构,如下:
- node_modules: 整个项目的依赖包
- public:存放项目的静态文件
- src:项目的源代码
- assets:静态资源
- components:可重用的组件
- router:路由配置
- views:视图组件(页面)
- App.vue:入口界面(根组件)
- main.js:入口js文件
- package.json:模块基本信息,项目开发所需模块,版本休息
- vue.config.js:保存vue配置的文件,如代理、端口的配置
Vue项目-启动
方式一:图形化界面
方式二:命令行
Vue项目开发流程
略略略略略略略略
详见:https://www.bilibili.com/video/BV12J411m7MG/
Vue组件库Element
Element:是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等。
快速入门
安装ElementUI组件库 (在当前工程的目录下),在命令行执行指令:
1
npm install element-ui@2.15.3
引入ElementUI组件库
1
2
3
4import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);访问官网,复制组件代码,调整
常见组件
- Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
- Pagination 分页:当数据量过多时,使用分页分解数据。
- Dialog 对话框:在保留当前页面状态的情况下,告知用户并承载相关操作。
- Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。
Vue路由
前端路由:URL中的hash(#号) 与组件之间的对应关系。
介绍:Vue Router 是 Vue 的官方路由。
安装:
npm install vue-router@3.5.1
组成:
VueRouter
:路由器类,根据路由请求在路由视图中动态渲染选中的组件<router-link>
:请求链接组件,浏览器会解析成<a>
<router-view>
:动态视图组件,用来渲染展示与路由路径对应的组件
定义路由
打包部署
Nginx
- 介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。
- 官网:https://nginx.org/
部署:将打包好的 dist 目录下的文件,复制到nginx安装目录的html目录下。
启动:双击 nginx.exe 文件即可,Nginx服务器默认占用 80 端口号
注意:Nginx默认占用80端口号,如果80端口号被占用,可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)