服务计算_简单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

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

服务计算_简单web服务与客户端开发实战_第1张图片

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

你可能感兴趣的:(服务计算_简单web服务与客户端开发实战)