路飞前台全局css，全局配置文件、安装axios、安装vue-cookies、安装elementui、后台主页模块表设计、后台主页模块轮播图接口、录入数据、 跨域问题详解
一、路飞前台全局css，全局配置文件
1、整理项目
因为原本的vue所写的页面我们并不需要，因此我们需要做些修改
步骤
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
router/index.js
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
HomeView.vue
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
其它页面组件和小组件都删除
2、全局css
正常写前端项目，需要去掉所有标签的默认样式，css
步骤
-
第一步：
新建一个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中配置
import '@/assets/css/global.css'
3、全局js
向后端发送请求，请求地址测试阶段 127.0.0.1:8000 --->后期上线，地址要变，如果在组件中吧地址写死，以后，要改，每个都要改
写一个全局js，js中有个url地址，以后所有组件中发送请求时，都是用这个url地址
步骤
-
第一步：
在assets新建一个js文件夹，然后再js文件夹中新建一个settings.js文件
export default { BASE_URL:'http://127.0.0.1:8000/api/v1' } -
第二步：
在main.js中引入
// 引入settings.js,把settings对象放入到vue的原型中 import settings from "@/assets/js/settings"; Vue.prototype.$settings = settings -
第三步：
在任意组件中使用
this.$settings.BASE_URL // 以后使用直接按照下面方法拼接 this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{ })
二、安装axios
axios是为了跟后端交互相当于我们之前使用的ajax
因为我们是前后端分离项目需要前端与后端交互，所以我们需要安装axios
使用步骤
-
第一步：
命令行安装
cnpm install axios -S安装完要去package.json文件中查看是否下载成功并注册
-
第二步：
把axios放到vue原型中,main.js中
import axios from "axios"; Vue.prototype.$axios=axios -
第三步：
在任意组件中使用
this.$axios=axios
三、安装vue-cookies
后期登录成功，token存在cookie中
使用步骤
第一步：安装
cnpm install vue-cookies -S
第二步：把vue-cookies放到vue原型中,main.js中
import cookies from "vue-cookies";
Vue.prototype.$cookies=cookies
第三步：在任意组件中使用
this.$cookies.set()
this.$cookies.get()
四、安装elementui
我们的前端样式需要使用到elementui
使用方式可以参照elementui官方文档：https://element.eleme.cn/#/zh-CN
第一步：安装
cnpm cnpm install element-ui -S
第二步：main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步：高级CV(复制粘贴😄)
根据官方文档使用就行
五、后台主页模块表设计
1、分析完原型图，首页需要写的接口
-轮播图接口
-推荐课程接口
-推荐老师(没有)
-学员评论(没有)
2、创建首页(home)app
来到后端apps文件夹下执行
python ../../manage.py startapp home
3、创建表
在models中创建轮播图表 Banner
步骤
-
第一步：在utils下新建common_model.py
为什么要新建common_model.py，而不是直接在models.py中直接建表
首先建表的时候我们要分析这个表有哪些字段，经分析轮播图表需要以下一些字段
真正的图片地址 标题 点击图片的跳转链接 是否删除(软删除) 是否显示 优先级 创建时间 更新时间我们发现这些字段有一些可以作为公共字段，
是否删除(软删除) 是否显示 优先级 创建时间 更新时间后面其他涉及有图片的表可以用的到，我们可以将这些字段单独设置成一个公共的表，后期其他的表可以继承，但是又不能直接写在models.py中，因为表迁移的时候会创建这个表，我们只让它用作继承，不用来在数据库中创建
所以在utils下新建common_model.py
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_add=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 # 只用来继承，不用来在数据库创建 -
第二步：在home的app中的models.py中写入
from django.db import models from utils.common_model import BaseModel class Banner(BaseModel): 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='跳转链接') info = models.TextField(verbose_name='详情') class Meta: db_table = 'luffy_banner' verbose_name_plural = '轮播图表' def __str__(self): return self.title -
第三步：迁移表
python manage.py makemigrations python manage.py migrate
六、后台主页模块轮播图接口
轮播图接口，给首页用
1、视图
views.py
from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from .models import Banner
from .serializer import BannerSerializer
from utils.common_response import APIResponse
class BannerView(GenericViewSet, ListModelMixin):
queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')
serializer_class = BannerSerializer
def list(self, request, *args, **kwargs):
res = super().list(request, *args, **kwargs)
return APIResponse(data=res.data) # # {code:100,msg:成功，data=[{},{}]}
2、序列化类
serializer.py
from rest_framework import serializers
from .models import Banner
class BannerSerializer(serializers.ModelSerializer):
class Meta:
model = Banner
fields = ['id', 'image', 'title', 'link']
3、路由
这里的路由需要在home的app里面新建一个urls.py
from rest_framework.routers import SimpleRouter
from . import views
router = SimpleRouter()
# 访问 http://127.0.0.1:8000/api/v1/home/banner ---->get 请求就可以查询所有轮播图
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
]
urlpatterns += router.urls
七、录入数据
主站前后端分离
后台管理使用django 的admin做的---》simpleui
第一步：安装simpleui
pip install django-simpleui
第二步：注册app
第三步:录入数据
http://127.0.0.1:8000/admin
八、 跨域问题详解
1、前端发送ajax请求，到后端，会有跨域的拦截
-
出现的原因:
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
-请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. -发送ajax请求的地址，必须跟浏览器上的url地址处于同域上 域[域名，地址，端口，协议] -请求成功，数据库返回，但是浏览器拦截 -
补充：浏览器中输入域名，没有加端口
-www.baidu.com---->dns--->解析成地址 192.168.2.3----》没有加端口，默认是80 -dns解析，先找本地的host文件 -可以修改本地的host做映射 -
由于同源策略的存在，不允许跨域访问，解决这个问题
-方式一CORS：后端代码控制，咱们采用的方式 -Nginx反向代理 （常用） -JSONP：很老，不会用了，只能发get请求 -搭建Node代理服务器（）
2、cors：
跨域资源共享：后端技术，就是在响应头中加入 固定的头，就会运行前端访问了
-
CORS基本流程
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错 -
什么是简单请求，什么是非简单请求
符合如下条件，就是简单请求
(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演示简单和非简单请求
-如果是简单，直接发送真正的请求 -如果是非简单，先发送options，如果运行，再发真正的 -
自己解决跨域问题---》中间件
from django.utils.deprecation import MiddlewareMixin class CorsMiddleWare(MiddlewareMixin): def process_response(self,request,response): if request.method=="OPTIONS": # 解决非简单请求的请求头 #可以加* response["Access-Control-Allow-Headers"]="*" # 允许前端的地址，所有请求头允许 response["Access-Control-Allow-Origin"] = "*" return response
3、 第三方模块帮咱们解决了跨域
-
第一步：安装
pip install django-cors-headers -
第二步：配置app
INSTALLED_APPS = [ 'corsheaders' ] -
第三步：配置中间件
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ] -
第四步：在配置文件配置
# 允许所有域 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', )
浙公网安备 33010602011771号