devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

创建Django项目_django项目创建

作者：你好赵伟 | 2024-05-26 01:23:19

赞

踩

django项目创建

一、打开Pycharm专业版

二、左上角点击文件-->新建项目-->选择Django 自动创建新虚拟环境以及新项目

三、终端输入

1.如果没有进入虚拟环境就先输入activate+虚拟环境名称

2.python manage.py runserver

3.报错：ImportError: DLL load failed while importing _sqlite3: 找不到指定的模块。

   输入 conda activate 激活base环境再输入python manage.py runserver即可运行成功

4.报错：You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

输入python manage.py migrate再输入python manage.py runserver即可运行成功

5.点击终端出现的链接 这种情况就是运行成功

四、连接数据库

1.点击右侧数据库

2.打开后点击加号，选择数据源，点击sqlite数据库

3.文件位置选择为项目路径中的db.sqlite3

4.确定后刷新数据库即可出现，都是django自带的表

 五、创建APP

1.先使用ctrl+C终止运行，再输入python manage.py startapp djangoApp即可创建app

  注意：app在项目文件夹内，与同名子应用处于同一级。

2.在djangoProject的settings.py中注册app

 六、搭建页面

1.djangoProject的urls.py

  1. from django.contrib import admin
  2. from django.urls import path
  3. from djangoApp.views import signup
  4.  
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path('signup/', signup.as_view()),
  8. ]

2.djangoApp的views.py

  1. from django.shortcuts import render
  2. from django.views.generic import View
  3.  
  4.  
  5. # Create your views here.
  6. class signup(View):
  7.     def get(self, request):
  8.         return render(request, 'signup.html')

3.在template中新建signup.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. Please sign up
  9. </body>
  10. </html>

