Django中如何让页面之间建立关系

news/2024/5/20 14:54:41

今天给大家讲解两种让页面建立联系的方式

一、重定向
二、表单提交

先看第一种方式，重定向

首先需要了解客户端发起请求的过程
1、客户端向服务端发起请求,比如请求地址是：http://127.0.0.1:8000/lili/submit/


2、程序根据路由找到视图函数
3、执行视图函数，比如视图函数是要求打开submit.html
4、操作视图函数返回的html中的按钮，点击页面中 的按钮，如图


5、调用这个按钮绑定的方法，重点来了

在方法中这样写：

 window.location.href = 'http://127.0.0.1:8000/lili/result/'

查看图片：

6、加载新的代码，然后重新访问：http://127.0.0.1:8000/lili/submit/

7、点击submit这个按钮，这样就跳转成功了

二、表单提交
 

1、创建模型，代码如下

from django.db import models
from django.contrib.auth.models import Userclass Feedback(models.Model):quality = models.IntegerField('商品质量', default=1)attitude = models.IntegerField('客服态度', default=1)speed = models.IntegerField('物流速度', default=1)text = models.TextField('评论内容', max_length=150, default='')anonymous = models.BooleanField('是否匿名', default=True)created_at = models.DateTimeField(auto_now_add=True)updated_at = models.DateTimeField(auto_now=True)name: str = "lili"objects: models.QuerySet  # 普通的属性

2、生成迁移脚本：

python .\manage.py makemigrations
python .\manage.py migrate

3、编辑views.py,编写视频函数，代码如下
 

import json
import osfrom django.contrib.auth import login, logout
from django.shortcuts import render
from django.http import JsonResponse, HttpResponse, HttpResponseRedirect, HttpResponsePermanentRedirect
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
from django.template.loader import render_to_string
from django.urls import reversefrom lili.models import Feedbackdef submit(request):if request.method == 'GET':html = open("submit.html", encoding="utf-8").read()return HttpResponse(html)elif request.method == 'POST':# 获取提交的表单数据data = json.loads(request.body)print(data)obj = Feedback()obj.quality = data.get('quality', 0)obj.attitude = data.get('attitude', 0)obj.speed = data.get('speed', 0)obj.text = data.get('text', '')obj.anonymous = data.get('anonymous', False)obj.save()request.session['feedback_data'] = datareturn JsonResponse({'status': 'success'})def result(request):html = open("result.html",encoding="utf-8").read()return HttpResponse(html)def submit_5524(request):if request.method == 'POST':data = json.loads(request.body)print(data)return JsonResponse({'status': 'success','data':data})html = open("submit.html",encoding="utf-8").read()return HttpResponse(html)

