路飞项目 day03 前端配置、后台主页、项目依赖问题

一、路飞项目前端配置

1.先删除一些不要的

删除多余的组件，只要app和首页组件

然后改一下组件的内部代码

-App.vue中

______________

<template>

<div id="app">

<router-view/>

</div>

</template>

HomeView.vue

_____________

<template>

<div class="home">

<h1>首页</h1>

</div>

</template>

<script>

export default {

    name: 'HomeView',

}

</script>

router/index.js

把已经删除的组件注销

2.设置一下全局CSS样式

为了统一一下所有标签的默认样式，比如margin间距啊，padding间距之类的

# 第一步：新建一个assets-css----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中配置

// 使用全局css样式，只需要导入就会生效

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

3.设置好全局JS

创一个JS文件，专门用来存放JS中要常用的东西，以后就不用每个组件再去改

assets下再创一个js文件夹，再新建一个settings.js

第一步：

    export default {

        BASE_URL:'http://127.0.0.1:8000/api/v1'

    }

第二步：

在main.js中引入

import settings from "@/assets/js/settings";

Vue.prototype.$settings = setting

二、路飞项目前端组件安装

1.安装axios

步骤：

	第一步：安装  cnpm install axios -S

    第二步：把axios放到vue原型中,main.js中

    	import axios from "axios";

		Vue.prototype.$axios=axios

    第三步：在任意组件中使用

    this.$ajax.get()

2.安装vue-cookies

步骤

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

    第二步：把vue-cookies放到vue原型中,main.js中

    	import cookies from "vue-cookies";

		Vue.prototype.$cookies=cookies

    第三步：在任意组件中使用

        this.$cookies.set()

        this.$cookies.set()

3.安装elementui

步骤：

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

    第二步：main.js配置

    import ElementUI from 'element-ui';

	import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(ElementUI);

    第三步：复制，粘贴

4.安装bootstrap和jq

一般不用bootstrap和jq，如果想用

参考这个博客安装

https://blog.csdn.net/qq_39549013/article/details/126346663

三、路飞项目后台主页

1.主页设计

前后端基本都准备好了，可以开始写功能了，首先我们要看看首页怎么写，有哪些东西

这几块的模板都可以通过elementui搞到，我们主要是思考轮播图部分展示的数据要如何准备

2.开始建表

1.apps下新建一个Home app

2.在home 的 models.py中，开始创建轮播图表

	但是先等下，因为好多表都可能有重复字段，比如说创建时间啊，更新时间啊，是否展示，是否删除...

    我们可以去项目的类库中搞一个基类，让以后需要用这些字段的表继承这个基类表即可

3.在utils下新建 common_model.py

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=0, verbose_name='是否删除')

    is_show = models.BooleanField(default=1, verbose_name='是否展示')

    class Meta:

        abstract = True

4.现在就可以回去写 Banner表了

from django.db import models

from lufei_api.utils.common_model import BaseModel

class Banner(BaseModel):

    title = models.CharField(max_length=32, unique=True, verbose_name='名称')

    image = models.ImageField(upload_to='banner', verbose_name='图片')

    link = models.CharField(max_length=64, verbose_name='跳转链接')

    class Meta:

        db_table = 'luffy_banner'

        verbose_name_plural = '轮播插表'

        verbose_name='轮播插表'

    def __str__(self):

        return self.title

5.都搞定了，可以开始迁移

	注意自己输入命令时在哪一层

    	python manage.py makemigrations

		python manage.py migrate

3.轮播图接口设计

因为就只要一个查就行了，我们可以用GenericViewSet+ListModelMixin，也可以用ViewSetMixin+ListAPIView

视图层

------------------

from rest_framework.viewsets import GenericViewSet

from rest_framework.generics import ListAPIView

from rest_framework.mixins import ListModelMixin

from lufei_api.apps.home.serializer import BannerSerializers

from lufei_api.apps.home.models import Banner

from django.shortcuts import render, HttpResponse

from rest_framework.viewsets import ViewSetMixin

from lufei_api.utils.common_response import APIResponse

