首页
<template>
<div id="home">
<Header/>
<Banner/>
<Footer/>
</div>
</template>
<script>
import Header from "./common/Header"
import Banner from "./common/Banner"
import Footer from "./common/Footer"
export default {
name:"Home",
data(){
return {
}
},
components:{
Header,
Banner,
Footer,
}
}
</script>
<style scoped>
</style>
<template>
<div class="header">
<el-container>
<el-header>
<el-row>
<el-col class="logo" :span="3">
<a href="/">
<img src="@/assets/head-logo.svg" alt="">
</a>
</el-col>
<el-col class="nav" :span="16">
<el-row>
<el-col :span="3"><router-link class="current" to="/course">免费课</router-link></el-col>
<el-col :span="3"><router-link to="/">轻课</router-link></el-col>
<el-col :span="3"><router-link to="/">学位课</router-link></el-col>
<el-col :span="3"><router-link to="/">题库</router-link></el-col>
<el-col :span="3"><router-link to="/">教育</router-link></el-col>
</el-row>
</el-col>
<el-col class="login-bar" :span="5">
<el-row v-if="token">
<el-col class="cart-ico" :span="9">
<router-link to="">
<b class="goods-number">0</b>
<img class="cart-icon" src="@/assets/cart.svg" alt="">
<span><router-link to="/cart">购物车</router-link></span>
</router-link>
</el-col>
<el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col>
<el-col class="member" :span="5">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="2">
<template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>
<el-menu-item index="2-1">我的账户</el-menu-item>
<el-menu-item index="2-2">我的订单</el-menu-item>
<el-menu-item index="2-3">我的优惠卷</el-menu-item>
<el-menu-item index="2-3">退出登录</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
<el-row v-else>
<el-col class="cart-ico" :span="9">
<router-link to="">
<img class="cart-icon" src="@/assets/cart.svg" alt="">
<span><router-link to="/cart">购物车</router-link></span>
</router-link>
</el-col>
<el-col :span="10" :offset="5">
<span class="register">
<router-link to="/login">登录</router-link>
|
<router-link to="/register">注册</router-link>
</span>
</el-col>
</el-row>
</el-col>
</el-row>
</el-header>
</el-container>
</div>
</template>
<script>
export default {
name: "Header",
data(){
return {
// 设置一个登录标识，表示是否登录
token: false,
};
}
}
</script>
<style scoped>
.header{
top:0;
left:0;
right:0;
margin: auto;
background-color: #fff;
height: 80px;
z-index: 1000;
position: fixed;
box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
}
.header .el-container{
width: 1200px;
margin: 0 auto;
}
.el-header{
height: 80px!important;
padding:0;
}
.logo{
}
.logo img{
padding-top: 22px;
}
.nav{
margin-top: 22px;
}
.nav .el-col a{
display: inline-block;
text-align: center;
padding-bottom: 16px;
padding-left: 5px;
padding-right: 5px;
position: relative;
font-size: 16px;
margin-left: 20px;
}
.nav .el-col .current{
color: #4a4a4a;
border-bottom: 4px solid #ffc210;
}
.login-bar{
margin-top: 22px;
}
.cart-ico{
position: relative;
border-radius: 17px;
}
.cart-ico:hover{
background: #f0f0f0;
}
.goods-number{
width: 16px;
height: 16px;
line-height: 17px;
font-size: 12px;
color: #fff;
text-align: center;
background: #fa6240;
border-radius: 50%;
transform: scale(.8);
position: absolute;
left: 16px;
top: -1px;
}
.cart-icon{
width: 15px;
height: auto;
margin-left: 6px;
}
.cart-ico span{
margin-left: 12px;
}
.member img{
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-block;
}
.member img:hover{
border: 1px solid yellow;
}
</style>
脚部子组件（模板）
Footer.vue
<template>
<div class="footer">
<el-container>
<el-row>
<el-col :span="4"><router-link to="">关于我们</router-link></el-col>
<el-col :span="4"><router-link to="">联系我们</router-link></el-col>
<el-col :span="4"><router-link to="">商务合作</router-link></el-col>
<el-col :span="4"><router-link to="">帮助中心</router-link></el-col>
<el-col :span="4"><router-link to="">意见反馈</router-link></el-col>
<el-col :span="4"><router-link to="">新手指南</router-link></el-col>
<el-col :span="24"><p class="copyright">Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p></el-col>
</el-row>
</el-container>
</div>
</template>
<script>
export default {
name:"Footer",
data(){
return {}
}
}
</script>
<style scoped>
.footer{
width: 100%;
height: 128px;
background: #25292e;
}
.footer .el-container{
width: 1200px;
margin: auto;
}
.footer .el-row {
align-items: center;
padding: 0 200px;
padding-bottom: 15px;
width: 100%;
margin-top: 38px;
}
.footer .el-row a{
color: #fff;
font-size: 14px;
}
.footer .el-row .copyright{
text-align: center;
color: #fff;
font-size: 14px;
}
</style>
<template>
<div class="banner">
<el-carousel trigger="click" height="473px">
<el-carousel-item v-for="banner in banner_list">
<a :href="banner.link"><img width="100%" :src="banner.img" alt=""></a>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name:"Banner",
data(){
return {
banner_list:[
{link:"http://www.baidu.com",img:"/static/banner/1.png"},
{link:"http://www.baidu.com",img:"/static/banner/2.png"},
{link:"http://www.baidu.com",img:"/static/banner/3.png"},
]
};
}
}
</script>
<style>
.el-carousel__arrow{
width: 100px!important;
height: 100px!important;
}
.el-icon-arrow-left{
font-size: 35px;
margin-left: 50px;
}
.el-carousel__arrow--left{
left: -50px;
}
</style>
import Vue from "vue" import Router from "vue-router" // 导入需要注册路由的组件 import Home from "../components/Home" Vue.use(Router); // 配置路由列表 export default new Router({ mode:"history", routes:[ // 路由列表 { name:"Home", path: "/home", component:Home, }, { name:"Home", path: "/", component:Home, } ] })
安装依赖模块和配置
图片处理模块
前面已经安装了，如果没有安装则需要安装
pip install pillow
上传文件相关配置
因为之前修改了后端的排版格式，所以现在的settings都在dev.py 文件中设置
# 设置django的静态文件目录 STATICFILES_DIRS = [ os.path.join(BASE_DIR,"luffy/statics") ] # 项目中存储上传文件的根目录[暂时配置]，注意，static目录需要手动创建否则上传文件时报错 MEDIA_ROOT=os.path.join(BASE_DIR,"luffy/statics") # 访问上传文件的url地址前缀 MEDIA_URL ="/media/"
输出上传文件的Url地址
总路由urls.py新增代码：
from django.urls import re_path from django.conf import settings from django.views.static import serve urlpatterns = [ ... re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}), ]
创建轮播图的模型
## cd luffy/apps python ../../manage.py startapp home
# Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # 新增一个系统导包路径 import sys sys.path.insert(0,os.path.join(BASE_DIR,"apps")) INSTALLED_APPS = [ # 注意，加上drf框架的注册 'rest_framework', # 子应用 'home', ]
在home/models.py创建模型
from django.db import models # Create your models here. class BannerInfo(models.Model): """ 轮播图 """ # upload_to 存储子目录，真实存放地址会使用配置中的MADIE_ROOT+upload_to image = models.ImageField(upload_to='banner', verbose_name='轮播图', null=True,blank=True) name = models.CharField(max_length=150, verbose_name='轮播图名称') note = models.CharField(max_length=150, verbose_name='备注信息') link = models.CharField(max_length=150, verbose_name='轮播图广告地址') orders = models.IntegerField(verbose_name='显示顺序') is_show=models.BooleanField(verbose_name="是否上架",default=False) is_delete=models.BooleanField(verbose_name="逻辑删除",default=False) class Meta: db_table = 'ly_banner' verbose_name = '轮播图' verbose_name_plural = verbose_name def __str__(self): return self.name
数据迁移
python manage.py makemigrations
python manage.py migrate
序列化器
from rest_framework.serializers import ModelSerializer from .models import BannerInfo class BannerInfoSerializer(ModelSerializer): """轮播图序列化器""" class Meta: model=BannerInfo fields = ("image","link")
视图代码
from django.db.models import Q from rest_framework.generics import ListAPIView from .models import BannerInfo from .serializers import BannerInfoSerializer class BannerInfoListAPIView(ListAPIView): """ 轮播图列表 """ queryset = BannerInfo.objects.filter( Q(is_show=True) & Q(is_delete=False) ).order_by("-orders") serializer_class = BannerInfoSerializer
路由代码
from django.urls import path,re_path from . import views urlpatterns = [ path(r"banner/",views.BannerInfoListAPIView.as_view()), ]
把home的路由urls.py注册到总路由
from django.urls import path,include urlpatterns = [ path('admin/', admin.site.urls), path('', include("home.urls")), ]
所以我们需要有一个后台提供数据.
安装xadmin
# 使用官方文档上面的安装方法，在ubantu上会安装失败，需要用下面的方法 pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
在配置文件中settings/dev.py 注册如下应用
INSTALLED_APPS = [ ... 'xadmin', 'crispy_forms', 'reversion', ... ] # 修改使用中文界面 LANGUAGE_CODE = 'zh-Hans' # 修改时区 TIME_ZONE = 'Asia/Shanghai'
xadmin有建立自己的数据库模型类，需要进行数据库迁移
python manage.py makemigrations
python manage.py migrate
在总路由中添加xadmin的路由信息
import xadmin xadmin.autodiscover() # version模块自动注册需要版本控制的 Model from xadmin.plugins import xversion xversion.register_models() urlpatterns = [ path(r'xadmin/', xadmin.site.urls), ]
如果之前没有创建超级用户，需要创建，如果有了，则可以直接使用之前的。
python manage.py createsuperuser
import xadmin from xadmin import views class BaseSetting(object): """xadmin的基本配置""" enable_themes = True # 开启主题切换功能 use_bootswatch = True xadmin.site.register(views.BaseAdminView, BaseSetting) class GlobalSettings(object): """xadmin的全局配置""" site_title = "路飞学城" # 设置站点标题 site_footer = "路飞学城有限公司" # 设置站点的页脚 menu_style = "accordion" # 设置菜单折叠 xadmin.site.register(views.CommAdminView, GlobalSettings)
注册模型到xadmin中
在当前子应用中adminx.py，添加如下代码
# 轮播图 from .models import BannerInfo class BannerInfoModelAdmin(object): list_display=["name","orders","is_show"] xadmin.site.register(BannerInfo, BannerInfoModelAdmin)
修改后端xadmin中子应用名称
class HomeConfig(AppConfig): name = 'home' verbose_name = '我的首页'
在home.py/ __init_.py 加上
default_app_config = "home.apps.HomeConfig"
客户端代码获取数据
<template> <div class="banner"> <el-carousel trigger="click" height="506px"> <el-carousel-item v-for="item in banner_list"> <a :href="item.link"><img :src="item.image"></a> </el-carousel-item> </el-carousel> </div> </template> <script> export default { name:"Banner", data(){ return { banner_list:[], }; }, created: function(){ // 获取轮播图 this.$axios.get(this.$settings.Host+"/banner/").then(response => { console.log(response.data) this.banner_list = response.data }).catch(error => { console.log(error.response); }); } } </script>
创建模型
引入一个公共模型【抽象模型，不会在数据迁移的时候为它创建表】
公共模型，保存项目的公共代码库目录下luffy/utils.py文件中。
from django.db import models class BaseModel(models.Model): """公共字段模型""" orders = models.IntegerField(verbose_name='显示顺序') is_show=models.BooleanField(verbose_name="是否上架",default=False) is_delete=models.BooleanField(verbose_name="逻辑删除",default=False) create_time = models.DateTimeField(auto_now_add=True,verbose_name="添加时间") update_time = models.DateTimeField(auto_now=True,verbose_name="更新时间") class Meta: # 设置当前模型在数据迁移的时候不要为它创建表 abstract = True
那么这是在model中有同样的字段的情况就不会产生重复的字段
from django.db import models from luffy.utils.models import BaseModel # Create your models here. class BannerInfo(BaseModel): """ 轮播图 """ # upload_to 存储子目录，真实存放地址会使用配置中的MADIE_ROOT+upload_to image = models.ImageField(upload_to='banner', verbose_name='轮播图', null=True,blank=True) name = models.CharField(max_length=150, verbose_name='轮播图名称') note = models.CharField(max_length=150, verbose_name='备注信息') link = models.CharField(max_length=150, verbose_name='轮播图广告地址') class Meta: db_table = 'ly_banner' verbose_name = '轮播图' verbose_name_plural = verbose_name def __str__(self): return self.name class NavInfo(BaseModel): """ 导航 """ NAV_POSITION = ( (0, 'top'), (1, 'footer') ) name = models.CharField(max_length=50, verbose_name='导航名称') link = models.CharField(max_length=250, verbose_name='导航地址') opt = models.SmallIntegerField(choices=NAV_POSITION, default=0, verbose_name='位置') class Meta: db_table = 'ly_nav' verbose_name = '导航' verbose_name_plural = verbose_name def __str__(self): return self.name
数据迁移
python manage.py makemigrations
python manage.py migrate
from rest_framework.serializers import ModelSerializer from .models import NavInfo class NavInfoSerializer(ModelSerializer): """导航序列化器""" class Meta: model=NavInfo fields = ("name","link")
视图代码 views.py
from .models import NavInfo from .serializers import NavInfoSerializer class NavInfoAPIView(ListAPIView): """ 导航列表 """ queryset = NavInfo.objects.filter( Q(is_show=True) & Q(is_delete=False) & Q(opt=0) ).order_by("-orders") serializer_class = NavInfoSerializer
路由代码
from django.urls import path,re_path from . import views urlpatterns = [ ... path(r"nav/",views.NavInfoAPIView.as_view()), ]
注册模型到xadmin中
在当前子应用adminx.py，添加如下代码
# 导航 from home.models import NavInfo class NavInfoInfoModelAdmin(object): list_display=["name","link","is_show"] xadmin.site.register(NavInfo, NavInfoInfoModelAdmin)
客户端代码获取数据
<template> <div class="header"> <el-container> <el-header> <el-row> <el-col class="logo" :span="3"> <a href="/"> <img src="@/assets/head-logo.svg" alt=""> </a> </el-col> <el-col class="nav" :span="16"> <el-row> <el-col v-for="nav in nav_list" :span="3"><a :class="check(nav.link)?'current':''" :href="nav.link">{{nav.name}}</a></el-col> </el-row> </el-col> <el-col class="login-bar" :span="5"> <el-row v-if="token"> <el-col class="cart-ico" :span="9"> <router-link to=""> <b class="goods-number">0</b> <img class="cart-icon" src="@/assets/cart.svg" alt=""> <span><router-link to="/cart">购物车</router-link></span> </router-link> </el-col> <el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col> <el-col class="member" :span="5"> <el-menu class="el-menu-demo" mode="horizontal"> <el-submenu index="2"> <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template> <el-menu-item index="2-1">我的账户</el-menu-item> <el-menu-item index="2-2">我的订单</el-menu-item> <el-menu-item index="2-3">我的优惠卷</el-menu-item> <el-menu-item index="2-3">退出登录</el-menu-item> </el-submenu> </el-menu> </el-col> </el-row> <el-row v-else> <el-col class="cart-ico" :span="9"> <router-link to=""> <img class="cart-icon" src="@/assets/cart.svg" alt=""> <span><router-link to="/cart">购物车</router-link></span> </router-link> </el-col> <el-col :span="10" :offset="5"> <span class="register"> <router-link to="/login">登录</router-link> | <router-link to="/register">注册</router-link> </span> </el-col> </el-row> </el-col> </el-row> </el-header> </el-container> </div> </template> <script> export default { name: "Header", data(){ return { // 设置一个登录标识，表示是否登录 token: false, nav_list:[], }; }, created() { // 获取导航 this.$axios.get(this.$settings.Host+"/nav/").then(response=>{ this.nav_list = response.data console.log(this.nav_list) }).catch(error=>{ console.log(error.response) }) }, methods:{ check(link){ return link==window.location.pathname } } } </script> <style scoped> .header{ top:0; left:0; right:0; margin: auto; background-color: #fff; height: 80px; z-index: 1000; position: fixed; box-shadow: 0 0.5px 0.5px 0 #c9c9c9; } .header .el-container{ width: 1200px; margin: 0 auto; } .el-header{ height: 80px!important; padding:0; } .logo{ } .logo img{ padding-top: 22px; } .nav{ margin-top: 22px; } .nav .el-col a{ display: inline-block; text-align: center; padding-bottom: 16px; padding-left: 5px; padding-right: 5px; position: relative; font-size: 16px; margin-left: 20px; } .nav .el-col .current{ color: #4a4a4a; border-bottom: 4px solid #ffc210; } .login-bar{ margin-top: 22px; } .cart-ico{ position: relative; border-radius: 17px; } .cart-ico:hover{ background: #f0f0f0; } .goods-number{ width: 16px; height: 16px; line-height: 17px; font-size: 12px; color: #fff; text-align: center; background: #fa6240; border-radius: 50%; transform: scale(.8); position: absolute; left: 16px; top: -1px; } .cart-icon{ width: 15px; height: auto; margin-left: 6px; } .cart-ico span{ margin-left: 12px; } .member img{ width: 26px; height: 26px; border-radius: 50%; display: inline-block; } .member img:hover{ border: 1px solid yellow; } </style>
<template>
<div class="login box">
<img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="">
<div class="login">
<div class="login-title">
<img src="https://www.luffycity.com/static/img/Logotitle.1ba5466.png" alt="">
<p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
</div>
<div class="login_box">
<div class="title">
<span @click="login_type=0">密码登录</span>
<span @click="login_type=1">短信登录</span>
</div>
<div class="inp" v-if="login_type==0">
<input v-model = "username" type="text" placeholder="用户名 / 手机号码" class="user">
<input v-model = "password" type="password" name="" class="pwd" placeholder="密码">
<div id="geetest1"></div>
<div class="rember">
<p>
<input type="checkbox" class="no" name="a"/>
<span>记住密码</span>
</p>
<p>忘记密码</p>
</div>
<button class="login_btn">登录</button>
<p class="go_login" >没有账号 <span>立即注册</span></p>
</div>
<div class="inp" v-show="login_type==1">
<input v-model = "username" type="text" placeholder="手机号码" class="user">
<input v-model = "password" type="text" class="pwd" placeholder="短信验证码">
<button id="get_code">获取验证码</button>
<button class="login_btn">登录</button>
<p class="go_login" >没有账号 <span>立即注册</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data(){
return {
login_type: 0,
username:"",
password:"",
}
},
methods:{
},
};
</script>
<style scoped>
.box{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.box img{
width: 100%;
min-height: 100%;
}
.box .login {
position: absolute;
width: 500px;
height: 400px;
top: 0;
left: 0;
margin: auto;
right: 0;
bottom: 0;
top: -338px;
}
.login .login-title{
width: 100%;
text-align: center;
}
.login-title img{
width: 190px;
height: auto;
}
.login-title p{
font-family: PingFangSC-Regular;
font-size: 18px;
color: #fff;
letter-spacing: .29px;
padding-top: 10px;
padding-bottom: 50px;
}
.login_box{
width: 400px;
height: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
border-radius: 4px;
margin: 0 auto;
padding-bottom: 40px;
}
.login_box .title{
font-size: 20px;
color: #9b9b9b;
letter-spacing: .32px;
border-bottom: 1px solid #e6e6e6;
display: flex;
justify-content: space-around;
padding: 50px 60px 0 60px;
margin-bottom: 20px;
cursor: pointer;
}
.login_box .title span:nth-of-type(1){
color: #4a4a4a;
border-bottom: 2px solid #84cc39;
}
.inp{
width: 350px;
margin: 0 auto;
}
.inp input{
border: 0;
outline: 0;
width: 100%;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp input.user{
margin-bottom: 16px;
}
.inp .rember{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-top: 10px;
}
.inp .rember p:first-of-type{
font-size: 12px;
color: #4a4a4a;
letter-spacing: .19px;
margin-left: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
/*position: relative;*/
}
.inp .rember p:nth-of-type(2){
font-size: 14px;
color: #9b9b9b;
letter-spacing: .19px;
cursor: pointer;
}
.inp .rember input{
outline: 0;
width: 30px;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp .rember p span{
display: inline-block;
font-size: 12px;
width: 100px;
/*position: absolute;*/
/*left: 20px;*/
}
#geetest{
margin-top: 20px;
}
.login_btn{
width: 100%;
height: 45px;
background: #84cc39;
border-radius: 5px;
font-size: 16px;
color: #fff;
letter-spacing: .26px;
margin-top: 30px;
}
.inp .go_login{
text-align: center;
font-size: 14px;
color: #9b9b9b;
letter-spacing: .26px;
padding-top: 20px;
}
.inp .go_login span{
color: #84cc39;
cursor: pointer;
}
</style>
绑定登陆页面路由地址
import Vue from "vue" import Router from "vue-router" // 导入需要注册路由的组件 import Home from "../components/Home" import Login from "../components/Login" Vue.use(Router); // 配置路由列表 export default new Router({ mode:"history", routes:[ // 路由列表 ... { name:"Login", path: "/login", component:Login, } ] })
调整首页头部子组件中登陆按钮的链接信息
Header.vue
<router-link to="/login">登录</router-link>
Django默认已经提供了认证系统。认证系统包含：
-
用户管理
-
权限
-
用户组
-
密码哈希系统
-
用户登录或内容显示的表单和视图
-
一个可插拔的后台系统
Django默认用户的认证机制依赖Session机制，我们在项目中将引入JWT认证机制，将用户的身份凭据存放在Token中，然后对接Django的认证系统，帮助我们来实现：
-
用户的数据模型
-
用户密码的加密与验证
-
用户的权限系统
Django用户模型类
Django认证系统中提供了用户模型类User保存用户的数据，默认的User包含以下常见的基本字段：
| 字段描述 | |
|---|---|
username | 必选。150个字符以内。 用户名可能包含字母数字，_，@，+ . 和-个字符。 |
first_name | 可选（blank=True）。 少于等于30个字符。 |
last_name | 可选（blank=True）。 少于等于30个字符。 |
email | 可选（blank=True）。 邮箱地址。 |
password | 必选。 密码的哈希加密串。 （Django 不保存原始密码）。 原始密码可以无限长而且可以包含任意字符。 |
groups | 与Group 之间的多对多关系。 |
user_permissions | 与Permission 之间的多对多关系。 |
is_staff | 布尔值。 设置用户是否可以访问Admin 站点。 |
is_active | 布尔值。 指示用户的账号是否激活。 它不是用来控制用户是否能够登录，而是描述一种帐号的使用状态。 |
is_superuser | 是否是超级用户。超级用户具有所有权限。 |
last_login | 用户最后一次登录的时间。 |
date_joined | 账户创建的时间。 当账号创建时，默认设置为当前的date/time。 |
常用方法：
-
set_password(raw_password)设置用户的密码为给定的原始字符串，并负责密码的。 不会保存
User对象。当None为raw_password时，密码将设置为一个不可用的密码。 -
check_password(raw_password)如果给定的raw_password是用户的真实密码，则返回True，可以在校验用户密码时使用。
管理器方法：
管理器方法即可以通过User.objects. 进行调用的方法。
-
create_user(username, email=None, password=None, **extra_fields)创建、保存并返回一个
User对象。 -
create_superuser(username, email, password, **extra_fields)与
create_user()相同，但是设置is_staff和is_superuser为True。
python ../../manage.py startapp users
在settings.py文件中注册子应用。
INSTALLED_APPS = [ ... 'users', ]
Django认证系统中提供的用户模型类及方法很方便，我们可以使用这个模型类，但是字段有些无法满足项目需求，如本项目中需要保存用户的手机号，需要给模型类添加额外的字段。
Django提供了django.contrib.auth.models.AbstractUser用户抽象模型类允许我们继承，扩展字段来使用Django认证系统的用户模型类。
我们可以在apps中创建Django应用users，并在配置文件中注册users应用。
在创建好的应用users.py/models.py中定义用户的用户模型类。
class User(AbstractUser): """用户模型类""" mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号') class Meta: db_table = 'ly_users' verbose_name = '用户' verbose_name_plural = verbose_name
我们自定义的用户模型类还不能直接被Django的认证系统所识别，需要在配置文件中告知Django认证系统使用我们自定义的模型类。
AUTH_USER_MODEL = 'users.User'
注意：Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好，否则后续使用可能出现未知错误。
python manage.py makemigrations
python manage.py migrate
当迁移出现问题，报错了，可以从django的解析器下找到site-package目录下的django里面的contrib里面的admin和auth，
以及site-package下面的reversion以及xadmin里面的migrations目录 （注意，防止手动操作误删数据，建议先备份。）
Django REST framework JWT
在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用Json Web Token认证机制。
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。
header
jwt的头部承载两部分信息：
-
声明类型，这里是jwt
-
完整的头部就像下面这样的JSON：
{
'typ': 'JWT',
'alg': 'HS256'
}
然后将头部进行base64加密（该加密是可以对称解密的),构成了第一部分.
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
payload
-
标准中注册的声明
-
公共的声明
-
私有的声明
标准中注册的声明 (建议但不强制使用) ：
-
iss: jwt签发者
-
sub: jwt所面向的用户
-
aud: 接收jwt的一方
-
exp: jwt的过期时间，这个过期时间必须要大于签发时间
-
nbf: 定义在什么时间之前，该jwt都是不可用的.
-
iat: jwt的签发时间
-
jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。
公共的声明 ： 公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.
私有的声明 ： 私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息。
定义一个payload:
{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}
然后将其进行base64加密，得到JWT的第二部分。
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9
signature
JWT的第三部分是一个签证信息，这个签证信息由三部分组成：
-
header (base64后的)
-
payload (base64后的)
-
secret
这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。
secret就是用来进行jwt的签发和jwt的验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。
关于签发和核验JWT，我们可以使用Django REST framework JWT扩展来完成。
文档网站http://getblimp.github.io/django-rest-framework-jwt/
安装配置JWT
安装
pip install djangorestframework-jwt
配置
REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', 'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', ), } import datetime JWT_AUTH = { 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), }
生成jwt
from django_redis import get_redis_connection from rest_framework import serializers from .models import User import re class UserModelSerializer(serializers.ModelSerializer): sms_code = serializers.CharField(write_only=True, max_length=6, min_length=6, required=True, help_text="短信验证码") password2 = serializers.CharField(write_only=True, help_text="确认密码") token = serializers.CharField(read_only=True, help_text="jwt token值") class Meta: model = User # fields = ["mobile","sms_code","id","token"] fields = ["mobile", "id", "token", "password", "password2", "username", "sms_code"] extra_kwargs = { "id": {"read_only": True}, "username": {"read_only": True}, "password": {"write_only": True}, "mobile": {"write_only": True} } def validate_mobile(self, mobile): # 验证格式 result = re.match('^1[3-9]\d{9}$', mobile) if not result: raise serializers.ValidationError("手机号码格式有误!") # 验证唯一性 try: user = User.objects.get(mobile=mobile) if user: raise serializers.ValidationError("当前手机号码已经被注册!") except User.DoesNotExist: pass return mobile def validate(self, attrs): # 判断密码长度 password = attrs.get("password") if not re.match('^.{6,16}$', password): raise serializers.ValidationError("密码长度必须在6-16位之间!") # 判断密码和确认密码是否一致 password2 = attrs.get("password2") if password != password2: raise serializers.ValidationError("密码和确认密码不一致!") # 验证短信验证码 mobile = attrs.get("mobile") redis = get_redis_connection("sms_code") try: real_sms_code = redis.get("%s_sms_code" % mobile).decode() except: raise serializers.ValidationError("验证码已存在，或已经过期") if real_sms_code != attrs.get("sms_code"): raise serializers.ValidationError("验证码不存在，或错误") # 删除本次使用的验证码 try: redis.delete("%s_sms_code" % mobile) except: pass return attrs def create(self, validated_data): """保存用户""" mobile = validated_data.get("mobile") password = validated_data.get("password") try: user = User.objects.create( mobile=mobile, username=mobile, password=password, ) # 密码加密 user.set_password(user.password) user.save() except: raise serializers.ValidationError("注册用户失败!") # 生成一个jwt from rest_framework_jwt.settings import api_settings jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER payload = jwt_payload_handler(user) user.token = jwt_encode_handler(payload) return user
在用户注册或登录成功后，在序列化器中返回用户信息以后同时返回token即可。
后端实现登陆认证接口
Django REST framework JWT提供了登录获取token的视图，可以直接使用
from rest_framework_jwt.views import obtain_jwt_token urlpatterns = [ path(r'authorizations/', obtain_jwt_token, name='authorizations'), ]
在主路由中，引入当前子应用的路由文件
urlpatterns = [ ... path('users/', include("users.urls")), # include 的值必须是 模块名.urls 格式,字符串中间只能出现一个圆点 ]
前端实现登陆功能
在登陆组件中找到登陆按钮，绑定点击事件
<button class="login_btn" @click="loginhander">登录</button>
在methods中请求后端
export default { name: 'Login', data(){ return { login_type: 0, remember:false, // 记住密码 username:"", password:"", } }, methods:{ // 登录 loginhander(){ this.$axios.post("http://127.0.0.1:8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{ console.log(response.data) }).catch(error=>{ console.log(error) }) } }, };
2.3.7 前端保存jwt
浏览器的本地存储提供了sessionStorage 和 localStorage 两种：
-
sessionStorage 浏览器关闭即失效
-
localStorage 长期有效
使用方法
sessionStorage.变量名 = 变量值 // 保存数据 sessionStorage.变量名 // 读取数据 sessionStorage.clear() // 清除所有sessionStorage保存的数据 localStorage.变量名 = 变量值 // 保存数据 localStorage.变量名 // 读取数据 localStorage.clear() // 清除所有localStorage保存的数据
登陆组件代码Login.vue
.... loginhander() { // 判断用户是否已经通过了极验验证 if (!this.is_geek) { return false; } this.$axios.post(this.$settings.Host + "/users/login/", { username: this.username, password: this.password, }).then(response => { let data = response.data; // 根据用户是否勾选了记住密码来保存用户认证信息 if (this.remember) { // 记住密码 localStorage.token = data.token; localStorage.user_id = data.id; localStorage.user_name = data.username; } else { // 不需要记住密码 sessionStorage.token = data.token; sessionStorage.user_id = data.id; sessionStorage.user_name = data.username; } // 登录成功以后,跳转会上一个页面 this.$router.push('/'); }).catch(error => { console.log(error.response) }) }, ....
默认的返回值仅有token，我们还需在返回值中增加username和id，方便在客户端页面中显示当前登陆用户
通过修改该视图的返回值可以完成我们的需求。
def jwt_response_payload_handler(token, user=None, request=None): """ 自定义jwt认证成功返回数据 """ return { 'token': token, 'id': user.id, 'username': user.username }
修改settings/dev.py配置文件
# JWT JWT_AUTH = { 'JWT_EXPIRATION_DELTA': datetime.timedelta(days=1), 'JWT_RESPONSE_PAYLOAD_HANDLER': 'users.utils.jwt_response_payload_handler', }
登陆组件代码Login.vue
// 使用浏览器本地存储保存token if (this.remember) { // 记住登录 sessionStorage.clear(); localStorage.token = response.data.token; localStorage.id = response.data.id; localStorage.username = response.data.username; } else { // 未记住登录 localStorage.clear(); sessionStorage.token = response.data.token; sessionStorage.id = response.data.id; sessionStorage.username = response.data.username; }
2.3.9 多条件登录
JWT扩展的登录视图，在收到用户名与密码时，也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确。
我们可以通过修改Django认证系统的认证后端（主要是authenticate方法）来支持登录账号既可以是用户名也可以是手机号。
修改Django认证系统的认证后端需要继承django.contrib.auth.backends.ModelBackend，并重写authenticate方法。
authenticate(self, request, username=None, password=None, **kwargs)方法的参数说明：
-
request 本次认证的请求对象
-
username 本次认证提供的用户账号
-
password 本次认证提供的密码
我们想要让用户既可以以用户名登录，也可以以手机号登录，那么对于authenticate方法而言，username参数即表示用户名或者手机号。
重写authenticate方法的思路：
-
根据username参数查找用户User对象，username参数可能是用户名，也可能是手机号
-
若查找到User对象，调用User对象的check_password方法检查密码是否正确
在users/utils.py中编写：
def get_user_by_account(account): """ 根据帐号获取user对象 :param account: 账号，可以是用户名，也可以是手机号 :return: User对象 或者 None """ try: if re.match('^1[3-9]\d{9}$', account): # 帐号为手机号 user = User.objects.get(mobile=account) else: # 帐号为用户名 user = User.objects.get(username=account) except User.DoesNotExist: return None else: return user import re from .models import User from django.contrib.auth.backends import ModelBackend class UsernameMobileAuthBackend(ModelBackend): """ 自定义用户名或手机号认证 """ def authenticate(self, request, username=None, password=None, **kwargs): user = get_user_by_account(username) if user is not None and user.check_password(password): return user
在配置文件dev.py中告知Django使用我们自定义的认证后端
AUTHENTICATION_BACKENDS = [ 'users.utils.UsernameMobileAuthBackend', ]
<template> <div class="home"> <Header :is_login="is_login" @logout="logout" :current_page="current_page"/> <Banner/> <Footer/> </div> </template> <script> import Header from "./common/Header" import Banner from "./common/Banner" import Footer from "./common/Footer" export default{ name:"Home", data(){ return { id: sessionStorage.id || localStorage.id, username: sessionStorage.username || localStorage.username, token: sessionStorage.token || localStorage.token, current_page:0, is_login:false, }; }, components:{ Header, Banner, Footer, }, mounted(){ if(this.id && this.token){ this.is_login=true; } }, methods:{ logout(){ this.is_login=false; } } } </script>
Header子组件显示登陆状态
Header.vue
<script> export default { name:"Header", props:["current_page","is_login"], data(){ return { nav_list: [], } }, created: function(){ // 获取轮播图 this.$axios.get("http://api.luffycity.cn:8000/home/nav/").then(res => { this.nav_list = res.data }).catch(error => { console.log(error); }); }, methods:{ logout(){ localStorage.clear(); sessionStorage.clear(); this.$emit("logout",{"is_login":false}) } } } </script>
在登录认证中接入极验验证
官网： https://www.geetest.com/first_page/
接下来，就可以根据官方文档，把验证码集成到项目中了
文档地址：
下载和安装验证码模块包。
git clone https://github.com/GeeTeam/gt3-python-sdk.git
安装依赖模块
pip install requests
把验证码模块放置在utils中
并在users子应用下创建验证码视图类，并提供验证码和校验验证码的视图方法。
from luffy.utils.geetest import GeetestLib from rest_framework.views import APIView from rest_framework.response import Response # Create your views here. class VerifyCode(APIView): def get(self,request): user_id = 'test' pc_geetest_id = "a9feefab99c8d4bbcf0d9e3021048312" pc_geetest_key = "aa467ab83be3c44929bc7da76eb88028" gt = GeetestLib(pc_geetest_id, pc_geetest_key) status = gt.pre_process(user_id, JSON_FORMAT=0, ip_address="127.0.0.1") if not status: status = 2 request.session[gt.GT_STATUS_SESSION_KEY] = status request.session["user_id"] = user_id response_str = gt.get_response_str() print( response_str ) return Response(response_str) def post(self,request): pc_geetest_id = "a9feefab99c8d4bbcf0d9e3021048312" pc_geetest_key = "aa467ab83be3c44929bc7da76eb88028" gt = GeetestLib(pc_geetest_id, pc_geetest_key) challenge = request.data.get(gt.FN_CHALLENGE, "") validate = request.data.get(gt.FN_VALIDATE, "") seccode = request.data.get(gt.FN_SECCODE, "") status = request.session[gt.GT_STATUS_SESSION_KEY] user_id = request.session["user_id"] if status == 1: result = gt.success_validate(challenge, validate, seccode, user_id, JSON_FORMAT=0) else: result = gt.failback_validate(challenge, validate, seccode) request.session["user_id"] = user_id return Response({{"message":result}})
路由注册：
path(r'code/', views.VerifyCode.as_view()),
// 导入gt极验 import '../static/globals/gt.js'
Login.vue最终代码
<template>
<div class="login box">
<img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="">
<div class="login">
<div class="login-title">
<img src="https://www.luffycity.com/static/img/Logotitle.1ba5466.png" alt="">
<p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
</div>
<div class="login_box">
<div class="title">
<span @click="login_type=0">密码登录</span>
<span @click="login_type=1">短信登录</span>
</div>
<div class="inp" v-if="login_type==0">
<input v-model = "username" type="text" placeholder="用户名 / 手机号码" class="user">
<input v-model = "password" type="password" name="" class="pwd" placeholder="密码">
<div id="geetest"></div>
<div class="rember">
<p>
<input type="checkbox" class="no" name="a"/>
<span>记住密码</span>
</p>
<p>忘记密码</p>
</div>
<button class="login_btn" @click="loginhander">登录</button>
<p class="go_login" >没有账号 <span>立即注册</span></p>
</div>
<div class="inp" v-show="login_type==1">
<input v-model = "username" type="text" placeholder="手机号码" class="user">
<input v-model = "password" type="text" class="pwd" placeholder="短信验证码">
<button id="get_code">获取验证码</button>
<button class="login_btn">登录</button>
<p class="go_login" >没有账号 <span>立即注册</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data(){
return {
login_type: 0,
username:"",
password:"",
validateResult:false,
}
},
created(){
this.$axios.get("http://127.0.0.1:8000/users/code",{responseType: 'json',}).then(response=>{
let data = response.data;
console.log(data);
var _this = this;
//请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
initGeetest({
// 以下配置参数来自服务端 SDK
gt: data.gt,
challenge: data.challenge,
offline: !data.success,
new_captcha: true,
product: 'popup',
width:'100%'
}, (captchaObj)=>{
var result = captchaObj.getValidate();
// 这里可以调用验证实例 captchaObj 的实例方法
captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中captchaBox元素内
captchaObj.onReady(()=>{
//your code
}).onSuccess(()=>{
var result = captchaObj.getValidate();
this.validateResult = result;
}).onError(()=>{
_this.validateResult=false;
})
})
})
},
methods:{
// 登录
loginhander(){
// 提交数据前判断用户是否通过了验证码校验
if(!this.validateResult){
return false;
}
this.$axios.post("http://127.0.0.1:8000/users/authorizations/",{"username":this.username,"password":this.password}).then(response=>{
// 使用浏览器本地存储保存token
if (this.remember) {
// 记住登录
sessionStorage.clear();
localStorage.token = response.data.token;
localStorage.id = response.data.id;
localStorage.username = response.data.username;
} else {
// 未记住登录
localStorage.clear();
sessionStorage.token = response.data.token;
sessionStorage.id = response.data.id;
sessionStorage.username = response.data.username;
}
this.$router.push("/")
}).catch(error=>{
console.log(error)
})
}
},
};
</script>
View Code
注册页面Register,主要是通过登录页面进行改成而成.
<template>
<div class="box">
<img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="">
<div class="register">
<div class="register_box">
<div class="register-title">注册路飞学城</div>
<div class="inp">
<input v-model = "mobile" type="text" placeholder="手机号码" class="user">
<div id="geetest"></div>
<input v-model = "sms" type="text" placeholder="输入验证码" class="user">
<button class="register_btn" >注册</button>
<p class="go_login" >已有账号 <router-link to="/login">直接登录</router-link></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Register',
data(){
return {
sms:"",
mobile:"",
validateResult:false,
}
},
created(){
},
methods:{},
};
</script>
<style scoped>
.box{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.box img{
width: 100%;
min-height: 100%;
}
.box .register {
position: absolute;
width: 500px;
height: 400px;
top: 0;
left: 0;
margin: auto;
right: 0;
bottom: 0;
top: -338px;
}
.register .register-title{
width: 100%;
font-size: 24px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
color: #4a4a4a;
letter-spacing: .39px;
}
.register-title img{
width: 190px;
height: auto;
}
.register-title p{
font-family: PingFangSC-Regular;
font-size: 18px;
color: #fff;
letter-spacing: .29px;
padding-top: 10px;
padding-bottom: 50px;
}
.register_box{
width: 400px;
height: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
border-radius: 4px;
margin: 0 auto;
padding-bottom: 40px;
}
.register_box .title{
font-size: 20px;
color: #9b9b9b;
letter-spacing: .32px;
border-bottom: 1px solid #e6e6e6;
display: flex;
justify-content: space-around;
padding: 50px 60px 0 60px;
margin-bottom: 20px;
cursor: pointer;
}
.register_box .title span:nth-of-type(1){
color: #4a4a4a;
border-bottom: 2px solid #84cc39;
}
.inp{
width: 350px;
margin: 0 auto;
}
.inp input{
border: 0;
outline: 0;
width: 100%;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp input.user{
margin-bottom: 16px;
}
.inp .rember{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-top: 10px;
}
.inp .rember p:first-of-type{
font-size: 12px;
color: #4a4a4a;
letter-spacing: .19px;
margin-left: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
/*position: relative;*/
}
.inp .rember p:nth-of-type(2){
font-size: 14px;
color: #9b9b9b;
letter-spacing: .19px;
cursor: pointer;
}
.inp .rember input{
outline: 0;
width: 30px;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp .rember p span{
display: inline-block;
font-size: 12px;
width: 100px;
/*position: absolute;*/
/*left: 20px;*/
}
#geetest{
margin-top: 20px;
}
.register_btn{
width: 100%;
height: 45px;
background: #84cc39;
border-radius: 5px;
font-size: 16px;
color: #fff;
letter-spacing: .26px;
margin-top: 30px;
}
.inp .go_login{
text-align: center;
font-size: 14px;
color: #9b9b9b;
letter-spacing: .26px;
padding-top: 20px;
}
.inp .go_login span{
color: #84cc39;
cursor: pointer;
}
</style>
前端注册路由:
import Register from "../components/Register" // 配置路由列表 export default new Router({ mode:"history", routes:[ // 路由列表 ... { name:"Register", path: "/register", component:Register, } ] })
接下来，我们把注册过程中一些注册信息（例如：短信验证码）和session缓存到redis数据库中。
pip install django-redis
在dev.py配置中添加一下代码：
# 设置redis缓存 CACHES = { # 默认缓存 "default": { "BACKEND": "django_redis.cache.RedisCache", # 项目上线时,需要调整这里的路径 "LOCATION": "redis://127.0.0.1:6379/0", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, # 提供给xadmin或者admin的session存储 "session": { "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/1", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } }, # 提供存储短信验证码 "sms_code":{ "BACKEND": "django_redis.cache.RedisCache", "LOCATION": "redis://127.0.0.1:6379/2", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } } } # 设置xadmin用户登录时,登录信息session保存到redis SESSION_ENGINE = "django.contrib.sessions.backends.cache" SESSION_CACHE_ALIAS = "session"
django-redis提供了get_redis_connection的方法，通过调用get_redis_connection方法传递redis的配置名称可获取到redis的连接对象，通过redis连接对象可以执行redis命令
https://redis-py.readthedocs.io/en/latest/
在登录后的平台上面获取一下信息:
ACCOUNT SID：8aaf0708697b6beb01699f4442911776
AUTH TOKEN : b4dea244f43a4e0f90e557f0a99c70fa
AppID(默认)：8aaf0708697b6beb01699f4442e3177c
Rest URL(生产)： app.cloopen.com:8883 [项目上线时使用真实短信发送服务器]
Rest URL(开发)： sandboxapp.cloopen.com:8883 [项目开发时使用沙箱短信发送服务器]
在开发过程中,为了节约发送短信的成本,可以把自己的或者同事的手机加入到测试号码中.
from .yuntongxun.sms import CCP class SMSCodeAPIView(APIView): """ 短信验证码 """ def get(self, request, mobile): """ 短信验证码 """ # 生成短信验证码 sms_code = "%06d" % random.randint(0, 999999) # 保存短信验证码与发送记录 redis_conn = get_redis_connection('verify_codes') # 使用redis提供的管道操作可以一次性执行多条redis命令 pl = redis_conn.pipeline() pl.multi() pl.setex("sms_%s" % mobile, 300, sms_code) # 设置短信有效期为300s pl.setex("sms_time_%s" % mobile, 60, 1) # 设置发送短信间隔为60s pl.execute() # 发送短信验证码 ccp = CCP() ccp.send_template_sms(mobile, [code, "5"], 1) return Response({"message": "OK"}, status.HTTP_200_OK)
创建序列化器对象[暂时不涉及到手机验证码功能
from rest_framework import serializers from .models import User import re class UserModelSerializer(serializers.ModelSerializer): """用户信息序列化器""" sms_code = serializers.CharField(label='手机验证码', required=True, allow_null=False, allow_blank=False, write_only=True) password2 = serializers.CharField(label='确认密码', required=True, allow_null=False, allow_blank=False, write_only=True) class Meta: model=User fields = ('sms_code', 'mobile', 'password','password2') extra_kwargs={ "password":{ "write_only":True } } def validate_mobile(self, value): """验证手机号""" if not re.match(r'^1[345789]\d{9}$', value): raise serializers.ValidationError('手机号格式错误') # 验证手机号是否已经被注册了 # try: # user = User.objects.get(mobile=value) # except: # user = None # # if user: # raise serializers.ValidationError('当前手机号已经被注册') # 上面验证手机号是否存在的代码[优化版] try: User.objects.get(mobile=value) # 如果有获取到用户信息,则下面的代码不会被执行,如果没有获取到用户信息,则表示手机号没有注册过,可以直接pass raise serializers.ValidationError('当前手机号已经被注册') except: pass return value def validate(self,data): # 验证密码 password = data.get("password") password2 = data.get("password2") if len(password)<6: raise serializers.ValidationError('密码太短不安全~') if password !=password2: raise serializers.ValidationError('密码和确认必须一致~') return data def create(self, validated_data): # 删除一些不需要保存到数据库里面的字段 del validated_data['password2'] del validated_data['sms_code'] # 因为数据库中默认用户名是唯一的,所以我们把用户手机号码作为用户名 validated_data["username"] = validated_data["mobile"] # 继续调用ModelSerializer内置的添加数据功能 user = super().create(validated_data) # 针对密码要加密 user.set_password(user.password) # 修改密码等用于更新了密码,所以需要保存 user.save() return user
用户管理视图代码：
# users/views.py from rest_framework.generics import CreateAPIView from .models import User from .serializers import UserModelSerializer class UserAPIView(CreateAPIView): """用户管理""" queryset = User.objects.all() serializer_class = UserModelSerializer
# 子应用路由 urls.py urlpatterns=[ ... path(r"user", views.UserAPIView.as_view()), ]
客户端发送注册信息和发送短信 （前端代码）
<template>
<div class="box">
<img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="">
<div class="register">
<div class="register_box">
<div class="register-title">注册路飞学城</div>
<div class="inp">
<!--<el-select v-model="region">-->
<!--<el-option v-for="item in region_list" :label="item.nation_name+'('+item.nation_code+')'" :value="item.nation_code"></el-option>-->
<!--</el-select>-->
<input v-model = "mobile" type="text" placeholder="手机号码" class="user">
<input v-model = "password" type="password" placeholder="密码" class="user">
<input v-model = "password2" type="password" placeholder="确认密码" class="user">
<div id="geetest"></div>
<div class="sms">
<input v-model="sms_code" maxlength="16" type="text" placeholder="输入验证码" class="user">
<span class="get_sms" @click="send_sms">{{get_sms_text}}</span>
</div>
<button class="register_btn" @click="registerHander">注册</button>
<p class="go_login" >已有账号 <router-link to="/login">直接登录</router-link></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Register',
data(){
return {
region:"+86",
sms_code:"",
password:"",
password2:"",
mobile:"",
validateResult:false,
get_sms_text:"获取验证码",
}
},
created(){
// 页面初始化的时候设置号码的地区号
// this.region_list = this.$nation;
// 显示图片验证码
this.$axios.get("http://127.0.0.1:8000/users/verify").then(response=>{
// 请求成功
let data = response.data;
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
console.log(response.data);
data = JSON.parse(data);
initGeetest({
gt: data.gt,
challenge: data.challenge,
width: "350px",
product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, this.handlerPopup);
}).catch(error=>{
console.log(error)
})
},
methods:{
send_sms(){
let reg = /1[1-9]{2}\d{8}/;
if( !reg.test(this.mobile) ){
return false;
}
// 如果get_sms_text 不是文本,而是数字,则表示当前手机号码还在60秒的发送短信间隔内
if(this.get_sms_text != "获取验证码"){
return false;
}
// 发送短信
let _this = this;
this.$axios.get("http://127.0.0.1:8000/users/sms?mobile="+this.mobile).then(response=>{
console.log(response);
// 显示发送短信以后的文本倒计时
let time = 60;
let timer = setInterval(()=>{
--time;
if(time <=1){
// 如果倒计时为0,则关闭当前定时器
_this.get_sms_text = "获取验证码";
clearInterval(timer);
}else{
_this.get_sms_text = time;
}
},1000)
}).catch(error=>{
console.log(error);
})
},
registerHander(){
// 注册信息提交
// 提交数据前判断用户是否通过了验证码校验
if(!this.validateResult){
alert("验证码验证有误");
return false;
}
this.$axios.post("http://127.0.0.1:8000/users/user",{
"mobile":this.mobile,
"password":this.password,
"password2":this.password2,
"sms_code":this.sms_code,
},{
responseType:"json",
}).
then(response=>{
// 请求成功，保存登陆状态
localStorage.removeItem("token");
let data = response.data;
sessionStorage.token = data.token;
sessionStorage.id = data.id;
sessionStorage.username = data.mobile;
// 注册成功以后默认表示已经登录了,跳转用户中心的页面
// this.$router.push("/user");
alert("注册成功!");
}).catch(error=>{
console.log(error);
})
},
handlerPopup(captchaObj){
// 验证码成功的回调
let _this = this;
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
_this.$axios.post("http://127.0.0.1:8000/users/verify",{
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},{
responseType:"json",
}).then(response=>{
// 请求成功
console.log(response.data);
if(response.data.status == "success") {
_this.validateResult = true; // 获取验证结果
}
}).catch(error=>{
// 请求失败
console.log(error)
})
});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#geetest");
}
},
};
</script>
<style scoped>
.box{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.el-select{
width:100%;
margin-bottom: 15px;
}
.box img{
width: 100%;
min-height: 100%;
}
.box .register {
position: absolute;
width: 500px;
height: 400px;
top: 0;
left: 0;
margin: auto;
right: 0;
bottom: 0;
top: -338px;
}
.register .register-title{
width: 100%;
font-size: 24px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
color: #4a4a4a;
letter-spacing: .39px;
}
.register-title img{
width: 190px;
height: auto;
}
.register-title p{
font-family: PingFangSC-Regular;
font-size: 18px;
color: #fff;
letter-spacing: .29px;
padding-top: 10px;
padding-bottom: 50px;
}
.sms{
margin-top: 15px;
position: relative;
}
.sms .get_sms{
position: absolute;
right: 15px;
top: 14px;
font-size: 14px;
color: #ffc210;
cursor: pointer;
border-left: 1px solid #979797;
padding-left: 20px;
}
.register_box{
width: 400px;
height: auto;
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);
border-radius: 4px;
margin: 0 auto;
padding-bottom: 40px;
}
.register_box .title{
font-size: 20px;
color: #9b9b9b;
letter-spacing: .32px;
border-bottom: 1px solid #e6e6e6;
display: flex;
justify-content: space-around;
padding: 50px 60px 0 60px;
margin-bottom: 20px;
cursor: pointer;
}
.register_box .title span:nth-of-type(1){
color: #4a4a4a;
border-bottom: 2px solid #84cc39;
}
.inp{
width: 350px;
margin: 0 auto;
}
.inp input{
border: 0;
outline: 0;
width: 100%;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp input.user{
margin-bottom: 16px;
}
.inp .rember{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
margin-top: 10px;
}
.inp .rember p:first-of-type{
font-size: 12px;
color: #4a4a4a;
letter-spacing: .19px;
margin-left: 22px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
/*position: relative;*/
}
.inp .rember p:nth-of-type(2){
font-size: 14px;
color: #9b9b9b;
letter-spacing: .19px;
cursor: pointer;
}
.inp .rember input{
outline: 0;
width: 30px;
height: 45px;
border-radius: 4px;
border: 1px solid #d9d9d9;
text-indent: 20px;
font-size: 14px;
background: #fff !important;
}
.inp .rember p span{
display: inline-block;
font-size: 12px;
width: 100px;
/*position: absolute;*/
/*left: 20px;*/
}
#geetest{
margin-top: 20px;
}
.register_btn{
width: 100%;
height: 45px;
background: #84cc39;
border-radius: 5px;
font-size: 16px;
color: #fff;
letter-spacing: .26px;
margin-top: 30px;
}
.inp .go_login{
text-align: center;
font-size: 14px;
color: #9b9b9b;
letter-spacing: .26px;
padding-top: 20px;
}
.inp .go_login span{
color: #84cc39;
cursor: pointer;
}
</style>
总结
用户的登陆认证
前端首页实现登陆状态的判断
Header.vue组件代码：
<script> export default { name: "Header", data(){ return { // 设置一个登录标识，表示是否登录 token: sessionStorage.token || localStorage.token, user_name: sessionStorage.user_name || localStorage.user_name, user_id: sessionStorage.user_id || localStorage.user_id, nav_list:[], }; }, 。。。 } </script>
实现的思路：头部子组件是通过token值进行判断登录状态，所以当用户点击"退出登录"，则需要移出token的值，并使用elementUI里面的弹窗组件进行提示。
在登录认证中接入极验验证
官网： https://www.geetest.com/first_page/
注册登录以后，即进入登录后台，选择行为验证。
<template> <div class="login-box"> <img src="../../static/img/login1.jpg" alt=""> <div class="login"> <div class="login-title"> <img src="../../static/img/Logotitle.png" alt=""> <p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p> </div> <div class="login_box"> <div class="title"> <span @click="login_type=0">密码登录</span> <span @click="login_type=1">短信登录</span> </div> <div class="inp" v-show="login_type===0"> <input v-model="username" type="text" placeholder="用户名 / 手机号码" class="user"> <input v-model="password" type="password" name="" class="pwd" placeholder="密码"> <div id="geetest1"></div> <div class="rember"> <p> <input type="checkbox" class="no" v-model="remember"/> <span>记住密码</span> </p> <p>忘记密码</p> </div> <button class="login_btn" @click="loginhander">登录</button> <p class="go_login">没有账号 <router-link to="/register">立即注册</router-link> </p> </div> <div class="inp" v-show="login_type===1"> <input v-model="username" type="text" placeholder="手机号码" class="user"> <input v-model="sms" type="text" class="pwd" placeholder="短信验证码"> <button id="get_code" @click="smsHandle">{{sms_text}}</button> <button class="login_btn" @click="login2Hander">登录</button> <p class="go_login">没有账号 <router-link to="/register">立即注册</router-link> </p> </div> </div> </div> </div> </template> <script> export default { name: 'Login', data() { return { login_type: 0, username: "", sms: "", is_send: false, // 是否已经发送短信的状态 password: "", remember: "", is_geek: false, send_interval: 60, // 发送短信的间隔 sms_text: "点击发送短信", // 发送短信的提示 } }, created() { // 请求后端获取生成验证码的流水号 this.$axios.get(this.$settings.Host + "/users/captcha/", { responseType: 'json', // 希望返回json数据 }).then(response => { let data = response.data; // 验证初始化配置 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 offline: !data.success }, this.handlerPopup) }).catch(error => { console.log(error.response); }); }, methods: { //发送短信 smsHandle() { // 判断是否填写了手机 if (!/^\d{11}$/.test(this.username)) { this.$alert('手机号码格式有误!', '警告'); return false; } // 判断是否在60s内有发送过短信,如果有则,不能点击发送 if (this.is_send) { this.$alert('60s内不能频繁发送短信!', '警告'); return false; } // 判断是否在60s内有发送过短信,如果有则,不能点击发送 if (this.is_send) { this.$alert('60s内不能频繁发送短信!', '警告'); return false; } let _this = this; _this.$axios.get(_this.$settings.Host + `/users/sms/${_this.username}/`).then(response => { let data = response.data; console.log(data); if (data.result === '-1') { _this.$alert("发送短信失败!", "错误"); } else { _this.is_send = true; _this.$alert("发送短信成功了!", "成功", { callback() { let num = _this.send_interval; let timer = setInterval(() => { if (num < 1) { clearInterval(timer); _this.sms_text = "点击发送短信"; _this.is_send = false; } else { num--; _this.sms_text = num + "后可继续点击发送"; } }, 1000) } }); } }).catch(error => { console.log(error.response) }) }, //短信验证码登录 login2Hander(){ // 验证手机号码 if (!/^\d{11}$/.test(this.username)) { this.$alert('手机号码格式有误!', '警告'); return false; } this.$axios.post(this.$settings.Host+"/users/login/",{ username:this.username, password:this.sms, }) }, // 用户登录 loginhander() { // 判断用户是否已经通过了极验验证 if (!this.is_geek) { return false; } this.$axios.post(this.$settings.Host + "/users/login/", { username: this.username, password: this.password, }).then(response => { let data = response.data; // 根据用户是否勾选了记住密码来保存用户认证信息 if (this.remember) { // 记住密码 localStorage.token = data.token; localStorage.user_id = data.id; localStorage.user_name = data.username; } else { // 不需要记住密码 sessionStorage.token = data.token; sessionStorage.user_id = data.id; sessionStorage.user_name = data.username; } // 登录成功以后,跳转会上一个页面 this.$router.push('/'); }).catch(error => { console.log(error.response) }) }, // 验证码的成功验证事件方法 handlerPopup(captchaObj) { // 把验证码添加到模板中制定的页面 captchaObj.appendTo("#geetest1"); // 记录vue对象 let _this = this; // 监听用户对于验证码的操作是否成功了 captchaObj.onSuccess(() => { var validate = captchaObj.getValidate(); _this.$axios.post(_this.$settings.Host + "/users/captcha/", { geetest_challenge: validate.geetest_challenge, geetest_validate: validate.geetest_validate, geetest_seccode: validate.geetest_seccode }).then(response => { // 在用户成功添加数据以后,可以允许点击登录按钮 _this.is_geek = true; }).catch(error => { console.log(error.response) }) }); }, }, }; </script> <style scoped> .login-box { width: 100%; height: 100%; position: relative; overflow: hidden; margin-top: -80px; } .login-box img { width: 100%; min-height: 100%; } .login-box .login { position: absolute; width: 500px; height: 400px; left: 0; margin: auto; right: 0; bottom: 0; top: -220px; } .login .login-title { width: 100%; text-align: center; } .login-title img { width: 190px; height: auto; } .login-title p { font-size: 18px; color: #fff; letter-spacing: .29px; padding-top: 10px; padding-bottom: 50px; } .login_box { width: 400px; height: auto; background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); border-radius: 4px; margin: 0 auto; padding-bottom: 40px; } .login_box .title { font-size: 20px; color: #9b9b9b; letter-spacing: .32px; border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-around; padding: 50px 60px 0 60px; margin-bottom: 20px; cursor: pointer; } .login_box .title span:nth-of-type(1) { color: #4a4a4a; border-bottom: 2px solid #84cc39; } .inp { width: 350px; margin: 0 auto; } .inp input { outline: 0; width: 100%; height: 45px; border-radius: 4px; border: 1px solid #d9d9d9; text-indent: 20px; font-size: 14px; background: #fff !important; } .inp input.user { margin-bottom: 16px; } .inp .rember { display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 5px; } .inp .rember p:first-of-type { font-size: 12px; color: #4a4a4a; letter-spacing: .19px; margin-left: 22px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; /*position: relative;*/ } .inp .rember p:nth-of-type(2) { font-size: 14px; color: #9b9b9b; letter-spacing: .19px; cursor: pointer; } .inp .rember input { outline: 0; width: 30px; height: 45px; border-radius: 4px; border: 1px solid #d9d9d9; text-indent: 20px; font-size: 14px; background: #fff !important; } .inp .rember p span { display: inline-block; font-size: 12px; width: 100px; /*position: absolute;*/ /*left: 20px;*/ } #geetest1 { margin-top: 20px; } .login_btn { width: 100%; height: 45px; background: #84cc39; border-radius: 5px; font-size: 16px; color: #fff; letter-spacing: .26px; margin-top: 30px; } .inp .go_login { text-align: center; font-size: 14px; color: #9b9b9b; letter-spacing: .26px; padding-top: 20px; } .inp .go_login span { color: #84cc39; cursor: pointer; } </style>
接下来，我们把注册过程中一些注册信息（例如：短信验证码）和session缓存到redis数据库中。
安装django-redis。
关于django-redis 的使用，说明文档可见http://django-redis-chs.readthedocs.io/zh_CN/latest/
django-redis提供了get_redis_connection的方法，通过调用get_redis_connection方法传递redis的配置名称可获取到redis的连接对象，通过redis连接对象可以执行redis命令
https://redis-py.readthedocs.io/en/latest/
使用云通讯发送短信
在登录后的平台上面获取一下信息:
注册的前端
1 <template> 2 <div class="box"> 3 <img src="../../static/img/login1.jpg" alt=""> 4 <div class="register"> 5 <div class="register_box"> 6 <div class="register-title">注册路飞学城</div> 7 <div class="inp"> 8 <input v-model="mobile" type="text" placeholder="手机号码" class="user"> 9 <input v-model="password" type="password" placeholder="登录密码" class="user"> 10 <input v-model="password2" type="password" placeholder="确认密码" class="user"> 11 <div id="geetest"></div> 12 <div class="sms-box"> 13 <input v-model="sms" type="text" placeholder="输入验证码" class="user"> 14 <div class="sms-btn" @click="smsHandle">{{sms_text}}</div> 15 </div> 16 <button class="register_btn" @click="registerHander">注册</button> 17 <p class="go_login">已有账号 18 <router-link to="/login">直接登录</router-link> 19 </p> 20 </div> 21 </div> 22 </div> 23 </div> 24 </template> 25 26 <script> 27 export default { 28 name: 'Register', 29 data() { 30 return { 31 sms: "", 32 mobile: "", 33 password: "", 34 password2: "", 35 validateResult: false, 36 is_send: false, // 是否已经发送短信的状态 37 send_interval: 60, // 发送短信的间隔 38 sms_text: "点击发送短信", // 发送短信的提示 39 } 40 }, 41 methods: { 42 // 发送短信 43 smsHandle() { 44 // 判断是否填写了手机 45 if (!/^\d{11}$/.test(this.mobile)) { 46 this.$alert('手机号码格式有误!', '警告'); 47 return false; 48 } 49 50 // 判断是否在60s内有发送过短信,如果有则,不能点击发送 51 if (this.is_send) { 52 this.$alert('60s内不能频繁发送短信!', '警告'); 53 return false; 54 } 55 56 57 let _this = this; 58 59 _this.$axios.get(_this.$settings.Host + `/users/sms/${_this.mobile}/`).then(response => { 60 let data = response.data; 61 console.log(data); 62 if (data.result === '-1') { 63 _this.$alert("发送短信失败!", "错误"); 64 } else { 65 _this.is_send = true; 66 _this.$alert("发送短信成功了!", "成功", { 67 callback() { 68 let num = _this.send_interval; 69 let timer = setInterval(() => { 70 if (num < 1) { 71 clearInterval(timer); 72 _this.sms_text = "点击发送短信"; 73 _this.is_send = false; 74 } else { 75 num--; 76 _this.sms_text = num + "后可继续点击发送"; 77 } 78 }, 1000) 79 } 80 }); 81 } 82 }).catch(error => { 83 console.log(error.response) 84 }) 85 86 }, 87 // 提交注册信息 88 registerHander() { 89 // 验证手机号码 90 if (!/^\d{11}$/.test(this.mobile)) { 91 this.$alert('手机号码格式有误!', '警告'); 92 return false; 93 } 94 95 // 密码长度 96 if (!/^.{6,16}$/.test(this.password)) { 97 this.$alert('密码长度必须在6-16位字符之间!', '警告'); 98 return false; 99 } 100 101 // 密码和确认密码 102 if (this.password !== this.password2) { 103 this.$alert('确认密码必须和密码保持一致!', '警告'); 104 return false; 105 } 106 107 // 发送请求注册用户 108 this.$axios.post(this.$settings.Host + "/users/register/", { 109 mobile: this.mobile, 110 password: this.password, 111 password2: this.password2, 112 sms_code: this.sms, 113 }).then(response => { 114 115 let _this = this; 116 117 _this.$alert("注册成功!", { 118 callback() { 119 let data = response.data; 120 console.log(data); 121 // 保存登录状态 122 sessionStorage.token = data.token; 123 sessionStorage.user_id = data.id; 124 sessionStorage.user_name = data.username; 125 126 // 跳转到首页 127 _this.$router.push("/"); 128 } 129 }); 130 131 }).catch(error => { 132 console.log(error.response) 133 }) 134 135 } 136 }, 137 138 }; 139 </script> 140 141 <style scoped> 142 .box { 143 width: 100%; 144 height: 100%; 145 position: relative; 146 overflow: hidden; 147 margin-top: -80px; 148 } 149 150 .box img { 151 width: 100%; 152 min-height: 100%; 153 } 154 155 .box .register { 156 position: absolute; 157 width: 500px; 158 height: 400px; 159 top: 0; 160 left: 0; 161 margin: auto; 162 right: 0; 163 bottom: 0; 164 top: -220px; 165 } 166 167 .register .register-title { 168 width: 100%; 169 font-size: 24px; 170 text-align: center; 171 padding-top: 30px; 172 padding-bottom: 30px; 173 color: #4a4a4a; 174 letter-spacing: .39px; 175 } 176 177 .register-title img { 178 width: 190px; 179 height: auto; 180 } 181 182 .register-title p { 183 font-family: PingFangSC-Regular; 184 font-size: 18px; 185 color: #fff; 186 letter-spacing: .29px; 187 padding-top: 10px; 188 padding-bottom: 50px; 189 } 190 191 .register_box { 192 width: 400px; 193 height: auto; 194 background: #fff; 195 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); 196 border-radius: 4px; 197 margin: 0 auto; 198 padding-bottom: 40px; 199 } 200 201 .register_box .title { 202 font-size: 20px; 203 color: #9b9b9b; 204 letter-spacing: .32px; 205 border-bottom: 1px solid #e6e6e6; 206 display: flex; 207 justify-content: space-around; 208 padding: 50px 60px 0 60px; 209 margin-bottom: 20px; 210 cursor: pointer; 211 } 212 213 .register_box .title span:nth-of-type(1) { 214 color: #4a4a4a; 215 border-bottom: 2px solid #84cc39; 216 } 217 218 .inp { 219 width: 350px; 220 margin: 0 auto; 221 } 222 223 .inp input { 224 border: 0; 225 outline: 0; 226 width: 100%; 227 height: 45px; 228 border-radius: 4px; 229 border: 1px solid #d9d9d9; 230 text-indent: 20px; 231 font-size: 14px; 232 background: #fff !important; 233 } 234 235 .inp input.user { 236 margin-bottom: 16px; 237 } 238 239 .inp .rember { 240 display: flex; 241 justify-content: space-between; 242 align-items: center; 243 position: relative; 244 margin-top: 10px; 245 } 246 247 .inp .rember p:first-of-type { 248 font-size: 12px; 249 color: #4a4a4a; 250 letter-spacing: .19px; 251 margin-left: 22px; 252 display: -ms-flexbox; 253 display: flex; 254 -ms-flex-align: center; 255 align-items: center; 256 /*position: relative;*/ 257 } 258 259 .inp .rember p:nth-of-type(2) { 260 font-size: 14px; 261 color: #9b9b9b; 262 letter-spacing: .19px; 263 cursor: pointer; 264 } 265 266 .inp .rember input { 267 outline: 0; 268 width: 30px; 269 height: 45px; 270 border-radius: 4px; 271 border: 1px solid #d9d9d9; 272 text-indent: 20px; 273 font-size: 14px; 274 background: #fff !important; 275 } 276 277 .inp .rember p span { 278 display: inline-block; 279 font-size: 12px; 280 width: 100px; 281 /*position: absolute;*/ 282 /*left: 20px;*/ 283 284 } 285 286 #geetest { 287 margin-top: 20px; 288 } 289 290 .register_btn { 291 width: 100%; 292 height: 45px; 293 background: #84cc39; 294 border-radius: 5px; 295 font-size: 16px; 296 color: #fff; 297 letter-spacing: .26px; 298 margin-top: 30px; 299 } 300 301 .inp .go_login { 302 text-align: center; 303 font-size: 14px; 304 color: #9b9b9b; 305 letter-spacing: .26px; 306 padding-top: 20px; 307 } 308 309 .inp .go_login span { 310 color: #84cc39; 311 cursor: pointer; 312 } 313 314 .sms-box { 315 position: relative; 316 } 317 318 .sms-btn { 319 font-size: 14px; 320 color: #ffc210; 321 letter-spacing: .26px; 322 position: absolute; 323 right: 16px; 324 top: 10px; 325 cursor: pointer; 326 overflow: hidden; 327 background: #fff; 328 border-left: 1px solid #484848; 329 padding-left: 16px; 330 padding-bottom: 4px; 331 } 332 </style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
