1、準備
修改源： npm config set registry https://registry.npm.taobao.org 建立腳手架： vue init webpack Vue項目名稱 #Install vue-router? Yes 插件：
npm install axios axios，發送Ajax請求 vuex，保存全部組件共用的變量 vue-cookies，操做cookie
2、流程
一、建立腳手架css
npm config set registry https://registry.npm.taobao.org
vue init webpack
#吧route的那一個設置爲yes,其餘的設置爲no
二、啓動Vuehtml
cd Vue項目名稱
npm run dev
三、顯示組件前端
# 用於點擊查看組件 <router-link to="/index">首頁</router-link> # 組件顯示的位置 <router-view/>
四、寫路由vue
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import Index from '@/components/Index' 4 import Login from '@/components/Login' 5 import Course from '@/components/Course' 6 import Micro from '@/components/Micro' 7 import News from '@/components/News' 8 import CourseDetail from '@/components/CourseDetail' 9 import NotFound from '@/components/NotFound' 10 11 Vue.use(Router) 12 13 export default new Router({ 14 routes: [ 15 { 16 path: '/', 17 name: 'index', 18 component: Index 19 }, 20 { 21 path: '/index', 22 name: 'index', 23 component: Index 24 }, 25 { 26 path: '/course', 27 name: 'course', 28 component: Course 29 }, 30 { 31 path: '/course-detail/:id/', 32 name: 'courseDetail', 33 component: CourseDetail 34 }, 35 { 36 path: '/micro', 37 name: 'micro', 38 component: Micro 39 }, 40 { 41 path: '/news', 42 name: 'news', 43 component: News 44 }, 45 { 46 path: '/login', 47 name: 'login', 48 component: Login 49 }, 50 { 51 path: '*', 52 component: NotFound 53 } 54 ], 55 mode: 'history' 56 })
1 # 定義路由 2 { 3 path: '/course-detail/:id/', 4 name: 'courseDetail', 5 component: CourseDetail 6 }, 7 { 8 path: '/login', 9 name: 'login', 10 component: Login 11 }, 12 { 13 path: '*', 14 component: NotFound 15 } 16 17 18 # router-link參數 19 <router-link :to="{'path':'/course-detail/'+item.id }">{{item.name}}</router-link> 20 <router-link to="/index">首頁</router-link> 21 22 # 獲取傳過來的參數 23 this.$route.params.id 24 # 重定向 25 this.$router.push('/index') 26
注意：java
若是不想在url顯示#，能夠在路由裏面加上這樣一個參數webpack
mode: 'history'
五、寫組件ios
1 <template> 2 3 <div> 4 <h1>登陸頁面</h1> 5 <div> 6 <input type="text" v-model="username" placeholder="用戶名"> 7 <input type="text" v-model="password" placeholder="密碼"> 8 <a @click="doLogin">提交</a> 9 </div> 10 </div> 11 </template> 12 13 <script> 14 15 export default { 16 # 定義局部字段 17 data () { 18 return { 19 username: '', 20 password: '' 21 } 22 }, 23 # 加載時執行 24 mounted:function(){ 25 }, 26 # 定義局部方法 27 methods:{ 28 doLogin() { 29 var that = this 30 this.$axios.request({ 31 url: 'http://127.0.0.1:8000/login/', 32 method: 'POST', 33 data: { 34 username: this.username, 35 password: this.password 36 }, 37 responseType: 'json' 38 }).then(function (response) { 39 console.log(response.data) 40 // 找到全局變量，把用戶名和token賦值到其中。 41 that.$store.commit('saveToken',response.data) 42 // 重定向到index 43 that.$router.push('/index') 44 }) 45 } 46 } 47 } 48 </script> 49 50 <!-- Add "scoped" attribute to limit CSS to this component only --> 51 <style scoped> 52 53 </style>
六、發送ajax請求：axiosweb
#發送ajax請求須要安裝axios組件
npm install axios
1 npm install axios 2 3 main.js 4 import Vue from 'vue' 5 import App from './App' 6 import router from './router' 7 8 import axios from 'axios' 9 10 Vue.prototype.$axios = axios 11 12 Vue.config.productionTip = false 13 ... 14 15 組件使用： 16 this.$axios.request({ 17 url: 'http://127.0.0.1:8000/login/', 18 method: 'POST', 19 data: { 20 username: this.username, 21 password: this.password 22 }, 23 responseType: 'json' 24 }).then(function (response) { 25 console.log(response.data) 26 27 that.$router.push('/index') 28 }) 29 30 PS：重定向 that.$router.push('/index')
七、vuex：保存全部組件共用的變量ajax
安裝
npm install vuex
若是想用vuex須要作這麼幾件事：vue-router
- a、先建立一個文件夾，store----store.js
- b、要先使用就先導入
- c、實例化一個對象，而且讓別人能夠用
- d、這樣每個組件均可以用username和token了
1 npm install vuex 2 3 main.js 4 import Vue from 'vue' 5 import App from './App' 6 import router from './router' 7 import axios from 'axios' 8 9 import store from './store/store' # vuex 10 11 Vue.prototype.$axios = axios 12 13 Vue.config.productionTip = false 14 15 /* eslint-disable no-new */ 16 new Vue({ 17 el: '#app', 18 store, # vuex 19 router, 20 components: { App }, 21 template: '<App/>' 22 }) 23 24 src/store/store.js 25 import Vue from 'vue' 26 import Vuex from 'vuex' 27 import Cookie from 'vue-cookies' 28 29 Vue.use(Vuex) 30 31 export default new Vuex.Store({ 32 // 組件中經過 this.$store.state.username 調用 33 state: { 34 username: Cookie.get('username'), 35 token: Cookie.get('token') 36 }, 37 mutations: { 38 // 組件中經過 this.$store.commit(參數) 調用 39 saveToken: function (state, data) { 40 state.username = data.username 41 state.token = data.token 42 Cookie.set('username', data.username, '20min') 43 Cookie.set('token', data.token, '20min') 44 45 }, 46 clearToken: function (state) { 47 state.username = null 48 state.token = null 49 Cookie.remove('username') 50 Cookie.remove('token') 51 } 52 } 53 })
八、vue-cookies：操做cookie
安裝
npm install vue-cookies
1 npm install vue-cookies 2 3 4 Cookie.get('username') 5 6 Cookie.set('username', data.username, '20min') 7 Cookie.remove('username') 8 9 10 src/store/store.js 11 import Vue from 'vue' 12 import Vuex from 'vuex' 13 import Cookie from 'vue-cookies' # vue-cookies 14 15 Vue.use(Vuex) 16 17 export default new Vuex.Store({ 18 // 組件中經過 this.$store.state.username 調用 19 state: { 20 username: Cookie.get('username'), # vue-cookies 21 token: Cookie.get('token') # vue-cookies 22 }, 23 mutations: { 24 // 組件中經過 this.$store.commit(參數) 調用 25 saveToken: function (state, data) { 26 state.username = data.username 27 state.token = data.token 28 Cookie.set('username', data.username, '20min') # vue-cookies 29 Cookie.set('token', data.token, '20min') 30 31 }, 32 clearToken: function (state) { 33 state.username = null 34 state.token = null 35 Cookie.remove('username') # vue-cookies 36 Cookie.remove('token') 37 } 38 } 39 })
3、代碼實現
前端代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.css"> 7 <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 8 9 <title>s6vue</title> 10 </head> 11 <body> 12 <div id="app"></div> 13 <!-- built files will be auto injected --> 14 </body> 15 </html>
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' 6 import store from './store/store' // 7 import axios from 'axios' // 要是用axios，就得先導入 8 Vue.prototype.$axios = axios //註冊，之後就能夠用$axios來定義了 9 10 Vue.config.productionTip = false 11 12 /* eslint-disable no-new */ 13 new Vue({ 14 el: '#app', 15 store, 16 router, 17 components: { App }, 18 template: '<App/>' 19 })
1 <template> 2 <div id="app"> 3 <!--首頁裏面永遠是固定的東西--> 4 <ul class="nav nav-tabs"> 5 <li><router-link to="/index">首頁</router-link> <!--用於點擊查看組件--></li> 6 <li><router-link to="/micro">學位課</router-link> <!--用於點擊查看組件--></li> 7 <li><router-link to="/course">課程</router-link></li> <!--用於點擊查看組件--> 8 <li><router-link to="/news">深科技</router-link></li> <!--用於點擊查看組件--> 9 <!--若是已經登陸了，就不用在登陸了，在頁面仍是顯示當前用戶和註銷，若是沒有登陸就顯示登陸--> 10 <li v-if="this.$store.state.username"> 11 <span><a>歡迎{{ this.$store.state.username }}登陸</a></span> 12 <span><a @click="logout()">註銷</a></span> 13 </li> 14 <li v-else=""> <router-link to="/login">登陸</router-link></li> 15 </ul> 16 <router-view/> <!--組件顯示的位置--> 17 </div> 18 </template> 19 20 <script> 21 export default { 22 name: 'App', 23 methods:{ 24 logout(){ 25 this.$store.state.username='' 26 this.$store.state.token='' 27 } 28 } 29 } 30 </script> 31 32 <style> 33 34 35 </style>
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import HelloWorld from '@/components/HelloWorld' 4 import Index from '@/components/Index' 5 import Login from '@/components/Login' 6 import Micro from '@/components/Micro' 7 import News from '@/components/News' 8 import Course from '@/components/Course' 9 import CourseDetail from '@/components/CourseDetail' 10 import NotFound from '@/components/NotFound' 11 12 13 14 Vue.use(Router) 15 16 export default new Router({ 17 routes: [ 18 { 19 path: '/', 20 name: 'HelloWorld', 21 component: HelloWorld 22 }, 23 { 24 path: '/index', 25 name: 'index', 26 component: Index 27 }, 28 { 29 path: '/login', 30 name: 'Login', 31 component: Login 32 }, 33 { 34 path: '/course', 35 name: 'Course', 36 component: Course 37 }, 38 { 39 path: '/course-detail/:id/', 40 name: 'CourseDetail', 41 component: CourseDetail 42 }, 43 { 44 path: '/micro/', 45 name: 'Micro', 46 component: Micro 47 }, 48 { 49 path: '/course-detail/:id/', 50 name: 'CourseDetail', 51 component: CourseDetail 52 }, 53 { 54 path: '/news/', 55 name: 'News', 56 component: News 57 }, 58 { 59 path: '*', 60 component: NotFound 61 } 62 ], 63 mode:'history' 64 })
組件components
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'index', 10 data () { 11 return { 12 msg:"這裏是首頁" 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style> 20 21 </style>
1 <template> 2 <div class=""> 3 <h2>登陸頁面</h2> 4 <p>用戶名：<input type="text" placeholder="username" v-model="username"></p> 5 <p>密碼：<input type="text" placeholder="password" v-model="password"></p> 6 <button><a @click="DoLogin()">提交</a></button> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 name: 'index', 13 data () { 14 return { 15 username: "", 16 password: "" 17 } 18 }, 19 methods:{ 20 DoLogin (){ 21 var that = this 22 // console.log(this.$axios); 23 this.$axios.request({ //發送axios請求 24 url:'http://127.0.0.1:8082/login/', //請求路徑 25 method:"POST",//請求方式 26 data:{ //要發送 的數據 27 username:this.username, 28 password:this.password 29 }, 30 responseType:'json' //指望返回的類型是json的格式 31 }).then(function (response) { //吧返回的結果交給回調函數處理 32 //登陸成功以後，找到全局變量，吧用戶名和token賦值到其中 33 that.$store.commit('saveToken',response.data); 34 //重定向(登陸成功以後讓跳轉到index頁面) 35 that.$router.push('/index') 36 //爲何不直接用this呢？這裏的this表明的是$axios,用that他代指的是整個Vue對象 37 }) 38 } 39 } 40 41 } 42 </script> 43 44 <!-- Add "scoped" attribute to limit CSS to this component only --> 45 <style> 46 47 </style>
1 <template> 2 <div class=""> 3 <ul> 4 <li v-for="item in courseList"> 5 <router-link :to="{'path':'/course-detail/'+item.id}">{{item.name}}</router-link> 6 </li> 7 </ul> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 name: 'index', 14 data () { 15 return { 16 msg:'課程頁面', 17 courseList:[] 18 } 19 }, 20 mounted:function () { 21 //當組件一加載的時候就應該去數據庫去獲取數據 22 this.initCourses() 23 }, 24 methods:{ 25 initCourses:function () { 26 var that = this 27 this.$axios.request({ 28 url:'http://127.0.0.1:8082/course/', 29 method:"GET" 30 }).then(function (response) { 31 console.log(response); 32 that.courseList = response.data.courseList //吧從數據庫取的數據賦值到courseList列表裏面 33 }) 34 } 35 } 36 37 } 38 39 </script> 40 41 <!-- Add "scoped" attribute to limit CSS to this component only --> 42 <style> 43 44 </style>
1 <template> 2 <div class="hello"> 3 <div>課程詳細</div> 4 <h3>{{ title }}</h3> 5 <h3>{{ summary }}</h3> 6 </div> 7 </template> 8 9 <script> 10 export default { 11 name: 'HelloWorld', 12 data () { 13 return { 14 title:'', 15 summary:'' 16 } 17 }, 18 mounted:function () { 19 //當組件一加載就執行的函數 20 this.initCoursesDetail() 21 }, 22 methods:{ 23 initCoursesDetail(){ 24 var nid = this.$route.params.id //獲取id 25 var that = this 26 var url = 'http://127.0.0.1:8082/course/' + nid + '.json' 27 this.$axios.request({ 28 url:url, 29 methods:'GET', 30 responseType:'json' 31 }).then(function (response) { 32 console.log(response) 33 that.title = response.data.title; 34 that.summary = response.data.summary 35 }) 36 } 37 } 38 } 39 </script> 40 41 <!-- Add "scoped" attribute to limit CSS to this component only --> 42 <style scoped> 43 44 </style>
1 <template> 2 <div class="hello"> 3 <h2>歡迎報名學位課</h2> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'HelloWorld', 10 data () { 11 return { 12 msg: 'Welcome to Your Vue.js App' 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style scoped> 20 h1, h2 { 21 font-weight: normal; 22 } 23 ul { 24 list-style-type: none; 25 padding: 0; 26 } 27 li { 28 display: inline-block; 29 margin: 0 10px; 30 } 31 a { 32 color: #42b983; 33 } 34 </style>
1 <template> 2 <div class="hello"> 3 <h2>深科技</h2> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'HelloWorld', 10 data () { 11 return { 12 msg: 'Welcome to Your Vue.js App' 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style scoped> 20 h1, h2 { 21 font-weight: normal; 22 } 23 ul { 24 list-style-type: none; 25 padding: 0; 26 } 27 li { 28 display: inline-block; 29 margin: 0 10px; 30 } 31 a { 32 color: #42b983; 33 } 34 </style>
1 <template> 2 <div class="hello"> 3 <h1>找不到頁面</h1> 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name: 'HelloWorld', 10 data () { 11 return { 12 msg: 'Welcome to Your Vue.js App' 13 } 14 } 15 } 16 </script> 17 18 <!-- Add "scoped" attribute to limit CSS to this component only --> 19 <style scoped> 20 h1, h2 { 21 font-weight: normal; 22 } 23 ul { 24 list-style-type: none; 25 padding: 0; 26 } 27 li { 28 display: inline-block; 29 margin: 0 10px; 30 } 31 a { 32 color: #42b983; 33 } 34 </style>
保存全局使用的變量store
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 import Cookie from 'vue-cookies' 4 5 Vue.use(Vuex) 6 7 8 export default new Vuex.Store({ 9 //組件中經過this.$store.state.username 調用 10 state:{ 11 username:Cookie.get('username'), 12 token:Cookie.get('token') 13 }, 14 mutations:{ 15 //組件中經過this.$store.commit(參數)調用 16 saveToken:function (state,data) { //存放用戶名和token的函數 17 state.username = data.username //data代指從後端返回過來的數據 18 state.token = data.token 19 Cookie.set('username',data.username,'20min') //吧用戶名和token存放到cookie中 20 Cookie.set('token',data.token,'20min') 21 }, 22 //清空token和cookie 23 clearToken:function (state) { 24 state.username=null 25 state.token= null 26 Cookie.remove('username') 27 Cookie.remove('token') 28 } 29 } 30 })
後端代碼：
1 """day145vue和restful配合 URL Configuration 2 3 The `urlpatterns` list routes URLs to views. For more information please see: 4 https://docs.djangoproject.com/en/1.11/topics/http/urls/ 5 Examples: 6 Function views 7 1. Add an import: from my_app import views 8 2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 9 Class-based views 10 1. Add an import: from other_app.views import Home 11 2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 12 Including another URLconf 13 1. Import the include() function: from django.conf.urls import url, include 14 2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 15 """ 16 from django.conf.urls import url 17 from django.contrib import admin 18 from api import views 19 urlpatterns = [ 20 url(r'^admin/', admin.site.urls), 21 url(r'^login/', views.LoginView.as_view()), 22 url(r'^course/$', views.CourseView.as_view()), 23 url(r'^course/(?P<pk>\d+)\.(?P<format>[a-z-9]+)$', views.CourseView.as_view()), 24 ]
1 from django.shortcuts import render,HttpResponse 2 from rest_framework.views import APIView 3 from rest_framework.response import Response 4 from django.http import JsonResponse 5 6 7 class LoginView(APIView): 8 9 def get(self,request,*args,**kwargs): 10 ret = { 11 'code':111, 12 'data':'在知識的海洋裏一路向前' 13 } 14 15 response = JsonResponse(ret) 16 response['Access-Control-Allow-Origin']='*' 17 return response 18 19 def post(self,request,*args,**kwargs): 20 print(request.body) #在body裏面有值 21 print(request.POST) #在post裏面是沒有值的 22 ret = { 23 'code':1000, 24 'username':'haiyn', 25 'token':'sdswr3fdfsdfdxqw2fgh', 26 } 27 response = JsonResponse(ret) 28 response['Access-Control-Allow-Origin'] = "*" 29 return response 30 31 def options(self, request, *args, **kwargs): 32 response = HttpResponse() 33 response['Access-Control-Allow-Origin'] = '*' 34 response['Access-Control-Allow-Headers'] = '*' 35 # response['Access-Control-Allo w-Methods'] = 'PUT' 36 return response 37 38 39 class CourseView(APIView): 40 def get(self,request,*args,**kwargs): 41 print(args,kwargs) 42 pk = kwargs.get('pk') 43 if pk: 44 print(kwargs.get('pk')) 45 ret = { 46 'title': "標題標題標題", 47 'summary': '老師，太餓了。怎麼還不下課' 48 } 49 else: 50 ret = { 51 'code':1000, 52 'courseList':[ 53 {'name':'人生苦短，來學Python','id':1}, 54 {'name':'32天學會java，歡迎報名','id':2}, 55 {'name':'人工智能即將統領世界...','id':3}, 56 ] 57 } 58 response= JsonResponse(ret) 59 response['Access-Control-Allow-Origin'] = '*' 60 return response