大事件项目

mac2024-07-01  58

大事件项目

资源整合

通过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判断用户是否真的想要退出首页删除本地存储的凭据跳转到登录页
最新回复(0)