继续我的登录模块开发一

1，在django中的模块中，创建用户

class UserInfo(models.Model):
    name = models.CharField(max_length=20)
    email = models.CharField(max_length=50)
    power = models.IntegerField()
    phone = models.CharField(max_length=20)
    country = models.CharField(max_length=10)
    city = models.CharField(max_length=20)
    photo = models.CharField(max_length=40)
    pwd = models.CharField(max_length=80)

去看了一下别人网站，注册都老简单了，手机号码，验证码。详细的用户信息都是进了网站后，你爱填不填的。。。很有道理，注册要填的越多，大家更容易放弃。。所以打算我的注册页面，也就酱紫这么简单吧。

昨天执行过migrate了，今天直接执行到app

python manage.py makemigrations myloveweb

出乎意料，报错了。
RuntimeError: cryptography is required for sha256_password or caching_sha2_password

去网上查了，两种解决方案，
方案一：加个插件
https://www.cnblogs.com/Hannibal-2018/p/11081143.html

方案二：把mysql里的密码改成了明文。。。。。
https://blog.csdn.net/csl_compy/article/details/90728420

感觉方案一靠谱很多，所以安装了这个插件。

pip install cryptography

python3加密解密模块 cryptography
感觉之后我的登录那块，密码可以用一下，到时候再继续研究。继续执行

python manage.py makemigrations myloveweb

好了！回归正题，我的数据表终于好了。

Migrations for 'myloveweb':
  myloveweb\migrations\0001_initial.py
    - Create model UserInfo

再执行

python manage.py migrate myloveweb

2，界面上添加手机注册界面——解决了格式的问题
利用昨天学的弹窗登录方案，加了一个手机登录的界面。借鉴别人网站的样式，比如360doc图书馆


所以先做个手机登录的注册页面
但是做的时候发现格式怎么都不太对，去研究了一遍bootstrap的栅栏系统，结果发现，要用下面的格式样子。

<form class="form-horizontal" role="form">
        <div class="form-group">
            <div class="col-sm-5">
            <div class="dropdown">
                <button class="col-sm-12 btn btn-default dropdown-toggle" type="button" id="countrydrop" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                    中国大陆
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="countrydrop">
                    <li><a href="#">中国大陆  +86</a></li>
                    <li><a href="#">中国香港  +852</a></li>
                    <li><a href="#">中国澳门  +853</a></li>
                </ul>
            </div>
            </div>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="account" placeholder="请输入手机号码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-7">
                <input type="password" class="form-control " id="password" placeholder="请输入验证码" disabled=True>
            </div>
            <div class="col-sm-5">
                <button  class="col-sm-12 btn btn-default">发送验证码</button>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4">
            <button  class="col-sm-12 btn btn-primary btn-sm">登录</button>
            </div>
    <div class="col-sm-8">
            <a href="#" class="col-sm-12 control-label">账号登录</a>
        </div>
        </div>
    </form>

a，一开始考虑增加row，但是去看了bootstrap的文档，原来有form-group的时候，就已经分好组，不再需要增加row了。

b，一行的总数不能超过12，否则会另起一行。并且，区分不同的屏幕的大小，会使用不同的栅栏，比如我这边就用了col-sm-4，用了sm小屏幕的，貌似可以都设置上去，不同屏幕就会用不同的栅栏，类似酱紫。

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

c，设置栅栏的时候，最好从外到内都严格按照栅栏的格式来进行设置。比如我例子中那个button，除了外边的设置了col-sm-5之外，里面button那里也加上了col-sm-12的设置，限制了大小。我估计应该是button那边如果只是用外边的div，限制不了他！所以里面也要加上。。。。还是看chrome调试的时候，发现有这种特性的。

        <div class="form-group">
            <div class="col-sm-7">
                <input type="password" class="form-control " id="password" placeholder="请输入验证码" disabled=True>
            </div>
            <div class="col-sm-5">
                <button  class="col-sm-12 btn btn-default">发送验证码</button>
            </div>
        </div>

然后效果就是酱紫。

看起来比刚才好多了。
好了今天先到这里，改天继续怼。