服务计算——简单 web 服务与客户端开发实战

项目小结

本次实验的课程网站：
利用 web 客户端调用远端服务是服务开发本实验的重要内容。其中，要点建立 API First 的开发理念，实现前后端分离，使得团队协作变得更有效率。

可以从上述描述中看出，这次作业的内容是通过web客户端实现前后端分离。我们小组选择的项目是模仿https://swapi.co/网站，我在小组中的分工是负责这次实验的前端部分，也就是根据VUE.js框架做出web客户端。

---

• 知识准备
  一、VUE.js框架
  二、Vue-cli脚手架
• 实验步骤
  一、准备工作
  二、实现swapi功能
  三、效果展示
• 参考资料

---

知识准备

一、VUE.js框架

Vue.js是一款重要的JavaScript前端框架，可以被用来组织和简化Web开发。在MVC模式【模型(model)－视图(view)－控制器(controller)】中，它负责视图层，并与其它层交互。
为了解决管理大型程序时的繁琐，Vue使用组件来解决。通过将一个大型程序分割成更小的组件，VUE.js框架成功地降低了代码的耦合性，也提高了代码的复用性。
Vue.js使用基于HTML的模板语法，所以它的组件也是基础HTML的拓展，便于我们定义其数据和行为。这样就满足了我们完成web客户端的要求。

二、Vue-cli脚手架

Vue-cli是Vue的脚手架。从建筑业的角度而言，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。类似的，在我们使用Vue框架的时候，也希望有一个脚手架，能够自动生成Vue.js的项目模板。

vue-cli的目录结构：

目录	内容
build	webpack配置
config	vue项目配置
src	项目核心文件
static	静态资源目录

实验步骤

一、准备工作

写在前面：以下步骤任何一步出错都建议改用root权限再运行一次。

1、在课程网站中要求：

前端一般使用 npm 安装

所以我们先更新一下npm。先查看一下版本，输入指令：

我们可以更新下npm的版本，使用指令：

然后再检查一下升级后的npm版本：

更新后的版本已经达到我们本次实验的要求。

这里提前说明一下，我们小组在准备工作的时候，发现当npm的版本号低于4.0的时候，安装vue就非常慢。所以这里强烈建议要更新npm。网上更新npm的方法大致有两种，第一个是使用淘宝的镜像文件，第二个是使用sudo指令。我使用前一种失败了，所以我使用sudo指令完成了npm的更新。

2、安装依赖
安装一些vue常用的依赖包：

开发依赖包：npm install --save-dev webpack
路由安装：npm install --save vue-router

3、安装vue-cli
根据官网的指示：

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

不过这点的要求是需要Node.js 8.9或更高版本，超过了我虚拟机的版本，而且我们这次作业也用不到新特性，所以就安装一个旧的就可以了：

npm install --global vue-cli

4、新建一个vue-cli项目
在vue3.0及以上版本，新建一个vue-cli项目的指令是：

vue create 项目名

前面说过了，我们的版本不到3.0，所以使用指令：

vue init webpack 项目名

然后会出现很多选项，全回车确定就可以了：
生成的项目结构：

然后我们就可以在这个的基础上实现功能了。

二、实现swapi功能

这次我和另一个小组成员负责swapi前端，具体说是实现搜索的界面，也就是根据输入信息查找结果，并将查找的内容分页显示。我们一个个函数来看他们的功能。
1、根据搜索词得到内容（和页数）
第一步：判断用户输入的查询词是否合法
第二步：如果合法就向后端服务器请求查找内容，将得到的内容输出
第三步：为了后面将查找结果分页，这里也需要获取该信息的页面，所以再向后端请求页面数

get: function() {
     
  var flag = /^([a-z]{1,10}((\/[0-9]*)|(\/\?page\=\d)))?$/.test(this.content);
  if(!flag) {
     
    alert("input error");
    return;
  }
  this.$http.get("http://localhost:8080/api/" + this.content).then(
    function(res) {
     
      if(res.ok) {
     
        this.msg = JSON.stringify(res.data, null, 4);
      }
    }, function() {
     
      alert("error");
      return;
    });

  if(this.content != ""){
     
    this.getPages();
  }
},

2、得到页数
前面提到的，需要在搜索的时候得到页数，便于翻页

getPages: function() {
     
  this.contentTag = this.content.split("/")[0];
  this.$http.get("http://localhost:8080/api/" + this.contentTag + "/pages").then(
    function(res) {
     
      this.pages = Math.ceil(parseInt(res.data)/5);
      this.currentPage = this.content.indexOf("=") != -1? parseInt(this.content.split("=")[1]) : 1;
    }, function() {
     
      alert("Error: can not get number of page!");
    });
},

3、前一页和后一页
因为swapi中的内容都是分页的，我们就加了一个翻页的功能。它们的主要功能是根据当前内容的页数，通过按钮的调用，获取前一页或者后一页的内容

prevPage: function() {
     
  var nowP = this.currentPage-1 >= 1? this.currentPage-1 : 1;
  this.currentPage = nowP;
  this.$http.get("http://localhost:8080/api/" + this.contentTag + "/?page=" + nowP).then(
    function(res) {
     
      this.msg = JSON.stringify(res.data, null, 4);
      console.log("Page: ", this.currentPage, "/", this.pages);
    }, function() {
     
      alert("Error: no pre page!");
    });
},

nextPage: function() {
     
  var nowP = this.currentPage+1 <= this.pages? this.currentPage+1 : this.pages;
  this.currentPage = nowP;
  this.$http.get("http://localhost:8080/api/" + this.contentTag + "/?page=" + nowP).then(
    function(res) {
     
      this.msg = JSON.stringify(res.data, null, 4);
      console.log("Page: ", this.currentPage, "/", this.pages);
    }, function() {
     
      alert("Error: no next page!");
    });
}

我负责的部分就是以上内容，所在文件是：

client\swapi\src\components\Search.vue

三、效果展示

先展示一下整个search界面：

输入people/3，结果为：

然后点击pre按钮，就会显示上一页的内容：

这也是与swapi官网是一样的

参考资料

1、vue-cli项目的目录结构
2、Vue.js官网
3、JSON教程