vue+django初体验-vue如何匹配到django项目rul路径

vue,django 安装过程暂略。
不同于django自己的路径，使用vue后，浏览器访问资源的url是在vue中配置的。

那么，vue的ur是如何映射到django的url,并触发视图函数的？

1.创建vue项目成功，项目名称：frontend
frontend/src/router/index.js 文件中配置vue自己的path

export default new VueRouter({
    mode: 'history',
    routes: [
      { path: '/', component: Home},
      {path: '/todo/:id/', component: Detail}
    ]
  })
//Home,Detail是vue 自己的template,
//放在如下位置
frontend/src/contains
home.vue,detail.vue

2.在home.vue文件中 路径关联到django url，先指定url所在路径：

<script>
......
    export default {
     ......
        data: () => ({
            base_url:'http://127.0.0.1:8000/api',
            title:'',
            remark:'',
            items:[]
        })
    };
</script>

3.继续关联要访问的django的url的子路径

methods: {
            add : function(){
                let data = {'title':this.title, 'remark':this.remark};
                axios.post(this.base_url+'/items', data)//指向django url
                .then((response)=>{
                    console.log(response);
                    this.refresh();
                })
            },
            refresh : function(){
                axios.get(this.base_url+'/items')//指向django url
                .then((response)=>{
                    this.items = response.data;
                    console.log(response);
                })
            }
        },

当在浏览器输入访问地址：
127.0.0.1:8080（启动vue后给的地址）
就会指向djngo url

url(r'^api/items$', views.item_list),

然会视图函数 item_list 就会返回 数据

简单总结这个过程：
前端页面显示的是vue配置的html页面，但是数据是地址映射到django-url，调用视图函数返回的。

直接看源码学习起来最快了，项目小巧简洁，一看就懂，特别适合初学者：
django-vue 初学者小项目