vue2-django 实现登录注册
使用单页面vue2与django框架实现登录与注册功能
目录
后端django处理请求
前端vue:
cd到目标文件夹,输入:vue init webpack 文件名
前四个一路回车,后几个选no
接着cd到建好的文件夹,执行npm install ,然后就可以npm run dev 查看初始页面了
接下来我们通过vue组件来搭建一个前端页面
首先把默认样式清除,删除helloword.vue后将app.vue清除成如下内容。
然后在components文件夹中新建vue文件,写入我们需要的内容
我构建了三个文件,分别用来登录、注册、登录成功后显示
我们要做的是注册与登录功能,那么我们需要账号与密码
我们先做注册功能,也就是进入signup.vue中
因此我们在data里构建一个对象loginForm存储输入的账号与密码
data(){
return{
loginForm:{
username:'',
password:''
}
}
},
data写在<script>中,如
而后构建一个form表单,输入框绑定username与password
<template>
<div id="sign">
<div style="text-align: center; font-family: 华文琥珀; font-size: larger;">
<div>欢迎注册</div>
<div>请输入您的信息</div>
</div>
<div style="height: 50px;"></div>
<div>
<form v-bind:model="loginForm">
<input v-model="loginForm.username" type="text" placeholder="请输入用户名"/>
<input v-model="loginForm.password" type="password" placeholder="请输入密码"/>
</form>
<button v-on:click="summiti()">注册</button>
</div>
</div>
</template>
写好之后,我们要怎么查看写出来的页面是什么样子呢?
这需要用到vue-router
在项目的根目录的终端执行npm install --legacy-peer-deps vue-router@3.5.2
然后在如图位置新建一个routers文件夹,其中新建一个index.js文件
其中写入
然后在main.js中引入
最后在app.vue中如图位置加一句<router-view/>
我们就可以在终端中输入npm run dev,在浏览器中输入指定地址,就可以看到页面了(ctrl+c 停止服务器)
这篇文章主要讲解登录与注册的实现,美观度可以自己调节
前端的最后一步就是对用户名和密码的提交了,我们需要用到axios对请求进行处理
首先安装:npm install axios
然后在main.js中引入
import axios from 'axios'
axios.defaults.withCredentials = true// 请求携带cookie
axios.defaults.headers.post['X-CSRFToken']='';//设置请求头的跨域密匙
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) { //将发送的post参数封装成FROM-DATA,使后端接收
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}];
Vue.prototype.$axios = axios
插入到如图位置
接下来就在signup.vue中编写提交函数
methods:{
summiti(){
this.$axios
.post(
'/regester/', //后端执行注册的url
{'user':this.loginForm.username, //用户名
'password':this.loginForm.password, //密码
}
).then((res)=>{
alert("注册成功")
this.$router.push({ //前往登录界面
path: './',
});
}).catch((err)=>{
alert("注册失败,请更换用户名")
})
}
}
写在如图位置
后端django处理请求
首先,下载django :pip3 install django
然后,cd到一个心仪的文件夹,创建django项目:django-admin startproject djan (djan是项目名称,可以换成一个心仪的名字)
系统就为我们创建了一个框架
接着,cd到第一个djan文件夹,创建APP : python manage.py startapp eapp(eapp是app名称),然后可以看到系统又为我们创建了一个文件夹
我们可以开始写后端程序了
为了保存注册了的用户,我们需要连接数据库
我们首先需要引入app,不然数据库不知道为什么样的对象建表
在setting.py的INSTALLED_APPS中引入app
然后在setting的DATABASES中配置数据库
之后进入eapp的models.py文件,写入
class User(models.Model):
object = models.Manager()
name = models.CharField(max_length=15, unique=True)
password = models.CharField(max_length=20)
name为用户名,password为密码,系统构造的数据库的结构将依赖这个User对象
在django项目的根目录下输入命令python manage.py makemigrations
这会在eapp目录中的migrations目录中生成一个0001_initial.py迁移记录文件
然后还是根目录中输入python manage.py migrate
系统将为我们建表(下图是通过navicat查看建好的表)
数据库连接完成
进入eapp中的view.py文件夹 ,我们接下来构建响应路径,将内容改为
from django.shortcuts import render
from eapp.models import User
from django.http import JsonResponse
# Create your views here.
def regester(request):
user = request.POST.get("user")
password = request.POST.get("password")
userinfo = User(name=user,password=password)
userinfo.save() #保存至数据库
return JsonResponse({'codestatus':1},safe=False)
若在import处报错,则使用pycharm右键根目录,如图调整为源代码根目录
再将view导入url,进入url.py中
那么注册路径就写好了。
到目前,我们为注册的执行部署了接口,但对注册的网页还没部署接口
因此我们接下来对网页的显示进行部署,但一个网站最开始一般是登录而不是注册,因此我打算以登录界面为基页面
先写好登录页面的vue文件
<template>
<div id="login">
<div style="text-align: center; font-size: larger;">
<div>欢迎光临</div>
<div>请输入您的账户</div>
</div>
<div>
<form action="/index/" method="post">
<input v-model="loginfo.username" type="text" placeholder="请输入用户名">
<input v-model="loginfo.password" type="password" placeholder="请输入密码">
</form>
<input v-on:click="login()" value="登录" />
<div style="height: 5px;"></div>
<div>
<div style="height: 9px;"></div>
<a href="/#/signup" style="color:black ;text-decoration:none">注册</a>
</div>
</div>
</div>
</template>
<script>
export default {
name:'login',
data(){
return {loginfo:{
'username':'',
'password':''
}}
},
methods:{
login(){
this.$axios
.post(
'/loginn/',//向loginn发送请求,验证密码是否正确
{'user':this.loginfo.username,
'password':this.loginfo.password,
}
).then(res=>{
if(res.data.loginstatus==1) //loginstatus为后端返回的数据,
{
this.$router.push({ //页面跳转到登录成功界面
path: '/welcome',
params:{'username':this.loginfo.username}
});}
else{
alert('账号或密码错误')
}
})
}
}
}
</script>
<style>
</style>
部署route
npm run dev查看
点击注册跳转到signup页面运行成功
在vue根目录终端输入npm run build,可以观察到多了一个dist文件夹
接下来来到django根目录,将整个vue项目的文件夹放入django根目录下
目录排列如图
然后进入setting.py中首先
import os.path
然后更改其TEMPLATES
而后在末尾更改(若不存在则引入)
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'myvue/dist/static')
]
如
进入urls.py,添加这两句,引入dist文件中的index.html,并将其设置为首页
到这一步可以调试注册功能了,但顺便先把登录功能实现
在urls.py中添加一登陆路径,每一个路径都必须与前端发送请求的url对应
path('loginn/',views.loginn),
然后进入views.py中实现登录功能
from eapp import models
然后
def loginn(request):
username = request.POST.get('user')
password = request.POST.get('password')
if username and password:
try:
user = models.User.object.get(name=username)
except:
return JsonResponse({'loginstatus':2},safe=False) #未注册返回2
if user.password == password:
return JsonResponse({'loginstatus':1},safe=False) #登录成功返回1
return JsonResponse({'loginstatus':3},safe=False) #密码错误返回3
就放在import的后面
一切就ok了
接下来我们调试,看看结果
django根目录输入 python manage.py runserver 127.0.0.1:8000
然后进入 http://127.0.0.1:8000/
成功进入页面
但当我们点击登录时,会发现浏览器报错,显示CSRF token missing
这是因为django会检测请求头cookies中的csrftoken与请求头的X-CSRFToken,若二者一致则通过请求,二者不同则拒绝请求,因此我们需要设置我们的请求头
(此方法并不好,新方法已在文尾更新)
进入浏览器的开发者模式,切换到network,再点击一下页面的登录,就会出现一个东西,我们查看一下他的Headers里的Request Headers,复制其cookie中csrftoken的值
再来到vue项目的main.js,将值填入X-CSRFToken后的双引号中
保存之后,重新再vue项目的根目录下执行npm run build,就完成了
回到浏览器页面,刷新
随便输入账号与密码,发现不会报错了,我们查看后端返回返回结果
正如所设置的,返回结果是2,没有错误,
点击注册来到注册页
页面显示注册成功,我们看看数据库是否有记录
确实有记录,接着回到登录页试试看登录
status为1并且如同login.vue中定义的函数,跳转到了welcom页面。
完成!
更新
在处理跨域问题时我们处理的比较草率,只是获取了自己的一个cookie,属于是面向调试编程,经过不断的搜索,我找到了一个更好的办法
思路是发送一个get请求从后端获取csrftoken的值,而后把这个值设置为请求头,以下为步骤
1.在django项目的urls中新增一条路径
path('getcsrf/',views.getcsrf),
2.在views文件中构建这条路径
from django.http import JsonResponse, HttpResponse
from django.middleware.csrf import get_token
def getcsrf(request):
return JsonResponse({'csrftoken': get_token(request) or 'NOTPROVIDED'})
//get_token(request) 的返回值即为csrftoken
3.来到vue项目的main.js
//在import axios后添加
axios.defaults.withCredentials = true// 允许请求携带cookie
4.修改vue文件中的函数,以我的login.vue为例,将原来的axios请求套在一个向新地址提交的axios请求中
login(){
this.$axios.get('/getcsrf/').then(res=>{
var csrftoken=res.data.csrftoken
this.$axios.post(
'/loginn/', //向loginn发送请求,验证密码是否正确
{'user':this.loginfo.username,
'password':this.loginfo.password,
},{
headers:{
'X-CSRFToken':csrftoken
}
}
).then(res=>{
if(res.data.loginstatus==1) //loginstatus为后端返回的数据,
{
this.$router.push({ //页面跳转到登录成功界面
path: '/welcome',
params:{'username':this.loginfo.username}
});}
else{
alert('账号或密码错误')
}
})})
}
然后重新npm run build,就完成了。
更多推荐
所有评论(0)