【第40天】LayUI重要组件（续），常用MySQL命令

最新推荐文章于 2023-10-23 11:28:15 发布

來秋

最新推荐文章于 2023-10-23 11:28:15 发布

阅读量634

点赞数

分类专栏：培训日记文章标签： LayUI JavaScript MySQL

本文链接：https://blog.csdn.net/qq_30257081/article/details/85280778

版权

培训日记专栏收录该内容

49 篇文章 3 订阅

订阅专栏

1 LayUI重要组件（续）
- 1.1 面板
  - 1.1.1 折叠面板
  - 1.1.2 手风琴面板
- 1.2 表格
2 MySQL
- 2.1 简介
- 2.2 常用MySQL命令

1 LayUI重要组件（续）

这一章节延续上一天的学习，body之外的代码请移步【第39天】2.2 使用LayUI所必需的环境模板

1.1 面板

在使面板之前，需要依赖element模块及JS库，否则无法进行功能操作。（本章节后面的代码均省略引入script脚本的操作）

    <script src="layui/layui.js"></script>
    <script>
        //注意：面板 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            let element = layui.element;
        });
    </script>

1.1.1 折叠面板

这个面板一次可以打开多个列表。

        <!--
            layui-show:表示默认打开
        -->
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">标题1</h2>
                <div class="layui-colla-content layui-show">标题1的内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">标题2</h2>
                <div class="layui-colla-content">标题2的内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">标题3</h2>
                <div class="layui-colla-content">标题3的内容区域</div>
            </div>
        </div>

效果图：
在这里插入图片描述

1.1.2 手风琴面板

这个面板一次只可以打开一个列表。

       <!--
            与折叠面板完全一致，但是添加了lay-accordion只展现一个面板项
        -->
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">面板标题1</h2>
                <div class="layui-colla-content">面板内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">面板标题2</h2>
                <div class="layui-colla-content">面板内容区域</div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">面板标题3</h2>
                <div class="layui-colla-content">面板内容区域</div>
            </div>
        </div>

效果图：
在这里插入图片描述

1.2 表格

在使用表格之前，需要依赖element模块及JS库，否则无法进行功能操作。（本章节后面的代码均省略引入script脚本的操作）

    <script src="layui/layui.js"></script>
    <script>
        //注意：表格 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            let element = layui.element;
        });
    </script>

        <!--
            lay-even	无	用于开启 隔行 背景，可与其它属性一起使用
            lay-skin="属性值"	     line （行边框风格）
                                    row （列边框风格）
                                    nob （无边框风格）	若使用默认风格不设置该属性即可
            lay-size="属性值"
                                    sm （小尺寸）
                                    lg （大尺寸）	若使用默认尺寸不设置该属性即可
        -->

        <!--行边框风格的表格-->
        <table class="layui-table" lay-skin="line">
            <!--
                <colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
                如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
                <colgroup> 标签只能在 table 元素中使用。
                支持align valign width span（横跨列数）

                所有主流浏览器都支持 <colgroup> 标签。
                Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
            -->
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>用户名</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Amy</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
            </tr>
            <tr>
                <td>Elena</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
            </tbody>
        </table>

        <!--列边框风格的表格-->
        <table class="layui-table" lay-skin="row">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>用户名</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Amy</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
            </tr>
            <tr>
                <td>Elena</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
            </tbody>
        </table>

        <!--无边框风格的表格-->
        <table class="layui-table" lay-skin="nob">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>用户名</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Amy</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
            </tr>
            <tr>
                <td>Elena</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
            </tbody>
        </table>

在这里插入图片描述

1.3 网站框架模板

