“老有所得” 项目实践心得

其实最大的心得是不要一次开多个项目。

在这次的 “老有所得” 项目中，我主要负责项目中前后端通讯部分的开发。我们团队遵循前后端分离的开发原则，因此在前端开发时我无需了解太多后端的实现细节，只需要掌握后端提供的 API 的功能与特性。这一开发原则无疑大大提高了整个项目开发过程的并行度，也简化了我的工作。

项目后端部署在 CentOS 服务器上，前端通过访问服务器特定端口的特定 url 来向服务器发起请求。例如登录请求：

http://<server_ip>:8080/signIn?username=uname&password=pwd

众所周知，网络请求发生错误是十分常见的，后端出现异常也同样是家常便饭，因此，为了在数据获取出错时及时定位问题，我利用 Postman 来模拟对服务器发送请求的操作以检查返回的数据，并利用 Navicat 检查数据库内的数据是否及时更新，以及对数据库进行修改。利用好这两个软件极大地提高了调试错误的效率。

向后端发送的请求通常是 HTTP/POST 方法的异步请求，这就要用到 AJAX 技术（实际上获取数据通常采用 JSON 格式而不是 XML）。异步请求提高了应用的性能，但是却会带来被戏称为 “回调地狱”（callback hell）的问题——由于异步请求的原理，返回的数据都是由回调函数来处理，在代码中回调函数常常会嵌套很多层，使得代码非常难维护和理解。本项目中我主要通过将函数模块化的办法解决这一问题。

另一个巨大的、而又极易被忽视的问题是：回调函数与 js 中的主函数的执行是类似并行的，这使得在回调函数中修改变量的值可能会滞后，或者说迟于我们期望的时间。这一问题十分危险而隐蔽，因此我通常都在回调函数内部完成需要用到被修改变量的操作。

最后值得一提的就是 Vue.js 中的数据绑定问题，这类问题也是耗费我时间最久的一类。首先，在 Vue.js 中通过索引给数组元素赋值是无法触发视图更新的。因此我主要使用如下两种方式更新数组：

this.listData.push(ret.data[item]); // 1
this.$set(this.replyTime, item, this.$calcTime(ret.data[item].creatime.time)); // 2

对于二维数组的更新，采用这种较为麻烦的变体：

const temp_list = this.listData[val].slice(0);
for (let item in ret.data) {
  temp_list.push(ret.data[item]);
}
this.$set(this.listData, val, temp_list);

其次，诸如 Mustache 内部和 v-bind 系列的数据绑定中，不能直接使用函数的返回值，这一问题困扰了我非常之久，最后通过使用数组元素绑定，并通过函数获取数组内数据的方式绕过了这一限制。

最后，v-if 与 v-for 在同一节点中出现时，v-for 优先级更高，可以把 v-if 放在父节点上来避免这种情况；嵌套 v-for 时，节点的 :key 属性必须两两不同。

本项目中，我学习了新的前端框架 uni-app 和 Vue.js，尽管各有一定不足，我依然认为两者为项目开发提供了不少便利；而在界面布局与设计上，我并没有太多贡献，不过在进行调整时使用到了 flex 布局，算是比较大的收获。