4.运行程序后进入http://127.0.0.1:8000/signup/

 5.重新编辑html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FLEA MARKET</title>
  6. </head>
  7. <style>
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.     }
  13. </style>
  14. <body style="background: rgba(248,245,134,0.51);">
  15.     <!--title-->
  16.     <div class="title">WELCOME TO FLEA MARKET</div>
  17.     <style>
  18.         .title {
  19.             -webkit-box-sizing: content-box;
  20.             -moz-box-sizing: content-box;
  21.             box-sizing: content-box;
  22.             cursor: pointer;
  23.             border: none;
  24.             font: normal 5em/normal "Passero One", Helvetica, sans-serif;
  25.             color: rgb(248, 245, 134);
  26.             text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
  27.             -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  28.             -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  29.             -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  30.             transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  31.             text-align: center;
  32.             -o-text-overflow: clip;
  33.             text-overflow: clip;
  34.         }
  35.     </style>
  36.     <link async href="https://fonts.googleapis.com/css?family=Passero%20One" data-generated="https://enjoycss.com" rel="stylesheet" type="text/css"/>
  37.     <!--ghost-->
  38.     <div class="container1">
  39.         <svg class="ghost" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  40.              width="200px" height="200px"
  41.              xml:space="preserve">
  42.         <path fill="#fcfcda" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375
  43.             s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6
  44.             c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875
  45.             s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
  46.         <circle fill="#013E51" cx="86.238" cy="57.885" r="6.667"></circle>
  47.         <circle fill="#013E51" cx="40.072" cy="57.885" r="6.667"></circle>
  48.         <path fill="#013E51" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771
  49.             c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005
  50.             c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749
  51.             c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01
  52.             c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034
  53.             c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
  54.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
  55.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
  56.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
  57.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
  58.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
  59.         <path fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012
  60.             c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259
  61.             l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295
  62.             c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962
  63.             c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219
  64.             c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936
  65.             c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405
  66.             c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566
  67.             c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59
  68.             c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366
  69.             c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777
  70.             c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995
  71.             c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833
  72.             c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074
  73.             c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
  74.         </svg>
  75.         <p class="shadowFrame"><svg version="1.1" class="shadow" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="61px" y="20px"
  76.          width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744"
  77.          xml:space="preserve">
  78.         <ellipse fill="#d0d0b7" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
  79.             </svg></p>
  80.     </div>
  81.     <div class="container2">
  82.         <svg class="ghost" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  83.              width="200px" height="200px"
  84.              xml:space="preserve">
  85.         <path fill="#fcfcda" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375
  86.             s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6
  87.             c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875
  88.             s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"></path>
  89.         <circle fill="#013E51" cx="86.238" cy="57.885" r="6.667"></circle>
  90.         <circle fill="#013E51" cx="40.072" cy="57.885" r="6.667"></circle>
  91.         <path fill="#013E51" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771
  92.             c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005
  93.             c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749
  94.             c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01
  95.             c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034
  96.             c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"></path>
  97.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"></circle>
  98.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"></circle>
  99.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"></circle>
  100.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"></circle>
  101.         <circle fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"></circle>
  102.         <path fill="#f8f587" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012
  103.             c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259
  104.             l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295
  105.             c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962
  106.             c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219
  107.             c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936
  108.             c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405
  109.             c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566
  110.             c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59
  111.             c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366
  112.             c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777
  113.             c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995
  114.             c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833
  115.             c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074
  116.             c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"></path>
  117.         </svg>
  118.         <p class="shadowFrame"><svg version="1.1" class="shadow" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="61px" y="20px"
  119.          width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744"
  120.          xml:space="preserve">
  121.         <ellipse fill="#d0d0b7" cx="61.128" cy="19.872" rx="49.25" ry="8.916"></ellipse>
  122.             </svg></p>
  123.     </div>
  124.     <style>
  125.         .container1 {
  126.           position: absolute;
  127.           top: 60%;
  128.           left: 20%;
  129.         }
  130.         .container2 {
  131.           position: absolute;
  132.           top: 60%;
  133.           right: 20%;
  134.         }
  135.  
  136.         .ghost {
  137.           animation: float 3s ease-out infinite;
  138.         }
  139.  
  140.         @keyframes float {
  141.           50% {
  142.              transform: translate(0, 20px);
  143.           }
  144.         }
  145.         .shadowFrame {
  146.           width: 130px;
  147.           margin-top: 15px;
  148.         }
  149.         .shadow {
  150.           animation: shrink 3s ease-out infinite;
  151.           transform-origin: center center;
  152.  
  153.         }
  154.         ellipse {
  155.             transform-origin: center center;
  156.         }
  157.  
  158.         @keyframes shrink {
  159.           0% {
  160.             width: 90%;
  161.             margin: 0 5%;
  162.           }
  163.           50% {
  164.             width: 60%;
  165.             margin: 0 18%;
  166.           }
  167.           100% {
  168.             width: 90%;
  169.             margin: 0 5%;
  170.           }
  171.         }
  172.     </style>
  173.     <!--card-->
  174.     <div class="card">
  175.         <div class="box signup">
  176.             <div class="form-content">
  177.                 <h1>SIGN UP</h1>
  178.                 <form class="form" method="post">
  179.                     {% csrf_token %}
  180.                     <div>
  181.                         <div class="fa"><img src="/static/img/account.png" style="height: 25px; width: 25px;" alt=""></div>
  182.                         <label>
  183.                             <input type="text" placeholder="Username" name="username">
  184.                         </label>
  185.                     </div>
  186.                     <div>
  187.                         <div class="fa"><img src="/static/img/password.png" style="height: 25px; width: 25px;" alt=""></div>
  188.                         <label>
  189.                             <input type="password" placeholder="Password" name="password">
  190.                         </label>
  191.                     </div>
  192.                     <div class="btn">
  193.                         <input type="submit" value="sign up">
  194.                     </div>
  195.                 </form>
  196.                 <p class="btn-something">
  197.                     Already have an account ? <span class="loginbtn">login</span>
  198.                 </p>
  199.             </div>
  200.         </div>
  201.         <div class="box login">
  202.             <div class="form-content">
  203.                 <h1>LOG IN</h1>
  204.                 <form class="form">
  205.                     <div>
  206.                         <div class="fa"><img src="/img/account.png" style="height: 25px; width: 25px;" alt=""></div>
  207.                         <label>
  208.                             <input type="text" placeholder="Username">
  209.                         </label>
  210.                     </div>
  211.                     <div>
  212.                         <div class="fa"><img src="/static/img/password.png" style="height: 25px; width: 25px;" alt=""></div>
  213.                         <label>
  214.                             <input type="password" placeholder="Password">
  215.                         </label>
  216.                     </div>
  217.                     <div class="btn">
  218.                         <button>log in</button>
  219.                     </div>
  220.                 </form>
  221.                 <p class="btn-something">
  222.                     Don't have an account ? <span class="signupbtn">signup</span>
  223.                 </p>
  224.             </div>
  225.         </div>
  226.     </div>
  227.     <style>
  228.         .card {
  229.             position: absolute;
  230.             top: 50%;
  231.             left: 50%;
  232.             transform: translate(-50%, -50%);
  233.             width: 20rem;
  234.             height: 18rem;
  235.             perspective: 1500px;
  236.             -webkit-perspective: 1500px;
  237.             -moz-perspective: 1500px;
  238.         }
  239.  
  240.         .box {
  241.             position: absolute;
  242.             top: 0;
  243.             left: 0;
  244.             width: 20rem;
  245.             height: 18rem;
  246.             border-radius: 10px;
  247.             cursor: pointer;
  248.             backface-visibility: hidden;
  249.             transition: all 0.5s;
  250.             user-select: none;
  251.         }
  252.  
  253.         .login {
  254.             transform: rotateY(-108deg);
  255.         }
  256.  
  257.         .card .form-content {
  258.             position: relative;
  259.             width: 100%;
  260.             height: 100%;
  261.             display: flex;
  262.             justify-content: center;
  263.             align-items: center;
  264.             flex-wrap: wrap;
  265.             border-radius: 30px;
  266.             background: #fafaea;
  267.         }
  268.  
  269.         .card .form-content h1 {
  270.             box-sizing: content-box;
  271.             cursor: pointer;
  272.             border: none;
  273.             font: normal 3em/normal "Passero One", Helvetica, sans-serif;
  274.             color: rgb(255, 240, 149);
  275.             transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  276.             text-align: center;
  277.             text-overflow: clip;
  278.             margin-bottom: -30px;
  279.             text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1)}
  280.  
  281.         .card .form {
  282.             display: flex;
  283.             justify-content: center;
  284.             align-items: center;
  285.             flex-direction: column;
  286.         }
  287.  
  288.         .card .form input {
  289.             width: 16rem;
  290.             padding: 0.8rem 0.8rem 0.8rem 3rem;
  291.             outline: none;
  292.             border: none;
  293.             border-radius: 15px;
  294.             box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  295.             margin: 5px;
  296.         }
  297.  
  298.         .card .form div {
  299.             position: relative;
  300.         }
  301.  
  302.         .card .form div .fa {
  303.             position: absolute;
  304.             top: 12px;
  305.             left: 20px;
  306.         }
  307.  
  308.         .card .form .btn {
  309.             display: flex;
  310.             justify-content: center;
  311.             align-items: center;
  312.             width: 100%;
  313.             margin-top: 10px;
  314.         }
  315.  
  316.         .card .form .btn button {
  317.             text-transform: uppercase;
  318.             padding: 8px;
  319.             border: none;
  320.             outline: none;
  321.             background-color: rgb(255, 240, 149);
  322.             color: #fff;
  323.             width: 12rem;
  324.             border-radius: 30px;
  325.             cursor: pointer;
  326.         }
  327.  
  328.         .card .btn-something {
  329.             color: #888;
  330.             font-size: 14px;
  331.         }
  332.  
  333.         .card .btn-something span {
  334.             color: rgb(255, 240, 149);
  335.             cursor: pointer;
  336.             font-weight: 900;
  337.         }
  338.  
  339.         svg {
  340.             position: absolute;
  341.             bottom: 0;
  342.             z-index: -1;
  343.         }
  344.     </style>
  345.     <script>
  346.         let login = document.querySelector(".login");
  347.         let signup = document.querySelector(".signup");
  348.  
  349.         let loginbtn = document.querySelector(".loginbtn");
  350.         let siginupbtn = document.querySelector(".signupbtn");
  351.  
  352.         let user = document.querySelector(".head");
  353.  
  354.         siginupbtn.addEventListener("click", () => {
  355.             login.style.transform = "rotateY(180deg)"
  356.             signup.style.transform = "rotateY(0deg)";
  357.  
  358.             user.innerHTML = "create account"
  359.         })
  360.  
  361.         loginbtn.addEventListener("click", () => {
  362.             login.style.transform = "rotateY(0deg)"
  363.             signup.style.transform = "rotateY(-180deg)";
  364.  
  365.             user.innerHTML = "account login"
  366.         })
  367.     </script>
  368.     <!--number-->
  369.     <div id="root1" class="number"></div>
  370.     <div id="number-name1">Number of items</div>
  371.     <div id="root2" class="number"></div>
  372.     <div id="number-name2">Number of users</div>
  373.     <style>
  374.         #root1{
  375.             position: absolute;
  376.             font-size: 50px;
  377.             font-weight: 600;
  378.             color: #fad623;
  379.             -webkit-border-radius: 50px;
  380.             width: 200px;
  381.             height: 100px;
  382.             display: -webkit-flex;
  383.             align-items: center;
  384.             justify-content:center;
  385.             margin-top: 5%;
  386.         }
  387.         #root2{
  388.             position: absolute;
  389.             font-size: 50px;
  390.             font-weight: 600;
  391.             color: #fad623;
  392.             -webkit-border-radius: 50px;
  393.             width: 200px;
  394.             height: 100px;
  395.             display: -webkit-flex;
  396.             align-items: center;
  397.             justify-content:center;
  398.             margin-top: 5%;
  399.             right: 0;
  400.         }
  401.         #number-name1{
  402.             color: darkgray;
  403.             font-size: 20px;
  404.             font-weight: 600;
  405.             position: absolute;
  406.             top: 42%;
  407.             width: 200px;
  408.             height: 80px;
  409.             display: -webkit-flex;
  410.             align-items: center;
  411.             justify-content:center;
  412.         }
  413.         #number-name2{
  414.             color: darkgray;
  415.             font-size: 20px;
  416.             font-weight: 600;
  417.             position: absolute;
  418.             top: 42%;
  419.             right: 0;
  420.             width: 200px;
  421.             height: 80px;
  422.             display: -webkit-flex;
  423.             align-items: center;
  424.             justify-content:center;
  425.         }
  426.     </style>
  427.     <script type="text/javascript">
  428.         function roll(total, idname, step) {
  429.             let n = 0;
  430.             return function () {
  431.                 n = (n + step) >= total ? total : (n + step);
  432.                 if (n <= total) {
  433.                     document.getElementById(idname).innerHTML = n;
  434.                 }
  435.             }
  436.         }
  437.         function start(index, idname, step, runtime = 1000){
  438.             let rolling = roll(index, idname, step)
  439.             runtime = (runtime >= 300) ? runtime : 1000;
  440.             for (let i = 0; i < (index/step); i++) {
  441.                 let timer = setTimeout(rolling, (runtime/index)*i*step)
  442.             }
  443.             clearTimeout(timer);
  444.         }
  445.         start(1200,'root1', 4,)
  446.     </script>
  447.     <script type="text/javascript">
  448.         function roll(total, idname, step) {
  449.             let n = 0;
  450.             return function () {
  451.                 n = (n + step) >= total ? total : (n + step);
  452.                 if (n <= total) {
  453.                     document.getElementById(idname).innerHTML = n;
  454.                 }
  455.             }
  456.         }
  457.         function start(index, idname, step, runtime = 1000){
  458.             let rolling = roll(index, idname, step)
  459.             runtime = (runtime >= 300) ? runtime : 1000;
  460.             for (let i = 0; i < (index/step); i++) {
  461.                 let timer = setTimeout(rolling, (runtime/index)*i*step)
  462.             }
  463.             clearTimeout(timer);
  464.         }
  465.         start(5500,'root2', 4,)
  466.     </script>
  467. </body>
  468. </html>

