第87节：Java中的Bootstrap基础与SQL入门

àì夳堔傛蜴生んèń 2021-09-18 01:12 350阅读 0赞

![标题图][1240]

> 第87节：Java中的Bootstrap基础与SQL入门

## 前言复习 ##

什么是JQ？ : write less do more

写更少的代码，做更多的事

找出所有兄弟：

$("div").siblings()

基本过滤器：  
选择器：过滤器

$("div:first")

:first: 找到第一个元素
    :last: 找到最后一个元素
    :even: 找出偶数索引
    :odd: 找出奇叔索引
    
    :gt(index): 大于
    :lt(index): 小于
    :eq(index): 等于
    
    :input 找出所有的输入项
    textarea, select, button
    :password
    :text
    :radio
    
    表单对象属性的过滤器：
    :selected
    :checked
    
    prop() properties
    
    attr: 操作一些自定义的属性
    css() 修改css样式
    addClass() 添加一个class样式
    removeClass() 移除
    
    blur 绑定失去焦点
    focus 绑定获得焦点事件
    append  appendTo
    after before

`SQL` 入门

常见关系化数据库

![效果][1240 1]

mysql数据库配置bin目录到path中，命令行：

mysql -u用户名 -p密码

数据库服务器，数据库和表  
数据库服务器就是在计算机上装一个数据库管理程序，用来管理多个数据库，对于程序员会针对每个程序创建一个数据库，数据库会创建很多表，用来保存程序中实体的数据。

`sql`,`Structured Query Language`结构化查询语言，非过程性语言，sql用来存取关系数据库的语言，用来查询，操作，定义，控制等。

`SQL`分类

DDL数据库定义语言，用来定义数据库的对象，数据表，视图，索引等。

DML数据操纵语言，用来在数据库中表的更新，增加，删除记录，update，insert，delete。

DCL数据控制语言，用来设置用户权限和控制事务语句。

DQL数据查询语言，select等。

数据数据库：

SHOW DATABASES
    SHOW CREATE DATABASE db_name
    DROP DATABASE  [IF EXISTS]  db_name 
    ALTER  DATABASE  [IF NOT EXISTS] db_name

CREATE TABLE table_name
    (
     
    )character set 字符集 collate 校对规则

主键约束
    primary key:不允许为空，不允许重复
    主键自动增长
    auto_increment
    
    唯一约束
    unique 
    非空约束
    not null 
    
    修改表的名称
    rename table 表名 to 新表名;

数据库`CRUD`语句

`Insert`语句  
`Update`语句  
`Delete`语句  
`Select`语句

Asc 升序
    Desc 降序
    having 子句 
    对分组结果进行过滤

## 三种实体关系 ##

![多表关系][1240 2]

多表查询——内连接查询

select * from a inner join b on a.id=b.id;
    select * from a,b where a.id = b.id;

问：什么是数据库，数据库有什么用？

数据库就是用来存储数据的仓库。

就是一个文件系统，数据按照特定的格式将数据存储起来，用户可以对数据库进行数据的增删改查操作。

数据库有哪些？

1.  `Oracle`数据
2.  `SQL Server`数据库
3.  `Sybase`数据库
4.  `MySQL`数据
5.  `DB2`数据库

关系型数据库：

关系型数据库是建立在关系模型上的数据库

数据库的发展：

没有数据库

1.  层次结构模型数据库
2.  网状结构模型数据库
3.  关系结构模型数据库
4.  关系-对象模型数据库

数据库管理系统称为数据库

数据库服务器创建数据库，数据库中有很多表

## 卸载`mysql` ##

`my.ini`文件

datadir="C:/ProgramData/MySQL/MySQL Server 5.5/Data/"

![效果][1240 3]

到安装目录中删除mysql:

![目录][1240 4]

`C:\ProgramData\MySQL`目录下将`MySQL`删除

在【开始】中输入“regedit“

![目录][1240 5]

![目录][1240 6]

删除：

// 所有与mysql有关的文件删除
    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services
    HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services
    HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Services

安装`mysql`与配置`mysql`

![效果][1240 7]

点击`custom`，然后点击`next`按钮即可。

D:\Program Files (x86)\MySQL\MySQL Server 5.5\bin
    // mysqlInstanceConfig

`detailed configuration` \- 精细配置 ok  
`standard configuration` \- 标准配置

`developer machine` 开发者电脑 ok  
`server machine` 服务器电脑  
电脑的内存会被占用很多  
`dedicated mysql server machine mysql`  
服务器电脑  
内存将会全部给`MySQL`使用

`multifunctional` 多用途数据库 ok  
`transactional` 事务数据库  
`non-transactional` 非事务数据库

`dss` 并发连接数 上限20  
`oltp` 并发连接数 上限500  
`manual setting` 自定义连接数上限，选择15

都打钩，连接到`tcp/ip`，端口号3306，  
是否添加防火墙  
启动严格的语法格式

![效果][1240 8]

