python之路 78 路飞项目、路飞前台全局css，全局配置文件、安装axios、vue-cookies、elementui、bootstrap和jq 、后台主页模块表设计、后台主页模块轮播图接口、录入数据、跨域问题详解
项目演示
登录
系统管理
用户管理
角色管理
菜单管理
部门管理
岗位管理
最核心
创建了用户，授予了角色，因为角色有权限，这个用户就有权限
如果这个用户有权限，进入到系统，就能看到相关的操作，如果没有权限，就不能操作
路飞前台全局css，全局配置文件
整理项目
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>
其他页面组件和小组件都删除
全局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中配置
使用全局css样式，只需要导入就会生效
import '@/assets/css/global.css'
全局js
向后端发送请求，请求地址测试阶段127.0.0.1：8000--》后期上线，地址要变，如果在组件中把地址写死，以后，要改，每个都要改
写一个全局js，js中有个url地址，以后所有组件中发送请求时，都是用这个url地址
导入导出
使用步骤：
第一步：新建
assets --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.$settings.BASE_URL this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
})
安装axios
跟后端交互
# 使用步骤：
第一步：安装 cnpm install axios -S
第二步：把axios放到vue原型中,main.js中
import axios from "axios";
Vue.prototype.$axios=axios
第三步：在任意组件中使用
this.$ajax.get()
安装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
# 使用步骤：
第一步：安装 cnpm install element-ui -S
第二步：main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步：复制，粘贴
安装bootstrap和jq
咱们项目，没有使用bootstrap，但是有同学想知道怎么引入
bootstrap引入必须引入jquery
使用步骤：
第一步：安装 :
cnpm install jquery --save-dev
cnpm install @popperjs/core --save-dev
cnpm install bootstrap --save-dev
第二步：main.js引入配置
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
# 只有这两行代码 ，不需要全局注册 $ 等语句
第三步：配置 jQuery
在 vue.config.js 中，写如下代码（如果没有 vue.config.js ，则在 package.json 同级目录下手动新建）
// defineConfig 这里是vue3 的默认代码
const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack")
module.exports = defineConfig({
// 配置插件参数
configureWebpack: {
plugins: [
// 配置 jQuery 插件的参数
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
})
第四步：使用插件
一个博客讲解比较全
https://blog.csdn.net/qq_39549013/article/details/126346663
后台主页模块表设计
分析完原型图，首页要写的接口
轮播图接口
推荐课程接口(暂时没写)
推荐老师(没有)
学员评论(没有)
创建首页app home
来到apps文件夹下执行
python ../../manage.py startapp home
创建表models中 轮播图表 Banner
创建表步骤
第一步：在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=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
后台主页模块轮播图接口
轮播图接口，给首页用
序列化类代码
from rest_framework import serializers
from .models import Banner
class BannerSerializer(serializers.ModelSerializer):
class Meta:
model = Banner
fields = ['id', 'image', 'title', 'link']
视图代码
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={{},{},{}}}
路由代码
总路由 做路由分发
from django.urls import path, include
urlpatterns = [
# 路由分发
path('api/v1/home/', include('home.urls')),
# path('api/v1/user/', include('user.urls')),
]
home app 路由
from rest_framework.routers import SimpleRouter
from . import views
router = SimpleRouter()
router.register('banner',views.BannerView,'banner')
urlpatterns = [
]
urlpatterns += router.urls
访问
http://127.0.0.1:8000/api/v1/home/banner/
录入数据
主站前后端分离
后台管理使用django 的admin 做的---》simpleui
使用步骤：
第一步：安装simpleui
pip install django-simpleui
第二步：注册app
第三步：录入数据
http://127.0.0.1:8000/admin
跨域问题详解
# 前端发送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代理服务器（）
# cors： xss，csrf
跨域资源共享：后端技术，就是在响应头中加入 固定的头，就会运行前端访问了
# 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
第三方模块帮咱们解决了跨域
第一步：安装
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号