学习Python_前端网页,以一个登录页为案例
简单的 django.http.HttpResponse 可以把内容显示到网页上,本文主要记录如何使用渲染模板的方法来显示内容。
HttpResponse 方式:

渲染模板返回
(注意关键字HttpResponse 和render的区别)

升级版模板返回

实现步骤
1. 使用PyCharm创建一个 Djano项目,和一个 自命名的app
创建项目就不写了

#项目下创建挨自命名的app
python manage.py startapp learn

2. 把 自命名的app名称加入到 settings.INSTALLED_APPS中

INSTALLED_APPS = ('django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','learn',
)

3. 打开 learn/views.py 写一个首页的视图

from django.shortcuts import render
def home(request):return render(request, 'home.html')

4. 在 templates 文件夹里面新建一个 home.html
默认配置下,Django 的模板系统会自动找到app下面的templates文件夹中的模板文件。
5. 在 home.html 中写一些内容

<!DOCTYPE html>
<html>
<head><title>欢迎光临</title>
</head>
<body>
今天天气好晴朗,处处好风光~
</body>
</html>

6. 将视图函数对应到网址,更改 urls.py

from django.conf.urls import include, url
from django.contrib import admin
from learn import views as learn_viewsurlpatterns = [url(r'^$', learn_views.home, name='home'),url(r'^admin/', include(admin.site.urls)),
]

8. 运行开发服务器,看看效果
python manage.py runserver

最简单的网页就生成了,噔噔噔~
然后就是升级版带交互和效果
9. 接收用户发送的数据
在登录页实现一个表单,让用户输入用户名和密码,后台接收到这些数据。
先修改home.html文件

<!DOCTYPE html>
<html>
<head><title>欢迎光临</title>
</head>
<body>
<h1 style="">用户输入</h1>
<form action="/home" method="post"><input type="text" name="username"/><input type="password" name="password"/><input type="submit" name="提交"/>
</form>
</body>
</html>

然后修改views.py文件

<!DOCTYPE html>
<html>
<head><title>欢迎光临</title>
</head>
<body>
<h1 style="">用户输入</h1>
<!--action=要跳转的页面比如main,程序就会从url中寻找main对应的url-->
<form action="" method="post"><input type="text" name="username"/><input type="password" name="password"/><input type="submit" name="提交"/>
</form>
<script src="/static/js/jquery.js"></script>
</body>
</html>

若重启web服务时,会出错,因为django有一个跨站请求保护机制,我们在settings文件中将它关闭。

再次进入浏览器,刷新页面:
输入点东西,然后我们在pycharm中可以看到相应的数据。


10.把输入数据和数据库做匹配并跳转新页面

11.页面效果
在项目中新建个static目录,把需要的CSS,JS和各种插件都放置在这个目录里。

为了让django找到这个目录,依然需要对settings进行配置,在setting文件末尾加入:

STATICFILES_DIRS = (# Put strings here, like "/home/html/static" or "C:/www/django/static".#  Always use forward slashes, even on Windows.#  Don't forget to use absolute paths, not relative paths.os.path.join(BASE_DIR, 'static/'),

至于static文件下的东西如何获取,拷贝,我的获取方式是:
https://blog.csdn.net/Grandaunt/article/details/84633581

参考资料:
https://code.ziqiangxuetang.com/django/django-template2.html
https://blog.csdn.net/Sunshine_ZCC/article/details/73918408

Python_前端网页+前后端交互相关推荐

  1. 前端python和go_Python_前端网页+前后端交互-Go语言中文社区

    学习Python_前端网页,以一个登录页为案例 简单的 django.http.HttpResponse 可以把内容显示到网页上,本文主要记录如何使用渲染模板的方法来显示内容. HttpRespons ...

  2. 【前端】前后端交互重点Ajaxの介绍及实战

    ❤️Ajax❤️ 每篇前言: 第一部分:JSON简介 效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...

  3. 【前端44_前后端交互_跨域】前端解决:JSONP、后端解决:CORS 、后端代理

    文章目录 跨域 什么是跨域 前端解决: JSONP 实现原理 步骤 前端:创建标签,拼接传递参数 后端:接收值,返回值 封装 Ajax 代码 在封装的 Ajax 中添加 JSONP 需求 思路 练习: ...

  4. 前后端交互(小白教学)

    在我们的印象中什么是前后端交互呢? 我们一个后端程序员为什么要去学习前端知识? 前后端交互到底是靠什么而进行关联的呢? 接下来我们带着这三个问题来阅读这边文章!!! 1.前后端交互 所谓前后端交互,即 ...

  5. 写给刚入门的前端工程师的前后端交互指南

    转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...

  6. 前后端交互中,返回前端的自定义响应数据结构

    在前后端交互分离的体系下,我们后端一般会将返回给前端的信息数据进行格式的统一,然后返回前端json串:,一下我提供了一个模板,在实际开发中可进行参考 package com.project.util; ...

  7. angular和JAVA实现aes、rsa加密解密,前后端交互,前端加解密和后端JAVA加解密实现

    今天实现了下AES和RSA加密解密,主要的功能是对前后端交互数据进行加密解密,为什么要用到两个算法呢,首先RSA默认的话加密长度是有限的100多个byte吧大约,并且需要公钥私钥,而AES加密没有限制 ...

  8. Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询)

    Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架 管理员登录 游客登录 普通用户登录 人员的增删改查 信息更新 图片上传 分页查询 修改密 ...

  9. 前后端交互,密码加密,RSA 实现前端 js 加密,后端 go 解密

    RSA 加密算法简介 一种比较常见的非对称加密算法,常用于前后端交互中的密码加密,前端使用公钥加密密码,后端使用私钥进行解密.公钥可对外开放,私钥是存放在服务端,外部正常情况下是拿不到解密私钥的. 以 ...

最新文章

  1. Netty 用起来够猛!
  2. 3、HTML <a>标签(超链接)
  3. 牛客网 在线编程 折纸问题
  4. Python 如何创建多维的list
  5. Regular Exprassion--正则表达式基础
  6. 12人类为什么有战争
  7. 【甘道夫】CDH5.2的Maven依赖
  8. oracle简易数据库搭建,Oracle 10g 手工创建一个最简单的数据库
  9. 做 Python 代码重构,竟发现这些“潜规则”!
  10. feed43使用教程
  11. 给ApplicationContext容器中添加组件的方法(@Bean的使用)
  12. 电信提供的路由器无法进入配置地址或者配置后找不到自己WIFI的解决方法
  13. 计算机软考信息处理技术员试题及答案,软考信息处理技术员模拟试题及答案(一)...
  14. 计算机网络——网络与互联网
  15. 用英文字母解析漩涡鸣人
  16. 用Python对微信好友进行简单统计分析
  17. freeswitch通过limit限制cps
  18. openssl从PFX导出私钥、公钥
  19. R语言的三种聚类方法
  20. linux复制操作 cp: -r not specified; omitting directory XXX 错误

热门文章

  1. OR值的意义和计算公式,和95% CI
  2. 国外persona用户画像_使用Mozilla Persona对用户进行身份验证
  3. python爬虫动态数据获取_爬虫系列(9)爬虫的多线程理论以及动态数据的获取方法。...
  4. woo语言一行代码批量修改文件名称
  5. 二叉树——根据 中序 和 层序 建树,超详讲解。
  6. 如何求一个关系模式的候选码
  7. QT 设置QPushButton背景为透明色
  8. 管理好一个团队,必须先消灭这些问题 [联络易]
  9. Android Studio Build Output控制台输出乱码解决
  10. Strategy模式的具体实现