1.用的的技術javascript
require.js 是用來模塊化開發,進行異步請求的 arttemplate.js 模板引擎是用來數據渲染的 jquery.js 是用來進行DOM操做和數據請求的 jquery.cookie.js 是用來儲存cookie的值得 bootstrap 它依賴有jquery,若是須要bootstrap.js前面須要引入jquery.js bootstrap.css 是用來進行樣式設置的 bootstrap.js 是用來動態交互的
2.login.html部分用到的技術css
使用jquery的設置cookie的值 $.cookie("userInfo", JSON.stringify(res.result)); $.removeCookie("userInfo")刪除cookie值 須要下載jquery.cookie.jshtml
頁面調轉 location.href = "/"; //location.href="index.html"前端
阻止默認行爲 return false(jquery下才能夠) java
點擊獲取form的表單信息 觸發 submit 事件,在用serialize()獲取表單信息 $(this).serialize() jquery
<!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 () { //一、獲取輸入的表單信息 var formData = $(this).serialize(); console.log(formData) //二、提交到服務器 $.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 部分用到的技術點web
使用bootstrap進行首頁佈局 引入相應的css和jsajax
引入require.js並與main.js創建聯繫 data-main裏面的「.js」能夠省略 編程
<script src="js/lib/require.js" data-main="main"></script>bootstrap
給一個空盒子設置一個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); //二、更新用戶名和頭像 $(".profile-container .img-container img").attr("src",userInfo.tc_avatar); $(".profile-container h4").text(userInfo.tc_name); //三、實現菜單欄切換 $(".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"; }) }) //四、自動觸發講師管理按鈕的點擊事件 $(".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; //修改頁面中的文本 //一、修改按鈕的文本 //0表示啓用狀態 $btn.text(tc_status == 0 ? "註銷" : "啓用"); //二、修改屬性 $btn.parent().attr("tc_status", tc_status); //三、修改指定"用戶狀態列"的文本 $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>