路飛專案三
阿新 • • 發佈：2020-07-27
1 路飛專案頭部元件
1.1 路由跳轉的方式
#html中路由跳轉
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
#js中控制路由跳轉
this.$router.push('/');
1.2 頭部元件vue程式碼
# 在components內新建Head.vue <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> <span>登入</span> <span class="line">|</span> <span>註冊</span> </div> </div> </div> </div> </template> <script> export default { name: "Header", data() { return { 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.url_path = this.$route.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>
1.3 配置全域性css和setting
# 在main.js中配置 // 配置全域性樣式 @ 符號，代指src路徑 import '@/assets/css/global.css' // 配置全域性自定義設定 import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; // 在所有需要與後臺互動的元件中：this.$settings.base_url + '再拼接具體後臺路由' # 在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; /* 合併邊框 */ } # 在assets下的js中加入settings.js export default { base_url: 'http://127.0.0.1:8000' }
1.4 前臺配置
# 安裝 cnpm install axios cnpm install vue-cookies cnpm install element-ui cnpm install jquery cnpm install bootstrap@3 #在main.js中配置 #axios配置 import axios from 'axios' Vue.prototype.$axios = axios; # vue-cookies配置 import cookies from 'vue-cookies' Vue.prototype.$cookies = cookies; # ElementUI的配置 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); # bootstrap配置 import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' # jquery的配置，不太一樣 專案根路徑創一個 vue.config.js const webpack = require("webpack"); module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", "window.$": "jquery", Popper: ["popper.js", "default"] }) ] } };
2 路飛專案尾部元件
Footer.vue
<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>
3 輪播圖介面
####1 urls.py
from rest_framework.routers import SimpleRouter
router=SimpleRouter()
router.register('banner',views.BannerView,'banner')
urlpatterns = [
# path('banner/', views.BannerView.as_view()),
path('', include(router.urls)),
]
####2 views.py
from django.conf import settings
class BannerView(GenericViewSet,ListModelMixin):
# 無論有多少條待展示的資料，最多就展示3條
queryset = models.Banner.objects.filter(is_delete=False,is_show=True).order_by('display_order')[:settings.BANNER_COUNTER]
serializer_class = serializer.BannerModelSerilaizer
### 3 serializer.py
from rest_framework import serializers
from . import models
class BannerModelSerilaizer(serializers.ModelSerializer):
class Meta:
model=models.Banner
fields=['name','link','img']
### 4 models.py
from utils.models import BaseModel
class Banner(BaseModel):
name=models.CharField(max_length=32,verbose_name='圖片名字')
img=models.ImageField(upload_to='banner',verbose_name='輪播圖',help_text='圖片尺寸必須是：3840*800',null=True)
link=models.CharField(max_length=32,verbose_name='跳轉連線')
info=models.TextField(verbose_name='圖片簡介')
# type=models.IntegerField(choices=)
def __str__(self):
return self.name
####5 utils/models.py
class BaseModel(models.Model):
create_time = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
update_time = models.DateTimeField(auto_now=True, verbose_name='最後更新時間')
is_delete = models.BooleanField(default=False, verbose_name='是否刪除')
is_show = models.BooleanField(default=True, verbose_name='是否展示')
display_order = models.IntegerField()
class Meta:
abstract=True # 一定不要忘了
### 6 settings/const.py
# 首頁輪播圖個數
BANNER_COUNTER=3
#### 7 settings/dev.py
from .const import *
4 輪播圖元件
Banner.vue
<template>
<div id="banner">
<el-carousel height="400px">
<el-carousel-item v-for="item in banner_list">
<!--<img src="../assets/img/banner1.png" alt="">-->
<router-link :to="item.link">
<img :src="item.img" :alt="item.name">
</router-link>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Banner",
// data:function(){},
data() {
return {
banner_list: []
}
},
created() {
//當banner元件一建立，就向後臺發請求，拿回輪播圖資料
this.$axios.get(this.$settings.base_url + '/home/banner/').then(response => {
console.log(response.data)
this.banner_list=response.data
}).catch(error => {
})
},
}
</script>
<style scoped>
.el-carousel__item {
height: 400px;
min-width: 1200px;
}
.el-carousel__item img {
height: 400px;
/*margin-left: 20px;*/
/*margin-left: calc(50% - 1920px / 2);*/
}
</style>
前端路由配置
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/free-course',
name: 'FreeCourse',
component: FreeCourse
}, {
path: '/light-course',
name: 'LightCourse',
component: LightCourse
}, {
path: '/actual-course',
name: 'ActualCourse',
component: ActualCourse
},
]
5 git的使用
#1 協同開發，版本管理
#2 svn（集中式管理），git（分散式管理）
#3 git裝完，既有客戶端，又有服務的
#4 git工作流程
-工作區，暫存區，版本庫
#5 遠端倉庫：github，碼雲，公司內部（gitlab）
# 6 安裝：一路下一步
# 7 右鍵--git bash here
# 8 git 命令
-初始化：git init 資料夾名
-初始化：git init #當前路徑全被管理
-git status
-git add a.txt # 把a提交到暫存區
-git add .
-git commit -m '註釋，我新增了a' # 把暫存區的所有都提交到版本庫
-需要增加作者資訊
git config --global user.email "[email protected]"
git config --global user.name "lqz"
git config user.email "[email protected]"
git config user.name "egon"
-把a的新增提交到版本管理
-新建b，在a中新增一行
-git checkout . # 回覆到提交版本的位置，a是空的，b沒有被git管理，所有，是什麼樣，還是什麼樣
-git log # 檢視版本管理的日誌
-git reflog # 檢視日誌，條數更多，內容更少
-git reset --hard 版本號
# 紅色表示未被管理
# 綠色表示提交到暫存區了
# 忽略檔案
-空資料夾不被管理
-指定某些檔案或者資料夾不被git管理
-在專案根路徑，跟.git資料夾一個路徑，新建.gitignore.，在裡面配置
- 語法：
# 號是註釋，沒有用
資料夾名字，表示資料夾忽略，不被管理
/dist 表示根路徑下的dist資料夾，不被管理
*.py 表示字尾名為py的檔案，都被忽略
*.log*
# 分支操作
-檢視分支 git branch 檢視所有分支，分支是綠的，表示在當前分支上
-建立分支 git branch dev
-建立並切換到 git checkout -b dev
-刪除分支 git branch -d dev
-切換分支 git checkout dev
-合併分支 git merge 分支名 # 把dev分支合併到master分支：切換到master分支，執行合併dev分支的命令