使用Bootstrap重构学生管理系统界面（了解）

2019-06-15 本文已影响704人测试老杨

Bootstrap介绍

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

我对Bootstrap的理解

1）Bootstrap框架通过标签选择器（元素选择器）绑定样式相关的代码（比如：我们发现引入了Bootstrap后，界面上的链接是没有下划线的）
2）Bootstrap框架通过类选择器，id选择器，组合选择器（由基本选择器组成）绑定处理样式的css代码和js代码，我们可以给元素设置class和id，这样的话，处理样式的代码就能够对这些元素真正生效。

思路

1）重构index页面
2）修改js脚本里面的list函数
3）修改js脚本里面的add函数
4）修改js脚本里面的edit函数
5）修改js脚本里面的save函数

image.png

项目地址

https://github.com/yangzc23/stuwebNG

image.png

遇到的问题

问题描述：
保存操作的ajax请求状态为canceled

image.png

原因分析：
URL地址发生变化，浏览器将该ajax请求取消

解决方法：
把保存和取消的按钮放到表单外面

image.png

重构index页面

修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="js/student.js"></script>
<script type="text/javascript">
    $(function(){
        $('.form_date').datetimepicker({
          language: 'zh-CN',
          weekStart: 1,
          todayBtn: 1,
          autoclose: 1,
          todayHighlight: 1,
          startView: 2,
          minView: 2,
          forceParse: 0,
         });
    })
</script>
<style>
#menu{
    margin:10px;
}
</style>
</head>
<body onload="list();" class="bg-info">
<!--导航层-->
<div>
    <!--菜单列表-->
    <ul class="nav nav-pills nav-justified">
        <li role="presentation" class="active"><a href="javascript:void(0);">学生基本信息管理</a></li>
        <li role="presentation"><a href="javascript:void(0);">学生档案</a></li>
        <li role="presentation"><a href="javascript:void(0);">学生就业情况</a></li>
    </ul>   
</div>
<div>
<div id="list" class="panel panel-default"></div>
<div id="menu">
<button type="button" class="btn btn-primary" onclick="add();">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加
</button>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="subject"></h3>
            </div>
            <div class="modal-body">
                <form role="form" id="register">
                    <div class="form-group" id="first">
                        <label for="sid">学号</label> <input type="text"
                            class="form-control" id="sid" name="sid" readonly>
                    </div>
                    <div class="form-group">
                        <label for="sname">姓名</label> <input type="text"
                            class="form-control" id="sname" name="sname" placeholder="请输入姓名">
                    </div>
                    <label for="name">性別</label>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="male" value="1" checked> 靓仔
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="female" value="0"> 美女
                        </label>
                    </div>
                    <div class="form-group">
                    <label for="birth">生日</label>
                    <div class="input-group date form_date" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">                       
                        <input name="birth" id="birth" class="form-control" type="text" value="" readonly>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-remove"></span>
                        </span>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                    </div>      
                    <div class="form-group">
                        <label for="photo">上传头像</label>
                        <input type="file" id="photo" name="photo">
                        <p class="help-block">请上传jpg或者png格式的文件！</p>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" onclick="upload();">
                            <span class="glyphicon glyphicon-upload" aria-hidden="true"></span> 上传
                        </button>
                    </div>
                    <div hidden="hidden">
                        <input type="text" name="filePath" id="filePath" value="images/default.png"/>
                    </div>
                    <div class="form-group">
                        <img width="120" height="120" src="images/default.png" id="photo2"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function() {
    $('#edit').modal('hide');
});
</script>
</div>
</body>
</html>

修改JS脚本里面的list函数

修改后的list函数代码如下：

