欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第87节:Java中的Bootstrap基础与SQL入门

程序员文章站 2022-04-08 20:45:53
第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: 基本过滤器: 选择器:过滤器 入门 常见关系化数据库 mysql数据库配置bin目录到path中,命令行: 数据库服务器,数据库和表 ......

第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 入门

常见关系化数据库

第87节:Java中的Bootstrap基础与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 子句 
对分组结果进行过滤

三种实体关系

第87节:Java中的Bootstrap基础与SQL入门

多表查询——内连接查询

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/"

第87节:Java中的Bootstrap基础与SQL入门

到安装目录中删除mysql:

第87节:Java中的Bootstrap基础与SQL入门

c:\programdata\mysql目录下将mysql删除

在【开始】中输入“regedit“

第87节:Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门

删除:

// 所有与mysql有关的文件删除
hkey_local_machine\system\currentcontrolset\services
hkey_local_machine\system\controlset001\services
hkey_local_machine\system\controlset002\services

安装mysql与配置mysql

第87节:Java中的Bootstrap基础与SQL入门

点击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,
是否添加防火墙
启动严格的语法格式

第87节:Java中的Bootstrap基础与SQL入门

第一个是默认iso-8859-1编码
第二个是utf8编码,但是是日本的
第三个自己定义编码格式

第87节:Java中的Bootstrap基础与SQL入门

将mysql设置为windows服务,mysql服务的名称,自动启动mysql服务,将mysql设置到环境变量path中。

第87节:Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门

如果有一个没有打钩,说明安装失败,没有卸载干净,【管理】【服务和应用程序】【服务】。

开启  net start mysql
关闭  net stop mysql

第87节:Java中的Bootstrap基础与SQL入门

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是一个可变长度的字符串

第87节:Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门

删除主键:

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列,用于通过一系列的行和列的组合来创建页面的布局。

第87节:Java中的Bootstrap基础与SQL入门

第87节:Java中的Bootstrap基础与SQL入门

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

达叔小生:往后余生,唯独有你
you and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