前端传参后台没有获取到_Django从入门到大作业：3-前后端传参

关于基本H5页面的访问配置，欢迎移步我的文章

koko可可：Django从入门到大作业：2-见网页​zhuanlan.zhihu.com

---

这一节，我们将初探Django后台。

项目第一个h5页面

之前我们已经搞定了上图的访问。但赤果果的暴露实在是不文明，所以我们要给它加个防盗门——登入登出。为了实现登入登出，我们先要搞清楚传参过程。

1. 关于前端

新建 index.html 作为进入 welcome.html 的大门，也就是在 index.html 我们将实现登录。所以新建这个大门。（当然你也可以叫login或其他名字，这里我默认index.html是访问本项目的第一个页面。）

templates下新建index.html

仿照上节内容，配置urls.py及views.py

path('index.html/', views.index, name='index'),

配置urls.py页面映射

def index(request):
    return render(request, "index.html")

为index.html编写映射函数

访问http://127.0.0.1:8000/usermng/index.html/看看效果，没问题继续下一步。

---

2. 前端→后端传参

接下来的部分，由于前后端逻辑交互的问题，可能会比较混乱，我尽量梳理并解释清楚。对于新手，不懂的地方先照做，后面会水到渠成。

先编写一个基本的前端界面

<form action="." method="post" id="login">{% csrf_token %}
    <input type="text" name="username" placeholder="请输入用户名"><br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="登录">
</form>

为index.html编写登录表单

访问查看效果

（本系列默认读者已具备H5基础，关于表单美化的问题就留给读者自行解决啦）

这里特别注意上图箭头标出的{% csrf_token %} 。CSRF中文名跨站请求伪造，由于Django在安全方面考虑得很周到，已经为我们默认开启了这类防备，所以每个表单后面都要紧跟{% csrf_token %}，否则页面将无法访问。（该功能的关闭在settings.py下，属于可选项，这里我建议开启，也就是不动）

现在前端已经具备基本雏形，可以去后端查看一下信息的接收了。

前后端交互的基本逻辑是：request对象裹挟着整个表单的全部参数信息，一同扔给后端，后端要做的就是从这包信息中找出所需。

上图的request.POST.get("username")就是后端获取用户名输入框数据的一种方式

比如我在前端输入用户名123，密码456，点击登录

我们可以在后端打印一下看看，证明信息获取成功

上述是最基本的前端→后端传参

至于后端→前端传参，需要通过return实现。

---

3. 后端→前端传参

我们假设index()函数已经执行完全部的用户名密码匹配过程，即验证通过

正常逻辑下，登陆成功跳转welcome.html页面，我们希望在welcome页面下显示具体的欢迎信息，比如“欢迎你，XXX”，这个XXX就是后端向前端传递的参数。

第一个方框代表页面跳转方向，第二个方框代表传递参数

重新梳理一下就是，我们访问index.html页面，与此同时，执行index()函数，该函数可以存在不同的分支，比如if 用户是学生 return 学生页面; elif 用户是老师 return 教师页面; else return 登录失败页面也就是上图第一个方框里的内容

在return的同时，可以向页面传递定向参数，即第二个方框。

如果觉得上面的解释不太清晰，让我们看结果好了。

后端通过字典（第二个方框），向前端传递了一个名叫username的参数 ，前端接收这个参数，并打印。Django中，可以使用{{ 变量名 }}打印变量值。

---

掌握了基础的参数传递，但距离登入登出还有一步——数据库。下一节将讲解磨人的数据库问题，欢迎移步。

koko可可：Django从入门到大作业：4-数据库​zhuanlan.zhihu.com