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的表单信息 触发 submit 事件，在用serialize()获取表单信息 $(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 键值对 来设置默认路径 baseUrl:"js"
paths 键值对对象 来设置路径 paths:{jquery:"lib/jquery-2.1.4",cookie:"lib/jquery.cookie"}
shim 键值对对象来 来设置模块依赖 shim:{bootstrap:{deps:["jquery"] }}
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
*/
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");
})
4.讲师管理模块 teacher/list.js，所用到的技术
text.js 用于异步加载文本资源如txt、css、html、xml、svg等。
首先需要在主模块中配置text.js,其次在相应模块引入html文件
发送get请求 $.get("api",{},function(res){这里处理业务逻辑})
发送post请求 $.post("api",{},function(res){处理业务逻辑})
报错功能 throw new Error("数据请求错误")
调用arttemplate的render()方法 art.render("html字符串",res返回来的数据)
把字符串html追加到一个盒子当中使用append()方法前提是使用empty()来清空盒子内容，$("#id").empty().append($teacherList)
链式编程直接在后面 "."就可以了
启用和注销按钮模块没有html渲染直接放在了讲师管理模块
点击注销按钮获取相应的ID值并发送ajax请求，获取更新后的状态值再来改变注销按钮的的值用text("")方法
/**
* 讲师主模块-->讲师列表
* Author:Wilbert
*/
define(["jquery", "text!tpls/teacherList.html", "arttemplate", "teacher/showInfo","teacher/add","teacher/edit"], function ($, teacherListTpl, art, teacherShowInfo,teacherAdd,teacherEdit) {
//art接受了arttemplate模板引擎的返回值-->全局函数：template
return function () {
//3个参数：url/参数/success方法的回调函数
$.get("/api/teacher", {}, function (res) {
//优化前：
// if(res.code==200){
// //数据正常返回-->数据加载到表格中
// }else {
// //数据发生了异常
// throw new Error(res.msg);
// }
//优化后：
if (res.code != 200) throw new Error(res.msg);
console.log(res);
//----->代码能够执行到这里，数据一定成功返回
var teacherList = art.render(teacherListTpl, res); //teacherList:"<div></div>"
//console.log(teacherList);
var $teacherList = $(teacherList);
//console.log($teacherList);
$teacherList
//调用讲师增加模块
.on("click",".btn-add-teacher",function(){
teacherAdd();
})
//启动注销模块
.on("click", ".btn-status", function () {
//实现修改用户状态
//a、修改页面中相应的文本
//b、修改服务器中保存的数据
//实现思路：b-->a
var $btn = $(this);
var data = {
tc_id: $(this).parent().attr("tc_id"),
tc_status: $(this).parent().attr("tc_status")
};
$.post("/api/teacher/handle", data, function (res) {
if (res.code != 200) throw new Error(res.msg);
//获取到更新后的状态值
var tc_status = res.result.tc_status;
//修改页面中的文本
//1、修改按钮的文本 //0表示启用状态
$btn.text(tc_status == 0 ? "注销" : "启用");
//2、修改属性
$btn.parent().attr("tc_status", tc_status);
//3、修改指定"用户状态列"的文本
$btn.parent().siblings(".td-status").text(tc_status == 0 ? "启用" : "注销");
})
})
.on("click", ".btn-show", function () {
var tc_id = $(this).parent().attr("tc_id");
//实现查看讲师信息
teacherShowInfo(tc_id);
})
//调用编辑讲师模块
.on("click",".btn-edit",function(){
var tc_id = $(this).parent().attr("tc_id")
// console.log(tc_id);
teacherEdit(tc_id);
});
//$("<div></div>").appendTo("body"); //-->将字符串转换为dom元素，把该dom元素放到body中
//$(".menu-content-container").html(teacherList);//又会将字符串转换为另一个dom元素，将dom元素放到页面中
$(".menu-content-container").empty().append($teacherList);
})
};
});
5.添加讲师模块 teacher/add.js 所用到的技术点
使用了bootstrap的model()方法事件触发模块框会置顶，前提是先清空以前的模块框用remove()方法，不然会创建无数个模块框
使用 submit事件 用jquery的serialize()方法获取获取表单信息对象，前提是表单需要有name属性
使用日期控件，首先给盒子加个类名比如data-join ，其次用find(".data-join").datetimepicker({})来初始化日期控件
/**
* 增加讲师模块
*/
define(["jquery", "text!tpls/teacherAdd.html", "bootstrap","datatime"], function ($, teacherAddTpl) {
return function () {
$("#modalAddTeacher").remove();
// console.log(teacherAddTpl);
var $teacherAdd = $(teacherAddTpl)
.on("submit", "form", function () {
var FormData = $(this).serialize();
// console.log(FormData);
//组织默认提交按钮刷新真个页面
// $('#modalAddTeacher').modal('hide')
// console.log(FormData);
$.post("api//teacher/add", FormData, function (res) {
// console.log(res);
// 没有发送成功就报错
if (res.code !== 200) throw new Error(res.msg);
//让模态框隐藏
$teacherAdd.modal("hide");
//到了这步说明提交数据成功 刷新讲师模块
$(".aside .list-group button.btn-teacher").trigger("click");
})
return false;
})
.appendTo("body").modal()
//初始化日期控件
$teacherAdd.find(".date-join").datetimepicker({
format: 'yyyy-mm-dd', //格式化日期格式
language:"zh-CN", //选择语言，需要引入语言包
daysOfWeekDisabled:[1,2], //指定周几不能用
autoclose:true, //选完一个日期之后就会自动隐藏日期框
minView:"month",
todayBtn:true,
todayHighlight:true //当选择其他日期的时候，高亮今天的日期
});
}
});
6. 讲师查看模块 teacher/showInfo.js，用到的技术
首先用形参tc_id来接口讲师列表模块传过来的ID值
其次用这个id发送ajax请求，来获取相应的信息
再用arttemplete模板引擎的render方法把数据放在html页面中
/**
* 查看讲师信息
* Author:Wilbert
*/
define(["jquery","text!tpls/teacherShowInfo.html","arttemplate","bootstrap"],function ($,teacherShowInfoTpl,art) {
return function (tc_id) {
//获取指定讲师的信息
$.get("/api/teacher/view",{tc_id:tc_id},function(res){
if(res.code!=200) throw new Error(res.msg);
$("#modalTeacherInfo").remove();
var teacherShowInfo=art.render(teacherShowInfoTpl,res.result);
$(teacherShowInfo).appendTo("body").modal();
});
};
});
7.讲师编辑模块 teacher/edit.js，用到的技术
使用形参来接收讲师列表模块list.js传过来的ID值，
通过ID值来发送ajax请求来获取对应的信息
通过arttemplate.render("模板字符串",res)方法吧获取的数据仿造模板字符串中
通过submit事件用jquery的 serialize()方法来获取表单信息并发送ajax请求，请求成功后用隐藏模块框刷新讲师管理模块功能
使用jquery的appendTo("body")把代码字符串放到body中并追加bootstrap的model()方法来增加模块框方法
/**
* 讲师编辑模块
*/
define(["jquery", "text!tpls/teacherEdit.html","arttemplate", "bootstrap", "datatime"], function ($, teacherEditTpl,art) {
return function (tc_id) {
console.log("讲师编辑模块")
$.get("api//teacher/edit",{tc_id:tc_id},function(res){
if(res.code != 200) throw new Error(res.msg);
// console.log(res);
//删除以前的
$("#modalEditTeacher").remove();
var teacherEdit = art.render(teacherEditTpl,res.result)
//点击编辑模态框保存数据并发送请求刷新页面
var $teacherEdit = $(teacherEdit)
.on("submit","form",function(){
var FormData = $(this).serialize();
console.log(FormData);
//得到form表单的数据 但是没有tc_id用hidden隐藏域把它加上去
//把得到的数据发放修改讲师 发送post请求
$.post("api//teacher/update",FormData,function(res){
console.log(res);
// 判断有没有发送请求成功
if(res.code !=200) throw new Error(res.msg);
//防模态框隐藏 调用 modal("hide")方法会隐藏
$teacherEdit.modal("hide");
//刷新讲师管理页面 调用它的单机事件 trigger("click")
$(".aside .list-group button.btn-teacher").trigger("click");
})
//异步请求防止刷新页面
return false;
})
.appendTo("body").modal();
})
//初始化日期控件
// $teacherEdit.find(".date-join").datetimepicker({
// format: 'yyyy-mm-dd', //格式化日期格式
// language: "zh-CN", //选择语言，需要引入语言包
// daysOfWeekDisabled: [1, 2], //指定周几不能用
// autoclose: true, //选完一个日期之后就会自动隐藏日期框
// minView: "month",
// todayBtn: true,
// todayHighlight: true //当选择其他日期的时候，高亮今天的日期
// });
}
})
8.上传控件的使用
1.首先定义一个file标签 <input type="file" id="picUpload">
<div class="panel panel-default">
<div class="panel-body">
<ol class="breadcrumb">
<li><a href="#">课程管理</a></li>
<li class="active">课程图片</li>
</ol>
<div class="media">
<div class="media-left">
<a href="javascript:void(0)">
{{if(!cs_cover)}}
<img class="media-object" src="imgs/course.png" alt="" width="240" height="120">
{{else}}
<img class="media-object" src="{{cs_cover}}" alt="" width="240" height="120">
{{/if}}
</a>
</div>
<div class="media-body">
<h4>课程名称：{{cs_name}}</h4>
<h4 class="media-heading">讲师名称：{{tc_name}}</h4>
<input type="file" id="picUpload">
</div>
</div>
</div>
</div>
2.初始化上传控件的使用
/**
* 图片修改模块
* Created by Administrator on 2017/7/6.
*/
define(["jquery","text!tpls/coursePic.html","arttemplate","bootstrap","upload"],function($,coursePicTpl,art){
return function(cs_id){
$.get("api/course/picture",{cs_id:cs_id},function(res){
//console.log(res);
var coursePic = art.render(coursePicTpl,res.result);
var $coursePic = $(coursePic);
$(".menu-content-container").html($coursePic);
//初始化上传插件
$("#picUpload").uploadify({
fileObjName: "cs_cover_original", //提交到服务器的name值
formData: {cs_id: cs_id}, //需要提交到服务器的额外的数据
height: 30,
swf: '../../assets/uploadify/uploadify.swf', //必填、放一个swf文件
uploader: '/api/uploader/cover', //请求的地址
width: 120,
itemTemplate: "<span></span>", //指定上传的内容模板
//文件上传成功之后执行的函数
onUploadSuccess: function (file, data, response) {
// alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
//跳转到课程列表界面
$(".btn-course").trigger("click");
}
});
})
}
})
9.图表统计模块 char.js 和char.html，用到的技术点
1.在html中设置宽高和类名
<div class="chart" style="width:600px;height:400px;border:1px solid red;"></div>
2.基于准备好的dom，初始化echarts实例
var myChart = echarts.init($chart.find(".chart").get(0));
3.复制scharts提供的代码
var option={}
4.基于上面的myChart实例来指定的配置项和数据显示图表
myChart.setOption(option);
/**
* 图表统计模块 js部分
* Created by Administrator on 2017/7/7.
*/
define(["jquery", "text!tpls/chart.html", "echarts"], function ($, chartTpl, echarts) {
return function () {
//得到chart.html字符串并转化为jQuery对象并把它放到HTML上
var $chart = $(chartTpl);
$(".menu-content-container").html($chart);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init($chart.find(".chart").get(0));
//发送ajax请求得到男女人数和比例
$.get("api/teacher", {}, function (res) {
//用得到的数据统计男女人数
var date = res.result;
//新建一个空对象 统计男女人数
var genderArray = [{
name: "男",
value: 0
},
{
name: "女",
value: 0
}
];
date.forEach(function (v) {
if (v.tc_gender == "0") {
genderArray[0].value++;
} else {
genderArray[1].value++;
}
})
var option = {
//标题
title: {
text: "讲师中男女比例",
subtext: "副标题"
},
//悬浮框
tooltip: {
trigger: 'item',
//指定了悬浮框的内容
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
//图例
legend: {
//show:false, //图例是否可见
//指定对齐方式
orient: 'horizontal',
// x: 'left',
right: 50, //右对齐
data: ["男", "女"],
textStyle: {
// fontFamily:"宋体",
// fontSize:30
}
},
//数据
series: [{
name: '访问来源',
type: 'pie', //type指定了图形的类型-->pie：饼图
radius: ['50%', '70%'], //分别制定了内外圆的半径
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
//数据
data: genderArray
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
}
})
//图表控件HTML部分
<div class="panel panel-default"> <div class="panel-body"> <ol class="breadcrumb"> <li><a href="#">图表统计</a></li> <li class="active">饼图</li> </ol> <div class="chart" style="width:600px;height:400px;border:1px solid red;"></div> </div> </div>