function list(){
    $.ajax({
        type: "get",
        url: "welcome",
        cache: false,
        async: true,
        dataType: "json",
        success: function(data){
            var html = "<div class=\"panel-heading\"><h3 class=\"panel-title\">学生列表</h3></div>";
            html += "<div><p></p></div>";
            html += "<table class=\"table table-hover\">";
            html += "<tr><th>学号</th><th>姓名</th><th>性别</th><th>生日</th><th>操作</th></tr>";
            $.each(data.data,function(index,obj){
                html += "<tr><td>"+obj.sno+"</td><td>"+obj.sname+
                "</td><td>"+obj.isMale+"</td><td>"+obj.birth+"</td><td>"+
                "<a href=\"javascript:void(0)\" onclick=\"detail(this);\">详情</a>&nbsp;"+
                "<a href=\"javascript:void(0)\" onclick=\"edit(this);\">编辑</a>&nbsp;"+
                "<a href=\"javascript:void(0)\" onclick=\"del(this);\">删除</a>"+             
                "</td></tr>";
            });
            html += "</table>";
            //console.log(html);
            $("#list").html(html);
        }
    });
}

修改JS函数里面的add函数

修改后的add函数代码如下：

function add(){
    $("#subject").text("注册学生信息");
    $("#first").hide();
    $("#register")[0].reset();
    $("#photo2").attr("src","images/default.png");
    //$("#edit").css("display","block");
    $('.form_date').datetimepicker("setDate", new Date()); 
    $('#edit').modal('show');
}

修改JS函数里面的edit函数

修改后的edit函数代码如下：

function edit(e){
    $("#register")[0].reset();              
    $("#subject").text("修改学生信息");
    $("#first").show();
    $("#photo2").attr("src","images/default.png");
    var sid = $(e).parent().siblings().first().text();
    //alert(sid);
    $.ajax({
        //几个参数需要注意一下
        type: "GET",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "edit?sid="+sid ,//url
        success: function (data) {
            //console.log(data);//打印服务端返回的数据(调试用)
            if (data.result == "success") {
                var stu = data.data;
                $("#sid").val(stu.sno);
                $("#sname").val(stu.sname);
                if(stu.isMale){
                    $("#male").prop("checked",true);
                }else{
                    $("#female").prop("checked",true);
                }
                $("#birth").val(stu.birth);
                $("#filePath").val(stu.filePath);
                $("#photo2").attr("src",stu.filePath);
                $('#edit').modal('show');
            }
        },
        error : function() {
            alert("异常！");
        }
    });
}

修改JS函数里面的save函数

修改后的save函数代码如下：

function save(){
    $.ajax({
            //几个参数需要注意一下
            type: "post",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "save" ,//url
            data: $("#register").serialize(),
            success: function (data) {
                //console.log(data);//打印服务端返回的数据(调试用)
                if (data.result == "success") {
                    $('#edit').modal('hide');
                    //$("#edit").css("display","none");
                    //$("#register")[0].reset();
                    //$("#photo2").attr("src","images/default.png");
                    //alert(data.message);
                    list();
                }
            },
            error : function() {
                alert("异常！");
            }
        });
}

参考资料

[01] Bootstrap下载及使用
https://v3.bootcss.com/getting-started/
[02] Bootstrap组件
https://v3.bootcss.com/components/
[03] 导航
https://v3.bootcss.com/components/#nav
[04] Glyphicons 字体图标
https://v3.bootcss.com/components/#glyphicons
[05] Bootstrap徽章
https://v3.bootcss.com/components/#badges
[06] Bootstrap表单
https://www.jianshu.com/p/ffbc36965840
[07] Bootstrap教程
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
[08] 解决ajax请求状态为canceled问题
https://www.jianshu.com/p/719c2a2da406
[09] Bootstrap模态框
https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
[10] Bootstrap日期和时间表单组件
https://www.bootcss.com/p/bootstrap-datetimepicker
[11] bootstrap3使用bootstrap datetimepicker日期插件
https://www.jb51.net/article/114598.htm
[12] bootstrap-datetimepicker 初始值
https://blog.csdn.net/shenwb110/article/details/81386523

微信扫一扫关注该公众号【测试开发者部落】

image.png
点击链接加入群聊【软件测试学习交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105

使用Bootstrap重构学生管理系统界面（了解）

Bootstrap介绍

我对Bootstrap的理解

思路

项目地址

遇到的问题

重构index页面

修改JS脚本里面的list函数

修改JS函数里面的add函数

修改JS函数里面的edit函数

修改JS函数里面的save函数

参考资料

猜你喜欢

热点阅读