文章目录
首页
导航功能实现
四步走:
创建模型
引入一个公共模型【抽象模型,不会在数据迁移的时候为它创建表】
from luffyapi.utils.models import BaseModel, models
class BannerInfo(BaseModel):
"""轮播图"""
# upload_to 设置保存文件的子目录,系统会自动创建,但是当前子目录的父级目录需要开发者手动创建
img_url = models.ImageField(upload_to="banner",null=True, blank=True, max_length=255, verbose_name='轮播图')
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
@property
def image_url(self):
"""默认情况下,models.ImageFiled字段查询的结果是一个文件对象,不能直接被序列化器转换的,所以我们需要
在模型中,设置一个自定义字段
"""
return self.img_url.url
def __str__(self):
return self.name
class NavInfo(BaseModel):
"""导航"""
# 导航位置
NAV_OPTION = (
(1,"头部导航"),
(2,"脚部导航"),
)
name = models.CharField(max_length=150, verbose_name='导航名称')
link = models.CharField(max_length=150, verbose_name='导航链接地址')
opt = models.SmallIntegerField(choices=NAV_OPTION,default=1, verbose_name="导航位置")
class Meta:
db_table = 'ly_nav'
verbose_name = '导航'
verbose_name_plural = verbose_name
def __str__(self):
return self.name
公共模型,保存项目的公共代码库目录下luffyapi/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)
created_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
updated_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")
class Meta:
# 设置当前模型为抽象模型, 在django执行数据迁移时,不会为当前模型创建表和迁移文件
abstract = True
数据迁移
python manage.py makemigrations
python manage.py migrate
序列化器代码
home/serializers.py
from .models import NavInfo
class NavInfoModelSerializer(serializers.ModelSerializer):
"""导航序列化器"""
class Meta:
model = NavInfo
fields = ["id","name","link"]
视图代码
home/views.py
from .models import NavInfo
from .serializers import NavInfoModelSerializer
class HeaderNavListAPIView(ListAPIView):
"""头部导航列表"""
queryset = NavInfo.objects.filter(is_show=True,is_delete=False,opt=1).order_by("orders")
serializer_class = NavInfoModelSerializer
class FooterNavListAPIView(ListAPIView):
"""脚部导航列表"""
queryset = NavInfo.objects.filter(is_show=True,is_delete=False,opt=2).order_by("orders")
serializer_class = NavInfoModelSerializer
路由代码
home/urls.py
from django.urls import path, re_path
from . import views
urlpatterns = [
path(r"banner/", views.BannerListAPIView.as_view()),
path(r"nav/header/", views.HeaderNavListAPIView.as_view()),
path(r"nav/footer/", views.FooterNavListAPIView.as_view()),
]
注册模型到xadmin中
在当前子应用home/adminx.py
,添加如下代码
# 导航
from home.models import NavInfo
class NavInfoInfoModelAdmin(object):
list_display=["name","link","is_show"]
xadmin.site.register(NavInfo, NavInfoInfoModelAdmin)
添加测试数据
客户端代码获取数据
头部导航Header.vue
代码:
<template>
<div class="header-box">
<div class="header">
<div class="content">
<div class="logo full-left">
<router-link to="/"><img src="/static/image/logo.svg" alt=""></router-link>
</div>
<ul class="nav full-left">
<li :key="key" v-for="nav,key in nav_list">
<router-link v-if="nav.link.search('://') == -1" :to="nav.link">{{nav.name}}</router-link>
<a v-else :href="nav.link">{{nav.name}}</a>
</li>
</ul>
<div class="login-bar full-right">
<div class="shop-cart full-left">
<img src="/static/image/cart.svg" alt="">
<span><router-link to="/cart">购物车</router-link></span>
</div>
<div class="login-box full-left">
<span>登录</span>
|
<span>注册</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data(){
return{
nav_list:[]
}
},
created(){
this.get_header_nav();
},
methods:{
get_header_nav(){
this.$axios.get(`${this.$settings.Host}/nav/header/`).then(response=>{
console.log(response.data);
this.nav_list = response.data;
})
},
}
}
</script>
<style scoped>
.header-box{
height: 80px;
}
.header{
width: 100%;
height: 80px;
box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
position: fixed;
top:0;
left: 0;
right:0;
margin: auto;
z-index: 99;
background: #fff;
}
.header .content{
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.header .content .logo{
height: 80px;
line-height: 80px;
margin-right: 50px;
cursor: pointer; /* 设置光标的形状为爪子 */
}
.header .content .logo img{
vertical-align: middle;
}
.header .nav li{
float: left;
height: 80px;
line-height: 80px;
margin-right: 30px;
font-size: 16px;
color: #4a4a4a;
cursor: pointer;
}
.header .nav li span{
padding-bottom: 16px;
padding-left: 5px;
padding-right: 5px;
}
.header .nav li span a{
display: inline-block;
}
.header .nav li .this{
color: #4a4a4a;
border-bottom: 4px solid #ffc210;
}
.header .nav li:hover span{
color: #000;
}
.header .login-bar{
height: 80px;
}
.header .login-bar .shop-cart{
margin-right: 20px;
border-radius: 17px;
background: #f7f7f7;
cursor: pointer;
font-size: 14px;
height: 28px;
width: 88px;
margin-top: 30px;
line-height: 32px;
text-align: center;
}
.header .login-bar .shop-cart:hover{
background: #f0f0f0;
}
.header .login-bar .shop-cart img{
width: 15px;
margin-right: 4px;
margin-left: 6px;
}
.header .login-bar .shop-cart span{
margin-right: 6px;
}
.header .login-bar .login-box{
margin-top: 33px;
}
.header .login-bar .login-box span{
color: #4a4a4a;
cursor: pointer;
}
.header .login-bar .login-box span:hover{
color: #000000;
}
</style>
脚部导航Footer.vue
代码:
<template>
<div class="footer">
<ul>
<li :key="key" v-for="nav,key in nav_list">
<router-link v-if="nav.link.search('://') == -1" :to="nav.link">{{nav.name}}</router-link>
<a v-else :href="nav.link">{{nav.name}}</a>
</li>
</ul>
<p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
</div>
</template>
<script>
export default {
name: "Footer",
data(){
return {
nav_list:[]
}
},
created() {
this.get_footer_nav();
},
methods:{
get_footer_nav(){
this.$axios.get(`${this.$settings.Host}/nav/footer/`).then(response=>{
console.log(response.data);
this.nav_list = response.data;
})
},
}
}
</script>
<style scoped>
.footer {
width: 100%;
height: 128px;
background: #25292e;
color: #fff;
}
.footer ul{
margin: 0 auto 16px;
padding-top: 38px;
width: 810px;
}
.footer ul li{
float: left;
width: 112px;
margin: 0 10px;
text-align: center;
font-size: 14px;
}
.footer ul li a{
color: #eee;
}
.footer ul::after{
content:"";
display:block;
clear:both;
}
.footer p{
text-align: center;
font-size: 12px;
}
</style>
用户的登陆认证
前端显示登陆页面
登录页组件
Login.vue
<template>
<div class="login box">
<img src="/static/image/Loginbg.3377d0c.jpg" alt="">
<div class="login">
<div class="login-title">
<img src="/static/image/Logotitle.1ba5466.png" alt="">
<p>帮助有志向的年轻人通过努力学习获得体面的工作和生活!</p>
</div>
<div class="login_box">
<div class="title">
<span @click="login_type=0" :class="login_type==0?'current':''">密码登录</span>
<span @click="login_type=1" :class="login_type==1?'current':''">短信登录</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;
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-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 .current{
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: 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>
绑定登陆页面路由地址
index.js
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: "/user/login",
component:Login,
}
]
})
调整首页头部子组件中登陆按钮的链接信息
Header.vue
<router-link to="/user/login">登录</router-link>
后端实现登陆认证
Django默认已经提供了Auth认证系统。认证系统包含:
- 用户管理
- 权限系统
- 用户组
- 密码哈希系统
- 用户登录或内容显示的表单和视图
- 一个可插拔的后台系统[热插拔、可插拔]
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
。
创建用户模块的子应用
cd luffyapi/apps/
python ../../manage.py startapp users
在settings/dev.py
文件中注册子应用。
INSTALLED_APPS = [
...
'users',
]
创建自定义的用户模型类
Django认证系统中提供的用户模型类及方法很方便,我们可以使用这个模型类,但是字段有些无法满足项目需求,如本项目中需要保存用户的手机号,需要给模型类添加额外的字段。
Django提供了django.contrib.auth.models.AbstractUser
用户抽象模型类允许我们继承,扩展字段来使用Django认证系统的用户模型类。
我们可以在apps中创建Django应用users,并在配置文件中注册users应用。
在创建好的应用users/models.py
中定义用户的用户模型类。
class User(AbstractUser):
"""用户模型类"""
mobile = models.CharField(max_length=15, unique=True, blank=True, null=True, verbose_name="手机号码")
avatar = models.ImageField(upload_to="avatar", blank=True,null=True ,verbose_name="头像")
class Meta:
db_table = 'ly_users'
verbose_name = '用户'
verbose_name_plural = verbose_name
我们自定义的用户模型类还不能直接被Django的认证系统所识别,需要在配置文件中告知Django认证系统使用我们自定义的模型类。
在配置文件中进行设置
AUTH_USER_MODEL = 'users.User'
AUTH_USER_MODEL
参数的设置以点.
来分隔,表示应用名.模型类名
。
注意:Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好,否则后续使用可能出现未知错误。
执行数据库迁移
python manage.py makemigrations
python manage.py migrate
如果是并非第一次迁移之前就直接自定义用户模型,则需要完成以下操作进行项目的初始化才能继续使用自定义用户模型
- 需要删除的文件:
- 对数据库中现有的所有数据表进行备份以后,对数据库中所有的数据表进行整体删除[如果数据不重要,直接可以删除]
- 先把现有的子应用里面的
migrations
目录下除了__init__.py
以外的迁移文件删除 - 对当前python解析器里面的
site-package
模块里面找到以下文件并删除
3.1django.contrib.admin.migrations
除了__init__.py
以外的迁移文件
3.2django.contrib.auth.migrations
除了__init__.py
以外的迁移文件
3.3reversion.migrations
除了__init__.py
以外的迁移文件
3.4xadmin.migrations
除了__init__.py
以外的迁移文件
-
完成上面的步骤以后,重新生成迁移文件,并执行数据迁移,然后把之前备份的数据[除了用户相关的以外]重新执行,还原即可.
-
重新创建管理员,恢复数据,可以继续照常开发.