1.开发调式问题,路由指向(跨域问题)
(1)前端vue,修改config目录下面的index.js
修改:
proxyTable: {
‘/’: {
target: ‘http://127.0.0.1:8000/’, ##指向后端接口:地址加端口
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’ ##将所有的/api 转化成/ ,所以前端接口写上/api/****,指向接口
}
}
},
(2)vue方法里面
get_data(){
let that = this
that.$axios({
method: “post”,//指定请求方式
url: “/api/get_data/”,//请求接口(相对接口,后面会介绍到)
data: {
“isDebug”:“1”, //给后端传送的数据
}
})
.then(function(res){
that.tableData=res.data[“data”] //后端发送给前端的数据
console.log(res.data)
})
.catch(function(err){
console.log(“ooooooo”)
//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
})
}
(3)后端设置,这里用的是django框架(要引入模块django-cors-headers)
整个项目的setting.py 文件中修改
INSTALLED_APPS = [
。。。。
‘corsheaders’,
。。。。
]
MIDDLEWARE=[
…
#‘django.middleware.csrf.CsrfViewMiddleware’, ###注释此行
…
]
CORS_ALLOW_METHODS = (
‘DELETE’,
‘GET’,
‘OPTIONS’,
‘PATCH’,
‘POST’,
‘PUT’,
‘VIEW’,
)
CORS_ALLOW_HEADERS = (
‘XMLHttpRequest’,
‘X_FILENAME’,
‘accept-encoding’,
‘authorization’,
‘content-type’,
‘dnt’,
‘origin’,
‘user-agent’,
‘x-csrftoken’,
‘x-requested-with’,
‘Pragma’,
)
CORS_ORIGIN_ALLOW_ALL = True
(4)后端url配置:
import api_test.urls
urlpatterns = [
url(r’^admin/’, admin.site.urls),
url(r’^api_test/’, include(api_test.urls)),
url(r’^$’, TemplateView.as_view(template_name=“index.html”)), ###打包上线后指向问题
]
2.侧边栏继承
修改src/router/index.js文件
如下:
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’ ##这是子页面的vue文件路径
import index from ‘@/components/index’ #这是子页面的vue文件路径
import home from ‘@/components/Home’ #这是主页面的vue文件路径(侧边栏的)
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: home,
children:[ #####此处设置成子路径
{
path: 'index',
name: 'index',
component: index
},
{
path: 'helow',
name: 'HelloWorld',
component: HelloWorld
},
]
},
]
})