Web应用基础

DOM

DOM相关概念

什么DOM？

全称为”DocumentobjectModel”文档对象模型，通过对象提供操作HTML文档的方法
每个html文件在浏览器中都视为一个文档，因此，操作文档实际就是操作页面中的元素

什么节点对象？

在DOM文档中，Js会对文档中的元素、属性、文本甚至注释进行封装，形成一个个节点对象
为节点对象提供相关的属性和方法，通过这些属性和方法操作页面中任何一个元素

获取DOM元素的方法

根据标签名获取元素节点列表

1 2	// 参数为标签名，返回值节点列表 var elemsByTag = document.getElementsByTagName(标签名);

根据class属性值获取元素节点列表

1 2	// 参数为class属性值，返回值节点列表 var elemsByClass = document.getElementsByClassName(class属性值);

根据id获取元素节点

1 2	// 参数为id属性值，返回值节点 var elemById = document.getElementsByClassName(Id属性值);

案例

<form>
    <label>姓名：</label>
    <input type="text" name="name" id="name">
    <br>
    <label>年龄：</label>
    <input type="number" name="age" id="age">
    <br>
    <input id="button" type="button" value="提交" onclick="displayUserInfo()">
</form>
<script>
    function displayUserInfo(){
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value; 
    document.write("您的姓名是：" + name + "<br>您的年龄是：" + age);
    }
</script>

部署Web服务器及应用环境

phpStudy介绍

单独安装配置Web服务器端环境复杂易出错
我们选择phpstudy套装软件
phpStudy包括[Apache+PHP+Mysql]
phpStudy官方网站：https://www.xp.cn

选择安装版本

phpStudy2016稳定易用
安装简单
管理方便

MySQL及MySQL-Front简介

MySQL简介

MySQL是一个关系型数据库管理系统
由瑞典MySQL AB公司开发，目前属于Oracle 旗下产品
是WEB应用中最好的RDBMS(关系数据库管理系统)应用软件
官网 https://www.mysql.com/
支持结构化查询语言SQL

什么是数据库

数据库是按照数据结构来组织、存储和管理数据的仓库

什么是关系型数据库

建立在关系模型基础上的数据库，借助于集合代数等数学概念和方法来处理数据库中的数据

关系型数据库相关术语

数据库：数据库是一些关联表的集合
数据表：类似一个简单的电子表格
主键：主键是唯一的，一个数据表中只能包含一个主键
索引：使用索引可快速访问数据库表中的特定信息，类似于书籍的目录

MySQL-Front简介

MySQL-Front是一款小巧的MYSQL图形化管理工具

phpStudy套件中已经集成了MySQL-Front

12.4.1

进入MySQL-Front管理主界面

点击MySQL管理器，选择MySQL-Front菜单

12.4.2

在打开登录信息窗口中，点击属性按钮

在localhost的配置对话框中输入用户名称、密码
确定后，点击打开登录窗口中的打开按钮

12.4.3

进入MySQL-Front主界面

12.4.4

SQL

SQL简介

SQL全称是Structured Query Language，结构化查询语言
是一种数据库查询和程序设计语言
用于存取数据以及查询、更新和管理关系型数据库系统
SQL语言大小写不敏感

SQL具有数据定义、数据操纵和数据控制的功能

数据定义语言DDL （Data Define Language）

通过CREATE，ALTER和DROP实现创建新表或修改、删除表

数据查询语言DQL （Data Query Language）

通过SELECT、WHERE，ORDERBY，GROUPBY和HAVING实现数据的查询

数据操作语言DML （Data Manipulation Language）

通过INSERT、UPDATE和DELETE实现数据的添加、修改和删除

数据控制语言DCL（Data Control Language）

通过GRANT或REVOKE实现权限控制

表数据的增删改查

使用SQL插入数据

插入数据语法

1
2
3

INSERT INTO 表名(字段1,字段2,...,字段n)
	VALUES
	(值1,值2，...,值n);

插入数据案例

如果数据是字符型或日期型，必须使用单引号或者双引号

1	INSERT INTO ADMIN(NAME,PWD) VALUES('ntd','123456');

使用SQL查询数据

查询数据语法

1 2	SELETE 字段1,字段2,... FROM 表名 [WHERE 子句]

查询数据案例

查询语句中的字段之间使用逗号(,)分割
SELECT命令可以读取一条或者多条记录
你可以使用星号(*)来表示返回表的所有字段数据

1	select * from admin;

**WHERE子句 **

查询语句中你可以使用一个或者多个表，表之间使用逗号
使用AND 或者 OR指定一个或多个条件
WHERE子句类似于程序语言中的if条件
查询语句中的字段之间使用逗号（,）分割
SELECT命令可以读取一条或者多条记录

1 2	SELETE 字段1,字段2,... FROM 表名 [WHERE 条件1 [AND[OR]] 条件2 ...]

WHERE子句案例

select * from admin;
select name,pwd from admin;
select name,pwd from admin where name = 'ntd';
select * from admin where name='ntd' and pwd='123456';

使用SQL语句修改数据

修改数据语法

1 2	UPDATE 表名 SET 字段1=新值1,字段2=新值2,... [WHERE子句];

修改数据案例

可以修改一个或多个字段
可以结合WHERE子句，否则更新所有记录

1	update admin set pwd='456789' where id=1;

使用SQL语句删除数据

删除数据语法

1	DELETE FROM 表名 [WHERE子句];

删除数据案例

如果没有指定WHERE子句，将删除全部数据

1	delete from admin where id=2;