luffy前台项目创建

标签：verbose models 创建 --- 前台 luffy import class name

luffy前端配置

1. 跟后端交互：axios

　　1. 先安装：cnpm install -S axios

以后想发送ajax请求，必须导入使用，我们可以把axios放到vue实例中，以后任意组件中 this.$axios.get()，就可以使用了

　　2. 在 main.js中加：　　

import axios from 'axios'
Vue.prototype.$axios = axios;

如图：

2. 操作cookie：vue-cookies

　　1. 先安装：cnpm install -S vue-cookies

　　2. 在 main.js中加：　　　

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

3. ui库：elementui

　　1. 先安装：cnpm install -S element-ui

　　2. 在main.js中加：　　

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';  // 全局都会有这个css的样式
Vue.use(ElementUI);

如图：

4. 去掉标签的默认样式

　　1. 编写全局css：assets/css/global.css ---》在assets文件下新建一个css文件，然后建一个global.css 文件

　　2. 在main.js中加：

　　　　import '@/assets/css/global.css'　

5. 全局配置文件

　　1. 写一个settings.js文件　　　　

 export  default {
        BASE_URL:'http://127.0.0.1:8000/'
    }

如图：

　　2. 在main.js中加：　

import settings from "@/assets/js/settings";
Vue.prototype.$setting = settings

如图：

2. 跨域问题

1. 前后端打通 ----》出现CORS policy 错误

2. 同源策略

　　同源策略（Same origin policy）是一种约定,约定了请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同，如果违背了这个约定，浏览器就会报错

　　请求正常发送成功，服务端也响应了，但是回来到浏览器的时候，报错，被浏览器的同源策略拦截了

3. 跨域问题出现的原因，源自于浏览器的同源策略　

4. 只有前后端分离的web项目，才会出，才需要解决跨域问题

5. CORS（跨域资源共享）---》是一个后端技术--》后端只需要在响应头中加入固定的响应头，前端就不禁止了

6. CORS请求分成两类（浏览器发送请求之前判断）

　　- 简单请求：

　　　　只发送一次请求,就是真正的请求。

　　 -非简单请求：

　　　　先发送一个options 预检请求，服务端如果写了cors，再发送真正的请求，如果没有写cors，浏览就不再发送真正的请求了

7.只要同时满足以下两大条件，就属于简单请求。

　　1. 请求方法是以下三种方法之一：HEAD、GET、POST

　　2. HTTP的头信息不超出以下几种字段：

　　　　Accept-Language

　　　　Content-Language

　　　　Last-Event-ID

　　　　Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

2.1 自己解决跨域（中间件）

from django.utils.deprecation import MiddlewareMixin
class CORSMiddleWare(MiddlewareMixin):
    def process_response(self, request, response):
        # 简单请求
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有客户端
        # 非简单请求
        if request.method == 'OPTIONS':
            # res['Access-Control-Allow-Methods'] = 'DELETE,PUT'
            response['Access-Control-Allow-Methods'] = '*'
            response['Access-Control-Allow-Headers'] = '*'
        return response

2.2 第三方解决跨域

1. 下载：pip install django-cors-headers

安装这个模块时，会自动安装最新版本的Django，根据自己需要选择Django版本

2. 注册app　　

INSTALLED_APPS = (
　　...
　　'corsheaders',
　　...
)

3. 加中间件

MIDDLEWARE = [  
    ...    'corsheaders.middleware.CorsMiddleware',
    ...
]

如图：

4. 配置文件

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. 后端数据库迁移

3.1 用户板块，用户表迁移

1. 用户表，使用auth的user表，自己写

　　- 如果用的是auth的user表，必须在迁移之前，就定好，扩写的要写完

2. 我们的用户表，用的就是基于auth的user表，扩写，我们先写用户表

　　-1. 创建用户表app

　　　　python ../../manage.py startapp user

　　-2. 创建用户表，models.py中

from django.contrib.auth.models import AbstractUser
        class User(AbstractUser):
            # 扩写，加入手机号，加入头像
            mobile = models.CharField(max_length=11, unique=True)
            # 需要pillow包的支持  pip install pillow
            icon = models.ImageField(upload_to='icon', default='icon/default.png')
            class Meta:
                db_table = 'luffy_user'
                verbose_name = '用户表'
                verbose_name_plural = verbose_name

            def __str__(self):
                return self.username

　　-3. dev.py 中注册　

　　INSTALLED_APPS = [
　　　　'user',
　　]

　　 AUTH_USER_MODEL='user.User'

　　-4. 进行迁移，执行两条迁移命令

4. 后台主页功能

4.1 软件开发模式

1. 瀑布开发模式

　　-架构，数据库设计---》分任务开发(周期很长，可能半年)---》测试---》上线

2. 敏捷开发(devops)

　　-架构设计--》很多板块

　　-开发某个版块，再设计相关板块的数据库 # 一周左右

　　-开发某个板块

　　-测试测试该板块

　　-运维上线该板块

　　 -开发另一个版本

