V ue front-end login configuration Vue front-end login configuration V U E before the end of the registration record with counter
1. Front-end self-test
<template>
<div class="login-container">
<el-row>
<el-col :span="4" :offset="10">
<h1 class='page-title'>管理系统</h1>
<el-form ref="loginForm" :model="loginForm" label-width="80px" class='login-form' :rules="rules">
<el-form-item label="手机" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {
Button,Row,Col,Form,Input,FormItem} from "element-ui"
export default {
name: 'Login',
data(){
let validateTel = (rule, value, callback) => {
if(!value.match(/1[3456789]\d{
9}/)){
callback(new Error("请输入正确的手机号码！"))
}else{
callback()
}
}
return {
loginForm: {
username: "",
password: ""
},
rules: {
username: [
{
required: true,message: "请输入手机号码！",trigger: "blur"},
{
validator: validateTel,trigger: "blur"}
],
password: [
{
required: true,message: "请输入密码！",trigger: "blur"},
{
min: 6, max: 20,message: "密码字符应该在6-20之间！",trigger: "blur"},
]
}
}
},
components: {
[Button.name]: Button,
[Row.name]: Row,
[Col.name]: Col,
[Form.name]: Form,
[Input.name]: Input,
[FormItem.name]: FormItem
},
methods: {
onSubmit(){
this.$refs['loginForm'].validate(valid => {
if(!valid){
console.log("验证失败！")
return
}
const params = {
username: this.loginForm.username,
password: this.loginForm.password
}
console.log(params);
})
}
}
}
</script>
<style lang="scss">
body{
background-color: #eee;
}
.login-container{
padding-top: 80px;
.page-title{
text-align: center;
}
.login-form{
padding-top: 40px;
}
}
</style>
2. Plus axios
<template>
<div class="login-container">
<el-row>
<el-col :span="4" :offset="10">
<h1 class='page-title'>管理系统</h1>
<el-form ref="loginForm" :model="loginForm" label-width="80px" class='login-form' :rules="rules">
<el-form-item label="手机" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {
Button,Row,Col,Form,Input,FormItem} from "element-ui"
import axios from "axios"
export default {
name: 'Login',
data(){
let validateTel = (rule, value, callback) => {
if(!value.match(/1[3456789]\d{
9}/)){
callback(new Error("请输入正确的手机号码！"))
}else{
callback()
}
}
return {
loginForm: {
username: "",
password: ""
},
rules: {
username: [
{
required: true,message: "请输入手机号码！",trigger: "blur"},
{
validator: validateTel,trigger: "blur"}
],
password: [
{
required: true,message: "请输入密码！",trigger: "blur"},
{
min: 6, max: 20,message: "密码字符应该在6-20之间！",trigger: "blur"},
]
}
}
},
components: {
[Button.name]: Button,
[Row.name]: Row,
[Col.name]: Col,
[Form.name]: Form,
[Input.name]: Input,
[FormItem.name]: FormItem
},
methods: {
onSubmit(){
this.$refs['loginForm'].validate(valid => {
if(!valid){
console.log("验证失败！")
return
}
const params = {
username: this.loginForm.username,
password: this.loginForm.password
}
axios.post("http://127.0.0.1:8000/cms/login",params).then(res=>{
console.log(res);
}).catch(err =>{
console.log(err);
})
})
}
}
}
</script>
<style lang="scss">
body{
background-color: #eee;
}
.login-container{
padding-top: 80px;
.page-title{
text-align: center;
}
.login-form{
padding-top: 40px;
}
}
</style>
There are cross-domain issues
Solve cross-domain issues
Configuration:
INSTALLED_APPS ：
'corsheaders',
MIDDLEWARE：
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
settings.py:
CORS_ORIGIN_ALLOW_ALL = True
test
Page back
Set up auth.js
const USER_KEY = "USER_KEY"
const TOKEN_KEY = "JWT_TOKEN_KEY"
class Auth{
constructor(){
this.token = null
this.user = null
this.token = localStorage.getItem(TOKEN_KEY)
const userJson = localStorage.getItem(USER_KEY)
if(userJson && userJson != "undefined"){
this.user = JSON.parse(userJson)
}
}
static getInstance(){
if(!this._instance){
this._instance = new Auth()
}
return this._instance
}
setUserToken(user,token){
this.user = user
this.token = token
localStorage.setItem(USER_KEY,JSON.stringify(user))
localStorage.setItem(TOKEN_KEY,token)
}
clearUserToken(){
this.user = null;
this.token = null;
localStorage.removeItem(USER_KEY)
localStorage.removeItem(TOKEN_KEY)
}
get is_authed(){
if(this.user && this.token){
return true
}else{
return false
}
}
}
export default Auth.getInstance()
main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./routes"
import auth from "./utils/auth"
Vue.config.productionTip = false
Vue.prototype.$auth = auth
new Vue({
render: h => h(App),
router
}).$mount('#app')
login.vue
<template>
<div class="login-container">
<el-row>
<el-col :span="4" :offset="10">
<h1 class='page-title'>管理系统</h1>
<el-form ref="loginForm" :model="loginForm" label-width="80px" class='login-form' :rules="rules">
<el-form-item label="手机" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {
Button,Row,Col,Form,Input,FormItem} from "element-ui"
import axios from "axios"
export default {
name: 'Login',
data(){
let validateTel = (rule, value, callback) => {
if(!value.match(/1[3456789]\d{
9}/)){
callback(new Error("请输入正确的手机号码！"))
}else{
callback()
}
}
return {
loginForm: {
username: "",
password: ""
},
rules: {
username: [
{
required: true,message: "请输入手机号码！",trigger: "blur"},
{
validator: validateTel,trigger: "blur"}
],
password: [
{
required: true,message: "请输入密码！",trigger: "blur"},
{
min: 6, max: 20,message: "密码字符应该在6-20之间！",trigger: "blur"},
]
}
}
},
components: {
[Button.name]: Button,
[Row.name]: Row,
[Col.name]: Col,
[Form.name]: Form,
[Input.name]: Input,
[FormItem.name]: FormItem
},
methods: {
onSubmit(){
this.$refs['loginForm'].validate(valid => {
if(!valid){
console.log("验证失败！")
return
}
const params = {
username: this.loginForm.username,
password: this.loginForm.password
}
axios.post("http://127.0.0.1:8000/cms/login",params).then(res=>{
const data = res.data;
const token = data.token;
const user = data.user;
this.$auth.setUserToken(user,token);
this.$router.push("/test");
}).catch(err =>{
console.log(err);
})
})
}
}
}
</script>
<style lang="scss">
body{
background-color: #eee;
}
.login-container{
padding-top: 80px;
.page-title{
text-align: center;
}
.login-form{
padding-top: 40px;
}
}
</style>