Python_前端网页+前后端交互

学习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_views
 
 
urlpatterns = [
    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

  • 17
    点赞
  • 184
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值