thinkphp5 第7课：引入bootstrap

最新推荐文章于 2024-09-03 10:12:47 发布

李书明

最新推荐文章于 2024-09-03 10:12:47 发布

阅读量2.5k

点赞数

分类专栏： thinkphp5.0

本文链接：https://blog.csdn.net/lsmxx/article/details/100830619

版权

thinkphp5.0 专栏收录该内容

43 篇文章 13 订阅

订阅专栏

在学习本章前，你必须先学习有关bootstrap框架的博客，详见以下两篇：

https://blog.csdn.net/lsmxx/article/details/100538484

https://blog.csdn.net/lsmxx/article/details/100655600

在tp5中，如何引入bootstrap呢？在tp5框架的public目录下有一static目录，该目录就是用来存放静态资源的，包括第三方的前台框架boostrap

下载boostrap、bootstrapvalidtor和jquery，这些文件可以到学校服务器上下载，

下载后，解压到static目录下

接下来，在模板文件html中就可以使用boostrap框架了

案例：使用bootstrap3表单和表单验证，添加学生信

在index模块，创建student控制器，代码如下：

<?php

namespace app\index\controller;


use think\Controller;


/**
 * Class Student
 */
class Student extends Controller
{
    public function index()
    {
        return $this->fetch();
    }

}

接下来，在view目录下，创建student目录，然后创建模板文件index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加学生</title>
    <link rel="stylesheet" href="__STATIC__/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="__STATIC__/bootstrapvalidator/css/bootstrapValidator.css">
    <script src="__STATIC__/jquery-1.11.3.min.js"></script>
    <script src="__STATIC__/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="__STATIC__/bootstrapvalidator/js/bootstrapValidator.js"></script>
    <script src="__STATIC__/bootstrapvalidator/js/language/zh_CN.js"></script>

</head>
<body>
<div class="container">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">添加学生</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" action="{:url('add')}" method="post">
                    <div class="form-group">
                        <label for="no" class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                no: {
                    validators: {
                        notEmpty: {
                            message: '学号不能为空'
                        }
                    }
                },
                name: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                age: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    });
</script>

需要讲解的是 head 区中的link和script标签中的 __STATIC__

使用 __STATIC__ 的目的是：获取样式文件和脚本文件所在目录

这个常量我们在配置文件config.php事先定义好的

打开application目录中的config.php文件，找到 view_replace_str

需要改写成：

 'view_replace_str'       => [
        '__STATIC__' => $_SERVER['REQUEST_SCHEME']
            . "://".$_SERVER['HTTP_HOST']
            . rtrim(dirname($_SERVER['SCRIPT_NAME']))
            . '/static',
    ],

这段代码可以获取资源文件所在目录，比如：

http://127.0.0.1/tp5/public/static

这要当我们在浏览器运行：http://127.0.0.1/tp5/public/index.php/index/student

显示页面如下：

查看网页源代码：

我们就会发现，写在模板文件中的 __STATIC__ 变成了：http://127.0.0.1/tp5/public/static

这个表单还可以实现表单验证

在表单中，还有一行代码需要讲解

<form class="form-horizontal" action="{:url('add')}" method="post">

上面代码中出现了{:url('add)} ，url()是一个tp5自带的助手函数，可以自动生成url路径

比如：url('add') 表示生成当前控制器中的add方法的路径

我们查看一下网页源代码，上面的代码已经生成如下代码：

其中add.html 是伪静态，从以上路径上看，会执行index模块student控制器add方法

如果想实现生成带域名的完整路径，可以将url改写成如下：

url('add','','html',true)

这样就生成了：http://127.0.0.1/tp5/public/index.php/index/student/add.html

有关url生成，可以查看tp5完全手册中 “路由-URL生成”

李书明

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录