前端要触发一个事件,使得前端将信息发送给后端。例如一个登录事件,用户输入账号密码,点击登录按钮,即可将前端输入的信息发送给后端。该按钮绑定了一个事件,该事件放在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(()=>{})这一步。
1、后端要接受前端发来的信息,首先要在创建好的项目中创建一个App,命令为:
django-admin startapp polls
2、其次在创建好的Django项目下的setting.py中:①注册上述创建好的App:polls、②开放接受网络请求、③跨域问题、④数据库连接。代码如下:
# 开放接收所有网络请求
ALLOWED_HOSTS = ["*"]
# Application definition
INSTALLED_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 = True
CORS_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, path
urlpatterns = [
path('admin/', admin.site.urls),
path('polls/', include('polls.urls')),
]
6、在polls文件夹下的serializer.py中写入如下命令:
from rest_framework import serializers
from polls.models import User
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = "__all__"
7、在polls文件夹下的urls.py中写入如下命令:
from django.conf.urls import url
from polls import views
from rest_framework import routers
router = 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_exempt
class UserViewSet(views.ModelViewSet):
@csrf_exempt
def 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、最终完成前后端的连接。
文章浏览阅读1.6w次,点赞17次,收藏91次。最好选择一个相对干净的系统进行安装,也就是没有安装各种杂七杂八的软件的系统,否则极有可能在安装过程中出现一些报错,接下来正式开始。_oracle12c安装及配置
文章浏览阅读1.4k次。处理逻辑:abap小数点有两种:逗号(,)跟点号(.),千分位字符也分为这两种,本方法只为去掉千分位字符1、查找点号跟逗号的个数2、若点号个数大于1且逗号个数也大于1,则该数字为错误类型数字,退出程序3、若点号个数大于1,则用空格替换到字符串中的所有点号,然后去空格4、若逗号个数大于1,则用空格替换掉字符串中的所有逗号,然后去空格5、若点号个数 = 逗号个数 = 1:_替换千分位符号
文章浏览阅读1w次,点赞22次,收藏172次。1.动作事件监听器动作事件(ActionEvent)监听器是Swing中比较常用的事件监听器,很组件的动作都会使用它监听,如按钮单击,下表描述了动作事件监听器的接口与事件源。事件名称 事件源 监听接口 添加或删除相应类型监听器的方法 ActionEvent JButton、JList、JTextField等 ActionListener addAct..._java监听器
文章浏览阅读1.9k次,点赞3次,收藏12次。1、前言在OpenLayers中,要素的编辑主要使用ol.interaction.Select和ol.interaction.Modify配合实现,下面开始介绍。2、编辑要素编辑功能的实现很简答,ol.interaction.Select负责选择要素,ol.interaction.Modify对被选择的要素进行编辑,代码如下:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> _openlayers 选中编辑
文章浏览阅读790次,点赞3次,收藏2次。Android Material Design控件使用(二)_android 使用 material desingn ui 控件
文章浏览阅读4.5k次,点赞3次,收藏4次。servlet异常处理Today we will look into Servlet Exception and Error Handling. Sometime back I wrote a post about Exception Handling in Java but when it comes to web application, we need more than normal ex..._servletexception
文章浏览阅读8.5k次,点赞19次,收藏109次。1、堆排序堆排序采用堆的这种数据结构,堆首先是一颗完全二叉树。堆又分为大顶堆和小顶堆大顶堆就是父节点数值大于等于左右节点数值小顶堆是父节点数值小于等于左右节点数值下标为i的节点的父节点下表为:(i-1)/2下标为i的节点的左孩子下表为:i*2+1下标为i的节点的右孩子下表为:i*2-1#include<iostream>using namespace std;void sw(int &a,int &b) { int temp _c++堆排序
文章浏览阅读1.8k次。Openstack 从云硬盘(卷)中创建虚拟机_openstack volume create
文章浏览阅读6.4k次。文章目录@[toc]redis入门(三)目录前言事务原理Lua脚本安装脚本命令EVALEVALSHAlua和redis互操作SCRIPT EXISTSSCRIPT FLUSHSCRIPT KILL脚本复制集群搭建工具redis-trib.rbredis官方集群搭建集群横向扩展故障转移redis管理参考文档redis入门(三)目录redis入门(一)redis入门(二)redis入门(三)..._redis slot open
文章浏览阅读2.4k次。idea生成SpringBoot项目端口号的修改第一次使用idea,在生成SpringBoot项目的时候,提示端口8080被占用,这个时候有两个办法:1、修改端口号(推荐)①如果是.yml配置文件,添加server:port:8888,格式和下图相同,需要注意的一点是,server必须和spring同列,否则无效②如果是properties文件,配置文件中添加 server.port=88..._idea如何设置8080端口
文章浏览阅读2.2k次。我们平常所提到的计算机的内存指的是动态内存(即DRAM),动态内存中所谓的“动态”,指的是当我们将数据写入DRAM后,经过一段时间,数据会丢失,因此需要一个额外设电路进行内存刷新操作。但时间一长,代表1的电容会放电,代表0的电容会吸收电荷,这就是数据丢失的原因。我们都知道,中间层是为了提供抽象转换而存在的,而这套叫做操作系统的中间层,定义了一套规则,使得后续的可执行程序能够更容易的被运行起来,而且能更容易的利用各种硬件(显示,键盘等等),能够调用一些库来消除不同的程序间重复的运行逻辑。_操作系统和编程语言的关系
文章浏览阅读378次。这上以前加入黑手安全网上做的教程,也搬过来吧目标程序:红盟(内部版)TNT社工辅助.exe所加的壳:ACProtect 2.00 - RISCO Software Inc.首先忽略所有异常,隐藏下od脱壳步骤:1.程序附加(程序附加后会停在系统的领空)代码:7C92120F C3 RETN7C921210 8BFF MOV EDI,EDI7C921212 > CC INT3..._acprotect 教程