第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 :checked prop() properties attr: 操作一些自定义的属性 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
- 精细配置 okstandard configuration
- 标准配置
developer machine
开发者电脑 okserver machine
服务器电脑
电脑的内存会被占用很多dedicated mysql server machine mysql
服务器电脑
内存将会全部给mysql
使用
multifunctional
多用途数据库 oktransactional
事务数据库non-transactional
非事务数据库
dss
并发连接数 上限20oltp
并发连接数 上限500manual 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> <!-- trigger : 触发的意思 --> <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> <!-- 最新版本的 bootstrap 核心 css 文件 --> <link rel="stylesheet" href="../css/bootstrap.css" /> <!--需要引入jquery--> <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--> <!-- 最新的 bootstrap 核心 javascript 文件 --> <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 加速服务
<!-- 最新版本的 bootstrap 核心 css 文件 --> <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"> <!-- 可选的 bootstrap 主题文件(一般不用引入) --> <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"> <!-- 最新的 bootstrap 核心 javascript 文件 --> <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"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>bootstrap 101 template</title> <!-- bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- html5 shim 和 respond.js 是为了让 ie8 支持 html5 元素和媒体查询(media queries)功能 --> <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 respond.js 不起作用 --> <!--[if lt ie 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jquery (bootstrap 的所有 javascript 插件都依赖 jquery,所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 bootstrap 的所有 javascript 插件。你也可以根据需要只加载单个插件。 --> <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后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
下一篇: Web前端:博客美化:一、模板美化