# GenericViewSet, ListModelMixin

class BannerView(ViewSetMixin, ListAPIView):

    queryset = Banner.objects.filter(is_delete=0, is_show=1).all()

    serializer_class = BannerSerializers

    def list(self, request, *args, **kwargs):

        res = super().list(request, *args, **kwargs)

        return APIResponse(data=res.data)

序列化类

------------------

每一个app都有自己序列化类，home下建立一个序列化类的Py文件

from rest_framework import serializers

from .models import Banner

class BannerSerializers(serializers.ModelSerializer):

    class Meta:

        model = Banner

        fields = ['id', 'title', 'image', 'link']

路由层

-------------------

用到了路由分发，路由自动生成

这里涉及一些环境变量的问题，自己和自己设置的环境变量对上即可

home分路由

------------------------

from rest_framework.routers import SimpleRouter

from . import views

router = SimpleRouter()

router.register('banner', views.BannerView, 'banner')

urlpatterns = [

]

urlpatterns += router.urls

项目总路由

------------------------

from django.contrib import admin

from django.urls import path, include

from django.conf import settings

from home import views

from django.views.static import serve

urlpatterns = [

    path('admin/', admin.site.urls),

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

    path('api/v1/home/', include('lufei_api.apps.home.urls'))

]

4.给后台的banner表录入点数据

我们后端直接去表录入当然可以，但是这个项目要做主站前后端分离，后台管理用admin的美化(simpleui)，让前端通过管理平台也能录入数据

步骤：

第一步：安装simpleui

pip install django-simpleui

第二步：注册app

	INSTALLED_APPS = [

    'simpleui',

    ...

    ]

第三步:录入数据

    http://127.0.0.1:8000/admin

5.解决下跨域问题

参考这个博客，用第三方插件的方法搞一下即可

https://www.cnblogs.com/wznn125ml/p/17168698.html

6.前端组件设计

主页页面目前就分为三个组件，一个是header组件，一个是banner组件，一个是footer组件

src/components

新建三个vue组件，分别是Banner Footer Header

Header

------------------------

<template>

    <div class="header">

        <div class="slogan">

            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>

        </div>

        <div class="nav">

            <ul class="left-part">

                <li class="logo">

                    <router-link to="/">

                        <img src="../assets/img/head-logo.svg" alt="">

                    </router-link>

                </li>

                <li class="ele">

                    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>

                </li>

                <li class="ele">

                    <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>

                </li>

                <li class="ele">

                    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>

                </li>

            </ul>

            <div class="right-part">

                <div>

                  <img src="../assets/img/用户头像.gif" alt="" style="width:30px;height:31px;">

                    <span>登录</span>

                    <span class="line">|</span>

                    <span>注册</span>

                </div>

      </div>

        </div>

    </div>

</template>

<script>

    export default {

        name: "Header",

        data() {

            return {

                // 当前所在路径，去sessionStorage取的，如果取不到，就是 /

                url_path: sessionStorage.url_path || '/',

            }

        },

        methods: {

            goPage(url_path) {

                // 已经是当前路由就没有必要重新跳转

                if (this.url_path !== url_path) {

                    this.$router.push(url_path);

                }

                sessionStorage.url_path = url_path;

            },

        },

        created() {

            // 组件加载万成，就取出当前的路径，存到sessionStorage  this.$route.path

            sessionStorage.url_path = this.$route.path;

            // 把url_path = 当前路径

            this.url_path = this.$route.path;

        }

    }

</script>

