1、前端部分

前端要触发一个事件，使得前端将信息发送给后端。例如一个登录事件，用户输入账号密码，点击登录按钮，即可将前端输入的信息发送给后端。该按钮绑定了一个事件，该事件放在methods配置项里边。例如登录事件函数名为login，完整的事件函数代码为：

  methods: {login(){console.log('点了我登录')this.$dbApi.Login(this.account,this.password).then((response)=>{console.log(response)console.log('发送成功')if (response.data===1){confirm("登录成功")}else confirm("登录失败")}).catch((err)=>{console.log('发送失败')confirm("发送失败")})console.log('结束')}}

其中dbApi为自己编写的一个js文件，dbApi中有引入的axios、后端地址以及一个箭头函数，该箭头函数有一个返回值为axios.post(`${后端地址}`+'polls/Login')，将箭头函数赋给Login，以便好调用，并且要暴露箭头函数以供其他地方使用。其完整代码为：

import axios from 'axios'let Host="http://127.0.0.1:8090/"   //后端地址// 用户登录
export const Login = (account, password) => {let formData = new FormData()formData.append("account",account)formData.append('password',password)return axios.post(`${Host}` + 'polls/Login/', formData)
}

如果前端信息成功发送给后端，且后端给前端一个返回值放在response里边（response是一个对象，对象中有一个个的键值对），即走了.then((response)=>{})这一步；如果前端信息发送失败了，那么就会走.catch(()=>{})这一步。

2、后端部分

1、后端要接受前端发来的信息，首先要在创建好的项目中创建一个App，命令为：

django-admin startapp polls

2、其次在创建好的Django项目下的setting.py中：①注册上述创建好的App：polls、②开放接受网络请求、③跨域问题、④数据库连接。代码如下：

# 开放接收所有网络请求
ALLOWED_HOSTS = ["*"]# Application definitionINSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','corsheaders','rest_framework',# 注册app：polls'polls',
]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',
]# cors开头的都是配置跨域
CORS_ALLOW_METHODS = ('GET','POST','PUT','PATCH','DELETE','OPTIONS'
)CORS_ORIGIN_ALLOW_ALL = TrueCORS_ALLOW_HEADERS = ('XMLHttpRequest','X_FILENAME','accept-encoding','authorization','content-type','dnt','origin','user-agent','x-csrftoken','x-requested-with','Pragma','userid','token','projectid'
)
CORS_ALLOW_CREDENTIALS = True# 与postgresql数据库连接
DATABASES = {'default': {'ENGINE': 'django.db.backends.postgresql_psycopg2','NAME': 'practice2','USER': 'postgres','PASSWORD': '******','HOST': '127.0.0.1','POST': '5432',}
}

3、在postgresql数据库中先创建一个表，随后在Django项目中的polls文件夹里的models.py导入数据库中的表，使用命令：

python manage.py inspectdb > polls/models.py

注意：使用上述命令之后，编码方式会自动变成UTF-16，要自己手动在pycharm下方修改成UTF-8，如若不修改就会报错。

4、在polls下创建两个python文件，分别命名为：urls.py\serializer.py

5、在项目目录下的mytest文件夹下的urls.py映射到polls文件夹下的urls.py，实现代码如下：

from django.contrib import admin
from django.urls import include, pathurlpatterns = [path('admin/', admin.site.urls),path('polls/', include('polls.urls')),
]

6、在polls文件夹下的serializer.py中写入如下命令：

from rest_framework import serializers
from polls.models import Userclass UserSerializer(serializers.ModelSerializer):class Meta:model = Userfields = "__all__"

7、在polls文件夹下的urls.py中写入如下命令：

from django.conf.urls import url
from polls import views
from rest_framework import routersrouter = routers.DefaultRouter()
router.register(r'user', views.UserViewSet)urlpatterns = [url('Login', views.UserViewSet.Login),
]

8、在polls文件夹下的views.py中输入如下命令：

from django.http import HttpResponse
from resr_framework import views
from polls.models import User
from polls.serializer import UserSerializer
from django.views.decorators.csrf import csrf_exemptclass UserViewSet(views.ModelViewSet):@csrf_exemptdef Login(request):username = request.POST.get('account')password = requesr.POST.get('password')    q = User.objects.filter(username=username, password=password)if len(q) > 0:return HttpResponse(1)else:return HttpResponse(0)

9、最终完成前后端的连接。

Vue前端与Django后端实现前后端分离连接相关推荐

用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅（上篇）
前言本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
vue 虚拟主机_Vue实现简单前后端分离（虚拟主机也可用）
我们提到前后端分离,第一想到的应该是跨域问题!之前的项目跨域问题我都是在Vue端解决,部署上线后通过nginx进行反向代理. 这种方法有个小坑,大家可以尝试下使用Apache搭建后端api,然后使用N ...
vue上传大文件/视频前后端（java）代码
vue上传大文件/视频前后端(java)代码一.上传组件二.后端java代码注意: 一.上传组件 <template><div>&l ...
计算机毕业设计-ssm+vue汽车销售管理系统-汽车商城（前后端分离）java代码
计算机毕业设计-ssm+vue汽车销售管理系统-汽车商城(前后端分离)java代码注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境开发语言:Java 设计模式:MVC 架构:B ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
计算机毕业设计-基于ssm+vue的化妆品商城管理系统（前后端分离）java代码
计算机毕业设计-基于ssm+vue的化妆品商城管理系统(前后端分离)java代码注意:该项目只展示部分功能,如需了解,评论区咨询即可. 作者:IT跃迁谷 1.开发环境开发语言:Java 设计模式: ...
vue前端与Django后端数据交互
现在接触的项目是vue作为前端,Django作为后端的.二者之间的数据交互是二者连接起来的关键,这里以get为例,vue将后端拿到的数据进行展示.万事开头难,加油~ 后端数据库这是数据库中的数据, ...
基于VUE+DJANGO开发的前后端分离的官方网站系统带管理后台
前言每个企业都有开发一个官方网站的需求,用于展示企业的产品和服务,企业的文化宗旨和品牌形象等,并要求网站有比较强的自由定制的功能.为此,我开发了这款官方网站系统,自带轻便的管理后台,在后台简单修改下 ...

Vue前端与Django后端实现前后端分离连接

1、前端部分

2、后端部分

Vue前端与Django后端实现前后端分离连接相关推荐

最新文章

热门文章