4.2 轮播图表

1.根据原型图，分析出首页需要配合俩接口

　　-轮播图接口(要写)

　　　　-查询所有轮播图

　　-推荐课程接口(暂时先不写)

2. 设计表：

　　轮播图表：Banner

3. 写轮播图接口

　　-查询所有轮播图

4. 建立轮播图表：

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_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

4.3 轮播图接口

视图类：

#### 轮播图接口
from rest_framework.generics import GenericAPIViewfrom rest_framework.mixins import ListModelMixinfrom rest_framework.generics import ListAPIViewfrom rest_framework.viewsets import ViewSetMixin, GenericViewSetfrom .models import Bannerfrom .serializer import BannerSerializerfrom django.conf import settings

# class BannerView(ViewSetMixin,ListAPIView): # 自动生成路由
# class BannerView(ViewSetMixin,GenericAPIView,ListModelMixin): # 自动生成路由

class BannerView(GenericViewSet, ListModelMixin):  # 自动生成路由
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
    serializer_class = BannerSerializer

序列化类：

from rest_framework import serializers
from .models import Banner

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

路由：

from django.contrib import admin
from django.urls import path
from home import views  # pycharm报错，但实际上不报错 ，只需要把加入到环境变量的路径都做成source root即可
from rest_framework.routers import SimpleRouter
from .views import BannerView

router = SimpleRouter()
# 127.0.0.1:8080/api/v1/home/banner/--- get
router.register('banner', BannerView, 'banner')

urlpatterns = [
]
urlpatterns += router.urls

配置文件：

 导入用户配置
from .user_settings import *

### user_settings.py
# 用户自己配置，单独放到一个py文件中
BANNER_COUNT=3

# 后续可能还用别的配置

4.4 补充

app 后端---》app一打开---》广告页---》可以滑动---》点击广告页---》一种浏览器打开页面跳转，一种情况打开一个他们app内的页面

原理就是轮播图接口

5. 后台管理

任何项目，都会有后台管理，使用 django+vue ---》写---》django的admin做后台管理---》simpleui美化

1. 下载simpleui---》app中注册

2. 创建一个root用户，后台登录

3. 后台登录，录入数据：admin中注册这个表

4. 默认情况文件传到根路径下

　　需要配置：以后都会放到meida文件夹下 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

5. 接口中不带meida 路径的：配置文件中

　　MEDIA_URL = 'media/' # 取出的文件地址，拼接上media这个目录

6. 前端能访问图片

　　path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),

标签：verbose,models,创建,---,前台,luffy,import,class,name
From： https://www.cnblogs.com/Lucky-Hua/p/17753393.html

luffy前端配置

1. 跟后端交互：axios

2. 操作cookie：vue-cookies

3. ui库：elementui

4. 去掉标签的默认样式

5. 全局配置文件

2. 跨域问题

1. 前后端打通 ----》出现CORS policy 错误

2. 同源策略

3. 跨域问题出现的原因，源自于浏览器的同源策略

4. 只有前后端分离的web项目，才会出，才需要解决跨域问题

5. CORS（跨域资源共享）---》是一个后端技术--》后端只需要在响应头中加入固定的响应头，前端就不禁止了

6. CORS请求分成两类（浏览器发送请求之前判断）

7.只要同时满足以下两大条件，就属于简单请求。

2.1 自己解决跨域（中间件）

2.2 第三方解决跨域

3. 后端数据库迁移

3.1 用户板块，用户表迁移

4. 后台主页功能

4.1 软件开发模式

4.2 轮播图表

4.3 轮播图接口

视图类：

序列化类：

路由：

配置文件：

4.4 补充

原理就是轮播图接口

5. 后台管理

相关文章

赞助商

阅读排行

luffy前台项目创建

luffy前端配置

1. 跟后端交互：axios

2. 操作cookie：vue-cookies

3. ui库：elementui

4. 去掉 标签的默认样式

5. 全局配置文件

2. 跨域问题

1. 前后端打通 ----》 出现CORS policy 错误

2. 同源策略

3. 跨域问题出现的原因，源自于浏览器的同源策略

4. 只有前后端分离的web项目，才会出，才需要解决跨域问题

5. CORS（跨域资源共享）---》是一个后端技术--》后端只需要在响应头中加入固定的响应头，前端就不禁止了

6. CORS请求分成两类（浏览器发送请求之前判断）

7.只要同时满足以下两大条件，就属于简单请求。

2.1 自己解决跨域（中间件）

2.2 第三方解决跨域

3. 后端数据库迁移

3.1 用户板块，用户表迁移

4. 后台主页功能

4.1 软件开发模式

4.2 轮播图表

4.3 轮播图接口

视图类：

序列化类：

路由：

配置文件：

4.4 补充

原理就是轮播图接口

5. 后台管理

相关文章

赞助商

阅读排行

4. 去掉标签的默认样式

1. 前后端打通 ----》出现CORS policy 错误

3. 跨域问题出现的原因，源自于浏览器的同源策略　