第87節：Java中的Bootstrap基礎與SQL入門
第87節：Java中的Bootstrap基礎與SQL入門javascript
前言複習
什麼是JQ？ : write less do morecss
寫更少的代碼，作更多的事html
找出全部兄弟：前端
$("div").siblings()
基本過濾器：
選擇器：過濾器html5
$("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 入門java
常見關係化數據庫mysql
mysql數據庫配置bin目錄到path中，命令行：jquery
mysql -u用戶名 -p密碼
數據庫服務器，數據庫和表
數據庫服務器就是在計算機上裝一個數據庫管理程序，用來管理多個數據庫，對於程序員會針對每一個程序建立一個數據庫，數據庫會建立不少表，用來保存程序中實體的數據。程序員
sql,Structured Query Language結構化查詢語言，非過程性語言，sql用來存取關係數據庫的語言，用來查詢，操做，定義，控制等。web
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/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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
- 小禮物走一走 or 點贊
相關文章
- 1. 第87節：Java中的Bootstrap基礎與SQL入門
- 2. Android零基礎入門第87節：Fragment添加、刪除、替換
- 3. Bootstrap基礎入門
- 4. BootStrap基礎入門
- 5. Java Web基礎入門第四十一講 SQL簡單入門
- 6. redis學習-第一節-基礎入門
- 7. html 入門基礎第一節
- 8. 第六十九節，css入門基礎
- 9. Vue基礎入門(第二節)【連載...】
- 10. vue基礎入門（第四節）【連載...】
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Java 中操作 R - R 語言教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
