路飞学城项目后台主页模块设计，simpleui后台管理，轮播图接口，跨域问题详解，前台主页功能

一、后台主页模块设计
- 迁移,别忘记注册和回到根路径
二、simpleui后台管理
三、轮播图接口
四、跨域问题详解
- 3.0 自定义中间件，解决跨域问题
3.1 django-cors-headers
- 3.2 django-cors-headers源码
4 前台主页功能

一、后台主页模块设计

 # 1 创建后台主页模块（一个模块一个app）
python ../../manage.py startapp home
 
# 2 在models中写轮播图表
	-写一个基表BaseModel
	 -写轮播图表

 from django.db import 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  # 这个表模型只用来继承，不用来在数据库中生成表

迁移,别忘记注册和回到根路径

 from utils.common_models import BaseModel
 
 
class Banner(BaseModel):
    # 1 id  img图片地址        长传时间  是否删除 是否显示 order
    # 把公共字段抽取到某个基表中，以后要使用，直接继承基表，扩写自己的字段就可以了---》用过的AbstractUser就是这个原理
    title = models.CharField(max_length=16, unique=True, verbose_name='名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    # 点击图片，调整到的路径
    # 前端跳转的地址： 前端路由     完整的http链接
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')  # 也可以用详情表，宽高出处
 
    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '轮播图表'
 
    def __str__(self):
        return self.title

二、simpleui后台管理

 1.下载：pip install django-simpleui
2.注册   'simpleui'
3.国际化
LANGUAGE_CODE = 'zh-hans'
 
TIME_ZONE = 'Asia/Shanghai'
 
USE_I18N = True
 
USE_L10N = True
 
USE_TZ = False
4.注册超级管理员
python manage.py createsuperuser
yzk
yzk12345
5.去admin.py里面注册
from .models import Banner
 
admin.site.register(Banner)
 
 
6.去apps里面加入，录入数据
class HomeConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'home'
    verbose_name = '首页功能'
 
7.配置文件
MEDIA_URL = 'media/'  # 以后所有的在meida文件夹下的资源自动拼接  media/
 
 
# 正常在公司中，网站分主站和后台管理
 
# 后台管理，主要是运营录入数据，使用simpleui

三、轮播图接口

3.1 封装自己的mixin

 from rest_framework.mixins import ListModelMixin, CreateModelMixin, UpdateModelMixin, DestroyModelMixin, \
    RetrieveModelMixin
from utils.common_response import APIResponse
 
 
class CommonListModelMixin(ListModelMixin):
    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(data=res.data)
 
 
class CommonCreateModelMixin(CreateModelMixin):
    def create(self, request, *args, **kwargs):
        res = super().create(request, *args, **kwargs)
        return APIResponse(data=res.data)  # {code:100,msg:成功，data:{}}
 
 
class CommonUpdateModelMixin(UpdateModelMixin):
    def update(self, request, *args, **kwargs):
        res = super(CommonUpdateModelMixin, self).update(request, *args, **kwargs)
        return APIResponse(data=res.data)
 
 
class CommonRetrieveModelMixin(RetrieveModelMixin):
    def retrieve(self, request, *args, **kwargs):
        res = super(CommonRetrieveModelMixin, self).retrieve(request, *args, **kwargs)
        return APIResponse(data=res.data)
 
 
class CommonDestroyModelMixin(DestroyModelMixin):
    def destroy(self, request, *args, **kwargs):
        res = super().destroy(request, *args, **kwargs)
        return APIResponse(msg='删除成功')

3.2 轮播图接口

视图

 # 查询所有 轮播图接口
from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from .serialzier import BannerSerializer
from .models import Banner
from utils.common_mixin import CommonListModelMixin as ListModelMixin
 
 
class BannerView(GenericViewSet, ListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer

路由

 ## 总路由
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/home/', include('home.urls')),
    # static 默认开启的，后期咱们会开启media文件夹，除此之外的其它文件夹，尽量不要开放，让外部访问
    path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
 
]
 
# 分路由
from rest_framework.routers import SimpleRouter
 
router = SimpleRouter()
from .views import BannerView
 
router.register('banner', BannerView, 'banner')
urlpatterns = [
    # path('admin/', admin.site.urls),
 
]
urlpatterns += router.urls

序列化类

 from rest_framework import serializers
from .models import Banner
 
 
class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['id', 'image', 'title', 'link']

3.3 自定义配置文件

 # 通过配置文件控制显示多少条轮播图
# 使用步骤
    1 在settings下新建：common_settings.py
    BANNER_COUNT = 3
    2 在dev.py中加入
    from .common_settings import *
    3 在轮播图接口上
    class BannerView(GenericViewSet, ListModelMixin):
        queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
        serializer_class = BannerSerializer

四、跨域问题详解

 # 以后只要前后端分离项目，都会出现跨域问题，咱们要解决
 
# 同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
 
请求的url地址,必须与浏览器上的url地址处于同域上：也就是[域名],[端口],[协议]相同.
http://127.0.0.1:8080
ftf://127.0.0.1:8080
 
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
 
浏览器上就会报错，个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险
 
请求发送，服务的执行，数据也正常返回，只是被浏览器拦截了
 
# 正因为同源策略的存在，咱们写前后端分离的项目，无法正常获取到数据
 
 
# 解决跨域问题：
	1  jsonp 跨域（不了解）
    2  跨域资源共享（CORS）  后端技术
    3  Nginx代理
 
 
# CORS：跨域资源共享
CORS需要浏览器和服务器同时支持，所有浏览器都支持该功能
只需要服务的处理即可：只需要在在响应头中加入固定的头就实现cors---》比如在响应头中加入Access-Control-Allow-Origin='*'---->get请求就没有跨域了---》但是put请求还会有
 
 
# 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解决跨域，就是再响应头中加入固定的一些东西，专门写个中间件
	    res['Access-Control-Allow-Headers'] = 'token'
        res['Access-Control-Allow-Methods'] = 'DELETE'
    	res['Access-Control-Allow-Origin'] = 'http://192.168.1.252:8080'
 
 
 
 
 
### 补充：######
前端访问的后端地址，一定要准确

3.0 自定义中间件，解决跨域问题

 ##### common_mideleware.py
from django.utils.deprecation import MiddlewareMixin
 
 
### 自定义中间件解决跨域问题---》以后其它框架都是这个原理---》django上有人做了
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = 'token'
            response['Access-Control-Allow-Methods'] = 'DELETE'
        response['Access-Control-Allow-Origin'] = '*'
        return response
    
 ### 配置文件配置中间件
    MIDDLEWARE = [
        'utils.common_mideleware.CorsMiddleware'
    ]

3.1 django-cors-headers

 ####使用pip安装
pip install django-cors-headers
#####添加到setting的app中
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
#### 添加中间件
MIDDLEWARE = [  
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]
#### 4、setting下面添加下面的配置
CORS_ORIGIN_ALLOW_ALL = True
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',
	'token'
)

