当前位置:首页 > 技术分析 > 正文内容

Django 前端页面

ruisui883个月前 (03-16)技术分析17

前端介绍了建立模型(表),并写了保存数据,与查询数据,那么在前端页面,如何将用户输入的数据提交到后台保存呢?

django框架的处理逻辑大体是这样的:

1,前端页面表单一般是在一个form里面,在form中指定action

2,在urls.py中定义路由,接受form中action指定的路径(由)

3,在views.py或自定义的py模块中定义后端处理逻辑,并返回给前端


1,创建前端页面

通用情况下,前端页面都是html文件,在myweb\web\templates目录新建一个taskAdd.html文件,编辑代码如下:

{% extends 'base.html' %}

{% block content %}

{% include "v3/v3Com.html" %}

{% csrf_token %}

新增任务
任务名称:操作人:
开始日期:结束日期:
任务描述:

{{ info }}

{% endif %}

{% endblock %}

在没有美化的情况,一个比较粗糙的页面是这样的:

2,编辑views.py文件

编辑myweb\web\views.py文件,加入代码:


import database


# 保存任务表

def task_add(request):

task_info = dict()

task_info['task_name'] = request.POST.get('task_name')

task_info['task_user'] = request.POST.get('task_user')

task_info['task_describe'] = request.POST.get('task_describe')

task_info['task_start_date'] = request.POST.get('task_start_date')

task_info['task_end_date'] = request.POST.get('task_end_date')

dataBase.save_task(task_info)


因为我们把保存数据的逻辑是写在 database.py里的save_task函数里的

所以先引入database,再调用save_task函数。(如果不清楚,看“保存数据”那章节的内容)


3,配置urls.py文件

编辑urls.py文件,加入:

url(r'^taskAdd/', views.task_add),


前端页面的form提交时会先在urls.py里找到form里action指定的路径taskAdd,urls根据taskAdd,去调用views.task_add函数。

另外注意在form里的{% csrf_token %},如果不加上这句,那么运行时会报一个错误。 这是一种安全机制,用于防止跨站攻击的。即后端服务要验证请求的来源是明确的。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2778.html

分享给朋友:

“Django 前端页面” 的相关文章

Git 分支管理策略与工作流程

(预警:因为详细,所以行文有些长,新手边看边操作效果出乎你的预料)团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。看完这篇文章后,涉及GIT的工作中就会减少因为规范问题导致工作出错,当然如果你现在暂时还未有合...

学前端,这30个CSS选择器,你必须熟记

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。什么是CSS选择器呢?每一条css样式定义由两部分组成,形式如下:[...

VUE-router

七.Vue-router1、什么是vue-routervue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统页面切换是用超链接a标签进行切换。但vue里是用路由,因为我们用Vue做的都是单页应用,就相当于只有一个主的i...

在vue项目中封装WebSockets请求

在Vue项目中封装WebSocket请求包括以下步骤:1. 安装WebSocket库:首先,导入WebSocket库,例如`vue-native-websocket`或`socket.io-client`。根据项目需求选择适当的库,并根据官方文档进行安装和配置。2. 创建WebSocket服务:在V...

异步电动机和同步电动机有什么区别?

有很多电工朋友在日常工作当中,会遇到很多种不同类型的电动机,比如直流电机、高低压交流电机、步进电机和伺服电机等等。其中交流电机还可以分为异步电动机和同步电动机两种,那么同步电动机和异步电动机到底有什么区别呢?下面就为大家简单的介绍一下:一、转速的区别:看这个题目就能知道,它们最大的区别就在于“同步和...

那些你不知道的 TCP 冷门知识

最近在做数据库相关的事情,碰到了很多TCP相关的问题,新的场景新的挑战,有很多之前并没有掌握透彻的点,大大开了一把眼界,选了几个案例分享一下。案例一:TCP中并不是所有的RST都有效背景知识:在TCP协议中,包含RST标识位的包,用来异常的关闭连接。在TCP的设计中它是不可或缺的,发送RST段关闭连...