4、编辑html文件，通过这个文件实现先后端的交互，比如点击操作，以下是submit.py的示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title>VForm Demo</title><link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" /><link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform3/render.style.css?t=20220129"><style type="text/css"></style>
</head>
<body><div id="app"><v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render><el-button type="primary" @click="submitForm">Submit</el-button></div><script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
<script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
<script>const { createApp } = Vue;const app = createApp({data() {return {formJson: {"widgetList":[{"key":40214,"type":"rate","icon":"rate-field","formItemFlag":true,"options":{"name":"quality","label":"商品质量","labelAlign":"","defaultValue":null,"columnWidth":"200px","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"max":5,"lowThreshold":2,"highThreshold":4,"allowHalf":false,"showText":false,"showScore":false,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"rate73475"},{"key":40214,"type":"rate","icon":"rate-field","formItemFlag":true,"options":{"name":"attitude","label":"客服态度","labelAlign":"","defaultValue":null,"columnWidth":"200px","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"max":5,"lowThreshold":2,"highThreshold":4,"allowHalf":false,"showText":false,"showScore":false,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"rate59589"},{"key":40214,"type":"rate","icon":"rate-field","formItemFlag":true,"options":{"name":"speed","label":"物流速度","labelAlign":"","defaultValue":null,"columnWidth":"200px","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"max":5,"lowThreshold":2,"highThreshold":4,"allowHalf":false,"showText":false,"showScore":false,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"rate28142"},{"key":116462,"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"text","label":"评论","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"custom-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":"","onAppendButtonClick":""},"id":"input110400"},{"key":25114,"type":"switch","icon":"switch-field","formItemFlag":true,"options":{"name":"anonymous","label":"是否匿名","labelAlign":"","defaultValue":false,"columnWidth":"200px","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"switchWidth":40,"activeText":"","inactiveText":"","activeColor":null,"inactiveColor":null,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"switch99841"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":[],"functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}},formData: {},optionData: {}}},methods: {submitForm() {this.$refs.vFormRef.getFormData().then( (formData) => {// Form Validation OK// alert( JSON.stringify(formData) )fetch('/lili/submit/',{method: 'POST',headers:{'Content-Type': 'application/json'},body: JSON.stringify(formData)}).then(data => {// document.open();// document.write(data.html);// document.close();window.location.href ='http://127.0.0.1:8000/lili/result/'})}).catch( function(error) {// Form Validation Failedalert(error)})}}});app.use(ElementPlus)app.use(VFormRender)app.mount("#app");
</script>
</body>
</html>

持续不断的总结输出，一定可以厚积薄发，如果觉得我的文章有帮助到你，望你关注，笔芯
 


http://www.mrgr.cn/p/32273203

相关文章

基于YOLO的车牌与车型识别系统

基于YOLO的车牌与车型识别系统

一、项目背景与意义 随着智能交通系统的快速发展&#xff0c;车辆识别技术在交通管理、安防监控、自动收费、停车管理等领域发挥着至关重要的作用。车牌识别和车型识别作为车辆识别技术的核心组成部分&#xff0c;能够有效提升交通运营效率&#xff0c;加强公共安全监控&#…
阅读更多...
css mix-blend-mode 层叠样式属性各类效果

css mix-blend-mode 层叠样式属性各类效果

官方给出的定义是&#xff1a;mix-blend-mode css 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 通俗来讲&#xff0c;就是一张图片跟它的父级元素背景色的融合方式。 大致分为以下16种&#xff1a; mix-blend-mode: normal; mix-blend-mode: m…
阅读更多...
数据结构--链表进阶面试题

数据结构--链表进阶面试题

在链表题目开始之前我们来复习一道数组元素的逆序问题&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 提示&#xff1a; 1 < nums.length < 10^5-2^31 < nums[i] < 2^31 - 10 < k < 10^5 思…
阅读更多...
Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

论文地址 论文地址&#xff1a;https://www.mdpi.com/2227-7390/10/5/844#/ github&#xff1a;edosavini/TransferBertSarcasm (github.com) 论文首页 笔记框架 使用 BERT 进行中间任务迁移学习的讽刺检测 &#x1f4c5;出版年份:2022 &#x1f4d6;出版期刊:Mathematics &…
阅读更多...
自定义表单元素组件内容变化触发ElForm重新校验

自定义表单元素组件内容变化触发ElForm重新校验

对于下图中“付费类型”怎么实现有很多种方式&#xff0c;我能想到的是以下两种&#xff1a; Element Plus的RadioButton自定义组件 1. RadioButton 它本质上就是一个单选组件&#xff0c;它跟Element Plus的RadioButton本质上没有区别&#xff0c;无非是外观上的差别。那么…
阅读更多...
2024 年 5 月 8 日 周三 晴 热（471 字）

2024 年 5 月 8 日 周三 晴 热（471 字）

正文翻开日历，才注意到已经立夏了呢。今天总结起来，就一个字：累。下午跑了三个乡镇，去找镇长对接帐户的事情。虽说我是被迫拉上的，不用自己操心，但是坐车真的很累。时间长，4 个多小时，弯道多，气热。最后跑完回到行里的时候感觉人快死掉了。并且因为这件事，中午觉也没…
阅读更多...
TLP元素与PCIE数据流

TLP元素与PCIE数据流

不同于并行总线，PCIe 这样的串行总线不使用总线上的控制信号来表示某时刻链路上正在发生什么。相反地，PCIe 链路上的发送方发出的比特流必须要有一个预期的大小，还要有一个可供接收方辨认的格式，这样接收方才能理解比特流的内容。此外，PCIe 在传输数据包时并不使用任何直接…
阅读更多...
高效备战！2024年陕西省绿色工厂申报条件好处和各地区奖补

高效备战！2024年陕西省绿色工厂申报条件好处和各地区奖补

什么是绿色工厂&#xff1f; 绿色工厂是制造业的生产单元&#xff0c;是绿色制造的实施主体&#xff0c;属于绿色制造体系的核心支撑单元&#xff0c;侧重于生产过程的绿色化。 通过采用绿色建筑技术建设、改造厂房&#xff0c;预留可再生能源应用场所和设计负荷&#xff0c;…
阅读更多...
ESD静电问题 | 摄像头空气放电重启

ESD静电问题 | 摄像头空气放电重启

【转自微信公众号&#xff1a;必学大课堂】
阅读更多...
情感分类学习笔记（1）

情感分类学习笔记（1）

文本情感分类&#xff08;二&#xff09;&#xff1a;深度学习模型 - 科学空间|Scientific Spaces 一、代码理解 cw lambda x: list(jieba.cut(x)) #定义分词函数 您给出的代码定义了一个使用 jieba 分词库的分词函数。jieba 是一个用于中文分词的 Python 库。该函数 cw 是…
阅读更多...
添加一个索引要投产，需要哪些步骤？

添加一个索引要投产，需要哪些步骤？

编程一生 致力于写大家都能看懂的、有深度的 技术文章 05/2024 01 开场白 亚马逊有个bar raiser文化。就是说新招来的人一定要超过之前入职人员的平均水平&#xff0c;宁缺毋滥。越来越多的公司在推行这种文化。在这种氛围下&#xff1a;“虽然我不懂&#xff0c;但是活儿是能出…
阅读更多...
如何把多个文件（夹）平均复制到多个文件夹中

如何把多个文件（夹）平均复制到多个文件夹中

首先，需要用到的这个工具：度娘网盘 提取码：qwu2 蓝奏云 提取码：2r1z假定的情况是，共有20个兔兔的图片，想要平均的复制4个文件夹里，那么每个文件夹里面就有5个图片（如果是5个，那每个自然是4个，具体除数是多少，根据实际情况即可）打开工具，切换到 文件批量复制 版块找…
阅读更多...
一键自动化博客发布工具,用过的人都说好(cnblogs篇)

一键自动化博客发布工具,用过的人都说好(cnblogs篇)

使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到cnblogs上。cnblogs和其他的博客平台相比会比较复杂，需要设置的项目也比较多一些，弄懂了cnblogs的实现方式，那么你应该对selenium的整个框架使用已经烂熟于心了。 除了正常的标题，内容，摘要之外，cnblog…
阅读更多...
如何把多个文件（夹）随机复制到多个文件夹中

如何把多个文件（夹）随机复制到多个文件夹中

首先，需要用到的这个工具：度娘网盘 提取码：qwu2 蓝奏云 提取码：2r1z先看文件的情况一共20个兔兔的图片，4个文件夹，把全部的图片随机的复制这些地方去打开工具，切换到 文件批量复制 版块找到右下角的 设置，点击打开勾选“随机复制”，把文件进行随机的复制选中全部的兔兔…
阅读更多...
【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
软件测试过程中的痛点思考

软件测试过程中的痛点思考

前几天无意中看到了TesterHome发起的《2023年度软件质量保障行业调查报告》，文中提到了几点调查结果和分析结论让我很感兴趣。针对这份调查报告，我想就下述三点结论谈谈我的一些理解和思考。一、测试参与度分析 在这一调查报告结论中，提到了需求评审、测试计划和测试评审是整…
阅读更多...
如何把多个文件（夹）向上移动1层（或多层）（在批量复制前或后进行）

如何把多个文件（夹）向上移动1层（或多层）（在批量复制前或后进行）

首先，需要用到的这个工具：度娘网盘 提取码：qwu2 蓝奏云 提取码：2r1z假定情况是，我要把下图里的4个文件夹内部的全部文件，合并到04的当前位置来（4个文件夹里面各有5个兔兔的图片）打开工具，切换到 文件批量复制 版块找到右下角的 更多 ，点击，来设置上移的情况勾选“来…
阅读更多...
Qt元对象系统自带类型与注册类型的判断

Qt元对象系统自带类型与注册类型的判断

通过isRegistered()方法判断 在Qt跨线程传参时，使用信号槽connect或者调用QMetaInvokeMethon时，传递的参数的类型通常要注意是不是已在Qt的元对象系统中注册过了，Qt提供了方法来判断类型是否被注册： bool QMetaType::isRegistered(int type)其中参数是枚举类型，参数例子: …
阅读更多...
JAVA栈相关习题3

JAVA栈相关习题3

1.将递归转化为循环 比如&#xff1a;逆序打印链表 // 递归方式void printList(Node head){if(null ! head){printList(head.next);System.out.print(head.val " ");}} // 循环方式void printList(Node head){if(nullhead){return;}Stack<Node> snew Stack<…
阅读更多...
Qt元对象系统自带类型与注册类型

Qt元对象系统自带类型与注册类型

通过isRegistered()方法判断 在Qt跨线程传参时，使用信号槽connect或者调用QMetaInvokeMethon时，传递的参数的类型通常要注意是不是已在Qt的元对象系统中注册过了，Qt提供了方法来判断类型是否被注册： bool QMetaType::isRegistered(int type)其中参数是枚举类型，参数例子: …
阅读更多...
推荐文章

Copyright @ 2022~2023