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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

第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 :checkedprop() propertiesattr: 操作一些自定义的属性 css() 修改css样式 addClass() 添加一个class样式 removeClass() 移除blur 绑定失去焦点 focus 绑定获得焦点事件 append appendTo after before

SQL 入门

常见关系化数据库

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 子句对分组结果进行过滤

三种实体关系

多表查询——内连接查询

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

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

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

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

数据库有哪些？

Oracle数据
SQL Server数据库
Sybase数据库
MySQL数据
DB2数据库

关系型数据库：

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

数据库的发展：

没有数据库

层次结构模型数据库
网状结构模型数据库
关系结构模型数据库
关系-对象模型数据库

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

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

卸载`mysql`

my.ini文件

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

到安装目录中删除mysql:

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

在【开始】中输入“regedit“

删除：

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

安装mysql与配置mysql

点击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，

是否添加防火墙

启动严格的语法格式

第一个是默认iso-8859-1编码

第二个是utf8编码，但是是日本的

第三个自己定义编码格式

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

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

开启 net start mysql 关闭 net stop mysql

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是一个可变长度的字符串

删除主键：

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 表名;

关于约束

主键约束：primary key
非空：not null
唯一：unique
自动增长：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列，用于通过一系列的行和列的组合来创建页面的布局。

结言

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

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

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客：达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

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

正文