根据LayUI官方的使用教程，结合iframe（现阶段）写了一个demo，作为一个小小的框架，用的时候来CV一波修改内容。

        <!--整个页面的div-->
        <div class="layui-layout layui-layout-admin">

            <!--标题头，里面放置logo和水平导航-->
            <div class="layui-header">
                <!--标题头中的logo-->
                <div class="layui-logo">Pornhub</div>
                <!--水平导航中左侧一部分-->
                <ul class="layui-nav layui-layout-left" lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="">控制台</a></li>
                    <li class="layui-nav-item"><a href="">商品管理</a></li>
                    <li class="layui-nav-item"><a href="">用户</a></li>
                    <!--水平导航里的一个单元，这个单元有子列表-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">其他系统</a>
                        <dl class="layui-nav-child">
                            <dd><a href="">邮件管理</a></dd>
                            <dd><a href="">消息管理</a></dd>
                            <dd><a href="">授权管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">社区</a></li>
                </ul>
                <!--水平导航中右侧一部分-->
                <ul class="layui-nav layui-layout-right">
                    <!--这个单元有子列表，父标题有用户的头像和名字-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <!--用户头像和名字-->
                            <img src="images/avatar.png" class="layui-nav-img">Eric
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">注销登录</a></li>
                </ul>
            </div>

            <!--左边导航栏-->
            <div class="layui-side  layui-bg-black">
                <div class="layui-side-scroll">
                    <ul class="layui-nav layui-nav-tree" lay-filter="">
                        <!--
                            layui-nav-itemed:此属性表示默认展开
                        -->
                        <li class="layui-nav-item layui-nav-itemed">
                            <a href="javascript:;">用户管理</a>
                            <dl class="layui-nav-child">
                                <!--暂用iframe链接右边内容的嵌入页面-->
                                <dd><a href="reg.html" target="frameName">用户注册</a></dd>
                                <dd><a href="login.html" target="frameName">用户登录</a></dd>
                                <dd><a href="logout.html" target="frameName">用户注销</a></dd>
                                <dd><a href="table.html" target="frameName">表格</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">解决方案</a>
                        </li>
                        <li class="layui-nav-item"><a href="">云市场</a></li>
                        <li class="layui-nav-item"><a href="">发布商品</a></li>
                    </ul>
                </div>
            </div>

            <!--正文-->
            <div class="layui-body">
                <!--在正文写iframe框架中的内容-->
                <iframe src="main.html" frameborder="0" width="100%" height="100%" name="frameName"></iframe>
            </div>

            <!--底部-->
            <div class="layui-footer">
                <!-- 底部固定区域 -->
                © layui.com - 底部固定区域
            </div>
        </div>
        <script src="layui/layui.js"></script>
        <script>
            layui.use('element', function(){
                let element = layui.element;
            });
        </script>

效果图：
在这里插入图片描述

2 MySQL

2.1 简介

MySQL是一个关系型数据库管理系统，是由瑞典的MySQLAB公司研发，之后被Oracle 公司收购，目前是甲骨文旗下的产品。MySQL是目前最流行的关系型数据库管理系统之一。在小型的web应用中，MySQL是最好的RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件。

关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。 但是注意，MySQL中存在大量的database，用户首先选择database，之后在database中建立表，这一点与Oracle不同。

MySQL同样使用SQL语言，此语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择 MySQL 作为网站数据库。

由于其社区版的性能卓越，安装简便，搭配Apache旗下的Tomcat等工具可以组成良好的开发环境。

2.2 常用MySQL命令

在Windows的CMD控制台使用MySQL
- 连接MySQL:
  mysql -uroot -proot
- 使用MySQL命令时，我们可以直接指定要连接的数据源（databases）：
  mysql -uroot -proot 用户名
  注意如果在安装时没有添加进环境变量，则必须在CMD中定位到mysql的bin目录下
  一般可以直接使用控制台，而不使用CMD
MySQL控制台
- 查看当前有哪些可用的数据源（databases）：
  show databases;
- 使用某个数据源：
  use test;
- 创建数据源：
  create database 数据库名;
- 查看当前数据库中下有哪些数据表：
  show tables;
- 创建表：
  create table 表名(
  tid int primary key,
  tname varchar(10),
  age int
  );
- 查看表结构的三种方式
  desc 表名;
  explain 表名;
  show columns from 表名;
- 删除表：
  drop table if exists 表名;
- MySQL中的自增长属性：
  create table 表名(
  –给tid添加主键属性和自增长属性
  tid int primary key auto_increment,
  tname varchar(10),
  birth date
  );
- 添加（id设置过自增的，第一个字段填null，让数据库自增决定id）
  insert into 表名(字段1,字段2,字段3) values(null,‘EWE’,‘2014-12-12’);
- 删除
  delete from 表名 where 字段 = 值;
- 修改
  update 表名 set 字段1 = 字段值1,字段2 = 字段值2,字段N = 字段N where 条件
- 截断表（保留表结构）
  truncate 表
- 拿取表中记录数（使用分组函数）
  select count(*) from 表
- 分页，MySQL中的分页依据 limit:
  如果limit之后只有一个值：从第一条开始数5条数据
  select * from 表名 limit 5;
  如果有两个参数：第一个数为index开始第二个参数是数多少个条数
  select * from 表名 limit 5,5;