zoukankan      html  css  js  c++  java

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

    问：什么是数据库，数据库有什么用？

    数据库就是用来存储数据的仓库。

    就是一个文件系统，数据按照特定的格式将数据存储起来，用户可以对数据库进行数据的增删改查操作。

    数据库有哪些？

    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:ProgramDataMySQL目录下将MySQL删除

    在【开始】中输入“regedit“

    目录

    目录

    删除：

    // 所有与mysql有关的文件删除
HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServices
HKEY_LOCAL_MACHINESYSTEMControlSet001Services
HKEY_LOCAL_MACHINESYSTEMControlSet002Services

    安装mysql与配置mysql

    效果

    点击custom，然后点击next按钮即可。

    D:Program Files (x86)MySQLMySQL Server 5.5in
// 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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
    简书博客： 达叔小生
    https://www.jianshu.com/u/c785ece603d1

    结语

    • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
    • 小礼物走一走 or 点赞
  • 相关阅读:
    解决html中刷新页面后checkbox还选中的问题
    初始化spring容器的几种方法
    在web.xml中配置spring配置文件的路径
    查找算法
    排序算法
    ORACLE TO_CHAR,TO_DATE函数格式说明
    ORACLE TO_DATE函数
    ORACLE SUBSTR函数
    ORACLE学习笔记
    Linux 查看端口占用情况
  • 原文地址：https://www.cnblogs.com/dashucoding/p/11140327.html
Copyright © 2011-2022 走看看