不使用框架下 python后端向前端返回html页面(学习笔记1)

不使用框架下 python后端向前端返回html页面(学习笔记1)

python新手学习web服务器原理的一些坑

本人正在尝试开发一个仓库管理系统的项目,为了能够更深刻地理解后台服务器的开发原理,选择尽量少地使用python现成框架,因此就无法避免各种不期而遇的大坑。现在跟大家一一分享一下,共同学习。

基本背景(django框架)

项目的服务器原理模仿django框架思路,由于django框架封装的过于强大,外观代码已无法一眼看出思路内核。所以,各种坑无法避免。

django框架的前后端交互实现方式

django框架中,后端向前端页面返回响应是通过 django.shortcuts 中的render, redirect函数实现的。
以一个现成的仓库管理系统项目实现登录注册的主页view.py文件为例:

from django.contrib.auth import login, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.shortcuts import render, redirect

def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request, user)
            return redirect('home_page')
    else:
        form = UserCreationForm()
    return render(request, 'basic/signup.html', {'form': form})

def home_page(request):
    return render(request, 'basic/home_page.html')

render 和 redirect 函数的原理被隐藏了起来,不利于新手深刻地理解其内在原理。

要想更好地理解,要用简单粗暴的方式。

结合本人项目中的两个案例来理解:

// 最简单的方式来理解,就是向前端返回一个字符串()
def admin(env, set_headers):
    status = '200 OK'
    headers = []
    set_headers(status, headers)
    return 'hello world'

上面的返回函数,可以实现成功向前端返回一个字符串页面‘hello world’。原理上来说,将函数的返回值置换成目标html文件就可以实现,后端向前端返回网页的目标。
所以,可以将代码改造一下可以变成:

// 打开一个同级文件夹下的html文件(第一次踩坑)
def admin(env, set_headers):
    status = '200 OK'
    headers = []
    set_headers(status, headers)
    with open('./form.html','r') as fd:
        data = fd.read()
    return data

兴高采烈地运行之后,发现这样的结果:

FileNotFoundError: [Errno 2] No such file or directory: ‘./form.html’

本人参考django框架认真考虑之后,认为应该是采用os函数获取文件路径来指代文件。于是更加兴高采烈地更新为:

// 打开一个同级文件夹下的html文件(第二次踩坑)
import os

BASE_DIR =  os.path.dirname(os.path.abspath(__file__))  #参考django框架获取当前文件所在路径的方法

def admin(env, set_headers):
    status = '200 OK'
    headers = []
    set_headers(status, headers)
    filename = 'BASE_DIR' + 'form.html')
    with open(filename,'r') as fd:
        data = fd.read()
    return data

运行之后,发现这样的结果:

FileNotFoundError: [Errno 2] No such file or directory: ‘/home/tarena/lessons/VMS/project/appsform.html’

看到appsform.html的形态,有些哭笑不得。此情此景,才真正理解django框架中Templates中的

'DIRS': [os.path.join(BASE_DIR, 'templates')],

所以,硬着头皮再修改一次:

import os

BASE_DIR =  os.path.dirname(os.path.abspath(__file__))

def admin(env, set_headers):
    status = '200 OK'
    headers = []
    set_headers(status, headers)
    filename = os.path.join(BASE_DIR, 'form.html')
    with open(filename,'r') as fd:
        data = fd.read()
    return data
运行之后,终于大功告成!

前端页面显示:
在这里插入图片描述

附上前端html文件代码及效果:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<form action="login" method="post" name="loginForm">
                <table width="403">
                    <tr>
                        <td>&nbsp; </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td width="89" align="center">
                            姓名:
                        </td>
                        <td width="247" align="left">
                            <input type="TEXT" name="name" />
                    </tr>
                    <tr>
                        <td align="center">
                            性别:
                        </td>
                        <td align="left">
                            <input type="RADIO" name="male" value="male" CHECKED><input type="RADIO" name="male" value="female"></td>
                    </tr>
                    <tr>
                        <td align="center">
                            省份:
                        </td>
                        <td align="left">
                            <select name="shengfen">
                                <option value="山东">
                                    山东
                                </option>
                                <option value="山西">
                                    山西
                                </option>
                                <option value="河南">
                                    河南
                                </option>
                                <option value="河北">
                                    河北
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            学习课程:
                        </td>
                        <td align="left">
                            <input type="CHECKBOX" name="internation" value="人工智能" />
                            人工智能
                            <input type="CHECKBOX" name="internation" value="数据挖掘" />
                            数据挖掘<br>
                            <input type="CHECKBOX" name="internation" value="网络爬虫" />
                            网络爬虫
                            <input type="CHECKBOX" name="interbation" value="后端开发" />
                            后端开发
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            附注信息:
                        </td>
                        <td align="left">
                            <textarea name="textarea" 
                                onfocus="if (value =='提交数据'){value =''}"
                                onblur="if (value ==''){value='提交数据'}">提交数据</textarea>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input name="SUBMIT" type="SUBMIT">
                            <input name="RESET" type="RESET">
                        </td>
                    </tr>
                </table>
            </form>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43409302/article/details/83046859