Vue博客搭建（10）细节优化1

在上一篇文章中，我们做完了一个创作中心，至此一个博客的基本功能已经做的差不多了。所以这篇文章主要是给代码添加一些小的细节功能以及优化。

在创作中心入口添加判断

未登录怎么可能就进入创作中心呢？所以这里需要设置一个拦截功能，检测到未登录就直接返回上一步。

if(!userAccountStore.isLogged){
    alert('您还没有登录，请先登录');
    // 这里选择直接转到登录页面了，如果你想返回上一步可以用router.go(-1)或者router.back()
    router.push('/login');
}

上传文章时的前端判断

一篇文章必须要有标题和正文才可以被上传，因此在前端中必须要加以判断。再添加一个发布成功后返回首页的功能。

function addArticle(){
    if(articleInEditing.value.title.length===0){
        alert('请输入标题');
        return;
    }
    if(articleInEditing.value.content.length===0){
        alert('请输入正文');
        return;
    }
    articleInEditing.value.content = articleInEditing.value.content.replaceAll('"','\"');
    articleInEditing.value.title = articleInEditing.value.title.replaceAll('"','\"');
    axios.post('/server/addArticle',articleInEditing.value)
    .then((response)=>{
        alert(response.data);
        router.push('/')
    })
    .catch((err)=>{
        alert(`发布文章失败，${err.response.data}`);
    })
}

退出登录

只能登录但并不能退出，这是不可接受的，因此我们需要添加一个退出登录功能。思路不难，把对应的cookie删除，然后把store中存储的登录状态清空就可以了，服务端上不用任何操作。

当然首先你得在登录的时候才会显示退出登录按钮，所以导航栏那里我们需要给退出登录按钮添加条件渲染。（v-else的使用条件是最上面紧邻的兄弟组件是v-if，因此这里不能用捏）

<template>
    <button data-to = "/" @click="routerTo">主页</button>
    <button data-to = "/login" @click="routerTo" v-if="!userAccountStore.isLogged">登录</button>
    <button data-to ="/register" @click="routerTo" v-if="!userAccountStore.isLogged">注册</button>
    <button data-to="/articleEditor" @click="routerTo" >创作中心</button>
    <button v-if="userAccountStore.isLogged" @click="userAccountStore.logout">退出登录</button>
    <router-view></router-view>
</template>

对应的脚本代码如下（也就是之前写过的logout函数稍作修改）。

function logout(){
        if(isLogged.value === true){
            isLogged.value = false;
            username.value = undefined;
            Cookies.remove('isLogged');
            Cookies.remove('username');
            alert('退出成功！');
            router.push('/');
        }else{
            throw(new Error('请先登录'));
        }
    } 

合理的文章编辑器窗口

现在的文章编辑器窗口太小啦，我们需要大一点，这该如何做到呢？查看bytemd的文档可以知道，直接修改对应的css即可。

<style>
.bytemd {
    height: calc(100vh - 100px);
}
</style>

现在的文章编辑器窗口就变成了合适的大小了。这里稍微讲解一下，.是类选择器，calc是计算函数，里面要传一个算式，返回结果（算式不能直接当做参数），vh则是视口高度，也就是浏览器高度的一个相对单位。系统性的CSS，包括这里为什么不用scoped，我们在之后的文章中再讲。