一、路飞项目前端配置
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 # 上线环境环境