目錄
vue的安裝
## 環境
附帶安裝pnm
npm換源
腳手架 快速換源
## 項目創建
cd 存放項目的目錄
vue create 項目名 ===> 需要安裝的組件 babel router vuex
## 配置項目啟動
pycharm打開項目,配置npm啟動
## 加載vue環境
main.js完成vue環境的加載,完成根組件的渲染加載route,vuex等環境加載
## Vue的ajax插件安裝
axios
```
安裝插件 (一定要在項目目錄下)
cnpm install axios
在main.js中配置:
import axios from 'axios'
Vue.prototype.$axios = axios
使用,就可以直接ajax的使用
```
Vue前端的設置
頁面的分布
index.html是項目中的唯一頁面
App.vue是根組件,里面只有5行代碼 其中 <router-view/> 指定渲染了view中的文件
views文件夾是頁面組件,定義了各種頁面的組件,home.vue是主頁組件
主頁中使用導航條的話需要在components文件夾中定義小組件,然后導入才能使用 import Nav from '../components/Nav',導入完畢還需要進行注冊 components:{ Nav }
導航條是小組件,需要在components文件夾中定義,導航條上有什么:主頁跳轉以及汽車頁面跳轉,標簽跳轉的<router-link to="/"> 當你跳轉的時候,需要定義路由跳轉,在router文件夾中的index.js腳本文件添加跳轉,添加跳轉需要進行導入,導入views文件夾中的路由跳轉之后的界面.import Car from '../views/Car' const routes = [{path:'car',component:car'}
car界面中需要有汽車的圖片信息,汽車的數據是從后端拿到的,這里使用created(){}聲明周期鈎子函數獲取,獲取后端的數據進行渲染,渲染的時候使用CarTag定義小組件,在car組件中父傳子將數據輸入子組件,CarTag進行獲取數據然后渲染圖片以及標題.
給每一個圖片的定義跳轉鏈接,跳轉到的界面使用拼接 <router-link :to="`car/detail/${pk=car.id}`"> url,然后在index中定義路由的跳轉,使用有名分組的方式 path: '/car/detail/:pk'
然后定義詳情頁的頁面組件 views文件夾中cardetail組件頁面,在組件頁面中通過鈎子函數獲取url中的pk值 (let pk= this.$route.query.pk || this.$route.params.pk;)
后台數據的替換
使用django將數據動態的傳輸到前端vue組件中
創建django項目
css樣式
display: block; 將標簽變成塊級標簽
nth-child() 定制指定位置的標准樣式,可以在循環多個中使用
/*清除浮動*/
.warp:after { display: block; content: ''; clear: both;}
/*vw :屏幕寬度 vh 屏幕高度*/
width: 100vw;
height: 100vh;
Django的配置
國際化配置
settings文件中國際化配置
// 報錯信息的設置,中文的信息提示
LANGUAGE_CODE = 'zh-hans'
// 時區的設置 上海
TIME_ZONE = 'Asia/Shanghai'
// 數據庫的時區設置,創建時間就不會使用默認的
USE_TZ = False
TODO注釋
# TODO 這里是注釋
axios插件安裝
Vue的ajax插件的安裝 :axios
1.安裝插件(一定要在項目目錄下):
cnpm install axios
2.在main.js 中配置
import axios from 'axios'
Vue.prototype.$axios = axios;
3.使用 在任何一個組件中發送ajax請求,獲取數據庫中的數據
this.$axios({
// 后端數據的接口地址
url:'http://127.0.0.1:8000/cars/',
// 請求方式
method:'get',
// 請求成功之后的回調函數
}).then(response=>{
this.cars = response.data;
// 請求失敗的回調函數
}).catch(error=>{
})
CORS跨域問題(同源策略)
當前端的Vue向后端發送請求的時候,后端不知道發送過來的數據是不是正常的,所以對請求進行了限制,Django默認只會對同源請求做響應
同源:
http協議相同,ip服務器地址形同,app應用端口相同
跨域:
協議.IP地址.應用端口有一個不同,就是跨域
Django默認是同源策略,存在跨域問題
處理跨域問題: cors插件
Django后台安裝cors插件
pip install django-cors-headers
插件參考地址：https://github.com/ottoyiu/django-cors-headers/
1.注冊模塊插件
INSTALLED_APPS = [
...
'corsheaders'
]
2.配置中間件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
3.開啟允許跨域
CORS_ORIGIN_ALLOW_ALL = True
axios提交數據給后台
這里可以將url中的數據傳遞給后台Django中,兩種方式
this.$axios({
url:'http://127.0.0.1:8000/cars/',
method:'get',
params:{ //url拼接參數
a:1,
b:2
c:3
},
data:{ //數據包參數
x:10,
y:20
}
拼接參數 params:{}
任何請求都可以攜帶
params:{
a:1,
b:2,
}
數據包參數data:{}
get請求是無法攜帶的
data:{
x:10,
y:20
}
Django中設置數據
media相關
新建media文件夾
然后在settings.py中設置MEDIA_ROOT：
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
接着在urls.py中設置media路由的相關配置：
from django.urls import path,re_path
from django.views.static import serve
from cnblog import settings
##media配置——配合settings中的MEDIA_ROOT的配置，就可以在瀏覽器的地址欄訪問media文件夾及里面的文件了
re_path(r'media/(?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT}),
有了上面這個路由設置，我們就可以在瀏覽器的地址欄根據media文件夾中文件的路徑去訪問對應的文件了（需要注意的是為了保證安全，默認情況下Django項目中各目錄的文件是不能通過地址欄去訪問的）。
當然，我們這里實現的是文件上傳的功能，需要將文件信息傳給數據庫保存，models.py文件中的內容如下：
admin中注冊使用
將model表注冊到admin管理界面
from . import models
admin.site.register(models.Car)
利用admin管理表數據進行添加
前端接受數據
在汽車連接url獲取所有的數據庫汽車信息,返回給前端,前端的axios接受並開始渲染數據
def get_cars(request,*args,**kwargs):
# 獲取數據庫所有的數據
car_query = models.Car.objects.values('id','title','img')
car_list = list(car_query)
for car in car_list:
# 拼接圖片文件的http真實路徑
car['img'] = '%s%s%s' % ('http://localhost:8000',settings.MEDIA_URL,str(car.get('img')))
# 返回給前端頁面
return JsonResponse(car_list,safe=False)
created(){
// 完成ajax請求后台數據
this.$axios({
url:'http://127.0.0.1:8000/cars/',
method:'get',
params:{ //url拼接參數
a:1,
b:2,
c:3,
},
data:{ //數據包參數
x:10,
y:20,
}
}).then(response => {
// console.log(response)
this.cars = response.data;
}).catch(error=>{
console.log('異常',error.response)
});
}
}
前端渲染單個汽車界面
<script>
export default {
name: "CarDetail",
data (){
return{
car:{}
}
},
// 鈎子函數獲取pk數據
created(){
// 拿到路由傳遞過來的組件
let pk= this.$route.query.pk || this.$route.params.pk;
// 主鍵不存在,就直接結束方法
if (!pk) return false;
// 主鍵存在才請求后台數據
this.$axios({
url: this.$settings.base_url + `/car/${pk}/`,
}).then(response => {
this.car = response.data
}).catch(error => {
console.log(error.response)
})
}
}
</script>
element插件安裝
Vue配置ElementUi
1.安裝插件(一定要在項目目錄下):
cnpm install element-ui
2.在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.使用
賦值粘貼
bootstrap插件的使用
安裝JQuery插件
cnpm install jquery
安裝bootstrap
cnpm install bootstrap@3
vue/cli 3 配置jQuery：在vue.config.js中配置(沒有，手動項目根目錄下新建)
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
vue/cli 3 配置BootStrap：在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue代碼
main.js代碼
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false;
// 全局css
require('@/assets/css/global.css');
// 全局js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 配置axios插件
import axios from 'axios'
Vue.prototype.$axios = axios;
// 配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 配置bootstrap
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');