第一个是默认`iso-8859-1`编码  
第二个是`utf8`编码，但是是日本的  
第三个自己定义编码格式

![效果][1240 9]

将mysql设置为windows服务，mysql服务的名称，自动启动mysql服务，将MySQL设置到环境变量path中。

![效果][1240 10]

![效果][1240 11]

![效果][1240 12]

如果有一个没有打钩，说明安装失败，没有卸载干净，【管理】【服务和应用程序】【服务】。

开启  net start mysql
    关闭  net stop mysql

![效果][1240 13]

## SQL介绍 ##

sql是什么？结构化查询语言。

SQL分成四类:

数据定义语言-创建、删除、修改  
数据操作语言-增、删、改  
数据控制语言-访问权限和安全级别  
数据查询语言-查询数据库中表的记录

命令：

create database 数据库名;
    create database 数据库名 character set gbk;
    create database 数据库名 character set 编码 collate 校对规则
    
    show databases;
    show create database 数据库名
    
    alter database 数据库名称 character set 编码 collate 校对规则
    
    drop database 数据库名
    
    user 数据库名称
    
    select database();

创建:create database 数据库名称;
    切换:use 数据库名;
    删除:drop database 数据库名;

MySQL数据库常用的数据类型

int double decimal char varchar tinytext text mediumtext longtext tinyblob blob time date  timestamp等。

char与varchar区别?  
char是一个定长字符串  
varchar是一个可变长度的字符串

![效果][1240 14]

![效果][1240 15]

删除主键：

alter table tablename drop primary key ;

desc 表名;
    show tables;
    show create table 表名;

alter table 表名 关键字;
    alter table 表名  add 列名 类型;
    alter table 表名  modify 列名  类型;
    alter table 表名  drop 列名;
    alter table 表名 change 旧列名  新列名  类型;
    rename table 旧表名 to 新表名;
    alter table 表名 character set 字符集;
    drop table 表名;

\#\#关于约束

1.  主键约束：`primary key`
2.  非空：`not null`
3.  唯一：`unique`
4.  自动增长：`auto_increment`

insert into 表名(列名1,列名2, ...) values(列值1, 列值2, ...);
    insert into 表名(列名1,列名2) values(列值1, 列值2);
    insert into 表名 values(列值1, 列值2, ...);
    update 表名 set 字段名称=值;
    update 表名 set 字段1名称=值 ,字段2名称=值,...;
    update 表名 set 字段=值 ,... where 条件;
    delete from 表名;
    delete from 表名 where 条件;
    drop table 表名;
    delete一行一行删除
    delete from user;
    编码问题
    set character_set_results=gbk; / set names gbk;
    select 字段 from 表名;
    select * from 表名;
    select distinct 字段 from 表名;
    使用as 别名
    
    Select * from products;
    Select name,price,category,pnum from products;
    Select distinct category from products;
    Select name,price+10 as 价格 from products；
    
    select 字段  from 表名  where 条件;
    order by排序
    asc 升序
    desc 降序
    SELECT * FROM products ORDER BY price ASC;
    SELECT * FROM products ORDER BY pnum ASC, price DESC；

## 聚合函数 ##

count
    sum
    min
    max
    avg

## 分组操作 ##

`having`是在分组后对数据进行过滤  
`where`是在分组前对数据进行过滤

## 记录操作总结 ##

from
    where
    group by
    having
    select
    order by

## 总结 ##

添加:insert into 表名(字段1,字段2,…) values(值1,值2,…);
    修改:update 表名 set 字段1=值1,字段2=值2 where 条件;
    删除:delete from 表名 where 条件;
    truncate table 表名;
    
    查询:
    select 字段 
    from 表名 
    where 条件 
    group by 字段 
    having 条件 
    order by 字段
    
    聚合函数
    count
    sum
    avg
    max
    min

## jquery ##

表单校验：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" href="../css/style.css" />
    		<title></title>
    		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    		<script>
    			
    			$(function(){
    				//动态后面添加小红点
    				$(".bitian").after("<font class='high'>*</font>");
    
    				$(".bitian").blur(function(){
    					//当前输入的值
    					var value = this.value; 
    					//清空上一次提示的信息
    					$(this).parent().find(".formtips").remove();
    					
    					//判断当前的值是哪一项输入的值
    					if($(this).is("#username")){  //判断是否是用户名输入项
    						if(value.length < 6){
    							$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
    						}
    					}
    					
    					if($(this).is("#password")){  //判断是否是密码输入项
    						if(value.length < 6){
    							$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
    						}else{
    							$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
    						}
    					}
    				}).focus(function(){
    					$(this).triggerHandler("blur");
    				}).keyup(function(){
    					$(this).triggerHandler("blur");
    				})
    				
    				
    				
    				//给表单提交绑定事件
    				$("form").submit(function(){
    					//触发所有必填项的校验
    					$(".bitian").trigger("focus");
    					//找到错误信息的个数
    					if($(".onError").length > 0){
    						return false;
    					}
    					return true;
    				});
    			});		
    	
    		</script>
    	</head>
    	<body>
    		<form action="../index.html">
    			<div>
    				用户名:<input type="text" class="bitian" id="username" />
    			</div>
    			<div>
    				密码:<input type="password"  class="bitian" id="password" />
    			</div>
    			<div>
    				手机号:<input type="tel" />
    			</div>
    			<div>
    				<input type="submit" />
    			</div>
    		</form>
    	</body>
    </html>

