大事件项目

大事件项目

资源整合

通过iframe框架在同一页面显示不同页面

• 给iframe设置name属性，设置a的target属性为其name属性值，进行链接

左侧边导航栏

点击显示二级菜单栏

点击对应的导航栏进行高亮显示（排他）

登录页

输入用户名和密码进入首页

• 同时保存凭据

• 通过$.ajaxSetup()进行全局设置，设置请求头

  $.ajaxSetup({
      headers:{
          Authorization:window.localStorage.getItem('token');
      }
      
  })
  

首页

• 判断是否存有凭证

  • 无凭证（全局设置）

    $.ajaxSetup({
        error:function(res){
            if(res.statusText='Forbidden'){
                alert('无凭证');
                //跳回登录页
                window.location.href='./login.html';
            }
        }
    })
    

• 获取用户信息，更新登录管理员信息（账户及头像）

个人中心

• 获取管理员信息

  • 临时预览修改图片

    $('input').change(function(){
        var url=URL.createObjectURL(this.files[0]);
        $('img').prop('src',url);
    })
    

• 修改管理员信息

文章类别分类

• 获取所有文章类别

  • 为删除按钮设置文章类别的id

• 点击新增类别

  • 模态框

    $('#myModal').modal('hide');//隐藏模态框
    $('#myModal').modal('show');//显示模态框
    

  • 点击确认进行新增

• 点击删除进行删除文章类别（事件委托）

• 点击编辑进行编辑文章类别（事件委托）

  • 模态框

    $('#editModal').modal('show');
    

  • 显示当前文章类别的相关信息渲染到模态框中（通过获取删除按钮的id）

  • 此处添加一个隐藏域用来隐藏该文章分类的id,为了对此类进行编辑传递参数

  • 点击确认按钮进行编辑

发布文章

获取文章分类

• 通过模板引擎进行渲染页面

  {{each data}}
  <option value="{{$value.id}}">{{$value.name}}</option>//保存的id是因为传递的参数是id
  {{/each}}
  
  var html=template('cateTem',res);
  

  jeDate插件

• 引入文件(jq.js boostrap.js jeDate.js boostrap.css jeDate.css)

• js语法：

  jeDate('.time',function(){
      format:'YYYY-MM-DD',
      isTime:false,
      minDate:'2014-09-19 00:00:00',
      isinitVal:true,//是否显示当前时间
      zIndex:99999,//显示层级
  })
  

富文本插件wangEditor

• 引入js文件(在线)

  <script src='//unpkg.com/wangeditor/release/wangEditor.min.js'></script>
  

• js语法：

  var E=window.wangEditor;
  var editor=new E('.editor');
  editor.create()
  
  //其中获取编辑器中的内容
  editor.txt.html();//获取html相关文本
  editor.txt.text();//获取文本
  //设置编辑器中的内容
  editor.txt.html('<p>我是内容</p>');//识别html结构
  editor.txt.text('<p>我是文本</p>');//不能识别html结构
  
  

点击发布按钮进行发布文章

• 传递参数为formdata,注意传递参数是否一一对应，表单中没有的自己手动添加

  formdata.append('content',editor.txt.html());
  formdata.append('state','已发布');
  
  

点击存为草稿

• 此处只有上步有一点不一样

  formdata.append('state','');//草稿保存默认此参数为空
  
  

文章列表

• 注意每次进行ajax请求获取文章时，传递的参数要一致，否则会出现差错

获取文章列表分类

• 此处通过模板引擎进行渲染，注意需要给option设置value属性为文章类别的id,以便后面筛选时使用

获取所有文章

• 通过模板引擎进行渲染页面

• 分页插件(twbsPagination)

  • 引入文件(引入jq.js boostrap.css boostrap.js twbsPagination.js)

  • js语法：

    <ul class='pagination' id='pagination'>
        
    </ul>
    <script>
        $('#pagination').twbsPagination({
            totalPages:res.data.totalPage,//获取文章总页数
            visiblePages:7;//显示页数按钮个数
            first:'首页',
            last:'尾页',
            next:'下一页',
            prev:'上一页',
            onPageClick:function(event,page){//点击页码发生的事件
            console.log(page);//当前点击的页码
        	}
            
        })
    </script>
    

筛选文章

• 需要改变分页插件总页码大小

  $('#pagination').twbsPagination('changeTotalPages',当前数据总页码,起始页)
  

点击编辑进行编辑文章

• 通过点击进行跳转到editor页面，其中通过地址栏传递id值，从而进行获取不同文章的内容

获取文章相关内容

点击修改进行编辑文章

• 定义一个隐藏域，用来存储文章的id,以便稍后的编辑确定传递参数做准备

点击退出按钮退出首页

• 通过confirm判断用户是否真的想要退出首页
• 删除本地存储的凭据
• 跳转到登录页