使用koa搭建服务端

计划写一个本地服务,使用localStorage来实现一个缓存本地皮肤的功能
先实现服务器 通过npm下载koa插件
npm i koa koa-views koa-router koa-static koa-bodyparse --save

const koa = require('koa')
const router = require('koa-router')()
const views = require('koa-views')
const static = require('koa-static')
const bodyParser = require('koa-bodyparser')
const app = new koa()

	router.get('/login',async (ctx,next) => {
    	if(ctx.cookies.get('isLogin')){
        	let cookiesInfo = ctx.cookies.get('isLogin')
        	ctx.redirect('/list')
        	//这一块儿是做了一个固定cookies中免登录的功能    
    	}
    	await ctx.render('login.html')
    	//cookies过期了就渲染到重新登陆的页面
	})


//下面是两个路由,分别对应用户名或密码错误时候的失败的页面
//和登陆成功的list页面
	router.get('/error',async(ctx,next)=>{
    	await ctx.render('error.html')
	})
	router.get('/list',async(ctx,next) =>{
    	await ctx.render('list.html')
	})

//这里的checkUser是post请求发出的在这里进行验证
router.post('/checkUser',(ctx,next)=>{
    if(ctx.request.body.username === 'zhangsan' && 
    ctx.request.body.password == 123){
        if(ctx.request.body.remeberMe){
            ctx.cookies.set('isLogin',"zhangsan"+'123',{
                maxAge:1000*3600
            })
            ctx.redirect('/list')
        }
    }else {
        ctx.redirect('/error')
        // 跳转到当前的error的路由上
        // 再去执行它的代码
    }
    
})



app.use(views(__dirname+'/views')) //渲染页面的时候
app.use(static(__dirname+'/static'))//加载静态资源的时候
app.use(router.routes())
app.listen(3000,()=>{
    console.log('监听成功'+new Date())
})



list页面的操作逻辑

window.onload = function(){
    let corlr = ['red','blue','green']
    let key = 0
    // if(getCookie('key')){
    //     key = getCookie('key')
    // }
    if(localStorage.getItem('key')){
        key = localStorage.getItem('key')
    }
    document.body.style.background=corlr[key]
    document.querySelector('#btn').onclick=function(){
        key++
        key=key>=3?0:key
        // setCookie('key',key,{
        //     "Max-Age":100
        // })
        localStorage.setItem('key',key)
        document.body.style.background=corlr[key]
    }
    // 设置cookies
    function setCookie(name,value,options={}){
        let cookieData = `${name}=${value};`
        for(let key in options){
            let result = `${key}=${options[key]};`
            cookieData+=result
        }
        document.cookie = cookieData
    }

    // 获取cookie
    function getCookie(name){
        let arr = document.cookie.split('; ')
        for(let i=0;i<arr.length;i++){
            let arr2 = arr[i].split('=')
            if(arr2[0] === name){
                return arr2[1]
            }
        }
    }
    return ''
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值