Django框架（三十）—— 使用Vue搭建前臺

vue的使用

1、建立vue項目

參考另外一篇隨筆：https://www.cnblogs.com/linagcheng/p/9883014.html

1.安裝node.js 2.vue腳手架 3.vue create 項目名字

2、pycharm開發vue項目

一、安裝vue.js插件

setting ---> plugins ---> 左下方install ----> 搜索vue.js ----> 下載 ---> 重啓

二、運行vue項目

運行按鈕旁邊的editconfigration ---> + ---> npm ---> 右側 Command:run;Script:serve

3、vue項目的目錄結構

assets:靜態資源 components:組件，存放頁面中小的頁面 views:視圖組件，基本存放大型的頁面 APP.vue:根組件 main.js :總的入口js router.js :路由相關,全部路由的配置,在這裏面 store.js :vuex狀態管理器 package.json : 項目依賴的文件

注意：

• node_modules 項目依賴文件不少，全部拷貝vue項目時，能夠不拷貝，經過npm install參考package.json文件直接下載項目依賴
• 將項目傳到Git上，依賴文件不要傳
• 每一個組件有三部分
  • template
    • style
    • script

4、vue的使用

一、建立新的組件

（1）手動建立一個組件，如index.vue

（2）去路由中配置

import Index from './views/Index.vue' routes:[ { path: '/index', name: 'index', component: Index }, ] 

（3）使用組件

<router-link to="/index">index頁面</router-link>

二、顯示數據

<template> <div> {{ course }} <p> {{ name }} </p> <!--for循環--> <p v-for=" course in courses"> {{ course }} </p> </div> </template> <script> export default { data: function () { // 返回數據，template能夠經過name獲取 return { courses: ['python', 'linux'], name: 'tom' } }, } </script>

三、方法的綁定

<template> <button @click="test">點我</button> </template> <script> export default { methods: { test: function () { this.course=['aaa','ddd','bbb'] } } } </script> 

5、axios

一、安裝axios

npm install axios

二、使用axios

（1）在mian.js中配置

// 導入axios import axios from 'axios' // 要把axios放到一個全局變量中 // 把axios賦給了$http這個變量 Vue.prototype.$http = axios

（2）在組件中使用

this.$http.request().then().catch()

this.$http.request({ url:請求的地址 method:請求方式 }).then(function(response){ ....函數回調處理 })

methods: {
    init: function () { //this.$http 就是axios // $.ajax({ // url:'', // type:'post', // success:function(){} // }) let _this=this // this須要在上面從新賦值給一個變量 this.$http.request({ // 在mian.js中配置，_this.$url='http://127.0.0.1:8000/' url:_this.$url+'course/', method:'get' }).then(function (response) { //console.log(response) //服務端返回的數據 console.log(response.data) _this.course = response.data }).catch(function (response) { console.log(response) }) }, } 

6、vue綁定

一、綁定圖片

<img :src="img">

二、綁定事件

<span @click="init(params)"></span>

三、綁定路由

<a :to="/login"></a>

7、vue頁面掛載

<script> export default { methods: { test: function () { this.course=['aaa','ddd','bbb'] } }, // 頁面掛載是執行 mounted:function(){ // test是methods中定義的方法 this.test() } } </script>

8、vue中路由攜帶參數

• 路由的名字寫在name對應的value值，參數寫在params對應的value中（能夠爲一個字典）

<router-link :to="{'name':'courseDetail','params':{'id':course.id}}">詳情</router-link>

• 前臺從路由中獲取值，從this.$route.params中取

// 如獲取course_id this.$route.params.id

9、vuex（狀態管理器）

一、做用

用來存儲cookie信息

二、配置vuex

在main.js中配置

new Vue({ router, store, // 配置vuex render: h => h(App) })

三、使用

// 賦值 this.$store.state.name = this.name // 取值 this.$store.state.name

10、vue-cookies——管理cookie

一、安裝vue-cookies

npm install vue-cookies

二、使用

// store.js中 import Cookie from 'vue-cookies' Vue.use(Vuex) export default new Vuex.Store({ // 變量 state: { name: Cookie.get('name'), // 從cookie中獲取值 token: Cookie.get('token') }, // 方法 mutations: { login: function (state, response) { //修改這兩個變量的值 state.name = response.data.name state.token = response.data.token // 往cookie中寫數據 Cookie.set('name', response.data.name) Cookie.set('token', response.data.token) }, logout: function (state) { // 修改這兩個變量的值 state.name = "" state.token = "" // 往cookie中寫數據 Cookie.set('name', "") Cookie.set('token', "") } }, actions: {} }) 

// Login.vue頁面 methods: { login: function () { let _this = this this.$http.request({ url: _this.$url + 'login/', method: 'post', data: {'name': _this.name, 'pwd': _this.pwd} }).then(function (response) { console.log(response.data) if (response.data.status == 100) { //往stort.js的state的字典中寫入值 // _this.$store.state.name=_this.name // _this.$store.state.token=response.data.token //調用store下的某個方法,用commit,第一個參數是方法名,第二個參數是參數 _this.$store.commit('login', response) } }).catch(function (response) { console.log(response) }) }, },

博客內容僅供參考，部分參考他人優秀博文，僅供學習使用