Django rest framework + Vue簡單示例

阿新 • • 發佈：2018-11-09

一、建立Vue專案

修改源：npm config set registry https://registry.npm.taobao.org (建議修改)

建立腳手架：vue init webpack Vue專案名稱

基本外掛：

axios，傳送Ajax請求
vuex，儲存所有元件共用的變數
vue-cookies，操作cookie

二、流程

vue專案基本目錄結構

1.建立腳手架

vue init webpack Vue專案名稱

執行 npm run dev

2.App.Vue中

# 用於點選檢視元件
 
<router-link to="/index">首頁</router-link>
                
# 元件顯示的位置
<router-view/>

3.寫路由

寫在route/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import index from '@/components/Index'
import Cource from  
'@/components/Cource'
import Xw from '@/components/Xw'
import Login from '@/components/Login'
import CourseDetail from '@/components/CourseDetail'



Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:  
'/index',
      name: 'index',
      component: index
    },
    {
      path: '/cource',
      name: 'Cource',
      component: Cource
    },
    {
      path: '/xw',
      name: 'Xw',
      component: Xw
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
     {
      path: '/course-detail/:id/',
      name: 'CourseDetail',
      component: CourseDetail
    }
  ],
  mode: 'history'
})

index.js

注意：

我們訪問的時候url一般會帶有‘#’,如果不想有，在路由後面加上 mode: 'history'

如果想url中想傳參：

 {
      path: '/course-detail/:id/',
      name: 'CourseDetail',
      component: CourseDetail
    }

4.寫元件

元件寫在src/components下

<template>
  <div class="hello">
   <h1>登入</h1>
    <input type="text"  v-model="username"><br>
    <input type="text"   v-model="password"><br>
    <a type="button" @click="doLogin">提交</a>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      username: '',
      password:'',
    }
  },
  methods:{
    doLogin(){
      var that = this;
      this.$axios.request({
        url:'http://127.0.0.1:8000/login/',
        method:'POST',
        data:{
          username:this.username,
          password:this.password
        },
        responseType:'json'
      }).then(function (response) {
        console.log(response.data);
        that.$store.commit('saveToken',response.data);
        // 重定向到index
        that.$router.push('/index')
      })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

View Code

5.類似與ajax的請求ajax請求：axios

下載:npm install axios

首先必須在main.js中匯入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/store'

Vue.prototype.$axios = axios;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
});

main.js

import axios from 'axios'                
Vue.prototype.$axios = axios

使用：

methods:{
    doLogin(){
      var that = this;
      this.$axios.request({
        url:'http://127.0.0.1:8000/login/',
        method:'POST',
        data:{
          username:this.username,
          password:this.password
        },
        responseType:'json'
      }).then(function (response) {
        console.log(response.data);
        that.$store.commit('saveToken',response.data);
        // 重定向到index
        that.$router.push('/index')
      })

    }
  }

重定向: that.$router.push('/index')

6.vuex的使用

下載:npm install vuex

1.在src目錄下建立store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  // 元件中通過 this.$store.state.username 呼叫
  state: {
    username: Cookie.get('username'),
    token: Cookie.get('token')
  },
  mutations: {
    // 元件中通過 this.$store.commit(引數)  呼叫
    saveToken: function (state, data) {
      state.username = data.username;
      state.token = data.token;
      Cookie.set('username', data.username, '20min');
      Cookie.set('token', data.token, '20min')

    },
    clearToken: function (state) {
      state.username = null;
      state.token = null;
      Cookie.remove('username');
      Cookie.remove('token')
    }
  }
})

store.js

2.在main.js中匯入store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/store' //vuex

Vue.prototype.$axios = axios;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,   //vuex
  router,
  components: { App },
  template: '<App/>'
});

main.js

7.vue-cookies 的使用

下載:npm install vue-cookies

cookie的使用:

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  // 元件中通過 this.$store.state.username 呼叫
  state: {
    username: Cookie.get('username'),
    token: Cookie.get('token')
  },
  mutations: {
    // 元件中通過 this.$store.commit(引數)  呼叫
    saveToken: function (state, data) {
      state.username = data.username;
      state.token = data.token;
      Cookie.set('username', data.username, '20min');
      Cookie.set('token', data.token, '20min')

    },
    clearToken: function (state) {
      state.username = null;
      state.token = null;
      Cookie.remove('username');
      Cookie.remove('token')
    }
  }
})

