第四、五周问题集锦

任务一：Vue使用

版本：Vue1
知识点：v-model、v-for、v-if ... v-else ...、v-show、v-html等

任务二：Level3大作业需要涉及的知识点

1. 新建用户
2. 禁止用户登录
3. 登录和登出

任务三：扫一遍常见问题

1. {{ message }}没有被翻译，直接显示在页面上
   答：检查vue文件的引入和el的绑定。双大括号必须在el绑定的元素内部才可以被vue识别并解析

2. 浏览器的调试中报错，语法问题
   答：vue有很多个元素，例如el、data、methods、computed等，每个属性的结尾需要英文的逗号，出了el，其他属性可以有多个属性或方法，属性和方法之间彼此也需要逗号分开。js是弱类型语法，分号最好是带上。

3. 在body中写了id="app"，但是浏览器报错
   答：你可能使用了vue.js文件，在新版本中，vue的el不能绑定body和html，会报错。换成vue1.js试试

4. {{ message }}位置没有显示任何数据，但是vue中写明了message:"hello moto"
   答：检查大小写以及中英文标点符号，防止vue语法问题不工作。另外如果是django服务，确保django的模板没有分析这个双大括号。检查{% verbatim %}这里为django模板不解析的代码部分{% endverbatim %}

5. v-if和v-show的区别
   答：都是true和false控制，但是v-if有v-else，v-show直接是显示和不显示。和这两个类似还有vue的计算属性，有函数的属性值

6. 我在data里面设置show:"true"，用v-show为什么不显示？
   答：true和false是布尔类型，不需要双引号，直接show:true

7. todolist的作业，如何做完成的效果
   答：完成的效果可以用true、false结合v-show来实现

8. 为什么reqwest中，this要改成self？
   答：在vue中，this指的就是new Vue。而在reqwest中，this指的是windows，是浏览器。所以this改成self是必要的

9. todolist的作业，如何做添加数据和删除数据
   答：添加数据到数组中，需要用函数，list.push(data)可以添加一条。删除则是splice函数。这个函数接收的是索引值和个数，实例：this.comments.splice(meg,1);meg就是当前数据在数组中的位置，1就是指删一个。获取当前位置使用$index获得，传入函数中就可以了。

10. vue1和vue两个js文件，有什么区别
    答：vue1是一版，后面是版本2。两者会有一点语法区别，不大。课程使用的是vue1，如果你想用2版本，移除vue1.js导入vue.js，打开浏览器调试查看一下，问题不大

11. return报错，outside function？
    答：可能是将def写成了class。class是类，里面是函数和属性，return是返回值，必须是在function函数里面

---

1. 序列化时，如何将外键关联的数据一起序列化成Json数据
   答：在class Meta:下添加一个字段，depth=1，这样外键的数据不再是个id，而是id在它表中的所有数据

2. 关于vue的一个加载问题，我从后端传到前端的数据中没有false和true，但是我需要false和true来控制前端效果，我在vue中data列表循环加入menu:false，但是切换成true，效果没有，为什么？如下代码：

reqwest({
    url:'/api/getuser/',
    type:'json',
    method:'get',
    headers:Cookies.get('token')? {'Authorization': 'Token ' + Cookies.get('token')}:{},
    data:{},
    success:function (resp) {
        console.log(resp);
        self.userlist = resp;
        for(var i=0;i<self.userlist.length;i++){
            self.userlist[i]["menu"] = false;
        }
        console.log(self.userlist.length);
    },
})

答：vue初始化后，每个数据属性都会有set和get方法【查看方式可以在浏览器中】。这里的数据，你应该把

self.userlist = resp;
for(var i=0;i<self.userlist.length;i++){
    self.userlist[i]["menu"] = false;
}```
改成

for(var i=0;i<resp.length;i++){
resp[i]["menu"] = false;
}
self.userlist = resp;```
注意更改后的代码段顺序和代码变动。保存刷新页面，在浏览器中查看下menu是否有set和get方法。如果有就成功了~

1. api.py和views.py代码，有什么区别？
   答：api是一种接口，返回json格式的纯数据，验证方式是令牌tonken。view是逻辑层，这里面返回的是带数据渲染的网页，验证方式是表单里面的令牌。【基于Level3的大作业】

2. 我写了多个api接口，但是只有修改用户信息的api返回403，其余的正常，咋办？
   答：检查这个问题的api接口路由，看下是不是跳转到了view里面的函数。如果有多个api，只有一个api出现令牌错误，可能是这个api上的验证和其他api不同

Python教程、教程--传送门