6.加入静态文件

在template文件夹同级添加static文件夹，static内添加img文件夹，用于放所有的相关图片

7.需要修改djangoProject中的settings.py文件 需要import os

  1. STATIC_URL = "/static/"
  2. STATICFILES_DIRS=[
  3.     os.path.join(BASE_DIR, 'static')
  4. ]

8.刷新页面，效果如图

9.表单相关代码

参考链接：(1条消息) Django实现注册登录功能_django登录注册功能_秋秋xxx的博客-CSDN博客

  1. # views.py
  2. from django.shortcuts import render, HttpResponse, redirect
  3. from django.views.generic import View
  4. from .models import User
  5.  
  6. # Create your views here.
  7. class signup(View):
  8.     def get(self, request):
  9.         return render(request, 'signup.html')
  10.     def post(self, request):
  11.         username = request.POST.get("username")
  12.         password = request.POST.get("password")
  13.  
  14.         users = User.objects.all()
  15.         for i in users:
  16.             if username == i.username:
  17.                 return HttpResponse("用户已存在")
  18.         try:
  19.             User.objects.create(username=username, password=password)
  20.         except Exception as e:
  21.             print(e)
  22.             return HttpResponse("注册失败")
  23.         return redirect("/signup")
  1. # models.py
  2.  
  3. from django.db import models
  4.  
  5.  
  6. # Create your models here.
  7. class User(models.Model):
  8.     account = models.CharField(max_length=128, unique=True)  # 必填，最长不超过128个字符，并且唯一，不能有相同账号；
  9.     username = models.CharField(max_length=128, unique=True)  # 必填，最长不超过128个字符，并且唯一，不能有相同姓名；
  10.     password = models.CharField(max_length=256)  # 必填，最长不超过256个字符；
  11.     create_time = models.DateTimeField(auto_now_add=True)
  12.  
  13.     # 使用__str__帮助人性化显示对象信息；
  14.     def __str__(self):
  15.         return self.username
  16.  
  17.     class Meta:
  18.         ordering = ['create_time']  # 定义用户按创建时间的反序排列，也就是最近的最先显示；
  19.         verbose_name = '用户'
  20.         verbose_name_plural = '用户'