3.2 django-cors-headers源码

 # 核心代码再中间件的---》process_response  3.0.14 版本
class CorsMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        if (
            not conf.CORS_ALLOW_ALL_ORIGINS
            and not self.origin_found_in_white_lists(origin, url)
            and not self.check_signal(request)
        ):
            return response
        if conf.CORS_ALLOW_ALL_ORIGINS and not conf.CORS_ALLOW_CREDENTIALS:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*"
        else:
            response[ACCESS_CONTROL_ALLOW_ORIGIN] = origin
        if request.method == "OPTIONS":
            response[ACCESS_CONTROL_ALLOW_HEADERS] = ", ".join(conf.CORS_ALLOW_HEADERS)
            response[ACCESS_CONTROL_ALLOW_METHODS] = ", ".join(conf.CORS_ALLOW_METHODS) 
        return response

4 前台主页功能

4.1 Banner.vue

 <template>
  <div>
    <el-carousel height="400px">
      <el-carousel-item v-for="item in banner_list" :key="item">
        <!--        router-link只能跳内部，不能跳外部-->
 
        <router-link :to="item.link" v-if="item.link.indexOf('http:')<0">
          <img :src="item.image" :alt="item.title">
        </router-link>
        <a :href="item.link" v-else>
          <img :src="item.image" :alt="item.title">
        </a>
 
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
 
<script>
export default {
  name: "Banner",
  data() {
    return {banner_list: []}
  },
  created() {
    this.$axios.get(`${this.$settings.BASE_URL}home/banner/`).then(res => {
      this.banner_list = res.data.data
    })
  }
}
</script>
 
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
 
 
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}
 
