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

项目代码：https://github.com/BlogByFourMan

1、概述

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

2、任务目标

• 选择合适的 API 风格，实现从接口或资源（领域）建模，到 API 设计的过程
• 使用 API 工具，编制 API 描述文件，编译生成服务器、客户端原型
• 使用 Github 建立一个组织，通过 API 文档，实现 客户端项目 与 RESTful 服务项目同步开发
• 使用 API 设计工具提供 Mock 服务，两个团队独立测试 API
• 使用 travis 测试相关模块

3、具体方法

使用swagger生成接口文件

Swagger 是一款RESTFUL接口的、基于YAML、JSON语言的文档在线自动生成、代码自动生成的工具。

使用Swagger编辑器进行yaml文件的编写，以生成接口文件。该编辑器使用起来十分的方便，我们只要在给定的yaml文件（页面中左框中修改我们需要修改的部分即可），之后点击上方的【Generate Client】生成一系列的文件，其中的index.html打开后是API可视化的页面

最后我们的接口：

GET /article/{id}/comments
GET /article/{id} 
GET /articles
POST /article/{id}/comments //发布评论
POST /user/login //登录
POST /user/register //注册

基于Vue.js框架书写前端代码

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

在Vue的官网Vue.js中就有许多入门的教程，需要部分html、css、javascript的前置知识，但是使用起来十分的方便。结合elementUI，搭建前端十分快速。

此次，我主要负责前端：登录界面和注册界面的代码书写。实现登录、注册中与后端交互的逻辑代码，以及注册页面中各项输入的表达是否符合要求（使用正则表达式即可）。

整个过程主要为：

1. 安装node.js（Vue是基于Node.js搭建起来的，官网下载即可）
2. 安装vue和vue-cli的脚手架
   npm install vue
npm install --global vue-cli
3. 在自己的项目目录下创建webpack
   vue init webpack [project-name]
4. 使用Visual Studio Code打开项目目录，主要看/src目录，其中是我们所需要修改的代码。Vue文件是一种html的模板文件，书写起来十分简单。

└─src
    │  App.vue //main.js中调用的Vue模板，联系component中的页面
    │  main.js //每个页面都会加载的部分
    │  
    ├─assets
    │      logo.png //Vue自带的logo
    │      
    ├─components
    │      ArticleDetails.vue // 文章页面
    │      HelloWorld.vue //只是用于测试的页面
    │      Index.vue//主页面
    │      Login.vue//登录页面 
    │      Signup.vue//注册页面
    │      
    ├─router
    │      index.js // 路由设置
    │      
    └─store
            store.js //全局变量
            

以登录界面为例【login.vue】,可以看到在下就是我们的html代码，其中用花括号括住的{{msg}}是一个Vue的部件，这里相当于直接引用我们data中的msg变量。这里面我们还可以看到使用了【el-input】，这个是使用了Element-UI为我们快速搭建起页面。

此处主要书写的是部件的布局以及相对应所需要实现的方法，可以看到<script>下的methods中有按钮点击触发的方法，使用axios（使用需要npm install axios）给服务端发送请求，并接受返回参数。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  <div>
      <el-input v-model="userID" placeholder="用户名" class='inputClass'></el-input>
   </div>
   <br>
   <div>
      <el-input v-model="password" placeholder="密码" class='inputClass' type='password'></el-input>
   </div>
   <br>
   <div>
    <el-button type="primary" @click="cilckLogin()">登录</el-button>
  </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Sign in to Single Blog',
      userID: '',
      password: ''
    }
  },
  methods: {
    cilckLogin: function () {
      var that = this
      var params = new URLSearchParams()
      params.append('username', this.userID)
      params.append('password', this.password)
      this.$axios.request({
        url: 'http://localhost:8080/user/login',
        method: 'POST',
        data: JSON.stringify(params),
        responseType: 'json'
      }).then(function (response) {
        console.log(response.data)
        // 传送数据到store.js的saveToken，并回到主页
        if (!response.data.error) {
          that.$store.commit('saveToken', {
            username: that.userID,
            token: response.data.token
          })
          that.$router.push('/')
        } else {
          alert(response.data.error)
        }
      })
    }
  }
}
</script>

截图：

基于golang书写后端代码

在swagger中我们可以通过【Generate Server】便捷的生成服务端代码，我们需要往里面填充与前端交互的逻辑。之后配置数据库等操作完成对后端。（此次主要负责前端，所以对后端不是很清楚）