day76:luffy:项目前端环境搭建&轮播图的实现

发布时间：2020-12-20 09:58:06 所属栏目：Python 来源：网络整理

导读：目录 1.项目前端环境搭建 1.创建项目目录 2.前端初始化全局变量和全局方法 3.跨域CORS 4.axios配置 2.轮播图功能的实现 1.安装依赖模块 2.上传文件相关配置 3.注册home子应用 4.创建轮播图的model模型 5.创建Banner的序列化器 6.创建Banner的视图类 7.配置Ba

1.项目前端环境搭建

项目后端环境搭建:项目后端环境搭建传送门

1.创建项目目录

cd 项目目录
vue init webpack lufei_pc

2.前端初始化全局变量和全局方法

1.在src目录下创建settings.js站点开发配置文件

// 前端连接后端接口的url
export default {
  Host:"http:/www.lyapi.com:8001",}

2.在main.js引入setting

import settings from "./settings"
Vue.prototype.$settings = settings;   将settings中的内容作为vue的属性，以后就不用每次都导包了

3./static/css/reset.css

把App.vue的style标签的css代码放到static外部目录下引用过来

main.js

import "../static/css/reset.css";

/static/css/reset.css

body{
    margin: 0;
    padding: 0;
  }
  ul{
    list-style: none;
  li{ none;
  }
  /*.el-header{*/
    width: 1200px;}*/
  input,select,textarea{
    border:
    outline: none;
  }
  a{
    text-decoration:
    color: #4a4a4a;
  }

3.跨域CORS

1.为前端和后端配置假域名

1.我们现在为前端和后端分别设置两个不同的域名

位置	域名
前端	www.lycity.com
后端	`www.lyapi.com`

2.编辑/etc/hosts文件，可以设置本地域名

sudo vim /etc/hosts

3.在文件中增加两条信息

127.0.0.1   localhost
   www.lyapi.com
0.1   www.lycity.com

4.通过浏览器访问drf项目,会出现以下错误信息

可以通过settings/dev.py的ALLOWED_HOSTS,设置允许访问

# 设置哪些客户端可以通过地址访问到后端
ALLOWED_HOSTS = [
    'www.lyapi.com'
    www.lycity.com', 客户端网址也要，将来客户端要访问到服务端的 
]

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持

否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。

2.使用django-cors-headers扩展

1.安装

pip install django-cors-headers

2.添加应用

INSTALLED_APPS = (
    ...
    corsheaders'
MIDDLEWARE =corsheaders.middleware.CorsMiddleware 放在中间件的最上面，就是给响应头加上了一个响应头跨域
    ...
]

4.需要添加白名单，确定一下哪些客户端可以跨域

 CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    'www.luffycity.cn:8080',#如果这样写不行的话，就加上协议(http://www.luffycity.cn:8080，因为不同的corsheaders版本可能有不同的要求)
    http://www.luffycity.cn:8080
)
CORS_ALLOW_CREDENTIALS = False   是否允许ajax跨域请求时携带cookie，False表示不用，我们后面也用不到cookie，所以关掉它就可以了，以防有人通过cookie来搞我们的网站

3.axios配置

完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。

前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。

前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]

1.安装axios

npm i axios -S --registry https://registry.npm.taobao.org

2.在main.js中引用 axios插件

import axios from 'axios';  从node_modules目录中导入包
// 客户端配置是否允许ajax发送请求时附带cookie，false表示不允许
axios.defaults.withCredentials = false;

Vue.prototype.$axios = axios;  把对象挂载vue中

注意:如果你拷贝前端vue-cli项目到咱们指定目录下，如果运行起来有问题，一些不知名的错误，那么就删除node_modules文件件，然后在项目目录下执行npm install 这个指令，重新按照package.json文件夹中的包进行node_modules里面包的下载

2.轮播图功能的实现

1.安装依赖模块

pip install pillow

2.上传文件相关配置

1.dev.py

 访问静态文件的url地址前缀