store.js

8.router-link引數的常見用法

<router-link :to="{'path':'/course-detail/'+item.id }"{{item.name}}</router-link>
<router-link to="/index">首頁</router-link>

9. 獲取傳過來的引數

this.$route.params.id

10.重定向

this.$router.push('/index')

示例:

前端vue部分:

點選檢視元件

<template>
  <div id="app">
    <router-link to="/index">首頁</router-link>
    <router-link to="/cource">課程</router-link>
    <router-link to="/xw">學位</router-link>
    <div>
          <div v-if="this.$store.state.username">
          <a>{{ this.$store.state.username }}</a>
          <a @click="logout">登出</a>
          </div>
          <router-link v-else to="/login">登入</router-link>
        </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    logout(){
      this.$store.state.username = '';
      this.$store.state.token = ''
    }
  }
}
</script>

<style>
/*#app {*/
  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
/*}*/
</style>

App.vue

元件

<template>
  <div class="hello">
   <h1>登入</h1>
    <input type="text"  v-model="username"><br>
    <input type="text"   v-model="password"><br>
    <a type="button" @click="doLogin">提交</a>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      username: '',
      password:'',
    }
  },
  methods:{
    doLogin(){
      var that = this;
      this.$axios.request({
        url:'http://127.0.0.1:8000/login/',
        method:'POST',
        data:{
          username:this.username,
          password:this.password
        },
        responseType:'json'
      }).then(function (response) {
        console.log(response.data);
        that.$store.commit('saveToken',response.data);
        // 重定向到index
        that.$router.push('/index')
      })

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
  <div class="hello">
   <h1>首頁</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

index.vue

<template>
  <div class="hello">
       <ul>
      <li v-for="item in courseList" >
        <router-link :to="{'path':'/course-detail/'+item.id }">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      courseList: ''
    }
  },
  mounted:function () {
     this.initCourses()
  },
   methods: {
    initCourses:function () {
      var that = this;
      this.$axios.request({
        url: 'http://127.0.0.1:8000/courses/',
        method: 'GET'
      }).then(function (response) {
        that.courseList = response.data.courseList
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Cource.vue

<template>
  <div>
      <div>課程詳細</div>
      <h1>{{title}}</h1>
      <h1>{{summary}}</h1>

  </div>
</template>

<script>
export default {
  data () {
    return {
      title:'',
      summary:'',
    }
  },
  mounted:function () {
    this.initCourseDetail()
  },
  methods:{
    initCourseDetail (){
      var nid = this.$route.params.id;
      var that = this;
      var url = 'http://127.0.0.1:8000/courses/' + nid+'.json';
      this.$axios.request({
        url: url,
        method:'GET',
        responseType:'json'
      }).then(function (response) {
        console.log(response);
        that.title = response.data.title;
        that.summary = response.data.summary
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

CourceDetail.vue

路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import index from '@/components/Index'
import Cource from '@/components/Cource'
import Xw from '@/components/Xw'
import Login from '@/components/Login'
import CourseDetail from '@/components/CourseDetail'



Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',
      name: 'index',
      component: index
    },
    {
      path: '/cource',
      name: 'Cource',
      component: Cource
    },
    {
      path: '/xw',
      name: 'Xw',
      component: Xw
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
     {
      path: '/course-detail/:id/',
      name: 'CourseDetail',
      component: CourseDetail
    }
  ],
  mode: 'history'
})

index.js

儲存全域性使用的變數

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex);

export default new Vuex.Store({
  // 元件中通過 this.$store.state.username 呼叫
  state: {
    username: Cookie.get('username'),
    token: Cookie.get('token')
  },
  mutations: {
    // 元件中通過 this.$store.commit(引數)  呼叫
    saveToken: function (state, data) {
      state.username = data.username;
      state.token = data.token;
      Cookie.set('username', data.username, '20min');
      Cookie.set('token', data.token, '20min')

    },
    clearToken: function (state) {
      state.username = null;
      state.token = null;
      Cookie.remove('username');
      Cookie.remove('token')
    }
  }
})

store.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store/store' //vuex

Vue.prototype.$axios = axios;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,   //vuex
  router,
  components: { App },
  template: '<App/>'
});

main.js

後端restframwork部分

"""luffyweb URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from api import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.LoginView.as_view()),
    url(r'^courses/$', views.CoursesView.as_view()),
    url(r'^courses/(?P<pk>\d+)\.(?P<format>[a-z0-9]+)$', views.CoursesView.as_view()),
]

urls

from django.http import JsonResponse
from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView

# Create your views here.

class LoginView(APIView):
    def get(self,request,*args,**kwargs):
        ret = {
            'code': 1000,
            'data': '老男孩'
        }
        response = JsonResponse(ret)
        response['Access-Control-Allow-Origin'] = "*"
        return response

    def post(self,request,*args,**kwargs):

        print(request.POST)
        ret = {
            'code':1000,
            'username':'老男孩',
            'token':'71ksdf7913knaksdasd7',
        }
        response = JsonResponse(ret)
        response['Access-Control-Allow-Origin'] = "*"
        return response

    def options(self, request, *args, **kwargs):
        # self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        # self.set_header('Access-Control-Allow-Headers', "k1,k2")
        # self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        # self.set_header('Access-Control-Max-Age', 10)

        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = '*'
        response['Access-Control-Allow-Headers'] = '*'
        #response['Access-Control-Allow-Methods'] = 'PUT'
        return response

class CoursesView(APIView):
    def get(self, request, *args, **kwargs):
        pk = kwargs.get('pk')
        if pk:
            ret = {
                'title': "標題標題標題",
                'summary': '老師，太餓了。怎麼還不下課'
            }
        else:
            ret = {
                'code': 1000,
                'courseList': [
                    {"name": '21天學會Pytasdfhon', 'id': 1},
                    {"name": '23天學會Pytasdfhon', 'id': 2},
                    {"name": '24天學會Pytasdfhon', 'id': 3},
                ]
            }
        response = JsonResponse(ret)
        response['Access-Control-Allow-Origin'] = "*"
        return response

views

Django rest framework + Vue簡單示例

一、建立Vue專案修改源：npm config set registry https://registry.npm.taobao.org (建議修改) 建立腳手架：vue init webpack Vue專案名稱基本外掛： axio

Django REST framework+Vue 打造生鮮超市（五）

.com his gem serial http return cati 頁碼 erro 六、商品類別數據展示 6.1. 商品類別數據接口（1）商品分類有兩個接口：一種是全部分類：一級二級三級一種是某一類的分類以及商品詳細信息：開始寫商品分類的

Django REST framework+Vue 打造生鮮電商項目（筆記二）

開始 allow 動作 false 做到 category gef eric ocs （轉自https://www.cnblogs.com/derek1184405959/p/8768059.html）（有修改）接下來開始引入django resfulframework，

Django REST framework+Vue 打造生鮮電商專案（筆記四）

（PS：部分程式碼和圖片來自部落格:http://www.cnblogs.com/derek1184405959/p/8813641.html。有增刪）一、使用者登入和手機註冊 1、drf的token功能（前言：為什麼有了session了，還要用token呢？因為每次認證使用者發起請求時

Django REST framework+Vue 打造生鮮電商項目（筆記四）

相關部署 www. requests ted 本地ip hand ice 用戶信息（PS：部分代碼和圖片來自博客:http://www.cnblogs.com/derek1184405959/p/8813641.html。有增刪）一、用戶登錄和手機註冊 1、drf的

Django REST framework+Vue 打造生鮮電商專案（筆記五）

一、viewsets實現商品詳情頁介面（1）商品詳情頁只需要多繼承一個類（mixins.RetrieveModelMixin）就可以了，（它的功能就是展示商品詳情） class GoodsListViewSet(mixins.ListModelMixin, mixins.RetrieveModel

Django REST framework+Vue 打造生鮮電商專案（筆記六）

九、個人中心功能開發1、drf的api文件自動生成（1） url #drf文件，title自定義 path('docs',include_docs_urls(title='火影忍者')), 訪問：http://127.0.0.1:8000/docs 就可以自動生成 &

Django REST framework+Vue 打造生鮮電商項目（筆記六）

文檔 generic 測試 spa 商品列表 objects req color ets 九、個人中心功能開發1、drf的api文檔自動生成（1） url #drf文檔，title自定義 path(‘docs‘,include_docs_urls(title=‘火影忍者‘

Django REST framework+Vue 打造生鮮電商專案（筆記九）

（from:http://www.cnblogs.com/derek1184405959/p/8859309.html）十二、支付寶沙箱環境配置 12.1.建立應用進入螞蟻金服開放平臺（https://open.alipay.com/platform/home.htm），登入後進入管理中心-->

Django REST framework+Vue 打造生鮮電商專案（筆記八）

（form:http://www.cnblogs.com/derek1184405959/p/8862569.html）十一、pycharm 遠端程式碼除錯第三方登入和支付，都需要有伺服器才行（回撥url），我們可以用pycharm去遠端除錯伺服器程式碼伺服器環境搭建以全新阿里雲centos7

Django REST framework+Vue 打造生鮮電商專案（筆記十）

（from：https://www.cnblogs.com/derek1184405959/p/8877643.html 有修改）十三、首頁、商品數量、快取和限速功能開發首先把pycharm環境改成本地的，vue中local_host也改成本地 1、輪播圖介面實現（1）g

django-rest-framework && vue問題彙總

關於api管理端登入csrf報錯 django REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticate

求助：關於django rest framework + vue(element-ui)跨域問題，求助大佬解決...

前端： headers: { token: '' } if (document.cookie.length > 0) { var arr = document.cookie.split('; ') for (var i = 0; i < arr.length; i++

Vue + Django REST framework 打造生鮮電商項目

lam -c com get .com djang 項目 mooc big Vue + Django REST framework 打造生鮮電商項目需要的聯系QQ：996072671Vue + Django REST framework 打造生鮮電商項目

Python前後端分離開發Vue+Django REST framework實戰

第1章課程介紹介紹課程目標、通過課程能學習到的內容、和系統開發前需要具備的知識 1-1 課程導學第2章開發環境搭建介紹系統開發所需的開發環境的搭建，包括前後端開發所需要的IDE、 mysql、navicat、nodejs、cnpm的配置等，還介紹瞭如何配置python虛擬環境 2-1 pychar

（工作小總結）Django REST Framework 效能優化，簡單實現預載入功能

緣由： Django 的 ORM 是惰性的每個使用者訪問網站時候，都要進行一次資料互動在最初開發的時候，需要考慮到使用者量大的時候，又由於 Django 的 ORM 是惰性的，它只取出當前查詢所需響應最小的資料。它不知道你是否有成百上千的相同或相似的

RESTful架構&簡單使用Django rest framework

轉移 hit 互動 eat serial query web resources 格式 RESTful架構 1 什麽是REST REST全稱是Representational State Transfer，中文意思是表述性狀態轉移。它首次出現在200

Django REST framework 的快速入門教程

ret turn ads 使用 blog 所有定義想去 cti CRM-API項目搭建序列器（Serializers）首先，我們來定義一些序列器。我們來創建一個新的模塊（module）叫做 crm/rest_searializer.py ，這是我們用來描述數據是如何

Django rest framework 自定義Exception

return cep 格式 message throttle back per ack logs 　　使用Dango rest framework時，有時需要raise APIException到前端，為了統一錯誤返回格式，我們需要對exception的格式進行調整。方法

[Django rest-framework] 1-Serialization

www. spa key blog urn allow max pytho led 個人粗淺的理解，歡迎批評指正什麽是序列化？　　後端任務無非對數據庫的增查刪改，操作數據庫無非操作字段，序列化可以讓我們輕松的對數據庫增（serializer.create）改（seril

Django rest framework + Vue簡單示例

一、建立Vue專案

二、流程

1.建立腳手架

2.App.Vue中

3.寫路由

寫在route/index.js中

4.寫元件

5.類似與ajax的請求ajax請求：axios

6.vuex的使用

7.vue-cookies 的使用

8.router-link引數的常見用法

9. 獲取傳過來的引數

10.重定向

相關推薦