文章目录
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函数
项目地址
https://github.com/yangzc23/stuwebNG
遇到的问题
问题描述：
保存操作的ajax请求状态为canceled
原因分析：
URL地址发生变化，浏览器将该ajax请求取消
解决方法：
把保存和取消的按钮放到表单外面
重构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">×</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)\" οnclick=\"detail(this);\">详情</a> "+
"<a href=\"javascript:void(0)\" οnclick=\"edit(this);\">编辑</a> "+
"<a href=\"javascript:void(0)\" οnclick=\"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
微信扫一扫关注公众号
点击链接加入群聊
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105
1077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
