目录
昨日回顾
1、后台项目搭建
所有代码在 小luffyapi中 管理
apps：主代码位置
libs：第三方模块
media：媒体文件
settings：线上下线配置
utils：自定义模块
环境变量配置：
BASE_DIR：小luffyapi
APPS_DIR：apps文件夹
2、前台项目搭建
所有代码在 src 管理
assets：静态资源
components：小组件
router：路由
store：仓库
views：视图组件
App.vue：根组件
main.js：全局脚本文件
luffy项目设计
1. 前台设置
margin-left: calc(50% - 1920px / 2);
将移动固定的位置(父级的一半减去图片的一半)
2. 后台设置
2.1 轮播图表
model基表
from django.db import models
class BaseModel(models.Model):
is_delete = models.BooleanField(default=False,verbose_name='是否删除')
is_show = models.BooleanField(default=True,verbose_name='是否上线')
orders = models.IntegerField(default=0,verbose_name='排序顺序')
created_time = models.DateTimeField(auto_now_add=True,verbose_name='创建时间')
update_time = models.DateTimeField(auto_now=True,verbose_name='最后更新时间')
class Meta:
abstract = True
home主页表设置
from django.db import models
from utils.model import BaseModel
# Create your models here.
class Banner(BaseModel):
title = models.CharField(max_length=64,verbose_name='标题')
link = models.CharField(max_length=64,verbose_name='链接')
image = models.ImageField(upload_to='banner',verbose_name='图片')
class Meta:
db_table = 'luffy_banner'
verbose_name_plural = '轮播图表'
def __str__(self):
return self.title
2.2 xadmin管理
安装xadmin
pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
主路由urls
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
# xadmin的依赖
import xadmin
xadmin.autodiscover()
# xversion模块自动注册需要版本控制的Model
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
# 后台管理
path('xadmin/',xadmin.site.urls),
# 路由分发
path('user/',include('user.urls')),
path('home/',include('home.urls')),
# 媒体文件
re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]
需在settings中注册xadmin
注册轮播图表到xadmin中
1.更改admin文件为adminx
2.注册adminx使用管理:
import xadmin
from . import models
# 注册轮播图表到xadmin中
xadmin.site.register(models.Banner)
# xadmin相关配置
from xadmin import views
class GlobalSettings(object):
"""xadmin的全局配置"""
site_title = "路飞小学" # 设置站点标题
site_footer = "路飞小学有限公司" # 设置站点的页脚
menu_style = "accordion" # 设置菜单折叠
xadmin.site.register(views.CommAdminView, GlobalSettings)
3.修改app:home的名字
# home/__init__.py
default_app_config = "home.apps.HomeConfig"
# home/apps.py
from django.apps import AppConfig
class HomeConfig(AppConfig):
name = 'home'
verbose_name = '我的首页'
子路由home.urls
from django.urls import path, re_path, include
from utils.router import router
from . import views
router.register('banners',views.BannerListViewSet,basename='banner')
urlpatterns = [
re_path(r'',include(router.urls))
]
2.3 序列化操作
1. 配置常量(settings中新建const)
# 轮播图推荐数
BANNER_CONST = 3
2. dev中设置
# 加载定义常量配置文件名称空间
from .const import *
view
from rest_framework.viewsets import GenericViewSet
from rest_framework import mixins
from django.conf import settings
from utils.response import APIResponse
from . import models,serializers
class BannerListViewSet(mixins.ListModelMixin,GenericViewSet):
# [: settings.BANNER_COUNT]限制轮播图显示的张数
queryset = models.Banner.objects.filter(is_delete=False,is_show=True).order_by('-orders').all()[:settings.BANNER_COUNT]
serializer_class = serializers.BannerModelSerializer
# 自定义响应结果的格式,重写list方法,格式化状态码输出
# def list(self,request,*args,**kwargs):
# response = super().list(request,*args,**kwargs)
# return APIResponse(results=response.data)
序列化
from rest_framework import serializers
from . import models
class BannerModelSerializer(serializers.ModelSerializer):
class Meta:
model = models.Banner
fields = ('title','link','image')
3. xadmin 后台管理
安装：luffy虚拟环境下
# >: pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
注册app：dev.py
INSTALLED_APPS = [
# ...
# xamin主体模块
'xadmin',
# 渲染表格模块
'crispy_forms',
# 为模型通过版本控制，可以回滚数据
'reversion',
]
xadmin：需要自己的数据库模型类，完成数据库迁移
python manage.py makemigrations
python manage.py migrate
设置主路由替换掉admin：主urls.py
# xadmin的依赖
import xadmin
xadmin.autodiscover()
# xversion模块自动注册需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
# ...
path(r'xadmin/', xadmin.site.urls),
]
创建超级用户：大luffyapi路径终端
# 在项目根目录下的终端
python manage.py createsuperuser
# 账号密码设置：admin | Admin123
完成xadmin全局配置：新建home/adminx.py
# home/adminx.py
# xadmin全局配置
import xadmin
from xadmin import views
class GlobalSettings(object):
"""xadmin的全局配置"""
site_title = "路飞学城" # 设置站点标题
site_footer = "路飞学城有限公司" # 设置站点的页脚
menu_style = "accordion" # 设置菜单折叠
xadmin.site.register(views.CommAdminView, GlobalSettings)
在adminx.py中注册model：home/adminx.px
from . import models
# 注册
xadmin.site.register(models.Banner)
修改app:home的名字：xadmin页面上的显示效果
# home/__init__.py
default_app_config = "home.apps.HomeConfig"
# home/apps.py
from django.apps import AppConfig
class HomeConfig(AppConfig):
name = 'home'
verbose_name = '我的首页'
4. 分离的前后台交互
4.1 后台处理跨域
安装插件
>: pip install django-cors-headers
插件参考地址：https://github.com/ottoyiu/django-cors-headers/
项目配置：dev.py
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
4.2 前台请求Banner数据
修订Banner.vue
<template>
<el-carousel height="520px" :interval="3000" arrow="always">
<!-- 渲染后台数据 -->
<el-carousel-item v-for="banner in banner_list" :key="banner.name">
<a :href="banner.link">
<img :src="banner.image" alt="" :title="banner.note">
</a>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: "Banner",
data() {
return {
banner_list: []
}
},
created() {
// 请求后台数据
this.$axios({
url: this.$settings.base_url + '/home/banners/',
method: 'get',
}).then(response => {
// window.console.log(response.data);
this.banner_list = response.data;
}).catch(errors => {
window.console.log(errors)
})
}
}
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-carousel__item img {
text-align: center;
height: 520px;
margin: 0 auto;
display: block;
}
</style>
git
1. 版本控制器
"""
完成 协同开发 项目，帮助程序员整合代码
软件：SVN 、 GIT
git：集群化、多分支
"""
2. git
简介
"""
什么是git：版本控制器 - 控制的对象是开发的项目代码
代码开发时间轴：需求1 > 版本库1 > 需求2 > 版本库2 > 版本库1 > 版本库2
"""
git与svn比较
git的工作流程
git分支管理
3. git使用
3.1 安装
# 1.下载对应版本：https://git-scm.com/download
# 2.安装git：在选取安装路径的下一步选取 Use a TrueType font in all console windows 选项
3.2 基础命令
将已有的文件夹 - 初始化为git仓库
"""
>: cd 目标文件夹内部
>: git init
"""
在指定目录下 - 初始化git仓库
"""
>: cd 目标目录
>: git init 仓库名
"""
在仓库目录终端下 - 设置全局用户
"""
>: git config --global user.name '用户名'
>: git config --global user.email '用户邮箱'
注：在全局文件 C:Users用户文件夹.gitconfig新建用户信息，在所有仓库下都可以使用
"""
在仓库目录终端下 - 设置局部用户
"""
>: git config user.name '用户名'
-- 用户名
>: git config user.email '用户邮箱'
-- 用户邮箱
注：在当前仓库下的config新建用户信息，只能在当前仓库下使用
注：一个仓库有局部用户，优先使用局部用户，没有配置再找全局用户
"""
查看仓库状态
"""
# 当仓库中有文件增加、删除、修改，都可以在仓库状态中查看
>: git status
-- 查看仓库状态
>: git status -s
-- 查看仓库状态的简约显示
"""
工作区操作
# 通过任何方式完成的文件删与改
# 空文件夹不会被git记录
撤销工作区操作：改、删
"""
>: git checkout .
-- 撤销所有暂存区的提交
>: git checkout 文件名
-- 撤销某一文件的暂存区提交
"""
工作区内容提交到暂存区
"""
>: git add .
-- 添加项目中所有文件
>: git add 文件名
-- 添加指定文件
"""
撤销暂存区提交：add的逆运算
"""
>: git reset HEAD .
-- 撤销所有暂存区的提交
>: git reset 文件名
-- 撤销某一文件的暂存区提交
"""
提交暂存区内容到版本库
# git commit -m "版本描述信息"
撤销版本库提交：commit的逆运算
"""
回滚暂存区已经提交到版本库的操作：
查看历史版本：
>: git log
>: git reflog
查看时间点之前|之后的日志：
>: git log --after 2018-6-1
>: git log --before 2018-6-1
>: git reflog --after 2018-6-1
>: git reflog --before 2018-6-1
查看指定开发者日志
>: git log --author author_name
>: git reflog --author author_name
回滚到指定版本：
回滚到上一个版本：
>: git reset --hard HEAD^
>: git reset --hard HEAD~
回滚到上三个版本：
>: git reset --hard HEAD^^^
>: git reset --hard HEAD~3
回滚到指定版本号的版本：
>: git reset --hard 版本号
>: eg: git reset --hard 35cb292
"""
3.3 过滤文件
# .gitignore 文件
# 1）在仓库根目录下创建该文件
# 2）文件与文件夹均可以被过滤
# 3）文件过滤语法
""" 过滤文件内容
文件或文件夹名：代表所有目录下的同名文件或文件夹都被过滤
/文件或文件夹名：代表仓库根目录下的文件或文件夹被过滤
eg：
a.txt：项目中所有a.txt文件和文件夹都会被过滤
/a.txt：项目中只有根目录下a.txt文件和文件夹会被过滤
/b/a.txt：项目中只有根目录下的b文件夹下的a.txt文件和文件夹会被过滤
*x*：名字中有一个x的都会被过滤（*代表0~n个任意字符）
空文件夹不会被提交，空包会被提交
"""
4. 创建远程gitee仓库
选择线上仓库
"""
1.注册码云账号并登录：https://gitee.com/
2.创建仓库(课堂截图)
3.本地与服务器仓库建立连接
"""
"""
1）本地配置线上的账号与邮箱
>: git config --global user.name "doctor_owen"
>: git config --global user.email "doctor_owen@163.com"
2）在本地初始化仓库(git init)，并完成项目的初步搭建(项目架构)(一般都是项目负责人完成项目启动)
# 这个过程就是git的基础部分的本地操作
3）采用 https协议 或 ssh协议 与远程git仓库通信提交提交代码(一般都是项目负责人完成)
i) https协议方式，无需配置，但是每次提交都有验证管理员账号密码
>: git remote add origin https://gitee.com/doctor_owen/luffy.git # 配置远程源
>: git push -u origin master # 提交本地仓库到远程源
ii) ssh协议，需要配置，配置完成之后就可以正常提交代码
>: git remote add origin git@gitee.com:doctor_owen/luffy.git # 配置远程源
>: git push -u origin master # 提交本地仓库到远程源
iii）查看源及源链接信息
>: git remote
>: git remote -v
iv）删除源链接
>: git remote remove 源名字
注：origin远程源的源名，可以自定义；master是分支名，是默认的主分支
"""
5. 用本地仓库首次初始化远程仓库
本地仓库与远程仓库建立源连接
前提：本地仓库已经创建且初始化完毕（代码已经提交到本地版本库）
本机命令，添加远程源：git remote add origin ssh@*.git
采用ssh协议的remote源
创建电脑的公钥私钥
官网：https://gitee.com/help/articles/4181#article-header0
本机命令，生成公钥：ssh-keygen -t rsa -C "*@*.com"
邮箱可以任意填写
本机命令，查看公钥：cat ~/.ssh/id_rsa.pub
码云线上添加公钥：项目仓库 => 管理 => 部署公钥管理 => 添加公钥 => 添加个人公钥
提交本地代码到远程仓库
命令：git push origin master
6. remote源操作
"""
1）查看仓库已配置的远程源
>: git remote
>: git remote -v
2）查看remote命令帮助文档
>: git remote -h
3）删除远程源
>: git remote remove 源名
eg: git remote remove origin
4）添加远程源
>: git remote add 源名 源地址
>: git remote add orgin git@*.git
"""
7. 多分支开发
分支操作
"""
1.创建分支
>: git branch 分支名
2.查看分支
>: git branch
3.切换分支
>: git checkout 分支名
4.创建并切换到分支
>: git checkout -b 分支名
5.删除分支
>: git branch -d 分支名
6.查看远程分支
>: git branch -a
7.合并分支
>: git merge 分支名
"""