博学谷项目总结，个人总结经验

时间：2017-08-19 00:47:05 阅读：296 评论：0 收藏：0 [点我收藏+]

标签：roc link div 形参项目总结 hold asi icon 模块化

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”可以省略

　　给一个空盒子设置一个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");
})

博学谷项目总结，个人总结经验

标签：roc link div 形参项目总结 hold asi icon 模块化

原文地址：http://www.cnblogs.com/wade1220/p/7392565.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行