Vue+restfulframework示例_Django

https://m.taobao.org

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

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

npm config set registry https://m.taobao.org vue init webpack

>首页

# 组件显示的位置

Vue+restfulframework示例

Vue Router Index Login Course Micro News CourseDetail NotFound { { path: name: { path: name: { path: name: { path: name: { path: name: { path: name: { path: name: { path: mode: })

-144ea679045c')">

Vue+restfulframework示例

-144ea679045c" class="cnblogs_code_hide">

 
 {
                       path:                        name:    {
                       path:                        name:    {
                       path:                    
                 
                 
                     {'path':'/course-detail/'+item.id }>{{item.namE}}
                     >首页
     
                 
 s.$route.params.id
                 
                     this.$router.push(

mode:

Vue+restfulframework示例

需要安装axios组件 npm install axios

41916fd-ff69-4d84-8f30-9d263e1260a4')">

Vue+restfulframework示例

41916fd-ff69-4d84-8f30-9d263e1260a4" class="cnblogs_code_hide">

  
       Vue  
      App  
      router  
     
      axios  
     
     Vue.prototype.$axios = 
     Vue.config.productionTip =false
  
  s.$axios.request({
     url: http://127.0.0.1:8000/login/     method:  {
 s.username, password: this.password
      responseType: 
 E) {
      
     that.$router.push(  
 PS：重定向 that.$router.push()

Vue+restfulframework示例

Vue App router axios store Vue.prototype.$axios = Vue.config.productionTip =false /* eslint-disable no-new */ { el: store, { App }, template: src/store/ Vue Vuex Cookie // username: Cookie.get( token: Cookie.get( // state.username = state.token = Cookie.set(,data.username, Cookie.set(,data.token, state.username = state.token = Cookie.remove( Cookie.remove( })

-cookies

Vue+restfulframework示例

npm install vue- Cookie.get( Cookie.set(, Cookie.remove( src/store/ Vue Vuex Cookie // username: Cookie.get(), token: Cookie.get() // state.username = state.token = Cookie.set(,) Cookie.set(, state.username = state.token = Cookie.remove() Cookie.remove( })

Vue+restfulframework示例

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;title</span><span style="color: #0000ff;"&gt;></span>s6vue<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;title</span><span style="color: #0000ff;"&gt;></span>

</head>
<body>
<div id="app"></div>

</body>
</html>

Vue+restfulframework示例

Vue.config.productionTip = false

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

Vue+restfulframework示例

<首页 <学位课 <课程 <深科技 <欢迎{{ this.$store.state.username }}登录 <注销登录

<style>

</style>

Vue+restfulframework示例

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',name: 'HelloWorld',component: HelloWorld
},{
path: '/index',name: 'index',component: Index
},{
path: '/login',name: 'Login',component: Login
},{
path: '/course',name: 'Course',component: Course
},{
path: '/course-detail/:id/',name: 'CourseDetail',component: CourseDetail
},{
path: '/micro/',name: 'Micro',component: Micro
},{
path: '/news/',name: 'News',component: News
},{
path: '*',component: NotFound
}
],mode:'history'
})

Vue+restfulframework示例

<style>

</style>

Vue+restfulframework示例

登录页面用户名：密码： <提交

}
</script>

<style>

</style>

Vue+restfulframework示例

{'path':'/course-detail/'+item.iD}"{{item.namE}}

}

</script>

<style>

</style>

Vue+restfulframework示例

Hello" 课程详细 {{ title }} {{ sumMary }}

</style>

Vue+restfulframework示例

Hello" 欢迎报名学位课

Vue+restfulframework示例

Hello" 深科技

s.vue

Vue+restfulframework示例

Hello" 找不到页面

Vue+restfulframework示例

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) { //存放用户名和token的函数
state.username = data.username //data代指从后端返回过来的数据
state.token = data.token
Cookie.set('username','20min') //把用户名和token存放到cookie中
Cookie.set('token','20min')
},//清空token和cookie
clearToken:function (statE) {
state.username=null
state.token= null
Cookie.remove('username')
Cookie.remove('token')
}
}
})

Vue+restfulframework示例

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

Add an import: from my_app import views
Add a URL to urlpatterns: url(r'^$',views.home,name='home')
Class-based views
Add an import: from other_app.views import Home
Add a URL to urlpatterns: url(r'^$',Home.as_view(),name='home')
Including another URLconf
Import the include() function: from django.conf.urls import url,include
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'^course/$',views.CourseView.as_view()),url(r'^course/(?P\d+).(?P[a-z-9]+)$',]

s.py

Vue+restfulframework示例

django.shortcuts httpResponse rest_framework.views rest_framework.response django.http

class LoginView(APIView):

</span><span style="color: #0000ff;"&gt;def</span> get(self,request,*args,**<span style="color: #000000;"&gt;kwargs):
    ret </span>=<span style="color: #000000;"&gt; {
        </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;code</span><span style="color: #800000;"&gt;'</span>:111<span style="color: #000000;"&gt;,</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;data</span><span style="color: #800000;"&gt;'</span>:<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;在知识的海洋里一路向前</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;
    }

    response </span>=<span style="color: #000000;"&gt;  JsonResponse(ret)
    response[</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>]=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;*</span><span style="color: #800000;"&gt;'</span>
    <span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response

</span><span style="color: #0000ff;"&gt;def</span> post(self,**<span style="color: #000000;"&gt;kwargs):
    </span><span style="color: #0000ff;"&gt;print</span>(request.body)  <span style="color: #008000;"&gt;#</span><span style="color: #008000;"&gt;在body里面有值</span>
    <span style="color: #0000ff;"&gt;print</span>(request.POST)   <span style="color: #008000;"&gt;#</span><span style="color: #008000;"&gt;在post里面是没有值的</span>
    ret =<span style="color: #000000;"&gt; {
        </span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;code</span><span style="color: #800000;"&gt;'</span>:1000<span style="color: #000000;"&gt;,</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;username</span><span style="color: #800000;"&gt;'</span>:<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;hc</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;token</span><span style="color: #800000;"&gt;'</span>:<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;sdswr3fdfsdfdxqw2fgh</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,}
    response </span>=<span style="color: #000000;"&gt; JsonResponse(ret)
    response[</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>] = <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;*</span><span style="color: #800000;"&gt;"</span>
    <span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response

</span><span style="color: #0000ff;"&gt;def</span> options(self,**<span style="color: #000000;"&gt;kwargs):
    response </span>=<span style="color: #000000;"&gt; httpResponse()
    response[</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Origin</span><span style="color: #800000;"&gt;'</span>] = <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;*</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;
    response[</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;Access-Control-Allow-Headers</span><span style="color: #800000;"&gt;'</span>] = <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;*</span><span style="color: #800000;"&gt;'</span>
    <span style="color: #008000;"&gt;#</span><span style="color: #008000;"&gt; response['Access-Control-Allo w-Methods'] = 'PUT'</span>
    <span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; response

class CourseView(APIView):
def get(self,**kwargs):
print(args,kwargs)
pk = kwargs.get('pk')
if pk:
print(kwargs.get('pk'))
ret = {
'title': "标题标题标题",'sumMary': '老师，太饿了。怎么还不下课'
}
else:
ret = {
'code':1000,'courseList':[
{'name':'人生苦短，来学Python','id':1},{'name':'32天学会java，欢迎报名','id':2},{'name':'人工智能即将统领世界...','id':3},]
}
response= JsonResponse(ret)
response['Access-Control-Allow-Origin'] = '*'
return response

s.py

Vue+restfulframework示例

一、vue

二、流程详细

登录页面

三、代码实现

大佬总结