`trigger` : 触发的意思

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
    		<script>
    			
    			$(function(){
    				$("#username").focus(function(){
    					console.log("text focus被触发了")
    				})
    				
    				$("#btn1").click(function(){
    					//触发一下text的focus
    					$("#username").trigger("focus");
    				});
    				$("#btn2").click(function(){
    					//触发一下text的focus
    					$("#username").triggerHandler("focus");
    				});
    			});
    			
    		</script>
    	</head>
    	<body>
    		<input type="text" id="username" />
    		<input type="button" value="trigger一下text的focus" id="btn1"/>
    		<input type="button" value="triggerHandler一下text的focus" id="btn2"/>
    	</body>
    </html>

## Bootstrap ##

bootstrap来源于twitter，是目前最受欢迎的前端框架，是基于html，css，JavaScript的，使用它，让web开发更加快捷。是html和css框架，动态css语言用less写的。

会随着网页变化而变化。bootstrap可以提高开发人员的工作效率，响应式页面，可以适应不同浏览器。

案例：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    
    		
    		<link rel="stylesheet" href="../css/bootstrap.css" />
    
    		
    		
    
    		
    		<script type="text/javascript" src="../js/bootstrap.js"></script>
    
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		
    	</head>
    
    	<body>
    		<div class="container">
    			<a href="#" class="btn btn-warning">达叔小生</a>
    			<a href="#">达叔小生</a>
    			
    			<div class="row">
    			
    				<div class="col-md-8 col-sm-8">
    					123
    				</div>
    				<div class="col-md-5 col-sm-5">
    					456
    				</div>
    				
    			</div>
    		</div>
    		
    	</body>
    
    </html>

> 用 BootCDN 提供的免费 CDN 加速服务

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

目录结构:

bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   └── bootstrap-theme.min.css.map
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

您好，世界

<!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>Bootstrap 101 Template</title>
    
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        
        
        
      </head>
      <body>
        <h1>你好，世界！</h1>
    
        
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	
    		<link rel="stylesheet" href="../css/bootstrap.css" />
    	</head>
    	<body >
    		<table class="table">
    			<tr >
    				<td>
    					<input type="checkbox" />
    				</td>
    				<td>分类ID</td>
    				<td>分类名称</td>
    				<td>分类商品</td>
    				<td>分类描述</td>
    				<td>操作</td>
    			</tr>
    			
    		</table>
    	</body>
    </html>

布局容器
    <div class="container">
    ...
    </div>
    
    .container-fluid类用于100%宽度
    
    <div class="container-fluid">
    ...
    </div>

栅格系统就是bootstrap提供的一套响应式流式栅格系统，最多12列，用于通过一系列的行和列的组合来创建页面的布局。

![效果][1240 16]

![效果][1240 17]

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/88875996571c4ecfa475a17dcd932bab.png
[1240 1]: /images/20210724/ddd484cf41b94e11b7eba72e79f880dd.png
[1240 2]: /images/20210724/168ae438d34e4d39b7dee66b6a2c2248.png
[1240 3]: /images/20210724/062d7f137a864f53b5f15911017f4a4d.png
[1240 4]: /images/20210724/122252b222ea491eaba37e606e6d64f5.png
[1240 5]: /images/20210724/65206af08d6c4338a9d8905f83025907.png
[1240 6]: /images/20210724/a42ba8a6ec434598bc72816ae2bbf3d6.png
[1240 7]: /images/20210724/f488612dad264ac4b09959119bb3df25.png
[1240 8]: /images/20210724/b1721c2a820a41ddbe4e6aa5cd08a2c2.png
[1240 9]: /images/20210724/2926e341ab6447fabd6f3696a6acaaaf.png
[1240 10]: /images/20210724/9b7358aee3464634afe810b26dc92930.png
[1240 11]: /images/20210724/97b9fbbbe68b49f59a9bec9979c67dfc.png
[1240 12]: /images/20210724/39493d45abd24308992f382232b4dbae.png
[1240 13]: /images/20210724/dc68728e06f748009e7c937092a0cff4.png
[1240 14]: /images/20210724/4ee39fd882744266a5bb822a1ad60431.png
[1240 15]: /images/20210724/2bc48587facf4a73b489cfd031cb2429.png
[1240 16]: /images/20210724/dff2bbd134f4490bba54f13b8d12d88f.png
[1240 17]: /images/20210724/15e57b1e1cc044f69dcd87d8b2444393.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1