建立vue專案:
-安裝node.js-vue腳手架
-vue create 專案名字
pycharm開發vue專案
-需要安裝vue.js外掛程式
-執行vue專案
-editconfigration--->+--->npm--->run serve
vue目錄結構:
-node_modules:專案依賴(以後專案要傳到git上,這個不能傳)
-publish--->index.html 是總頁面
-src :專案
-assets:靜態資源
-components:元件
-views:檢視元件
-main.js :總的入口js
-router.js :路由相關,所有路由的配置,在這裡面
-store.js :vuex狀態管理器
-package.json:專案的依賴,npm install 是根據它來安裝依賴的,如果往git上傳，它也需要傳上去
每個元件會有三部分:
-template
-style
-script
新建元件:
-建立乙個元件
-去路由做配置:
import course from
'./views/course.vue
' -使用:
"/course
">專題課程顯示資料:
-script中:
export default
}方法繫結:
"init
">點我
-script
methods:
}vue中的ajax:
-axios
-安裝:npm install axios
-使用:
-先在main中配置:
-在元件中:
-注意:
this需要在上面重新賦值給乙個變數
請求成功函式內部:
_this.course=response.data
這樣可以拿到json的格式資料，否則拿到的是乙個好看的頁面
vue專案中啟動命令：npm run serve
cd /d 檔案路徑
vue create luffy_girl
總結使用(跨域問題+vue 建立)
-跨域問題: -瀏覽器同源策略---jsonp解決跨域問題-cors:跨域資源共享,服務端的技術
-簡單請求
-發一次請求
-非簡單請求
-發兩次第一次是options,預檢請求
-如何區分:
-請求方式:
head
getpost
-http的頭資訊不超出以下幾種字段：
accept
accept-language
content-language
-處理:
from django.utils.deprecation import
middlewaremixin
class
corsmiddleware(middlewaremixin):
defprocess_response(self,request,response):
if request.method=="
options":
#可以加*
-vue 建立:
-目錄結構:
-src
-package.json
-建立頁面元件:
-都有三部分
-建立路由
-用路由跳轉
"/course
">專題課程
-如何使用bootstrap樣式:
-cdn引入
-本地引入,注意路徑問題
-與後台互動:(必須要掌握)
-axios
-安裝:npm install axios
-配置:
import axios from
'axios
' //要把axios放到乙個全域性變數中
//把axios賦給了$http這個變數
-使用:
-在元件的script中:
export default
},methods:,
}}
vue專案跨域問題
cors 這個方案缺點 是 ie6 7 相容不好 倒是不見得要相容 需要b 在響應中加頭 postmessage 缺點也是 ie6 7 相容不好 倒是不見得要相容 需要修改b 的 iframe window.name 傳值得方式很巧妙，相容性也很好。但是也是需要你能修改b 服務端主動請求b 相容性好...
vue 跨域問題
1 同源策略是瀏覽器的乙個安全功能，在沒有明確的授權情況下不能讀取不同源下的資源 2 只有在協議，埠，網域名稱相同的情況下，才不會出現跨域的現象在config.js檔案下配置乙個 一般是修改proxytable這個配置項的內容 這種跨域一般在開發環境下使用 proxytable target為後端請...
vue跨域問題
跨域問題 devserver proxy 後端允許跨域 設定返回頭 php 示例 header access control allow origin header access control allow headers origin,x requested with,content type,a...