目录
1. 前台全局样式和js配置
1.1 body div 默认样式，统一去掉
# src--assets--css--global.css
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse; /* 合并边框 */
}
# main.js
# //5. 去掉所有标签默认样式
import '@/assets/css/gllobal.css'
1.2 全局配置
# src--assets--js--settings.js
export default {
BASE_URL:'http://127.0.0.1:8000/'
}
# // 6 全局配置
import settings from "@/assets/js/settings";
Vue.prototype.$settings=settings
2. 后台主页模块接口
2.1 根据原型图分析出来
首页轮播图接口
首页推荐课程接口
2.2 软件开发模式
软件开发模式：
瀑布模式：bbs项目
敏捷开发：路飞,管理软件，
bbs项目：设计数据库---》全设计完了---》开始写项目
路飞：写一块设计一块数据库
https://zhuanlan.zhihu.com/p/444741981
2.3 轮播图表
# 1. 创建一个app，写轮播图表
python ../../manage.py startapp home
# 2. 编写一个BaseMosel
# utils--models
class BaseModel(models.Model):
created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
is_delete = models.BooleanField(default=False, verbose_name='是否删除') # 软删除，不真正的删除数据，而使用字段控制
is_show = models.BooleanField(default=True, verbose_name='是否上架')
orders = models.IntegerField(verbose_name='优先级')
class Meta:
# 如果表迁移，这个表就会生成，咱们不能再数据库生成这个表，就需要加这句
abstract = True # 虚拟表，只用来做继承，不在数据库生成
# 3. 编写banner表 home--models
class Banner(BaseModel):
# 图片地址，图片名，图片介绍，link地址
title = models.CharField(max_length=16, unique=True, verbose_name='名称')
image = models.ImageField(upload_to='banner', verbose_name='图片')
link = models.CharField(max_length=64, verbose_name='跳转链接') # /course/
info = models.TextField(verbose_name='详情') # 也可以用详情表
class Meta:
db_table = 'luffy_banner'
verbose_name_plural = '轮播图表'
def __str__(self):
return self.title
# 4. 迁移两条命令
python manage.py makemigrations
python manage.py migrate
2.4 轮播图接口编写
# 1. 分路由---》home的app中新建urls.py
from . import views
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
]
urlpatterns += router.urls
# 2. urls.py
urlpatterns = [
path('admin/', admin.site.urls),
# 127.0.0.1:8080/api/v1/home/xxx
path('api/v1/home/', include('home.urls')),
]
# 3. 视图函数中
from rest_framework.viewsets import GenericViewSet
# 获取所有
from utils.views import CommonListModelMixin
from rest_framework.response import Response
class BannerView(GenericViewSet, CommonListModelMixin):
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
serializer_class = BannerSerializer
# 4. utils下的view.py 中
from rest_framework.mixins import ListModelMixin
from utils.response import APIResponse
class CommonListModelMixin(ListModelMixin):
def list(self, request, *args, **kwargs):
res = super().list(request, *args, **kwargs)
return APIResponse(result=res.data)
# 5. 序列化类 home--serializer.py
class BannerSerializer(serializers.ModelSerializer):
class Meta:
model = Banner
fields = ['title', 'image', 'link']
# 6. 录入数据 simpleui
1. 下载
django-simpleui
2. 注册app
INSTALLED_APPS = [
'simpleui',]
3. 国际化
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
4. 创建超级用户
python manage.py createsuperuser
5. 录入轮播图的图片
3. 跨域问题详解，前后端打通
# 前后端交互会存在跨域问题
# 跨域问题出现的原因？
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
浏览器上就会报错，这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险
# 解决跨域问题
1 前端代理
2 nginx代理
3 cors解决跨域
# cors：跨域资源共享，后端技术，核心就是在响应头中加入数据，允许浏览器接受数据
CORS需要浏览器和服务器同时支持，IE浏览器不能低于IE10
# CORS基本流程
浏览器将CORS请求分成两类：
简单请求（simple request）
非简单请求（not-so-simple request）
# 简单请求：
浏览器发出CORS简单请求，只需要在头信息之中增加一个Access-Control-Allow-Origin字段
# 非简单请求
浏览器发出CORS非简单请求，会在正式通信之前，先发送一个options请求，称为”预检”请求。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，如果运行，再发真正的请求
# 什么是简单请求，什么是非简单请求
满足下面两种情况，就是简单请求
1 请求方法是以下三种方法之一：
HEAD
GET
POST
2 HTTP的请求头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
# 解决跨域，使用cors技术，在响应中写东西：如果自己写，需要写个中间件，每个请求都会走，在process_response中写入下面的代码即可
def test(request):
print(request.method)
# 如果自己写，需要写个中间件，每个请求都会走，在process_response中写入下面的代码即可
# 解决简单请求
res=HttpResponse('ok')
res['Access-Control-Allow-Origin']='*'
# 解决非简单请求
if request.method=='OPTIONS':
res['Access-Control-Allow-Headers'] = 'Content-Type'
return res
# 第三方模块，解决了这个问题，只需要集成进来，使用即可---》djagno
第一步：安装django-cors-headers
第二步：注册app
INSTALLED_APPS = (
...
'corsheaders',
...
)
第三步：中间件加入
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
第四步：配置文件配置
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
4. 自定义配置
# 有些公共配置信息，放到单独一个配置文件中
# 新建一个common_settings.py
# 轮播图显示的条数
BANNER_COUNT = 3
# 在dev.py 中导入
from settings.common_settings import *
# 查询所有轮播图接口中
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
5. git介绍和安装
# 后端，写了一个接口，完成了一个功能，在公司里，功能完成，要把代码提交到远程仓库
# 公司里协同开发,版本管理需要使用软件：svn，git
# 下载：安装在操作系统上
https://git-scm.com/downloads
一路下一步
任意位置点右键，如果有两个东西（【git gui here】 【git bash here】），表示安装完成
5.1 pycharm中配置git
# github , gitee开源软件，
#下载成zip，使用pycharm打开
# 使用pycharm直接拉下来，打开---》配置pycharm
settings中搜索git，把git安装可执行文件配置好
# 以后下载开源软件：vcs--->get from version contral--->填入路径---》clone下来即可
5.2 svn，git ，github，gitee，gitlab
# svn：版本管理软件，它是集中式的版本管理，必须有个svn的服务端，服务端如果过来，svn就用不了了
# git :版本管理软件，它是一个分布式的版本管理，每个客户端都可以作为服务端，即便服务端挂了，也能进行版本管理（本地管理）
# github：全球最大的开源远程git仓库，全球最大的开源仓库，git远程仓库
如果我要写开源软件，本地装git，把代码提交到github
python监控公司代码有没有被传到github
# gitee：中国最大的开源软件仓库 【私有仓库，花钱买空间】
# gitlab：公司内部的远程仓库，运维搭建维护
5.3 前端的后台管理模板
https://gitee.com/liuqingzheng/vue_admin
5.4 CGI, FastCGI, WSGI, uWSGI, uwsgi
CGI
1、通用网关接口（Common Gateway Interface/CGI）是一种重要的互联网技术，可以让一个客户端，从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器和请求处理程序之间传输数据的一种标准。
2、CGI程序可以用任何脚本语言或者是完全独立编程语言实现，只要这个语言可以在这个系统上运行。
3、用来规范web服务器传输到php解释器中的数据类型以及数据格式，包括URL、查询字符串、POST数据、HTTP header等，也就是为了保证web server传递过来的数据是标准格式的
4、一句话总结： 一个标准，定义了客户端服务器之间如何传数据
FastCGI
1、快速通用网关接口（Fast Common Gateway Interface／FastCGI）是一种让交互程序与Web服务器通信的协议。FastCGI是早期通用网关接口（CGI）的增强版本。
2、FastCGI致力于减少网页服务器与CGI程序之间互动的开销，从而使服务器可以同时处理更多的网页请求。
3、使用FastCGI的服务器：
Apache HTTP Server (部分)
Cherokee HTTP Server
Hiawatha Webserver
Lighttpd
Nginx
LiteSpeed Web Server
Microsoft IIS
4、一句话总结： CGI的升级版
WSGI
1、Web服务器网关接口（Python Web Server Gateway Interface，缩写为WSGI）是为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口。自从WSGI被开发出来以后，许多其它语言中也出现了类似接口。
2、wsgi server (比如uWSGI） 要和 wsgi application（比如django ）交互，uwsgi需要将过来的请求转给django 处理，那么uWSGI 和 django的交互和调用就需要一个统一的规范，这个规范就是WSGI WSGI（Web Server Gateway Interface）
3、WSGI，全称 Web Server Gateway Interface，或者 Python Web Server Gateway Interface ，是为 Python 语言定义的 Web 服务器和 Web 应用程序或框架之间的一种简单而通用的接口。自从 WSGI 被开发出来以后，许多其它语言中也出现了类似接口。
4、WSGI 的官方定义是，the Python Web Server Gateway Interface。从名字就可以看出来，这东西是一个Gateway，也就是网关。网关的作用就是在协议之间进行转换。
5、WSGI 是作为 Web 服务器与 Web 应用程序或应用框架之间的一种低级别的接口，以提升可移植 Web 应用开发的共同点。WSGI 是基于现存的 CGI 标准而设计的
6、一句话总结： 为Python定义的web服务器和web框架之间的接口标准
uWSGI
wsgiref，werkzeug（一个是符合wsgi协议的web服务器+工具包（封装了一些东西））
uWSGI 用c语言写的，性能比较高
gunicorn：python写的
tornado：也可以部署django项目
1、它是一个Web服务器（类似的有wsgiref，gunicorn），它实现了WSGI协议、uwsgi、http等协议。用于接收前端服务器转发的动态请求并处理后发给 web 应用程序。
2、Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换
3、一句话总结： 一个Web Server，即一个实现了WSGI的服务器，大体和Apache是一个类型的东西，处理发来的请求。
uwsgi
location / {
#方式一
#include uwsgi_params; # 导入一个Nginx模块他是用来和uWSGI进行通讯的
#uwsgi_connect_timeout 30; # 设置连接uWSGI超时时间
#uwsgi_pass 101.133.225.166:8080;
#方式二
#include uwsgi_params; # 导入一个Nginx模块他是用来和uWSGI进行通讯的
#uwsgi_pass unix:///var/www/script/uwsgi.sock; # 指定uwsgi的sock文件所有动态请求
#方式三
proxy_pass http://101.133.225.166:8088
1、它是uWSGI服务器实现的独有的协议，用于定义传输信息的类型，是用于前端服务器与 uwsgi 的通信规范。
2、一句话总结： uWSGI自有的一个协议
uWSGI：web服务器，等同于wsgiref
uwsgi:uWSGI自有的协议