# 嘿～我是可达鸭😘
# 项目遭遇难点
# 难点①
介绍：
在项目列表部分，我是想做一个效果，就是横向超出隐藏，然后横向可以拖动，实现思路其实不难，超出滚动就好了，但是后来我发现，我用了 flex 布局后，其实我是有给它的每个子盒子一个百分比宽度的，子盒子是
v-for遍历出来的，我发现不超出的部分还是正常显示的，但是一旦超出隐藏后，盒子竟然会变小，整了半天没搞懂解决思路：
在通过百度一顿搜索后才发现，这需要加一个属性
flex-shrink: 0，flex 布局后如果父盒子没被子盒子撑破就是正常的，如果撑破但是又没换行，它就会出现这种情况，所以用这个属性解决
# 难点②
介绍：
在选座的时候点击选座后网页没有重绘，选中效果没出来，其实我这座位是通过二维数组来展示的，数组里面放多个数组，每个数组代表行，里面的值代表列，值全部为 0，为未选中状态，而当我点击的时候，值变为 1，为选中状态，给它不同的样式，比如我这里给的是绿色，就是选中状态，如果已经被选过了，值就为 2，这个话就要一开始就获取数据的时候进行处理了，因为我在选中的时候值设置为 1 的同时还会把该位置的坐标值存下来，最后确定选中的时候发送给接口记录位数数据，所以在一开始会获取坐标数据，然后在相应位置的值设置为 2，在返回到上面那个问题，为什么会选中效果没有出来呢，这是
Vue2的一个缺陷，它监听不到数组内部的变化，它只能监听到数组的 push 等常用的方法，而我这里是直接该它的值，所以vue它监听不到，所以重绘不了解决思路：
这里我设置了一个显示隐藏变量
isShow，一开始设置为 true, 然后给整个座位区域一个v-if，值就为该变量，在每次点击座位触发函数赋值后，把这个isShow变为 false，然后在后面在加个nextTick函数，它的回调函数为把isShow设置为 true, 这个nextTick函数其实就是下次dom更新才执行的函数，这样操作其实就是为了触发页面的回流，因为回流必会重绘，于是乎就解决了这个问题，不过这个方案不太好，因为回流影响性能，秉持性能优化原则，是应该避免回流重绘的，但我这也是没办法，没想到更好的解决方案 (在vue2，如果用vue3的话，它的响应式很强大，都没有这问题....)
# 项目收获总结
# ①后端接口的简单实现
介绍：
在上一个王者荣耀项目中我学会了如何用
node.js写一个简单的后端接口，而在这个项目中，我也成功应用了，不过也仅仅是简单的接口，没有考虑安全性啥的，实现思路：
1. 首先就是实现开启后端服务的基本三步骤，先导入
express再通过调用它获得一个实例app，最后再用该app.listen去监听端口号即可开启一个正常的服务器2. 解决跨域问题和传输问题，在获得
app实例后，需要用app.use使用cors插件以解决跨域问题，使用express内置的解析json插件来解决Json格式的数据3. 引用数据库，我这里采用的数据库是
mongodb，所以直接在创建一个用于写连接mongodb的数据库文件即可，然后在app.listen前用导入即可，不过这里用的是mongodb所以提前建立好每个数据表的模型，在连接数据文件最后语句那里导入require-all插件，它的作用就是引用某文件夹下的所有文件，我们这里是要引用所有模型4. 建立路由，另外创建一个用于写后端路由的文件，这个文件需要导出一个函数，它要接收一个参数，它就是
exprss的实例app，它用于在该文件最后使用创建的路由，最后只需要在app.listen前用导入即可这时一个简单的接口就已经实现了，后续逻辑啥的都是在路由文件和模型文件里面写
# ②模拟手机验证码登录
介绍：
这里用前端模拟了一个用手机验证码登录的场景，在点击获取验证码之后会获取一串验证码，之后在输入验证码的地方还会进行验证码是否正确的校验，并且在点击获取验证码之后，会显示重新获取验证码几个字，后面还有个倒计时实现思路：
对于随机验证码的实现我们可以先定义一串完整的字符串，如
Codes:'1234567890', 然后写一个方法，我这里是显示 4 位数字验证码，所以用for循环 4 次就好了，每次从Codes里面随机取一位字符串字符串就好了，所以就可以用到js内置的Math.random函数，从我们定义的完整字符串范围内随机生成一个索引，然后取那个索引的值就好了，这样就实现了随机生成验证码的效果了，然后将拿到的码显示出来，之后再将输入的验证码与这串码作比较就可以了，然后就是倒计时部分，其实只需要定义一个倒计时的变量count，默认为 0，然后用v-if='count===0'来显示获取验证码这个盒子，点击了这个盒子之后，触发一个方法将count赋值为想要计时时长的数字，比如 10 秒，我就把count设置为 10，然后给个 10 秒定时器让count--就行了，当然还要给个v-else给另一个盒子，这个盒子的内容就是显示重新获取验证码几个字和count变量，这样就实现了两者之间的转换了
# ③全选按钮的实现
介绍：
在看过的电影或者想看的电影页面，我加了全选和单选按钮，可以实现批量删除
实现思路：
样式的话就不用说了，插入盒子
css设计而已，实现逻辑的话，首先要定义一个变量selectedMovieList:[]用来存储被选中的数据，要在每个打勾图标绑定一个点击事件，在每次点击后将数据传入，然后对selectedMovieList进行遍历判断，判断我们传进来的值存不存在于这个数组（选中与非选中的判断），存在的话，就用数组的splice方法把它去除，反之推入数组，体现效果就是选中与非选中，当然还要给这个数据设置一个布尔值变量isSelected是否给选中，因为要用这个来判断样式的改变，这样就实现了点击单选与取消单选的效果，然后就是点击全选与取消全选的效果，通过判断传进去的总数据条数与selectedMovieList的长度是否一致，一致的话就证明已经是全选了，我们要取消全选，把数组清空即可，同时要把所有数据的isSelected都变为false, 反之反向操作，这时已经完成点击单选与全选按钮的逻辑了，还有一步就是要让他们关联，就是有一种情况，你选中所有单选的话，全选按钮你不点它都要亮，这个只需要给个样式，然后三元运算符判断selectedMovieList的长度跟数据的长度是否一致，一致就全选的样式，不一致就非全选的样式就好了
