第87節：Java中的Bootstrap基礎與SQL入門

時間  2019-11-30
標籤 java bootstrap 基礎 sql 入門 欄目 Java 简体版
原文   原文鏈接

標題圖

第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;
複製代碼

問：什麼是數據庫，數據庫有什麼用？

數據庫就是用來存儲數據的倉庫。

就是一個文件系統，數據按照特定的格式將數據存儲起來，用戶能夠對數據庫進行數據的增刪改查操做。

數據庫有哪些？

  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/"
複製代碼

效果

到安裝目錄中刪除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 表名;
複製代碼

##關於約束

  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>
		<!--
			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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通 簡書博客： 達叔小生 www.jianshu.com/u/c785ece60…

結語

  • 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
  • 小禮物走一走 or 點贊
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程