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>
然后效果就是酱紫。
看起来比刚才好多了。
好了今天先到这里,改天继续怼。