数据库的配置

现在终于可以进入后端的开发了。不过在开发其他功能之前，首先还是要配置好数据库。

数据库方面，我使用的是自带的SQLite数据库，因为使用起来比较方便，而且也有与之对应的自带的数据库管理系统。

因为只有两张表，所以models.py中只有两个类：

models.py（未完成？）

from django.db import models
import time

# Create your models here.

# 用户，其实只有博主一个人
class User(models.Model):
    username = models.CharField(max_length=150)
    password = models.CharField(max_length=150)

# 文章，有标题、内容和发表时间三个属性
class Article(models.Model):
    title = models.CharField(max_length=100)
    content = models.CharField(max_length=5000)
    date = models.DateTimeField('date', default=time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(time.time())))

编写完成后创建管理员用户：

python manage.py createsuperuser

然后执行迁移命令，初始化数据库：

python manage.py makemigrations backend
python manage.py sqlmigrate backend 0001
python manage.py migrate

因为用户只有博主一个，所以使用命令行来创建博主用户。

>>> from backend.models import User
>>> u = User(username="admin", password="admin123456")
>>> u.save()

将User类和Article类都加入admin.py中，这样才能在管理页面中看到这两项：

from django.contrib import admin
from .models import User, Article

# Register your models here.

admin.site.register(User)
admin.site.register(Article)

执行python manage.py runserver之后进入127.0.0.1:8000/admin，就可以看到后台管理页面了。

登录功能的实现

接下来首先要实现登录功能，才能继续开发其他功能，毕竟很多功能的实现都需要基于权限控制。

与PHP留言板项目不同，这次使用Cookie来做会话控制。

登录的流程是这样的：前端发起Ajax请求，将用户名和密码发给后端，后端经过校验之后返回一个“状态码”和与之对应的消息给前端，并且设置Cookie，前端根据接收到的状态码做相应处理。

Django在查找数据库这方面还是非常简单的，有对应的API，并不需要编写SQL语句。

后端

views.py（未完成）

from django.shortcuts import render
from django.views.generic import View
from django.http import HttpResponseRedirect, JsonResponse, HttpResponse
from .models import User


# Create your views here.


class Login(View):
    def get(self, request):
        return HttpResponseRedirect('/login')

    def post(self, request):
        print(request)
        name = request.POST.get('name', None)
        pwd = request.POST.get('password', None)
        try:
            user = User.objects.get(username=name)

            if user.password == pwd:
                r = {
                    'status': 0,
                    'msg': '登录成功！'
                }
                response = JsonResponse(r)
                response.set_cookie('username', name, expires=60 * 15)
                return response
            else:
                r = {
                    'status': 1,
                    'msg': '密码错误！'
                }
                response = JsonResponse(r)
                return response

        except Exception as e:
            r = {
                'status': 2,
                'msg': '你不是管理员！'
            }

        print('username:' + name)
        print('password:' + pwd)
        print(r)
        return JsonResponse(r)

有部分代码只是测试用的，完成之后会删掉。

前端

Login.vue（未完成？）

<!--
  登录组件
  TODO：开发登录功能
-->
<template>
  <div class="container">
    <h1 class="display-3">Login</h1>
    <hr class="my-1">
    <form id="login-form">
      <div class="form-group">
        <label for="name" class="text-left">Username:</label>
        <input type="text" class="form-control" id="name" placeholder="Username" v-model="name">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" placeholder="Password" v-model="password">
      </div>
      <input type="button" @click="post" class="btn btn-secondary" value="Submit">
    </form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        name: '',
        password: ''
      }
    },
    mounted () {
      let allCookies = document.cookie
      if (allCookies.indexOf('username') !== -1) {
        this.$router.push('/manage')
      }
    },
    methods: {
      post () {
        let data = new URLSearchParams()
        data.append('name', this.name)
        data.append('password', this.password)
        this.axios
          .post('/login/check/', data)
          .then(function (response) {
            console.log(response)
            alert(response.data.msg)
            if (response.data.status === 0) {
              location.href = '/manage'
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  .container {
    padding-top: 100px;
  }

  h1 {
    padding-bottom: 20px;
  }

  form {
    margin-top: 30px;
  }
</style>

这里在mounted()函数中做了一个判断：如果已经有cookie了，那就不需要登录，直接进入管理页面。其他组件中也会用到这种判断。

这里用location.href来跳转也是无奈之举，因为使用vue-router总是出各种各样的问题，无奈之下只好换这个了。

登出功能的实现

这次的登出功能非常简单，因为只是销毁Cookie，所以都不用麻烦后端，直接使用JavaScript来销毁就可以。销毁的原理是使Cookie超出有效期。

借鉴了百度经验上的一些代码，侵删。

Logout.vue（未完成？）

<!--
  登出组件
  TODO: 开发登出功能
-->
<template>
    
</template>

<script>
  export default {
    name: 'Logout',
    methods: {
    },
    mounted () {
      let oDate=new Date()
      oDate.setDate(oDate.getDate() + -1);
      document.cookie = 'username' + '=' + 'admin'+';expires='+oDate;
      alert('登出成功')
      this.$router.push('/')
    }
  }
</script>

<style scoped>

</style>

权限控制的实现

因为是使用Cookie进行会话控制，所以权限控制也是根据判断有无Cookie来完成。只要用一点JavaScript就可以，并不是很难。

核心代码如下：

mounted () {
      let allCookies = document.cookie
      if (allCookies.indexOf('username') === -1) {
        this.$router.push('/login')
      }

也就是在组件装载的时候使用JavaScript判断Cookie是否存在，如果不存在，就使用vue-router进行强制跳转。在需要权限控制的组件里加上这段代码，然后稍微改一改变量和跳转的目标URL就可以了。