閱讀目錄
1.用C++語言編寫，用來運行JavaScript語言
2.node能夠爲前端項目提供server (包含了socket)
node下載安裝：https://nodejs.org/zh-cn/
一路點擊下一步就能夠。
# 換國內源，加速下載，經過命令行換源：
# 管理員命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org
# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
# 索引npm的指令均可以換成cnpm
# npm install vuex => cnpm install vuex
# cnpm install -g @vue/cli
# 若是報錯：npm cache clean --force
起步
1.cd 到目標目錄
2.建立項目：vue create 目錄名
建立項目的過程
提示下載原：選擇淘寶鏡像
具體配置：上下鍵切換，空格鍵選擇，回車鍵進入下一步
1.第二個選項進入自定義配置
2.Babel jsES6語法轉換ES5，Router路由 Vuex組件數據交互 Formatter格式化代碼
3...有提示選擇大寫，沒提示默認第一個便可選y
開始下載：
①終端啓動
1.進入項目：cd到項目目錄
2.啓動項目：npm run serve
②pycharm配置啓動
1.安裝vue.js插件，重啓
2.配置項目的npm啓動項
3.啓動node搭建的socket
若是項目環境搭建失敗，能夠將搭建成功的項目中的相關文件及文件夾：
而後打開管理員打開cmd命令
cd e:\vue-proj進入項目文件目錄下
cnpm install 對本身電腦的當前環境進行從新安裝依賴，重構項目環境，這樣就能夠用了，使用pycharm打開該文件夾就好了
該方法能夠用於快速建立和搭建項目環境使用，這樣就不用每次vue create進行下一步下一步了
打開main.js
修改後按ctrl+s保存後頁面會實時刷新，且文件後綴均可以省略不寫
頁面組件開發
組件建立：
建立新組件以後的基本頁面狀況：
<template> <!-- 只能有一個根標籤 --> </template> <script> export default { name: "Main", data: function() { return { } }, ... } </script> <style scoped> /* scoped 可讓樣式實現局部化*/ /* 若是讓樣式實現全局化，則應該寫在根組件樣式中*/ </style>
組件渲染
<!-- Main.vue 主頁組件 --> <template> <div class="main"> <h1>{{ title }}</h1> </div> </template> <script> export default { name: "Main", data:function () { return { title:'主頁' } } } </script> <style scoped> .main { height: 100vh; background-color: beige; } h1 { margin: 0; color: darkred; } </style>
<!-- App.vue根組件 --> <template> <div id="app"> <Main></Main> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> html, body { margin: 0; } </style>
說明：
在根組件中設計轉跳頁面的導航欄
<template> <div id="app"> <ul class="nav"> <li>主頁</li> <li>商品頁</li> <li>我的頁</li> </ul> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> .nav { height: 60px; background-color: silver; } .nav li { float: left; height: 60px; width: 123px; text-align: center; line-height: 60px; } .nav li:hover { background-color: aquamarine; } html, body, ul { margin: 0; } ul { list-style: none; } </style>
建立三個頁面組件
<!--Main.vue--> <template> <div class="main"> <h1>{{ title }}</h1> </div> </template> <script> export default { name: "Main", data:function () { return { title:'主頁' } } } </script> <style scoped> .main { height: 100vh; background-color: beige; } h1 { margin: 0; color: darkred; } </style>
<!--Goods.vue--> <template> <div class="goods"> <h1>商品頁</h1> </div> </template> <script> export default { name: "Goods" } </script> <style scoped> </style>
<!--User.vue--> <template> <div class="user"> <h1>我的頁</h1> </div> </template> <script> export default { name: "User" } </script> <style scoped> </style>
配置路由(router.js中)
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/Main.vue'
import Goods from '@/views/Goods.vue'
import User from '@/views/User.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'main',
component: Main
},
{
path: '/goods',
name: 'goods',
component: Goods
},
{
path: '/user',
name: 'user',
component: User
},
//第二種方式
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// }
]
})
根組件中：
<template> <div id="app"> <ul class="nav"> <li> <router-link to="/">主頁</router-link> </li> <li> <router-link to="/goods">商品頁</router-link> </li> <li> <router-link to="/user">我的頁</router-link> </li> </ul> <!--<router-view></router-view>--> <router-view/> </div> </template> <script> import Main from '@/views/Main' export default { components:{ Main:Main } } </script> <style> .nav { height: 60px; background-color: silver; } .nav li { float: left; height: 60px; width: 123px; text-align: center; line-height: 60px; } .nav li:hover { background-color: aquamarine; } html, body, ul, h1 { margin: 0; } ul { list-style: none; } a { text-decoration: none; font: bold 20px/60px 'STSong'; } </style>
先後臺交互
axios
// 安裝 axios(ajax)的命令
// npm install axios --save
// 爲項目配置全局axios（main.js中）
import Axios from 'axios'
Vue.prototype.$ajax = Axios
goods組件中設置ajax給後臺發送數據(在組件渲染完畢時候發送)
<!--Goods.vue--> <template> <div class="goods"> <h1>商品頁</h1> </div> </template> <script> export default { name: "Goods", beforeCreate() { window.console.log("開始建立Goods組件"); }, created() { window.console.log("建立Goods組件完畢"); }, mounted() { window.console.log("Goods組件渲染完畢"); // 請求後臺 this.$ajax({ method:'post', url:'http://127.0.0.1:8000/goods/', params:{ info:'前臺數據' } }).then(function (res) { window.console.log(res) }) } } </script> <style scoped> </style>
新建一個Django項目，做爲後臺接收、返回數據
settings.py中手動將csrf中間件註釋掉(這裏須要注意真正項目中先後端分離時，Django的csrf中間件時經過代碼層面禁用並手寫安全認證，這裏註釋掉主要方便咱們測試)
路由配置：
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^goods/', views.goods), ]
視圖函數
def goods(request): print(request.method) print(request.POST) print(request.GET) return HttpResponse('後臺數據')
發現跨域問題：後臺能收到前臺發送的請求數據，可是因爲跨域問題，只要前臺端給後端發送數據，後端都會接收，來者不拒，可是因爲跨域問題，致使Django不認識它，因此
不給它返回數據。
## Django跨域問題 #### 什麼是跨域 ```python ''' 一般狀況下，A網頁訪問B服務器資源時，不知足如下三個條件其一就是跨域訪問 1. 協議不一樣 2. 端口不一樣 3. 主機不一樣 ''' ``` #### Django解決跨域 ```python ''' 安裝django-cors-headers模塊 在settings.py中配置 # 註冊app INSTALLED_APPS = [ ... 'corsheaders' ] # 添加中間件 MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware' ] # 容許跨域源 CORS_ORIGIN_ALLOW_ALL = True ''' ```
解決跨域：
①在pycharm中安裝django-cors-headers
②在Django配置文件中：
而後前端進行處理數據：
這樣渲染msg後發現報錯：
發現msg沒有被定義，可是在data中明明已經定義了msg，因此錯誤不在data中，最後發如今then的回調函數中的this
問題解析：
① 在this.ajax上先聲明個變量_this=this將vue實例存起來，而後在then的回調函數中打印this和_this
從以上結果來看，在生命週期鉤子函數下的this指向的是當前建立的vue實例，而在這些函數內部使用例如axios與後臺交互後回調函數的內部的this並不是指向當前的vue實例;
箭頭函數至關於匿名函數，而且簡化了函數定義。看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法做用域，由上下文肯定。此時this在箭頭函數中已經按照詞法做用域綁定了。很明顯，使用箭頭函數以後，箭頭函數指向的函數內部的this已經綁定了外部的vue實例了.
vue-cookie
// 安裝cookie的命令
// npm install vue-cookie --save
// 爲項目配置全局vue-cookie(在main.js中)
import VueCookie from 'vue-cookie'
// 將插件設置給Vue原型,做爲全局的屬性,在任何地方均可以經過this.$cookie進行訪問
Vue.prototype.$cookie = VueCookie
// 持久化存儲val的值到cookie中
this.$cookie.set('val', this.val)
// 獲取cookie中val字段值
this.$cookie.get('val')