第三章：登录页面-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

        使用Django框架的后台用户认证辅助前端登录页面。

Django代码：

#Django中settings主要设置如下：
#app设置
INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'User',
    # 设置跨域访问
    'corsheaders',
    # 设置API框架
    'rest_framework',
    'rest_framework.authtoken'
]
#中间件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',#添加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    #'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
#连接数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'ecotourism',
        'USER':'root',
        'PASSWORD':'',
        'HOST':'127.0.0.1',
        'PORT':'3306',
    }
}
#新建Django应用命名User,User.urls代码如下
from django.urls import path
from rest_framework.authtoken import views
from .views import *

urlpatterns = [
    path('api-token-auth/', views.obtain_auth_token)
]

前端vue代码如下：

<template>
  <div class="login_container">
    <div class="title"><h4 style="margin-top: 0;">生态旅游资源监管系统</h4></div>
    <div class="login_box">
      <div class="error">{{ message }}</div>
      <!-- 登录表单区域 -->
      <el-form size="large">
        <!-- 用户名 -->
        <el-form-item>
          <el-input v-model.trim="username" placeholder="用户名" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input v-model.trim="password" placeholder="密码" show-password
                    prefix-icon="iconfont icon-3702mima"></el-input>
        </el-form-item>
        <!-- 记住我 -->
        <el-form-item>
          <el-checkbox label="记住我" class="rememberMe" v-model="rememberMe"></el-checkbox>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click.prevent="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'

export default {
  name: "UserLogin",
  data() {
    return {
      username: '',
      password: '',
      message: '',
      rememberMe: false
    };
  },
  created() {
    this.getCookie()
  },
  methods: {
    login() {
      this.message = '';
      if (!this.checkForm())
        return;
      this.$axios.post("/api/user/api-token-auth/",//访问Django用户认证后台
        {username: this.username, password: this.password}, {withCredentials: true})
        .then(response => {
          console.log(response.data)
          //console.log(response.status)
          if (response.status === 200) {
            this.username = '';
            this.password = '';
            this.$router.push({path: '/Analysis'});//跳转系统首页
          }
        })
        .catch(error => {
          console.log(error.response.status);
          if (error.response.status === 400) {
            this.message = "用户名或密码错误";
            console.log('用户名或密码错误')
          } else if (error.response.status === 500) {
            this.message = "用户登录失败";
            console.log('用户登录失败')
          }
        })
    },
    checkForm() {
      if (!this.username || !this.password) {
        this.message = "用户名和密码不能为空";
        return false;
      }
      return true;
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.username = username
      this.password = password
    },
  }
};
</script>

登陆界面如图：

上一章-第二章：web开发环境搭建-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

下一章-第四章：Django绑定数据库并发布数据-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]