开始一个Koa+mongodb项目(四)实现用户管理
2020.04 .01
上一章实现好了登录
这篇开始实现我们后台管理的基本功能。
一、实现退出登录
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');
- 调用方法格式化时间
//配置 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项目(六)删除功能
- 开始一个Koa+mongodb项目(八)koa-multer实现图片上传
- 开始一个Koa+mongodb项目(七)db.find 和jqPaginator实现翻页
- 开始一个Koa+mongodb项目(十)实现文章上传发布
- yii2项目实战-用户管理之登录与注册功能实现
- 实战项目-NFS存储共享服务-如何实现www用户(客户端)操作管理存储共享目录?
- Java web项目01 停车管理系统实现添加用户信息功能(四)
- 开始一个Koa+mongodb项目(十三)渲染前端页面
- 使用PHP+Redis实现微博的用户管理项目实战(完整)
- 项目构建之maven篇:8.maven发布web工程及基于spring mvc,jetty实现的用户管理demo
- vue项目用户登录状态管理,vuex+localStorage实现
- 好好编程-物流项目12【用户管理-分页实现】
- 开始一个Koa+mongodb项目(九)koa-ueditor的配置使用
- BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(1)
- 项目实战(连载):基于Angular2+Mongodb+Node技术实现的多用户博客系统教程(2)
- yii2项目实战-用户管理之登录与注册功能实现
- maven项目:小型用户管理系统的搭建(实现增删改查)
- 开始一个Koa+mongodb项目(十四)阶段总结
- Java web项目01 停车管理系统实现删除用户信息(六)
- 框架 day54 BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)