最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

环球观速讯丨Luffy项目：3、前端调整（全局css、全局配置、全局axios...），后端主页轮播图表设计，接口部分代码编写

来源：博客园
目录
  • Luffy项目
  • 一、luffy项目前端调整
    • 1、全局css
    • 2、全局配置文件
    • 3、安装axios
    • 4、安装vue-cookies
    • 5、安装elementui
    • 6、安装bootstrap和jq
  • 二、后端主页部分
    • 1、轮播图部分表设计
    • 2、轮播图部分接口代码编写
    • 3、轮播图部分录入数据

Luffy项目

一、luffy项目前端调整

1、全局css

目的：

取消标签自带的样式，方便后期制作前端页面


(相关资料图)

操作步骤：

- 第一步：在assets文件下创建css文件，在css文件中创建glabol.css   - 第二步：在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中引入全局cssimport "./assets/css/global.css"- 第四步：引入后，所有的标签自带的样式都会被取消

2、全局配置文件

目的：用于存放全局标量和函数，方便组件使用

操作步骤：

- 第一步：在assets文件下创建js文件，在文件中创建settings.js   - 第二步：在settings.js文件中存入需要使用的全局变量和函数# 考虑到每次使用axios发送请求时都需要填写路由，而这个路由在后期上线时需要挨个进行修改，可以在全局配置中存放url的地址，方便后期统一修改export default {        BASE_URL:"http://127.0.0.1:8000/api/v1"    }- 第三步：在main.js中配置全局变量    //引入全局settings    import settings from "./assets/js/settings"    // 配置全局setting    Vue.prototype.$settings = settings- 第四步：后期只需要在使用的地方直接使用即可例如：     -标签使用：{{ $settings.BASE_URL }}     -scrpit中使用：this. $settings.BASE_URL

3、安装axios

目的：很多组件都需要发送axios请求，直接在全局中引入，方便后期使用，节省代码

操作步骤：

- 第一步：下载axisocnpm install axios -S - 第二步：在main.js中引入，并添加至Vue原型中    // 引入全局axios    import axios from "axios"    // 配置全局axios，加入Vue原型    Vue.prototype.$axios = axios   - 第三步：后期在组件中不需要在单独引入，直接使用即可例如：this.$axios.get().then()

4、安装vue-cookies

目的：用于向浏览器中存放cookie

操作步骤：

- 第一步：安装cnpm install vue-cookies -S - 第二步：在main.js中引入，并添加至Vue原型中    // 引入cookie    import cookies from "vue-cookies"    // 将cookies放入Vue原型中    Vue.prototype.$cookies = cookies   - 第三步：后期在组件中不需要在单独引入，直接使用即可例如：this.$cookies.set()

5、安装elementui

目的：用于美化标签，调整页面样式

操作步骤：

- 第一步：安装cnpm install element-ui -S - 第二步：在main.js中引入，并添加至Vue原型中    // 引入element-ui    import ElementUI from "element-ui";    import "element-ui/lib/theme-chalk/index.css";    // 注册element-ui    Vue.use(ElementUI)   - 第三步：后期直接在组件中使用elementui的样式和标签即可

6、安装bootstrap和jq

目的：用于美化标签，调整页面样式(本项目极少部分使用)

操作步骤：

- 第一步：安装    cnpm install jquery -S    cnpm install bootstrap@3 -S - 第二步：在main.js中引入，并添加至Vue原型中    // 引入bootstrap    import "bootstrap"    import "bootstrap/dist/css/bootstrap.min.css"   - 第三步：在vue.config中进行配置    const {defineConfig} = require("@vue/cli-service")    const webpack = require("webpack");    module.exports = defineConfig({        transpileDependencies: true,        configureWebpack: {            plugins: [                new webpack.ProvidePlugin({                    $: "jquery",                    jQuery: "jquery",                    "window.jQuery": "jquery",                    "window.$": "jquery",                    Popper: ["popper.js", "default"]                })            ]        }    })- 第四步：后期直接在组件中使用bootstrap的样式即可

二、后端主页部分

首页接口分析:

分析完整原型图，首页需要需要编写的接口

# 分析完原型图，首页要写的接口    - 轮播图接口    - 推荐课程接口(暂时没写)    - 推荐老师(没有)    - 学员评论(没有)

1、轮播图部分表设计

创建首页app--->:home

-来到apps文件夹下执行python ../../manage.py  startapp home - 配置文件中注册：home

创建轮播图表--->:Benner

考虑到以后创建的表中有很多共同字段，所以写一个表的基类，将共同字段提取出来，以后需要用到该字段的表直接继承基表

-第一步：在utils下新建 common_model.pyfrom django.db import modelsclass 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中写入    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 makemigrationspython maneage.py migrate

2、轮播图部分接口代码编写

Views部分代码:

from rest_framework.viewsets import GenericViewSetfrom rest_framework.mixins import ListModelMixinfrom utils.common_response import APIResponsefrom home.models import Bannerfrom home.serializers import BannerSerializer# 获取所有轮播图class BannerView(GenericViewSet, ListModelMixin):    # 获取所有轮播图，过滤出已经删除的，过滤出未上架的,并且按照优先级排序    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by("orders").all()    # 指定序列化类    serializer_class = BannerSerializer    # 重写list请求，用于满足result规范    def list(self, request, *args, **kwargs):        # 调用父类list方法，接收返回值        res = super().list(request, *args, **kwargs)        # 使用自己封装的response对象返回数据        return APIResponse(data=res.data)

serializer部分代码:

from rest_framework import serializersfrom home.models import Bannerclass BannerSerializer(serializers.ModelSerializer):    class Meta:        model = Banner        fields = ["id", "image", "title", "link"]

url部分代码:

# 总路由：    from django.contrib import admin    from django.urls import path, include    from django.views.static import serve    from django.conf import settings    urlpatterns = [        path("admin/", admin.site.urls),        # media路由        path("media//", serve, {"document_root": settings.MEDIA_ROOT}),        # 路由分发        path("api/v1/home/", include("home.urls"))    ]    # home路由：    from rest_framework.routers import SimpleRouter    from home import views    router = SimpleRouter()    router.register("banner", views.BannerView, "banner")    urlpatterns = [    ]    urlpatterns += router.urls

3、轮播图部分录入数据

简介：

本项目采用主站前后端分离，后台使用simpleui

使用步骤：

- 第一步：安装pip install django-simpleui    - 注册app：INSTALLED_APPS = [    "simpleui",    ]- 创建超级管理员：python manage.py  createsuperuser    - app的admin.py中注册表：    from django.contrib import admin    from home.models import Banner    admin.site.register(Banner)    - 录入数据：http://127.0.0.1:8000/admin/

关键词： 操作步骤 配置文件 全局变量