Skip to main content
  1. Posts/

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

·

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

在这次的 “老有所得” 项目中,我主要负责项目中前后端通讯部分的开发。我们团队遵循前后端分离的开发原则,因此在前端开发时我无需了解太多后端的实现细节,只需要掌握后端提供的 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-ifv-for 在同一节点中出现时,v-for 优先级更高,可以把 v-if 放在父节点上来避免这种情况;嵌套 v-for 时,节点的 :key 属性必须两两不同。

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