标签：verbose name settings models js 跨域 luffy import 轮播
目录前端项目创建
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。