第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;
问:什么是数据库,数据库有什么用?
数据库就是用来存储数据的仓库。
就是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库进行数据的增删改查操作。
数据库有哪些?
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 点赞
第87节:Java中的Bootstrap基础与SQL入门的更多相关文章
- 第76节:Java中的基础知识
第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...
- 第90节:Java中的Linux基础
第90节:Java中的Linux基础 linux是装载虚拟机上面的: JDK依赖包: yum install glibc.i686 MYSQL依赖包: yum -y install libaio.so ...
- 第68节:Java中的MYSQL运用从小白到大牛
第68节:Java中的MYSQL运用从小白到大牛 前言 学习java必备要求,学会运用!!! 常见关系化数据库 BootStrap是轻量级开发响应式页面的框架,全局css组件,js插件.栅格系统是将页 ...
- 第79节:Java中一些要点
第79节:Java中一些要点 前言 一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢 内容 如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...
- 第78节:Java中的网络编程(上)
第78节:Java中的网络编程(上) 前言 网络编程涉及ip,端口,协议,tcp和udp的了解,和对socket通信的网络细节. 网络编程 OSI开放系统互连 网络编程指IO加网络 TCP/IP模型: ...
- 第69节:Java中数据库的多表操作
第69节:Java中数据库的多表操作 前言 学习数据库的多表操作,去电商行业做项目吧!!! 达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文 ...
- 第83节:Java中的学生管理系统分页功能
第83节:Java中的学生管理系统分页功能 分页功能一般可以做成两种,一种是物理分页,另一种是逻辑分页.这两种功能是有各自的特点的,物理分页是查询的时候,对数据库进行访问,只是查一页数据就进行返回,其 ...
- 第82节:Java中的学生管理系统
第82节:Java中的学生管理系统 学生管理系统的删除功能 删除,点击超链接,点击弹出对话框式是否进行删除,如果确定,就删除,超链接执行的是js方法,在js里访问,跳转servlet,,servlet ...
- 第80节:Java中的MVC设计模式
第80节:Java中的MVC设计模式 前言 了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...
随机推荐
- ORA-15137: cluster in rolling patch
oracle 12.1.0.2,给diskgroup加盘的时候报错ORA-15137: cluster in rolling patch 确认两节点补丁相同 crsctl query crs soft ...
- 配置Linux客户端使用socks5代理上网
配置Linux客户端使用socks5代理上网 背景 有访问google或者其他海外网站需求的同学可能大都用过或者听过ss,在Windows.Mac.Android.IOS都有现成可用的客户端来协助 ...
- centos 上docker 运行出现/bin/sh: . not found
本人用的是Linux上的编译的....然后用了win上的编译命令 解决办法 : 用Linux上的编译命令..... CGO_ENABLED=0 GOOS=linux GOARCH=amd64 g ...
- Django ORM 常用字段和参数
Django ORM 常用字段和参数 一:常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. I ...
- 1,fiddler的工作原理和安装
1,工作原理就是通过设置代理监控客户端和服务端的协议 2,fiddler的安装 1,官方的下载地址:https://www.telerik.com/download/fiddler 一步步安装即可 2 ...
- chrome gps位置模拟设置
chrome gps位置模拟设置 调试公众号页面定位,Edge 虽好实现方便,介于界面实在不符合我的调试习惯 遂上度娘寻觅chrome模拟GPS方法 找了好几个帖子,发现新版本已经不再试用.不得感叹 ...
- 【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
- 磨人的Fragment的转换
磨人的Fragment的转换 本次任务是 程序运行之后将第一个Fragment加载出来 然后点击"SHOW NEXT PAGE"切换到第二个Fragment 当再次点击按钮时下方出 ...
- Linux环境下Flask部署至apache
https://blog.csdn.net/rainbowlemonade/article/details/79725328
- 2019.03.25 bzoj4572: [Scoi2016]围棋(轮廓线dp)
传送门 题解可以参见zjjzjjzjj神仙的,写的很清楚. 代码: #include<bits/stdc++.h> #define ri register int using namesp ...