计划写一个本地服务,使用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 ''
}