Vue+restfulframework示例

发布时间：2020-12-15 17:20:48 所属栏目：大数据来源：网络整理

导读：div id="cnblogs_post_body" class="blogpost-body" 一、vue vue前端框架： // 创建脚手架： vue init webpack Vue项目名称 span style="color: #008000;"# span style="color: #008000;"记得把route的这个设置为yes,其他的设置为no 比如: Install vue-route

一、vue

vue前端框架：

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

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

二、流程详细

1、创建脚手架

npm config set registry https://

2、运行

3、显示组件

>首页

# 组件显示的位置

4、写路由

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

path: name: path: name: path:

>{{item.name}}

>首页

this.$router.push(

注意：

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

mode:

5、写组件

6、发送ajax请求：axios

Vue App router axios Vue.prototype.$axios = Vue.config.productionTip = url: method: responseType: that.$router.push( PS：重定向 that.$router.push()

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

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

a、先创建一个文件夹，store----store.js
b、要先使用就先导入
c、实例化一个对象，并且让别人可以用
d、这样每一个组件都可以用username和token了

Vue App router axios store Vue.prototype.$axios = Vue.config.productionTip = /* eslint-disable no-new */ el: store, 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( })

8、vue-cookies：操作cookie

-cookies

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

三、代码实现

前端代码：

<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.config.productionTip = false

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

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

<style>

</style>

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

组件components

<style>

</style>

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

}
</script>

<style>

</style>

}

</script>

<style>

</style>

课程详细 {{ title }} {{ summary }}

</style>

欢迎报名学位课

深科技

找不到页面

保存全局使用的变量store

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

后端代码：

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/(?Pd+).(?P[a-z-9]+)$',]

django.shortcuts 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!