Webapp 网络应用开发流程 Vue.js 与 Laravel API 的完美结合

Webapp 网络应用程序的实践开发流程，它风行的原因主要是因为它能够跨平台，只要设备有 Web browser （浏览器） 均可执行。

开发一套程序前的系统需求与项目时程规划将影响系统UI （用户界面） 的开发，及近几年越加重视的 UX （用户体验），UX 设计好的话，用户可完全不需系统手册就会使用一套系统。

撰写系统为前、后端分离的架构，依顾客需求选用合适的数据库。 后端使用 Laravel RESTfulAPI，前端则是近几年使用人数持续上升的 Vue.js 来串接后台 RESTful API。 在来则是最终的系统 Demo 及上线。

什么是 Webapp 网络应用程序？

---

Webapp （网络应用程序） 可分为两种框架 ：

• 客户端结合后端服务器和数据库。

• 仅客户端。

而 Webapp 的客户端就是 Web browser （网页浏览器），像是 Chrome、Firefox、Safari、Opera、Edge 和 Internet Explorer 等。

Webapp 风行的原因主要是因为它能够跨平台，只要设备有 Web browser 均可执行 （电脑、平版、智能手机 ），且不需事先安装或定期升级程序。

系统需求规划

---

现有表单

• 纸本。

• Excel。

• 其它电子文件

用户访谈

这要加入【现有表单】，并同时与用户、网页程序开发人员共同讨论系统需要的页面，以及功能和逻辑等。

这是最重要的一个环节，网页程序开发人员一定要完全了解，并与【用户】再三确认需求 （很重要 * N），因为这会大大影响后续开发，程序的修改次数和时程，与后续维护的成本。

项目时程规划

---

规划项目每个页面及功能完成的时间 ，当有一个页面 UI 完成 （不含功能逻辑） 就先请【用户】确认，无误后在撰写功能逻辑，完成后再次确认，直到没问题在进行下一个页面。

后端

---

数据库 Table 规划

汇整上述需求确认【表单】+【访谈】+【UI】后，非常关键的就是数据库 Table （资料表） Schema 规划，也就是 Table 栏位及资料格式的制定，以关联式数据库 Table 和 Table 的关联性，和最终的数据库正规化。

资料库规划好坏与否，将影响整体系统的开发时程及后续的维护性，通常会花较多的时间与心丝在一开始的资料库规划。

RESTful API

RestfulAPI 简单来说就是使用后端程序 PHP （或框架 Laravel）、Node.js （或框架 Express.js）、Python 等程序串接数据库对应的 Tables，且提供一个唯一的网址作为资源，并由前端向后端进行 CRUD （新增、查询、更新或删除） 请求的操作，来进行对应资源的 Data。

Laravel

PHP 那么多框架，为什么选择 Laravel？ 因为 Laravel 它是市场占有使用率最高的 PHP 框架。

在Github排名第一的PHP框架Laravel，并且还是最晚发行的PHP框架，Star数量远高于排名第二的PHP框架。

Github 排名第一的 PHP 框架 Laravel

Google 趋势排名第一的 PHP 后端框架也是 Laravel，并有越来越高的趋势。

Google 趋势搜索排名第一的 PHP 后端框架 Laravel

前端

---

依全球使用率排序名次，目前前三名前端框架：

1. React （Facebook 开发）。

2. Angular （Google 开发）。

3. Vue （尤雨溪开发），

但在排名前100万的网站中，Vue位居第二名，比例却比Angular还要多。 与 React 相比，Vue 虽然还不及它的使用率，但 React 比 Vue.js 推出的稳定版本要提早半年发行，因此用户较多也是合理。

但在 Google 趋势搜索排名第一的 JavaScript 前端框架是 Vue，个人猜测或许是大陆人口较多吧！

Google 趋势搜索排名第一的 JavaScript 前端框架 Vue

串接后端 Laravel RESTful API

通常在网页加载时，系统就需要向后端发送一些 GET 请求，来取得资源的 Data。 例如一开始日期选择器仅能选择有数据的日期，或下拉式菜单要呈现的数据。

撰写 UI / UX 网页？

什么是 UI？

UI （用户界面） 系统和用户进行互动和信息交换的媒介，例如用户在网页点击发送表单的按钮时，将 Data 写入数据库的数据表后系统回应什么 Data。

什么是 UX？

UX （用户体验） 是构建在UI之上，以用户为中心去思考如何让UI更简单、易用、好用，用户完全不需阅读「系统 SOP 操作册」就知道如何操作这套网页系统。

系统 Demo

---

• Demo v1 版本：部门内初步测试，并提出欲修正问题。

• Demo v2 ~ vN 版本：Demo v1 问题修改后，部门内测试直到所有问题修正。

• Test v1 版本：需求单位测试欲修正问题。

• Test v2 ~ vN 版本：Test v1 问题修改后，需求单位测试直到所有问题修正。

• Release 正式版，系统上线。

• Bug 与功能不断修正和调整 UI 及 UX，最终成为能让【用户】省时、易用、好用的一套系统。 （当用户离不开它的时候，也就代表这个系统非常成功）