.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}
</style>

4.2 Footer.vue

 <template>
  <div class="footer">
    <ul>
      <li>关于我们</li>
      <li>联系我们</li>
      <li>商务合作</li>
      <li>帮助中心</li>
      <li>意见反馈</li>
      <li>新手指南</li>
    </ul>
    <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
  </div>
</template>
 
<script>
export default {
  name: "Footer"
}
</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::after {
  content: "";
  display: block;
  clear: both;
}
 
.footer p {
  text-align: center;
  font-size: 12px;
}
</style>

4.3 Header.vue

 <template>
  <div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="../assets/img/head-logo.svg" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
        </li>
      </ul>
 
      <div class="right-part">
        <div>
          <span>登录</span>
          <span class="line">|</span>
          <span>注册</span>
        </div>
      </div>
    </div>
  </div>
 
</template>
 
<script>
 
export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
  },
  created() {
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;
  }
}
</script>
 
<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}
 
.header:after {
  content: "";
  display: block;
  clear: both;
}
 
.slogan {
  background-color: #eee;
  height: 40px;
}
 
.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}
 
.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;
 
}
 
.nav ul {
  padding: 15px 0;
  float: left;
}
 
.nav ul:after {
  clear: both;
  content: '';
  display: block;
}
 
.nav ul li {
  float: left;
}
 
.logo {
  margin-right: 20px;
}
 
.ele {
  margin: 0 20px;
}
 
.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
 
.ele span:hover {
  border-bottom-color: orange;
}
 
.ele span.active {
  color: orange;
  border-bottom-color: orange;
}
 
.right-part {
  float: right;
}
 
.right-part .line {
  margin: 0 10px;
}
 
.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>

4.4 HomeView.vue

 <template>
  <div class="home">
    <Header></Header>
    <Banner></Banner>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <Footer></Footer>
  </div>
</template>
 
<script>
import Banner from "@/components/Banner";
import Footer from '@/components/Footer'
import Header from "@/components/Header";
 
export default {
  name: 'HomeView',
  // created() {
  //
  //   this.$axios.get('http://127.0.0.1:8000/api/v1/home/test/', {
  //     headers: {
  //       token: 'sdfafasdf'
  //     }
  //
  //   }).then(res => {
  //     console.log(res.data.data)
  //   })
  // }
 
  components: {
    Header, Footer, Banner
  }
 
}
</script>

上一篇路飞学城项目之封装logger ，封装全局异常，开启media访问，

下一篇luffy项目之导出项目依赖、前台首页固定样式、git介绍和安装、git，github，gitee，gitlab的介绍、git工作流程、git的常用命令、回退到某个版本命令、git忽略文件。

本文作者：岳宗柯

本文链接：https://www.cnblogs.com/yuezongke/p/17491978.html

posted @ 2023-06-19 20:21 岳宗柯阅读(84) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Python学习之旅

别让世界左右你的情绪，别让情绪影响你的理性！

路飞学城项目后台主页模块设计，simpleui后台管理，轮播图接口，跨域问题详解，前台主页功能

一、后台主页模块设计

迁移,别忘记注册和回到根路径

二、simpleui后台管理

三、轮播图接口

3.1 封装自己的mixin

3.2 轮播图接口

3.3 自定义配置文件

四、跨域问题详解

3.0 自定义中间件，解决跨域问题

3.1 django-cors-headers

3.2 django-cors-headers源码

4 前台主页功能

4.1 Banner.vue

4.2 Footer.vue

4.3 Header.vue