<style scoped>

    .header {

        background-color: white;

        box-shadow: 0 0 5px 0 #aaa;

    }

    .header:after {

        content: "";

        display: block;

        clear: both;

    }

    .slogan {

        background-color:#eee;

        height: 40px;

    }

    .slogan p {

        width: 1200px;

        margin: 0 auto;

        color: #aaa;

        font-size: 13px;

        line-height: 40px;

    }

    .nav {

        background-color: white;

        user-select: none;

        width: 1200px;

        margin: 0 auto;

    }

    .nav ul {

        padding: 15px 0;

        float: left;

    }

    .nav ul:after {

        clear: both;

        content: '';

        display: block;

    }

    .nav ul li {

        float: left;

    }

    .logo {

        margin-right: 20px;

    }

    .ele {

        margin: 0 20px;

    }

    .ele span {

        display: block;

        font: 15px/36px '微软雅黑';

        border-bottom: 2px solid transparent;

        cursor: pointer;

    }

    .ele span:hover {

        border-bottom-color: orange;

    }

    .ele span.active {

        color: orange;

        border-bottom-color: orange;

    }

    .right-part {

        float: right;

    }

    .right-part .line {

        margin: 0 10px;

    }

    .right-part span {

        line-height: 68px;

        cursor: pointer;

    }

</style>

Banner

-------------------------

<template>

  <div class="banner">

    <el-carousel height="400px" :interval="5000" arrow="always">

      <el-carousel-item v-for="item in img_list" :key="item.id">

        <div v-if="item.link.indexOf('http')>-1">

          <a :href="item.link">

            <img :src="item.image" :alt="item.title">

          </a>

        </div>

        <div v-else>

          <router-link :to="item.link">

            <img :src="item.image" :alt="item.title">

          </router-link>

        </div>

      </el-carousel-item>

    </el-carousel>

  </div>

</template>

<script>

export default {

  name: "Banner",

  data() {

    return {

      img_list: []

    }

  },

  created() {

    this.$axios.get(this.$settings.BASE_URL + '/home/banner/').then(res => {

      console.log(res.data)

      if (res.data.code == 100) {

        this.img_list = res.data.data

      } else {

        this.$message(res.data.msg)

      }

    }).catch(res => {

      this.$message('轮播图服务器异常，请稍后再试')

    })

  }

}

</script>

<style scoped>

.el-carousel__item {

  height: 400px;

  min-width: 1200px;

}

.el-carousel__item img {

  height: 400px;

  margin-left: calc(50% - 1920px / 2);

}

</style>

Footer

-----------------------

<template>

  <div class="footer">

    <ul>

      <li>关于我们</li>

      <li>联系我们</li>

      <li>商务合作</li>

      <li>帮助中心</li>

      <li>意见反馈</li>

      <li>新手指南</li>

    </ul>

    <p>Copyright  luffycity.com版权所有 | 京ICP备17072161号-1</p>

  </div>

</template>

<script>

export default {

  name: "Footer"

}

</script>

<style scoped>

.footer {

        width: 100%;

        height: 128px;

        background: #25292e;

        color: #fff;

    }

    .footer ul {

        margin: 0 auto 16px;

        padding-top: 38px;

        width: 810px;

    }

    .footer ul li {

        float: left;

        width: 112px;

        margin: 0 10px;

        text-align: center;

        font-size: 14px;

    }

    .footer ul::after {

        content: "";

        display: block;

        clear: both;

    }

    .footer p {

        text-align: center;

        font-size: 12px;

    }

</style>

7.主页使用组件

先去主页的JS中注册下三个组件

<script>

import Header from "@/components/Header";

import Banner from "@/components/Banner";

import Footer from "@/components/Footer";

export default {

  name: 'HomeView',

  data(){

    return {

    }

  },

  methods:{

  },

  components:{

    Header,

    Banner,

    Footer

  }

}

</script>

然后就可以使用了

----------------------------

<template>

  <div class="home">

    <Header></Header>

    <Banner></Banner>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <Footer></Footer>

  </div>

</template>

四、项目依赖问题

1.说明

我们开发用的配置环境和上线用的环境可能有区别

比如说本地用pymysql，上线使用 mysqlclient

那么我们要如何让使用者能配置好不同环境下的依赖呢？

2.使用

每个项目中都会有个requirements.txt 文件，指明了所有依赖和版本

	-生成：pip freeze   显示当前环境装的所有依赖

    	pip freeze > requirements.txt  # 当前所有都放进去

    -新环境中，按装依赖

    	pip install -r dev.txt   # 开发环境

        pip install -r requirements.txt   # 上线环境环境

巴特西