使用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系统开发实例]