Django-Vue搭建个人博客：用户注册

6378 views, 2021/03/24 updated Go to Comments

前面把文章的 GET 请求实现得七七八八了。在继续开发发表文章、更新、删除之前，让我们换个口味，先实现用户管理。

本章搞定用户注册。

注册页面

新建 frontend/src/views/Login.vue 文件作为用户注册（以及登录）的页面，并写入代码：

<!-- frontend/src/views/Login.vue -->

<template>

    <BlogHeader/>

    <div id="grid">
        <div id="signup">
            <h3>注册账号</h3>
            <form>
                <div class="form-elem">
                    <span>账号：</span> 
                    <input v-model="signupName" type="text" placeholder="输入用户名">
                </div>
                <div class="form-elem">
                    <span>密码：</span> 
                    <input v-model="signupPwd" type="password" placeholder="输入密码">
                </div>
                <div class="form-elem">
                    <button v-on:click.prevent="signup">提交</button>
                </div>
            </form>
        </div>

        <div>
            <!-- 留给后面章节的用户登录 -->
        </div>
    </div>

    <BlogFooter/>

</template>

<script>
    import axios from 'axios';
    import BlogHeader from '@/components/BlogHeader.vue'
    import BlogFooter from '@/components/BlogFooter.vue'

    export default {
        name: 'Login',
        components: {BlogHeader, BlogFooter},
        data: function () {
            return {
                signupName: '',
                signupPwd: '',
                signupResponse: null,
            }
        },
        methods: {
            signup() {
                const that = this;
                axios
                    .post('/api/user/', {
                        username: this.signupName,
                        password: this.signupPwd,
                    })
                    .then(function (response) {
                        that.signupResponse = response.data;
                        alert('用户注册成功，快去登录吧！');
                    })
                    .catch(function (error) {
                        alert(error.message);
                        // Handling Error here...
                        // https://github.com/axios/axios#handling-errors
                    });
            },
        }
    }
</script>

<style scoped>
    #grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #signup {
        text-align: center;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: gray;
        color: whitesmoke;
        border-radius: 5px;
        width: 60px;
    }
</style>

代码看起来有点多，但其实没有新知识；功能上就是将表单中的用户名和密码 post 到 /api/user/ 接口，若创建成功则提醒用户前往登录，失败则将提示信息显示出来。

如果注册失败，教程只是简单的弹出提示框，实际的博客项目应该优化为更加友好的方式。

唯一需要注意的是，singup() 方法第一行的 const that = this，它是为了 that.signupResponse = response.data 这里的调用而存在的。为什么要采取这种拐弯抹角的方式，而不直接调用 this ？这是因为在 JavaScript 中，this是使用call方法调用函数时传递的第一个参数，它可以在函数调用时修改，在函数没有调用的时候，this的值无法确定。直观来讲，如果这里的 .then() 方法里直接使用 this ，结果就是 this 未定义，语句报错。

那为什么之前的文章列表接口没有这个问题？这是因为当时用了箭头函数，其内部的 this 是遵循词法作用域，总是指向外层调用者 Vue 实例。

有关箭头函数和 this 的恩怨情仇，可以读读这篇文章。

收尾工作

视图有了，接下来就是增加路由和入口等修修补补的工作了。

在 index.js 中添加注册路由：

// frontend/src/router/index.js

...
const routes = [
    ...
    {
        ...
    },
    // 修改 Javascript 代码时
    // 不要忘记在同级元素后加上逗号
    // 否则将报错
    // 后面章节类似
    {
        path: "/login",
        name: "Login",
        component: Login
    }
];
...

在 BlogHeader.vue 中添加入口：

<!-- frontend/src/components/BlogHeader.vue -->

<template>
    <div id="header">
        ...
        <hr>
        <div class="login">
            <router-link to="/login" class="login-link">登录</router-link>
        </div>
    </div>
</template>

...

<style scoped>
    .login-link {
        color: black;
    }

    .login {
        text-align: right;
        padding-right: 5px;
    }
</style>