10.注册或登录成功与否的通知

参考链接：(1条消息) 【Django】弹窗页面实现（view端逻辑判断）_django 弹窗_微雨停了的博客-CSDN博客

  1. # views.py
  2. from django.http import HttpResponseRedirect
  3. from django.shortcuts import render, HttpResponse, redirect
  4. from django.views.generic import View
  5. from .models import User
  6. from django.contrib import messages
  7.  
  8.  
  9. # Create your views here.
  10. class signup(View):
  11.     def get(self, request):
  12.         return render(request, 'signup.html')
  13.  
  14.     def post(self, request):
  15.         saccount = request.POST.get("saccount")
  16.         susername = request.POST.get("susername")
  17.         spassword = request.POST.get("spassword")
  18.  
  19.         laccount = request.POST.get("laccount")
  20.         lpassword = request.POST.get("lpassword")
  21.  
  22.         users = User.objects.all()
  23.         for i in users:
  24.             if saccount == i.account:
  25.                 messages.error(request, '该账号已注册！')
  26.                 return HttpResponseRedirect('/signup')
  27.             if saccount == '' or susername == '' or spassword == '' or saccount == ' ' or susername == ' ' or spassword == ' ':
  28.                 messages.error(request, '账号或用户名或密码不能为空！')
  29.                 return HttpResponseRedirect('/signup')
  30.             if laccount == i.account and lpassword == i.password:
  31.                 messages.success(request, '登录成功！')
  32.                 return redirect("/index")
  33.             else:
  34.                 messages.error(request, '登陆失败！')
  35.                 return redirect("/signup")
  36.         try:
  37.             User.objects.create(account=saccount, username=susername, password=spassword)
  38.         except Exception as e:
  39.             print(e)
  40.             return HttpResponse("注册失败")
  41.         return redirect("/index")
  42.  
  43.  
  44. class index(View):
  45.     def get(self, request):
  46.         return render(request, 'index.html')
  1.     {% if messages %}
  2.         <script>
  3.             {% for msg in messages %}
  4.                 alert('{{ msg.message }}');
  5.             {% endfor %}
  6.         </script>
  7.     {% endif %}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/624559
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号