4.4 HomeView.vue

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	# 1 创建后台主页模块（一个模块一个app）
	python ../../manage.py startapp home

	# 2 在models中写轮播图表
	-写一个基表BaseModel
	-写轮播图表

	from django.db import 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 # 这个表模型只用来继承，不用来在数据库中生成表

	from utils.common_models import BaseModel


	class Banner(BaseModel):
	# 1 id img图片地址长传时间是否删除是否显示 order
	# 把公共字段抽取到某个基表中，以后要使用，直接继承基表，扩写自己的字段就可以了---》用过的AbstractUser就是这个原理
	title = models.CharField(max_length=16, unique=True, verbose_name='名称')
	image = models.ImageField(upload_to='banner', verbose_name='图片')
	# 点击图片，调整到的路径
	# 前端跳转的地址：前端路由完整的http链接
	link = models.CharField(max_length=64, verbose_name='跳转链接')
	info = models.TextField(verbose_name='详情') # 也可以用详情表，宽高出处

	class Meta:
	db_table = 'luffy_banner'
	verbose_name_plural = '轮播图表'

	def __str__(self):
	return self.title

	1.下载：pip install django-simpleui
	2.注册 'simpleui'
	3.国际化
	LANGUAGE_CODE = 'zh-hans'

	TIME_ZONE = 'Asia/Shanghai'

	USE_I18N = True

	USE_L10N = True

	USE_TZ = False
	4.注册超级管理员
	python manage.py createsuperuser
	yzk
	yzk12345
	5.去admin.py里面注册
	from .models import Banner

	admin.site.register(Banner)


	6.去apps里面加入，录入数据
	class HomeConfig(AppConfig):
	default_auto_field = 'django.db.models.BigAutoField'
	name = 'home'
	verbose_name = '首页功能'

	7.配置文件
	MEDIA_URL = 'media/' # 以后所有的在meida文件夹下的资源自动拼接 media/


	# 正常在公司中，网站分主站和后台管理

	# 后台管理，主要是运营录入数据，使用simpleui

	from rest_framework.mixins import ListModelMixin, CreateModelMixin, UpdateModelMixin, DestroyModelMixin, \
	RetrieveModelMixin
	from utils.common_response import APIResponse


	class CommonListModelMixin(ListModelMixin):
	def list(self, request, args, *kwargs):
	res = super().list(request, args, *kwargs)
	return APIResponse(data=res.data)


	class CommonCreateModelMixin(CreateModelMixin):
	def create(self, request, args, *kwargs):
	res = super().create(request, args, *kwargs)
	return APIResponse(data=res.data) # {code:100,msg:成功，data:{}}


	class CommonUpdateModelMixin(UpdateModelMixin):
	def update(self, request, args, *kwargs):
	res = super(CommonUpdateModelMixin, self).update(request, args, *kwargs)
	return APIResponse(data=res.data)


	class CommonRetrieveModelMixin(RetrieveModelMixin):
	def retrieve(self, request, args, *kwargs):
	res = super(CommonRetrieveModelMixin, self).retrieve(request, args, *kwargs)
	return APIResponse(data=res.data)


	class CommonDestroyModelMixin(DestroyModelMixin):
	def destroy(self, request, args, *kwargs):
	res = super().destroy(request, args, *kwargs)
	return APIResponse(msg='删除成功')

	# 查询所有轮播图接口
	from rest_framework.viewsets import GenericViewSet
	from rest_framework.mixins import ListModelMixin
	from .serialzier import BannerSerializer
	from .models import Banner
	from utils.common_mixin import CommonListModelMixin as ListModelMixin


	class BannerView(GenericViewSet, ListModelMixin):
	queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
	serializer_class = BannerSerializer

	## 总路由
	urlpatterns = [
	path('admin/', admin.site.urls),
	path('api/v1/home/', include('home.urls')),
	# static 默认开启的，后期咱们会开启media文件夹，除此之外的其它文件夹，尽量不要开放，让外部访问
	path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),

	]

	# 分路由
	from rest_framework.routers import SimpleRouter

	router = SimpleRouter()
	from .views import BannerView

	router.register('banner', BannerView, 'banner')
	urlpatterns = [
	# path('admin/', admin.site.urls),

	]
	urlpatterns += router.urls

	from rest_framework import serializers
	from .models import Banner


	class BannerSerializer(serializers.ModelSerializer):
	class Meta:
	model = Banner
	fields = ['id', 'image', 'title', 'link']

	# 通过配置文件控制显示多少条轮播图
	# 使用步骤
	1 在settings下新建：common_settings.py
	BANNER_COUNT = 3
	2 在dev.py中加入
	from .common_settings import *
	3 在轮播图接口上
	class BannerView(GenericViewSet, ListModelMixin):
	queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
	serializer_class = BannerSerializer

	# 以后只要前后端分离项目，都会出现跨域问题，咱们要解决

	# 同源策略
	同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现

	请求的url地址,必须与浏览器上的url地址处于同域上：也就是[域名],[端口],[协议]相同.
	http://127.0.0.1:8080
	ftf://127.0.0.1:8080

	比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据

	浏览器上就会报错，个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

	请求发送，服务的执行，数据也正常返回，只是被浏览器拦截了

	# 正因为同源策略的存在，咱们写前后端分离的项目，无法正常获取到数据


	# 解决跨域问题：
	1 jsonp 跨域（不了解）
	2 跨域资源共享（CORS）后端技术
	3 Nginx代理


	# CORS：跨域资源共享
	CORS需要浏览器和服务器同时支持，所有浏览器都支持该功能
	只需要服务的处理即可：只需要在在响应头中加入固定的头就实现cors---》比如在响应头中加入Access-Control-Allow-Origin='*'---->get请求就没有跨域了---》但是put请求还会有


	# 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解决跨域，就是再响应头中加入固定的一些东西，专门写个中间件
	res['Access-Control-Allow-Headers'] = 'token'
	res['Access-Control-Allow-Methods'] = 'DELETE'
	res['Access-Control-Allow-Origin'] = 'http://192.168.1.252:8080'





	### 补充：######
	前端访问的后端地址，一定要准确

	##### common_mideleware.py
	from django.utils.deprecation import MiddlewareMixin


	### 自定义中间件解决跨域问题---》以后其它框架都是这个原理---》django上有人做了
	class CorsMiddleware(MiddlewareMixin):
	def process_response(self, request, response):
	if request.method == 'OPTIONS':
	response['Access-Control-Allow-Headers'] = 'token'
	response['Access-Control-Allow-Methods'] = 'DELETE'
	response['Access-Control-Allow-Origin'] = '*'
	return response

	### 配置文件配置中间件
	MIDDLEWARE = [
	'utils.common_mideleware.CorsMiddleware'
	]

	####使用pip安装
	pip install django-cors-headers
	#####添加到setting的app中
	INSTALLED_APPS = (
	...
	'corsheaders',
	...
	)
	#### 添加中间件
	MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware',
	...
	]
	#### 4、setting下面添加下面的配置
	CORS_ORIGIN_ALLOW_ALL = True
	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',
	'token'
	)

	# 核心代码再中间件的---》process_response 3.0.14 版本
	class CorsMiddleware(MiddlewareMixin):
	def process_response(self, request, response):
	if (
	not conf.CORS_ALLOW_ALL_ORIGINS
	and not self.origin_found_in_white_lists(origin, url)
	and not self.check_signal(request)
	):
	return response
	if conf.CORS_ALLOW_ALL_ORIGINS and not conf.CORS_ALLOW_CREDENTIALS:
	response[ACCESS_CONTROL_ALLOW_ORIGIN] = "*"
	else:
	response[ACCESS_CONTROL_ALLOW_ORIGIN] = origin
	if request.method == "OPTIONS":
	response[ACCESS_CONTROL_ALLOW_HEADERS] = ", ".join(conf.CORS_ALLOW_HEADERS)
	response[ACCESS_CONTROL_ALLOW_METHODS] = ", ".join(conf.CORS_ALLOW_METHODS)
	return response

	<template>
	<div>
	<el-carousel height="400px">
	<el-carousel-item v-for="item in banner_list" :key="item">
	<!-- router-link只能跳内部，不能跳外部-->

	<router-link :to="item.link" v-if="item.link.indexOf('http:')<0">
	<img :src="item.image" :alt="item.title">
	</router-link>
	<a :href="item.link" v-else>
	<img :src="item.image" :alt="item.title">
	</a>

	</el-carousel-item>
	</el-carousel>
	</div>
	</template>

	<script>
	export default {
	name: "Banner",
	data() {
	return {banner_list: []}
	},
	created() {
	this.$axios.get(`${this.$settings.BASE_URL}home/banner/`).then(res => {
	this.banner_list = res.data.data
	})
	}
	}
	</script>

	<style scoped>
	.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
	}


	.el-carousel__item {
	height: 400px;
	min-width: 1200px;
	}

	.el-carousel__item img {
	height: 400px;
	margin-left: calc(50% - 1920px / 2);
	}
	</style>

	<template>
	<div class="footer">
	<ul>
	<li>关于我们</li>
	<li>联系我们</li>
	<li>商务合作</li>
	<li>帮助中心</li>
	<li>意见反馈</li>
	<li>新手指南</li>
	</ul>
	<p>Copyright © luffycity.com版权所有 \| 京ICP备17072161号-1</p>
	</div>
	</template>

	<script>
	export default {
	name: "Footer"
	}
	</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::after {
	content: "";
	display: block;
	clear: both;
	}

	.footer p {
	text-align: center;
	font-size: 12px;
	}
	</style>

	<template>
	<div class="header">
	<div class="slogan">
	<p>老男孩IT教育 \| 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
	</div>
	<div class="nav">
	<ul class="left-part">
	<li class="logo">
	<router-link to="/">
	<img src="../assets/img/head-logo.svg" alt="">
	</router-link>
	</li>
	<li class="ele">
	<span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
	</li>
	<li class="ele">
	<span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
	</li>
	<li class="ele">
	<span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
	</li>
	</ul>

	<div class="right-part">
	<div>
	<span>登录</span>
	<span class="line">\|</span>
	<span>注册</span>
	</div>
	</div>
	</div>
	</div>

	</template>

	<script>

	export default {
	name: "Header",
	data() {
	return {
	url_path: sessionStorage.url_path \|\| '/',
	}
	},
	methods: {
	goPage(url_path) {
	// 已经是当前路由就没有必要重新跳转
	if (this.url_path !== url_path) {
	this.$router.push(url_path);
	}
	sessionStorage.url_path = url_path;
	},
	},
	created() {
	sessionStorage.url_path = this.$route.path;
	this.url_path = this.$route.path;
	}
	}
	</script>

	<style scoped>
	.header {
	background-color: white;
	box-shadow: 0 0 5px 0 #aaa;
	}

	.header:after {
	content: "";
	display: block;
	clear: both;
	}

	.slogan {
	background-color: #eee;
	height: 40px;
	}

	.slogan p {
	width: 1200px;
	margin: 0 auto;
	color: #aaa;
	font-size: 13px;
	line-height: 40px;
	}

	.nav {
	background-color: white;
	user-select: none;
	width: 1200px;
	margin: 0 auto;

	}

	.nav ul {
	padding: 15px 0;
	float: left;
	}

	.nav ul:after {
	clear: both;
	content: '';
	display: block;
	}

	.nav ul li {
	float: left;
	}

	.logo {
	margin-right: 20px;
	}

	.ele {
	margin: 0 20px;
	}

	.ele span {
	display: block;
	font: 15px/36px '微软雅黑';
	border-bottom: 2px solid transparent;
	cursor: pointer;
	}

	.ele span:hover {
	border-bottom-color: orange;
	}

	.ele span.active {
	color: orange;
	border-bottom-color: orange;
	}

	.right-part {
	float: right;
	}

	.right-part .line {
	margin: 0 10px;
	}

	.right-part span {
	line-height: 68px;
	cursor: pointer;
	}
	</style>

	<template>
	<div class="home">
	<Header></Header>
	<Banner></Banner>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<Footer></Footer>
	</div>
	</template>

	<script>
	import Banner from "@/components/Banner";
	import Footer from '@/components/Footer'
	import Header from "@/components/Header";

	export default {
	name: 'HomeView',
	// created() {
	//
	// this.$axios.get('http://127.0.0.1:8000/api/v1/home/test/', {
	// headers: {
	// token: 'sdfafasdf'
	// }
	//
	// }).then(res => {
	// console.log(res.data.data)
	// })
	// }

	components: {
	Header, Footer, Banner
	}

	}
	</script>

Python学习之旅

别让世界左右你的情绪，别让情绪影响你的理性！

路飞学城项目 后台主页模块设计，simpleui后台管理，轮播图接口，跨域问题详解，前台主页功能

一、后台主页模块设计

迁移,别忘记注册和回到根路径

二、simpleui后台管理

三、轮播图接口

3.1 封装自己的mixin

3.2 轮播图接口

3.3 自定义配置文件

四、跨域问题详解

3.0 自定义中间件，解决跨域问题

3.1 django-cors-headers

3.2 django-cors-headers源码

4 前台主页功能

4.1 Banner.vue

4.2 Footer.vue

4.3 Header.vue

4.4 HomeView.vue

公告

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

路飞学城项目后台主页模块设计，simpleui后台管理，轮播图接口，跨域问题详解，前台主页功能