STATIC_URL = /static/'
 设置django的静态文件目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static")
]

 项目中存储上传文件的根目录[暂时配置]，注意，uploads目录需要手动创建否则上传文件时报错
MEDIA_ROOT=os.path.join(BASE_DIR,uploads)
 访问上传文件的url地址前缀
MEDIA_URL =/media/"

2.总路由urls.py

from django.urls import re_path
from django.conf  settings
from django.views.static  serve

urlpatterns = [
      ...
    re_path(rmedia/(?P<path>.*)document_root: settings.MEDIA_ROOT}),]

3.注册home子应用

因为当前功能是drf的第一个功能，所以我们先创建一个子应用home，创建在luffy/apps目录下

注册home子应用，因为子应用的位置发生了改变，所以为了原来子应用的注册写法，所以新增一个导包路径

 Build paths inside the project like this: os.path.join(BASE_DIR,...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

 1.新增一个系统导包路径
 sys
 sys.path使我们可以直接import导入时使用到的路径，所以我们直接将我们的apps路径加到默认搜索路径里面去，那么django就能直接找到apps下面的应用了
sys.path.insert(0,os.path.join(BASE_DIR,1)">apps))



INSTALLED_APPS = [
     2.注意，加上drf框架的注册    
    rest_framework 3.子应用
    homeapps/home/models.py

from django.db  models

 Create your models here.
class Banner(models.Model):
    """轮播广告图模型"""
     模型字段
    title = models.CharField(max_length=500,verbose_name=广告标题)
    link = models.CharField(max_length=500,1)">广告链接)
     upload_to 设置上传文件的保存子目录,将来上传来的文件会存到我们的media下面的banner文件夹下，这里存的是图片地址。
    image_url =  models.ImageField(upload_to=banner",null=True,blank=True,max_length=255,1)">广告图片)
    remark = models.TextField(verbose_name=备注信息)
    is_show = models.BooleanField(default=False,1)">是否显示") 将来轮播图肯定会更新，到底显示哪些
    orders = models.IntegerField(default=1,1)">排序)
    is_deleted = models.BooleanField(default=False,1)">是否删除)

     表信息声明
     Meta:
        db_table = ly_banner
        verbose_name = 轮播广告
        verbose_name_plural = verbose_name

     自定义方法[自定义字段或者自定义工具方法]
    def __str__(self):
        return self.title

执行数据库迁移指令

python manage.py makemigrations
python manage.py migrate


5.创建Banner的序列化器
apps/home/serializers.py

from rest_framework  serializers
from .models  Banner
 BannerModelSerializer(serializers.ModelSerializer):
    轮播广告的序列化器 模型序列化器字段声明
     Meta:
        model = Banner
        fields = [image_urllink"]


6.创建Banner的视图类
apps/home/views.py

from django.shortcuts  render

 Create your views here.
from rest_framework.generics  ListAPIView
from .serializers  BannerModelSerializer
from luffyapi.settings  constants
class BannerListAPIView(ListAPIView):  自动导包
    queryset = Banner.objects.filter(is_show=True,is_deleted=False).order_by(-orders-id")[:constants.BANNER_LENGTH] 没有必要获取所有图片数据，因为有些可能是删除了的、或者不显示的
     切片获取数据的时候，我们可以将切片长度设置成配置项
    serializer_class = BannerModelSerializer

在settings配置文件夹中创建一个constants.py配置文件，将来里面存放我们所有的一些常量信息配置，比如上面的轮播图数据切片长度
settings/constant.py

BANNER_LENGTH = 10


7.配置Banner的路由
apps/home/urls.py

 path,re_path
from .  views
urlpatterns = [
    path(banner/根目录下的urls.py）

from django.contrib  admin
admin/home/home.urls) ),]


8.配置Xadmin
1.Xadmin的安装

pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2 -i https://pypi.douban.com/simple/

2.配置文件注册Xadmin应用

INSTALLED_APPS = [
    ...
    xadmincrispy_formsreversion 修改使用中文界面
LANGUAGE_CODE = zh-Hans'

 修改时区
TIME_ZONE = Asia/Shanghai'

xadmin有建立自己的数据库模型类，需要进行数据库迁移

python manage.py makemigrations
python manage.py migrate

3.在总路由中添加xadmin的路由信息

 xadmin
xadmin.autodiscover()

 version模块自动注册需要版本控制的 Model
from xadmin.plugins  xversion
xversion.register_models()

urlpatterns = [
    path(rxadmin/
python manage.py createsuperuser

4.给Xadmin配置基本的站点信息

 xadmin
from xadmin  views

 BaseSetting(object):
    xadmin的基本配置"""
    enable_themes = True   开启主题切换功能
    use_bootswatch = True

xadmin.site.register(views.BaseAdminView,BaseSetting)

 GlobalSettings(object):
    xadmin的全局配置
    site_title = 路飞学城"   设置站点标题
    site_footer = 路飞学城有限公司 设置站点的页脚
    menu_style = accordion 设置菜单折叠

xadmin.site.register(views.CommAdminView,GlobalSettings)


9.注册轮播图模型到Xadmin中
apps/home/adminx.py
在当前子应用中创建adminx.py，添加如下代码

 轮播图
 BannerModelAdmin(object):
    list_display=[titleordersis_show]
    
xadmin.site.register(Banner,BannerModelAdmin)

1.修改后端Xadmin中子应用名称
apps/home/apps.py

 HomeConfig(AppConfig):
    name = 
    verbose_name = 我的首页'

apps/home/__init__.py

default_app_config = home.apps.HomeConfig"

2.给轮播图添加测试数据

经过上面的操作,我们就完成了轮播图的API接口,接下来,可以考虑提交一个代码版本.

git add .
git commit -m 服务端实现轮播图的API接口
git push origin master


10.客户端代码获取数据


<template>
<!--    <h1>轮播图组件</h1>-->
  el-carousel indicator-position="outside" height="400px">
    el-carousel-item v-for="(value,index) in banner_list" :key="value.id">

      a :href="value.link" style="display: inline-block;height: 400px;width: 100%">
        img :src="value.image_url" alt="" width="100%">
      </a      <img src="@/assets/banner/banner1.png" alt="">-->
    el-carousel-item>
  el-carousel>

script>
    //router-link主要用于站内页面跳转，使用的是相对路径
    a标签用于外部链接页面跳转

    export default {
        name: "Bannerreturn {
            banner_list:[]
          }
      },methods:{
          get_banner_data(){
            this.$axios.get(`${.$settings.Host}/homebanner`,)
              .then((res)=>{
                 console.log(res);
                .banner_list = res.data
              })
              .catch((error){
                console.log(error);
              })


          }
      },created() {
          .get_banner_data();
      }
    }
style scopedstyle>

效果如下图所示
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

day76:luffy:项目前端环境搭建&amp;轮播图的实现

目录

1.项目前端环境搭建

1.创建项目目录

2.前端初始化全局变量和全局方法

1.在src目录下创建settings.js站点开发配置文件

2.在main.js引入setting

3./static/css/reset.css

3.跨域CORS

1.为前端和后端配置假域名

2.使用django-cors-headers扩展

3.axios配置

2.轮播图功能的实现

1.安装依赖模块

2.上传文件相关配置

1.dev.py

2.总路由urls.py

3.注册home子应用

5.创建Banner的序列化器

6.创建Banner的视图类

7.配置Banner的路由

8.配置Xadmin

1.Xadmin的安装

2.配置文件注册Xadmin应用

3.在总路由中添加xadmin的路由信息

4.给Xadmin配置基本的站点信息

9.注册轮播图模型到Xadmin中

1.修改后端Xadmin中子应用名称

2.给轮播图添加测试数据

10.客户端代码获取数据

day76:luffy:项目前端环境搭建&轮播图的实现