路飞项目 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   # 上线环境环境