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

 

1、概述

   我们小组选择的项目是实现一个

2、实验过程

 1、   本次实验，我们小组共六个人，分为两组，一组四个人进行后端开发，我和另一个同学负责前端开发。

    前端开发采用的是Vue.js框架，进行前端页面的设计。

    首先商量出api接口的设计，然后通过swagger编辑器生成api文档，然后根据API文档，前后端的两个小组同时进行开发。

    我们前端采用的是Vue.js框架，为此，我使用的是编辑器HBuilderX。

    Vue项目是基于Wepack结构的，所以在电脑上安装npm 和 vue 和wepack工具，然后在命令行调用

npm init -y

npm i vue --save

npm i webpack webpack-dev-server --save-dev

 所以最后的文件结构如下：

src中component目录下存放各种Vue组件，lib目录下存放着通过使用swagger编辑器以及在github上找到的一个插件生成的api.js文件，该文件做好了之前设计的api的实现，然后在mock目录下是用来模拟后端数据的接收和返回的数据，通过该文件可以更好的实现前后端分离开发。

 

2、经过商议，我们的博客网站一共有三个页面，第一个是登录页面，第二个是文章目录界面，第三个是文章详情界面。

我负责编写文章目录界面。

项目的入口文件为main.js，在该文件中调用了根组件App.vue。然后在App.vue加载第一个页面的组件，然后通过其他组件通过router-link和router-view的配合来实现加载。

每一个Vue文件都是一个组件，同样的每一个页面可以看成一个组件，页面的结构的变化，可以看做组件的跳转，而跳转的路径根据router文件夹下的router.js来查找，这样组件的复用性就会较高。

每个Vue文件分为template，script，和style三个部分，分别对应着组件的模板，脚本和样式，然后进行编写每个组件就好了。

 

3、实验小结

    本次实验，主要是通过实战来更好的理解前后端分离的开发过程，在前端的开发过程中，后端也在开发进行中，所以采用了mock来模拟数据，这样来模拟后端就可以根据生成的数据来进行调试前端了，这样当前后端对接耦合的时候，并不需要更改太多的代码，便可以很快的完成一个完整的项目。这次实验中，我是第一次使用Vue.js框架，而一起开发前端的另一个同学对Vue的使用已经比较熟悉了，所以这次的项目中，为了不拖小组的后腿我只是承担了比较简单的任务，主要的时间都用在了学习方面，通过这次的实验，深刻的意识到了自己的不足，需要加强学习。

 

github项目链接：https://github.com/SYSU-SimpleBlog