第87節:Java中的Bootstrap基礎與SQL入門 前言複習 什麼是JQ? : write less do more 寫更少的代碼,做更多的事 找出所有兄弟: 基本過濾器: 選擇器:過濾器 入門 常見關係化資料庫 mysql資料庫配置bin目錄到path中,命令行: 資料庫伺服器,資料庫和表 ...
第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
- 精細配置 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>
<!--
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 載入 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只載入單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 點贊