开始一个Koa+mongodb项目（四）实现用户管理

上一章实现好了登录
这篇开始实现我们后台管理的基本功能。

一、实现退出登录

1、在admin.js路由里
定义一个全局对象，自定义变量。

 ctx.state.x={ userinfo:ctx.session.userinfo };

2、在对应的header中修改动态绑定
在header模板中显示用户信息
{{x.userinfo.username}}

3、在login.js
配置loginOut退出登录功能

router.get('/loginOut', async (ctx)=>{ 
ctx.session.userinfo=null; ctx.redirect(ctx.state.__HOST__+'/admin/login') });

二、配置用户管理路由

在view页面的列表配置一下动态选中
这里是看教程，我还是略懂的，所以就不打具体理解了，怕误导大家。
这里的x.url就是上面定义好的全局对象x

<li class="
{{if x.url[1]=='manager'}} active open {{/if}}">
 <a href="#" class="dropdown-toggle"> <i class="icon-user-md"></i> <span class="menu-text"> 用户管理 </span> 
 <b class="arrow icon-angle-down"></b> </a> <ul class="submenu" > <li class="{{if !G.url[2]}} active {{/if}}"> 
 <a href="{{__ROOT__}}/admin/manager" > <i class="icon-double-angle-right"></i> 用户列表 </a> </li>

三、增加管理员

自定义日期管道

封装 Ajax 改变状态

简介：更新用户表
在login.js改变用户状态。
1、先在数据库admin表添加一个time时间表，类型为date，记录管理员最后登录时间。

2、安装模块

npm i silly-datetime –save

引入模块

 var sd = require('silly-datetime');

3. 调用方法格式化时间

 //配置 koa-art-template 模板引擎
  render(app, { root: path.join(__dirname, 'views'), extname: '.html', debug: process.env.NODE_ENV !== 'production', dateFormat:dateFormat=function(value){
  return sd.format(new Date(value),
   'YYYY-MM-DD HH:mm');} });

4、参考官方文档
https://www.baidu.com/link?url=xUcT6Id1E02gysEQXGpDXPIfe6MBLGH-RAGvFWGtgHhMNKp8y9JHhnbJBgZVZlB7IAXWGDT5uU-xb-5quqS_Vq&wd=&eqid=8b631c4b001522c0000000065eac643e

配置koa-jsonp

1、安装

npm install --save jsonp

2、引入

var jsonp = require(;koa-jsonp')

3、配置jsonp的中间件
app.use(jsonp());

4、
官方文档：
https://www.baidu.com/link?url=OXMghI3e2snGZUfQOK7jKxDZ_erWYaAbtnPk5tsJqBbELaD3JVg1BrE0Xcuida1Y&wd=&eqid=fe574eb000164415000000065eac65d2

API
jsonp(url, opts, fn)
url (String) url to fetch
opts (Object), optional
param (String) name of the query string parameter to specify the callback (defaults to callback)
timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
fn callback

5、请求接口
根据上方官方文档的api，修改
这里的图片是√和x，表示状态。

var app={
toggle:function(el,db,attr,id){
//console.log(el,action,id);
$.get('/admin/changeStatus',{db:db,attr:attr,id:id},function(data){
if(data.success){
if(el.src.indexOf('yes')!=-1){
el.src='/admin/images/no.gif';
}else{
el.src='/admin/images/yes.gif';
}}
})
}

6、更新数据库语句
新增basic.js

router.get('/change',async(ctx)=>{
var db=ctx.query.db; 
var attr=ctx.query.attr; 
var id=ctx.query.id; //更新的 id
var data= await DB.find(db,{"_id":DB.getObjectId(id)});
if(data.length>0){
if(data[0][attr]==1){
var json = {
[attr]: 0
};
}else{
var json = {
[attr]: 1
};
}
let updateResult=await DB.update(db,{"_id":DB.getObjectId(id)},json);
//console.log(updateResult);
if(updateResult){
ctx.body={"message":'更新成功',"success":true};
}else{
ctx.body={"message":"更新失败","success":false}
}
}
})

测试效果：

下一章：
开始一个Koa+mongodb项目（五）列表渲染4.07
开始一个Koa+mongodb项目（六）删除功能