简单 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,搭建前端十分快速。
此次,我主要负责前端:登录界面和注册界面的代码书写。实现登录、注册中与后端交互的逻辑代码,以及注册页面中各项输入的表达是否符合要求(使用正则表达式即可)。
整个过程主要为:
- 安装node.js(Vue是基于Node.js搭建起来的,官网下载即可)
- 安装vue和vue-cli的脚手架
npm install vue
npm install --global vue-cli
- 在自己的项目目录下创建webpack
vue init webpack [project-name]
- 使用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】便捷的生成服务端代码,我们需要往里面填充与前端交互的逻辑。之后配置数据库等操作完成对后端。(此次主要负责前端,所以对后端不是很清楚)