1.用的的技术
require.js 是用来模块化开发，进行异步请求的 arttemplate.js 模板引擎是用来数据渲染的 jquery.js 是用来进行DOM操作和数据请求的 jquery.cookie.js 是用来储存cookie的值得 bootstrap 它依赖有jquery，如果需要bootstrap.js前面需要引入jquery.js bootstrap.css 是用来进行样式设置的 bootstrap.js 是用来动态交互的
2.login.html部分用到的技术
使用jquery的设置cookie的值 $.cookie("userInfo", JSON.stringify(res.result)); $.removeCookie("userInfo")删除cookie值 需要下载jquery.cookie.js
页面调转 location.href = "/"; //location.href="index.html"
阻止默认行为 return false(jquery下才可以)
点击获取form的表单信息 $(this).serialize()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login-container">
<h3 class="text-center">博学谷后台管理系统</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="" name="tc_name" value="前端学院">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="" name="tc_pass" value="123456">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-block btn-lg">登录</button>
</div>
</div>
</form>
</div>
</body>
<script src="js/lib/jquery-2.1.4.js"></script>
<script src="js/lib/jquery.cookie.js"></script>
<script>
$("form").on("submit", function () {
//1、获取输入的表单信息
var formData = $(this).serialize();
console.log(formData)
//2、提交到服务器
$.ajax({
type: "post",
url: "/api/login",
data: formData,
success: function (res) { //响应的：response
//为了实现login.html里面的数据可以再index.html里面进行访问：
//a、h5本地存储：localStorage/sessionStorage
//b、cookie：浏览器端的技术，也可以实现：在不跨域的前提下，任何页面都可以访问这些数据
console.log(res);
$.cookie("userInfo", JSON.stringify(res.result));
//c、session：服务器端的技术
var userInfoStr = $.cookie("userInfo");
console.log(userInfoStr); //JSON字符换
location.href = "/"; //location.href="index.html"
}
})
//出发点：减少服务器的压力，将服务器验证变成前端验证
// -->前端验证需要获取数据，需要在用户提交表单的时候，才能真正的获取数据，而用户用户提交表单就会触发form标签的submit事件，而submit事件的就会默认跳转页面(刷新页面)，而一旦跳转页面数据就丢失了，所以需要阻止该事件的默认行为
//阻止事件的默认行为-->同步提交表单
return false;
})
</script>
</html>
2. index.html 部分用到的技术点
使用bootstrap进行首页布局 引入相应的css和js
引入require.js并与main.js建立联系 data-main里面的“.js”可以省略
<script src="js/lib/require.js" data-main="main"></script>
给一个空盒子设置一个div来放切换的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/datetimepicker/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="assets/uploadify/uploadify.css"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--侧边栏-->
<div class="aside">
<!--个人资料-->
<div class="profile-container">
<div class="img-container">
<img src="" class="img-circle img-responsive">
</div>
<h4 class="text-center"></h4>
</div>
<!--菜单栏-->
<div class="list-group">
<button type="button" class="list-group-item active btn-teacher">讲师管理</button>
<button type="button" class="list-group-item btn-course">课程管理</button>
<button type="button" class="list-group-item btn-courseAdd">>>>创建课程</button>
<button type="button" class="list-group-item btn-course-message">>>>课程基本信息</button>
<button type="button" class="list-group-item btn-course-time">>>>编辑课时</button>
<button type="button" class="list-group-item btn-course-category">课程分类</button>
<button type="button" class="list-group-item btn-chart">图表统计</button>
</div>
</div>
<!--右侧内容区-->
<div class="content-container">
<!--顶部菜单栏-->
<div class="top panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1 col-md-offset-8">
<a href="#" class="personalCenter">个人中心</a>
</div>
<div class="col-md-1">
<a href="login.html" class="link-logout">退出</a>
</div>
</div>
</div>
</div>
<!--要切换内容的区域-->
<div class="menu-content-container">
</div>
</div>
</body>
<script src="js/lib/require.js" data-main="main"></script>
</html>
3. main.js 部分用到的技术点，它就是个主模块，是个大心脏
require的配置问题 使用require.config({})来进行配置
baseUrl 键值对 来设置默认路径
paths 键值对对象 来设置路径
shim 键值对对象来 来设置模块依赖
require(["a.js","b.js"],function(a,b){...})
当他触发默认事件的时候触发a.js也就是 $(this).a("我是石顺麟") 会跟a.js建立联系并把"我是石顺麟"通过形参传过去了
a.js 子模块需要设置按需加载的问题 并用define(["c.js","d.js"],function(){ return function(name){出来业务逻辑name="我是石顺麟"} })
设置ajax的全局默认样式 jquery的方法 $.ajaxSetup(beforeSend:function(){发送ajax等待的业务逻辑},complete:function(){数据请求回来之后的业务逻辑})
把JSON字符换转化成JSON对象 JSON.parse(userInfoStr)
实现菜单栏切换功能 通过事件委托为按钮注册事件判断该类名是哪个 用HTML5的 hasclass("demo")方法
自动触发事件 $(".aside .list-group button.btn-teacher").trigger("click"); trigger()方法
退出功能 删除cookie值 $.removeCookie("userInfo") 并调转到登录页面 location.href="login.html"
/**
* 这是注释的内容
* Author:Wilbert
* Date:2017/6/28
*/
require.config({
baseUrl:"js",//设置默认路径
paths:{ //设置路径
jquery:"lib/jquery-2.1.4",
cookie:"lib/jquery.cookie",
text:"lib/text",
arttemplate:"lib/template-web",
//配置tpls文件夹路径
tpls:"../tpls",
bootstrap:"../assets/bootstrap/js/bootstrap",
datatime:"../assets/datetimepicker/js/bootstrap-datetimepicker",
//上传控件
upload:"../assets/uploadify/jquery.uploadify",
//配置ueditor
ueConf:"../assets/ueditor/ueditor.config",
ueAll:"../assets/ueditor/ueditor.all",
ZeroClipboard:"../assets/ueditor/third-party/zeroclipboard/ZeroClipboard",
//配置百度图表控件
echarts:"lib/echarts.min"
},
shim:{ //设置依赖模块
bootstrap:{
deps:["jquery"] //依赖jQuery
},
datatime:{
deps:["bootstrap"] //依赖bootstrap
},
upload:{
deps:["jquery"]
}
}
})
require(["jquery","teacher/list","courseCategory/list","course/list","course/add","course/editMessage","couserTime/list","course/personalCenter","text!tpls/loading.html","char","cookie"],function($,teacherList,courseCategory,courseList,courseAdd,editMessage,coursetime,personalCenter,loadingTpl,chart){
var $modalloading = $(loadingTpl)
//设置ajax请求的全局默认样式，所有的ajax请求都可以用的
$.ajaxSetup( {
beforeSend:function(){
//console.log("发送ajax之前");
//再每次发送ajax之前把前面的模态框删除掉
//$("#modalloading").remove();
$modalloading.appendTo("body").modal();
},
complete:function(){
$modalloading.on("hidden.bs.modal",function(){
$modalloading.remove();
}).modal("hide");
}
})
//1在cookie中获取保存的数据
var userInfoStr=$.cookie("userInfo");
//console.log(userInfoStr); //JSON字符换
//如果获取不到cookie，说明没有登录过，跳转到登录页面
if(!userInfoStr){
location.href="login.html";
}
var userInfo=JSON.parse(userInfoStr); //把JSON字符换转化成JSON对象
//console.log(userInfo);
//2、更新用户名和头像
$(".profile-container .img-container img").attr("src",userInfo.tc_avatar);
$(".profile-container h4").text(userInfo.tc_name);
//3、实现菜单栏切换
$(".aside .list-group").on("click","button",function(){
//实现菜单背景的切换
$(this).addClass("active").siblings().removeClass("active");
//a、讲师管理
if($(this).hasClass("btn-teacher")){
teacherList();
}else if($(this).hasClass("btn-course")){
//b、课程管理
courseList();
}else if($(this).hasClass("btn-course-category")){
//b、课程分类
courseCategory();
}else if($(this).hasClass("btn-chart")){
//alert("图表统计模块")
//b、图表统计
chart();
}else if($(this).hasClass("btn-courseAdd")){
//b、创建课程
courseAdd();
}else if($(this).hasClass("btn-course-message")){
//b、课程基本信息
editMessage();
}else if($(this).hasClass("btn-course-time")){
//b、课时管理
coursetime();
}
});
//5.触发个人中心事件
$(".panel-body .personalCenter").on("click",function(){
personalCenter();
})
//6.为退出注册事件
$(".link-logout").on("click",function(){
//发送ajax请求 使其到登录状态
$.post("api/logout",{},function(){
//删除cookie的值
$.removeCookie("userInfo")
console.log($.cookie("userInfo"));
//调转到登录界面
//location.href="login.html";
})
})
//4、自动触发讲师管理按钮的点击事件
$(".aside .list-group button.btn-teacher").trigger("click");
})
时间： 2024-10-17 16:18:53