其他分享
首页 > 其他分享> > luffy-3 前端项目创建+第三方+后端首页轮播图接口+跨域问题详解

luffy-3 前端项目创建+第三方+后端首页轮播图接口+跨域问题详解

作者:互联网

目录

前端项目创建

vue create luffycity

重构项目目录

"""
├── luffycity
	├── public/          			# 项目共有资源
		├── favicon.ico				# 站点图标
		└── index.html				# 主页
    ├── src/      					# 项目主应用,开发时的代码保存
    	├── assets/      			# 前台静态资源总目录
    		├── css/				# 自定义css样式
    			└── global.css		# 自定义全局样式
    		├── js/					# 自定义js样式
				└── settings.js		# 自定义配置文件
			└── img/				# 前台图片资源
		├── components/    			# 小组件目录
		├── views/  				# 页面组件目录
		├── App.vue	    			# 根组件
		├── main.js	    			# 入口脚本文件
		├── router    		
			└── index.js			# 路由脚本文件
		store	    		
			└── index.js			# 仓库脚本文件
    ├── vue.config.js	    		# 项目配置文件
    └── *.*							# 其他配置文件
"""

文件修订

App.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

router / index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

Home.vue

<template>
    <div class="home">
    </div>
</template>

<script>
    export default {
        name: 'home',
        components: {
        },
    }
</script>

前端全局样式和js配置

在vue中,有一些默认的样式及js配置,我们不需要

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'

settings.js

跟后端交互,有个后端地址,设置成一个变量,以后要换,只要改这个变量即可

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

main.js中引入

// 配置全局自定义设置
import settings from '@/assets/js/settings'
//把settings对象,放到了Vue的原型中,相当于放到了Vue类中,类可以拿到,对象也可以拿到
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中:this.$settings.base_url + '再拼接具体后台路由'

前端使用axios,cookies,elementui

axios

用于和后端交互,ajax传输数据

-第一步:安装
cnpm install axios -S

-第二步:在main.js中引入
import axios from 'axios'
Vue.prototype.$axios=axios

-第三步:使用
this.$axios.get()

cookies

前端自己存放从后端返回的数据

-第一步:安装
cnpm install vue-cookies -S

-第二步:在main.js中引入
import cookies from 'vue-cookies'
Vue.prototype.$cookies=cookies

-第三步:使用
this.$cookies.set('key','value',秒)
this.$cookies.get('key')

elementui

样式库

-第一步:安装
cnpm install element-ui -S

-第二步:在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

-第三步:使用
直接去elementui官网复制

后端主页模块接口

首页轮播图接口

1.创建一个'home' app

2.在models中创建轮播图表

3.轮播图表中的很多字段会与其他表重复,所以创建一个基表,以后可以继承它,在公共代码utils下创建一个models.py
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=False, verbose_name='是否上架')
    orders = models.IntegerField(verbose_name='优先级')

    class Meta:
        abstract = True  # 是否在数据库中生成表,True表示这个表只用来继承,不会生成

4.在'home'app的models中banner表继承基表
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 = '轮播图表'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title
    
5.迁移
python manage.py makemigrations
python manage.py migrate

跨域问题详解

前后端分离项目中后,前端向后端发送请求,会被禁止,是因为同源策略:它是浏览器的安全策略,浏览器不允许向不同的域发送请求获取数据
同一个域(同源):ip地址和端口号完全一致
请求发出去,后端执行了,但是到前端浏览器,被拦截了,不让进
通过CORS(跨域资源共享)解决-----服务端中,只要在响应头中加入固定的东西,浏览器就能允许数据进入

不使用第三方

# 写个中间件---process_resposne中
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
        response["Access-Control-Allow-Origin"] = "*"
        return response

使用第三方

-第一步:安装---装完确认以下django版本是否还是2.2.2,可能会将django升到最新版
    pip3 install django-cors-headers

-第二步:把它加入到app中
        INSTALLED_APPS = (
        ...
        'corsheaders',
        ...
    )

-第三步:加入中间件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',  #cors的中间件
]
-第四步:配置文件
    CORS_ORIGIN_ALLOW_ALL = True 
    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
        'VIEW',
    )

    CORS_ALLOW_HEADERS = (
        'accept-encoding',
        'authorization',
        'content-type',
        'origin',
        'user-agent',

    )

自定义配置

django中有配置文件,项目自己会有一些配置信息,新增一个配置文件

第一步:在settings文件夹下新建common_settings.py
第二步:写入 BANNER_COUNT = 3
第三步:在配置文件中导入
from settings.common_settings import *

标签:verbose,name,settings,models,js,跨域,luffy,import,轮播
来源: https://www.cnblogs.com/RainKz/p/16452710.html