Vue+restfulframework示例

 一、简单回顾vue

前不久我们已经了解了vue前端框架,所以现在强调几点：

修改源：
    npm config set registry https://registry.npm.taobao.org 

创建脚手架：
    vue init webpack Vue项目名称
    #记得把route的这个设置为yes,其他的设置为no 比如: Install vue-router? Yes
    

插件：
    axios，发送Ajax请求
    vuex，保存所有组件共用的变量
    vue-cookies，操作cookie
    

二、流程详细

1、创建脚手架

#可以用淘宝源来下载，这样下载的快
npm config set registry https://registry.npm.taobao.org
vue init webpack

#吧route的那一个设置为yes,其他的设置为no

2、运行

cd Vue项目名称 
npm run dev

3、显示组件

# 用于点击查看组件
"/index">首页
                
# 组件显示的位置

4、写路由

 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 })

View Code

 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                     "{'path':'/course-detail/'+item.id }">{{item.name}}
20                     "/index">首页
21     
22                 # 获取传过来的参数
23                     this.$route.params.id
24                 # 重定向
25                     this.$router.push('/index')
26                 

View Code

注意：

如果不想在url显示#，可以在路由里面加上这样一个参数

  mode: 'history'

5、写组件

 1 
12 
13 
49 
50 
51 

View Code

6、发送ajax请求：axios

#发送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')

View Code

7、vuex：保存所有组件共用的变量

安装  
npm install vuex

 如果想用vuex需要做这么几件事：

• 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: ''
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 })

View Code

8、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 })

View Code

三、代码实现

 前端代码：

 1 
 2 
 3   
 4     "utf-8">
 5     "viewport" content="width=device-width,initial-scale=1.0">
 6     "stylesheet" href="./static/bootstrap-3.3.7-dist/css/bootstrap.css">
 7     
 8 
 9     
10   
11   
12     
"app">
13     
14   
15 

index.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: ''
19 })

main.js

 1 
19 
20 
31 
32 

app.vue

 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 })

router ---index.js

组件components

 1 
 6 
 7 
17 
18 
19 

Index.vue

 1 
 9 
10 
43 
44 
45 

Login.vue

 1 
10 
11 
40 
41 
42 

course.vue

 1 
 8 
 9 
40 
41 
42 

CoursesDetail

 1 
 6 
 7 
17 
18 
19 

Micro.vue

 1 
 6 
 7 
17 
18 
19 

News.vue

 1 
 6 
 7 
17 
18 
19 

NotFound

保存全局使用的变量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 })

store.js

后端代码：

 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\d+)\.(?P[a-z-9]+)$', views.CourseView.as_view()),
24 ]

urls.py

 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

views.py

 

转载于:https://www.cnblogs.com/haiyan123/p/8443515.html