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

来源:https://www.cnblogs.com/dashucoding/archive/2019/02/11/10363143.html
-Advertisement-
Play Games

第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;

問:什麼是資料庫,資料庫有什麼用?

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

就是一個文件系統,數據按照特定的格式將數據存儲起來,用戶可以對資料庫進行數據的增刪改查操作。

資料庫有哪些?

  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/[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 點贊

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 響應式流是一個倡議,用來為具有非阻塞後壓的非同步流處理提供一個標準。大家努力的目標集中在運行時環境(JVM和JavaScript)和網路協議上。 註:響應式流其實就是一個規範,本文講解的正是這個規範,且這個規範已經被引入到JDK9里了。 後壓:就是下游出現了問題,得不到解決時,這個問題就會逆流而上,繼 ...
  • 答案經過網路整理,難免有重覆的內容,感謝各位博主的無私奉獻 1.  TCP和UDP的區別,哪個是三次握手? TCP(Transmission Control Protocol 傳輸控制協議) UDP(User Datagram Protocol 用戶數據包協議) OSI(Open Syst ...
  • 要瞭解@property的用途,首先要瞭解如何創建一個屬性。 一般而言,屬性都通過__init__方法創建,比如: 創建實例,運行結果: 但是這樣子有2個壞處: 1.__init__ 中定義的屬性是可變的,如果一個系統的開發人員在知道屬性名的情況下,就可以進行隨意更改(儘管可能是在無意識的情況下), ...
  • 前言 前面幾節枯燥的模塊終於結束了,想要完全掌握前幾節的模塊需要不斷的練習才行,畢竟眼過千遍不如手過一遍嘛。在一些項目需求里,要對文件進行IO操作,畢竟重要數據不可能列印到屏幕上而不去保存,Python對的文件IO操作並不是很複雜,相信你很快就能掌握它! 文件IO操作 對於一個文件的操作,無非不過創 ...
  • 新聞 "應用F 挑戰活動" "Visual F :鎖定VS 2019正式版本" "Visual F :VS 2019工具性能" "ML.NET 0.10發佈" "F eXchange 2019即將來臨" "Visual Studio 2019預覽版2發佈" 視頻及幻燈片 "擴展Elm / Fable ...
  • 初識函數 1.什麼是函數 具有封裝功能的代碼塊。 2.函數的定義,函數名,函數體以及函數的調用。 1.定義函數,使用def def 函數名(): 函數體 2.函數名,跟變數的命名規範基本相同 3.函數體,具體要執行的的功能 4.函數的調用:使用函數名可以調用函數,寫法:函數名(),這個函數已經被調用 ...
  • 迭代器 1.函數名的運用 函數名是一個特殊的變數,與括弧搭配可以調用函數 1.函數名的記憶體地址 2.函數名可以賦值給其他變數 3.函數名可以當做容器類的元素 4.函數名可以當做函數的參數 5.函數名可以作為函數的返回值 2.閉包 閉包:內層函數對外層函數變數(非全局變數)的引用 我們可以使用__cl ...
  • 使用scrapy爬取整個網站的圖片數據。並且使用 CrawlerProcess 啟動。 1 # -*- coding: utf-8 -* 2 import scrapy 3 import requests 上面的是spider文件 上面的是item文件 這上面是管道文件 這是在setting裡面的, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...