极客观点
项目管理
HarmonyOS
问题
如图右侧上下部分，我登录后设置了cookie,退出清除cookie,想要的页面显示效果为: 默认显示(右侧上半部分)登录，登录后显示（右侧下半部分),点击退出后，显示登录部分
express
login.js
var express = require('express');
var router = express.Router();
var Model = require('../data/module')
var responseData;
router.use(function(req, res, next){
responseData = {
code: 0,
message: ''
}
next();
})
router.post('/userLogin', function(req, res, next){
var username = req.body.username;
var password = req.body.password;
Model.User.findOne({username: username}).then(function(userInfo){
if(password == userInfo.password){
responseData.code = 200;
responseData.message ='登录成功';
responseData.userInfo = {
_id: userInfo._id,
username: userInfo.username,
isAdmin: userInfo.isAdmin
}
// req.cookie.set('userCookie', userCookie);
res.cookie('userInfos', userInfo, {maxAge: 1000*60*60});
res.json(responseData);
}else{
responseData.code = 1;
responseData.message = '用户名或密码错误';
res.json(responseData);
return;
}
})
})
module.exports = router;
logout.js
var express = require('express');
var router = express.Router();
var Model = require('../data/module')
var responseData;
router.use(function(req, res, next){
responseData = {
code: 0,
message: ''
}
next();
})
router.get('/userLogout', function(req, res, next){
res.clearCookie('userInfo');
responseData.code = 200;
responseData.message = '退出成功';
res.json(responseData);
})
module.exports = router;
vue
<template lang="html">
<div class="index">
<!-- 头部 -->
<header class="header">
<div class="container">
<div class="left">
<router-link to="/"><img src="../../assets/logo.png" width="60" height="60" alt=""></router-link>
</div>
<div class="right">
<ul>
<li>
vue
</li>
<li>
node
</li>
</ul>
</div>
</div>
</header>
<!-- 内容 -->
<section class="main container">
<div class="left">
<div class="left-item">
<h1>标题</h1>
<p class="info">
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
</p>
<p class="desc">
简介
</p>
<button type="button">阅读更多</button>
</div>
<div class="left-item">
<h1>标题</h1>
<p class="info">
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
</p>
<p class="desc">
简介
</p>
<button type="button">阅读更多</button>
</div>
<div class="left-item">
<h1>标题</h1>
<p class="info">
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
</p>
<p class="desc">
简介
</p>
<button type="button">阅读更多</button>
</div>
<div class="left-item">
<h1>标题</h1>
<p class="info">
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
<span>作者: admin</span>
</p>
<p class="desc">
简介
</p>
<button type="button">阅读更多</button>
</div>
</div>
<div class="right">
<div >
<!-- 登录 -->
<div class="right-item login" v-show="Login">
<h1>登录</h1>
<div class="warnInfo">
{{warnInfo}}
</div>
<div class="input-box">
<p>用户名:</p>
<input type="text" v-model="username">
</div>
<div class="input-box">
<p>密码:</p>
<input type="password" v-model="password">
</div>
<button type="button" @click="login">登录</button>
<p>还没有账号，<span @click="toggleRegisterLogin">去注册</span></p>
</div>
<!-- 注册 -->
<div class="right-item register" v-show="Register">
<h1>注册</h1>
<div class="warnInfo">
{{warnInfo}}
</div>
<div class="input-box">
<p>用户名:</p>
<input type="text" v-model="username">
</div>
<div class="input-box">
<p>密码:</p>
<input type="password" v-model="password">
</div>
<div class="input-box">
<p>确认密码:</p>
<input type="password" v-model="password2">
</div>
<button type="button" @click="register">注册</button>
<p>已有账号，<span @click="toggleRegisterLogin">去登录</span></p>
</div>
</div>
<!-- 登录后信息状态 -->
<div class="right-item logined">
<!-- <div v-show="Logined"> -->
<h1>你好，{{userInfo.username}}</h1>
<p v-if="userInfo.isAdmin === true">
你是管理员，可以进入后台管理
</p>
<p v-else>欢迎来到我的博客</p>
<p @click="logout">退出</p>
<!-- </div> -->
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data(){
return{
Login: true,
Register: false,
userInfo: '',
username: '',
password: '',
password2: '',
warnInfo: ''
}
},
methods:{
toggleRegisterLogin(){
},
login(){
if(this.username == ''){
if(this.warnInfo = '用户名不能为空');
return;
}
if(this.password == ''){
if(this.warnInfo = '密码不能为空');
return;
}
this.$http.post('/api/userLogin', {
username: this.username,
password: this.password
}).then((res => {
if(res.data.code == 1){
this.warnInfo = res.data.message;
return;
}else{
console.log(res.data);
this.userInfo = res.data.userInfo;
this.Login = false;
}
}))
},
register(){
if(this.username == ''){
this.warnInfo = '用户名不能为空';
return;
}
if(this.password == ''){
this.warnInfo = '密码不能为空';
return;
}
if(this.password !== this.password2){
this.warnInfo = '两次密码不一样';
return;
}
this.$http.post('/api/userRegister',{
username: this.username,
password: this.password,
password2: this.password2
}).then((res => {
if(res.data.code == 1){
this.warnInfo = res.data.message;
return;
}else{
this.warnInfo = '注册成功，请登录';
}
}))
},
logout(){
this.$http.get('/api/userLogout').then((res => {
this.userInfo = '';
this.Login = true;
}))
}
}
}
</script>
要用v-if