细说如何制作抖音同款性格测试，运气测试网站（带代码讲解）

最新推荐文章于 2025-03-12 07:37:17 发布

一只来自虚空的小白虎

最新推荐文章于 2025-03-12 07:37:17 发布

阅读量3.1k

点赞数 2

分类专栏： python项目文章标签： python ajax html jquery web

本文链接：https://blog.csdn.net/weixin_45940348/article/details/104259987

版权

本文介绍了如何制作类似抖音的性格测试、运气测试网站，使用Python的Django框架作为后端，HTML+jQuery+Ajax处理前端交互。详细讲解了前端动态背景、输入验证、Ajax数据提交，以及后端Django模型、视图和URL配置。最后揭示了测试结果实际上由随机数生成，提醒开发者不应用于非法获取用户信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hi，大家好！我是你们活泼又可爱的小虎！

最近抖音很火的什么性格测试，运气值测试之类的，小虎研究了一下，发现了其中的奥秘！！！

开始说了，小板凳准备好了吗？
在这里插入图片描述
本来想给大家照几张样图，但是刷了半小时，就是不出来，哎，生活就是如此你不要看的时候经常给你弹出来，你要看的时候就是不出来。

出于好奇，我稍微分析了一下抖音测试的流程：输入信息 -> 信息发送到后台 -> 返回数据到页面给用户查看（尼玛！！这不是典型的套取客户信息的套路吗？）

小伙伴，学完之后不要干违法的事情哟！

本着好奇，我也做了一个差不多的网站，采用python+Django做后台，前端使用HTML+js+jQuery，数据库采用sqllite。为啥用sqllite不用mysql或者其他数据库呢，哈哈哈，因为我懒！
在这里插入图片描述
最后作品的体现是使用微信扫一扫，然后显示内容！！！

说多无用上图最实际！
在这里插入图片描述

上面就是本次讲解的最终效果了…

铺垫了这么多，开始我的表演吧！

首先我们来分析一下前端要显示的页面…一共只有一个页面，哈哈哈，你没有听错，这么多的效果只在一个页面上完成…

来人给朕上图
在这里插入图片描述
上面的图已经充分说明了这个流程，小伙伴，你没有看错，你们的幸运值其实只是个随机数…最终的目的还是套取你们的信息，都应会有一键授权（微信也差不多）你点击了，上面的信息也可以不用输了，不法商家就可以成功套取你的公开信息啦。
在这里插入图片描述
先说前端好还是后端好呢？

好吧！我先说前端的页面吧！

这个页面，其实就是一个动态的背景图，加上CSS美化了的输入框和文字。

详细代码如下：（看不懂的小伙伴就直接跳过吧！）

<body style="background-image: url({% static 'bg.gif' %});background-size: cover;" >
<!--内容-->
    <div id="top">
        2020运气大测试
    </div>
<!--问题内容-->
    <div id="content">
        <div style="font-size: 3rem;color:#25C6FC;font-weight: bold;padding-top: 3rem">请输入下面信息快来测测你的运气吧！</div>
        <div style="clear: left;padding-top: 8rem;">
            <div class="tc">姓名</div>
            <div class="ic"><input type="text" maxlength="20" class="inp" id="name"></div>
        </div>

        <div style="clear: left;padding-top: 8rem;">
            <div class="tc">手机</div>
            <div class="ic"><input type="text" maxlength="11" class="inp" id="phone"></div>
        </div>

        <div style="clear: left;padding-top: 8rem;">
            <div class="tc">年龄</div>
            <div class="ic"><input type="number" maxlength="3" class="inp" id="age"></div>
        </div>

        <div style="clear: left;padding-top: 8rem;">
            <div class="tc">生肖</div>
            <div class="ic"

最低0.47元/天解锁文章