4Django-调通前端用户注册页面

一，前端：

1先拿到前端模板页面然后用flask跑起来：

jquery.min.js链接：https://pan.baidu.com/s/1XVY4xni3f7yYbY8aGYjmWQ

login_reglogin.css链接：https://pan.baidu.com/s/1kMGNpQKlWKjFqqqReFT7jw

提取码：abcd

from flask import Flask
from flask import Flask, send_file
app = Flask(__name__)


@app.route('/register')
def register():
    #注册
    return send_file('templates/register.html')


if __name__ == '__main__':
    app.run()

2在前端模板页面中编写一个提交数据的方法并将该方法绑定到提交按钮上：

<body>
    <div class="main">
        <ul class="left-form">
            <li><input type="text" class="username" name="username" /></li>
            <li><input type="email" class="email" name="email" /></li>
            <li><input type="phone" class="phone" name="phone"/></li>
            <li><input type="password" class="password_1" name="password_1" /></li>
            <li><input type="password" class="password_2" name="password_2"/></li>
            <li style="border:none">
                <input type="button" value="注册并等待审核" onclick="regist()">
            </li>
       </ul>
  </div>
</body>

<script>

function regist() {
 <!--使用jquery拿数据-->
 var username = $('.username').val();
 var email = $('.email').val();
 var password1 = $('.password_1').val();
 var password2 = $('.password_2').val();
 var phone = $('.phone').val();
 <!--组织json对象-->
    var post_data = {"username":username, "email":email, "password1":password1, "password2":password2, "phone":phone}
    <!--提交数据-->
    $.ajax({
        type:"post",
        contentType:"application/json",
        dataType:"json",
        <!--把json对象转化成json字符串-->
        data:JSON.stringify(post_data),
        url:"http://127.0.0.1:8000/v1/users",
        success:function (result) {
            if (result.code == 200){
                alert('注册成功')
            }else{
                alert('注册失败')
            }
            
        }
    })
}

</script>


</html>

3用给浏览器访问一下flask为前端注册页面配置的路由，看看是否有请求数据发出：

出现下列信息说明前端代码正确

常规
请求 URL: http://127.0.0.1:8000/v1/users
-referrer-when-downgrade
临时标头已显示
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/json
Referer: http://127.0.0.1:5000/register
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36
{username: "17600588787", email: "66907360@qq.com", password1: "123456", password2: "123456",…}
email: "358116506@qq.com"
password1: "123456"
password2: "123456"

二，后端：

1打开应用user里面的views.py:

import json

from django.http import JsonResponse
from django.shortcuts import render
from django.views import View
# Create your views here.
class UserViews(View):
    def post(self,request):
        json_str = request.body #获取前端的json提交
        json_obj = json.loads(json_str) #把json串转换成python的对象
        #取值
        username = json_obj.get('username')
        email = json_obj.get('email')
        password1 = json_obj.get('password1')
        password2 = json_obj.get('password2')
        phone = json_obj.get('phone')
        #直接给前端返回一个code200
        result = {'code':200,'username':username,'data':{}}
        return JsonResponse(result)

2绑定路由：

from django.contrib import admin
from django.urls import path
from . import views
from user import views as user_views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),
    path('test_cors',views.test_cors),
    path('v1/users',user_views.UserViews.as_view())
]
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

3再次访问前端页面测试：

http://127.0.0.1:5000/register

访问上面的地址后点提交按钮，如果有弹窗提示注册成功则表明前后端代码通了

posted @ 2021-12-11 15:59 linuxTang 阅读(99) 评论(0) 收藏举报

刷新页面返回顶部

linux运维技术

4Django-调通前端用户注册页面

公告