Slog99_使用React框架进行前端开发10

ArthurSlog

SLog-99

Year·1

Guangzhou·China

October 20th 2018

个人网站：http://www.arthurslog.com

CSDN：https://blog.csdn.net/u010997452/article/list/1

GitHub：https://github.com/BlessedChild/ArthurSlog

NPM：https://www.npmjs.com/~arthurslog

掘金：https://juejin.im/user/59f2a424f265da432f305c66/posts

简书：https://www.jianshu.com/u/b9ebe10f0534

segmentfault：https://segmentfault.com/u/arthurslog/articles

吾言甚易知 甚易行 天下莫能知 莫能行

开发环境MacOS(Mojave 10.14 (18A391))

信息源

Ajax

Fetch

开始编码

本次来实现前端和后端的接口设计

这里使用原生的Fetch函数

先在前端页面添加一个函数 绑定页面组件的点击事件 用于向后端发起请求并传递数据

这里添加在商城首页的‘公告’组件上 绑定该组件的点击事件

client/

额 代码有点长 没经过整理和优化

但是 可以看到其中的关键部分在于

这里把后端的地址 定义在了外部文件config.json里面

然后在‘商城首页’的‘公告栏’组件上绑定点击事件

事件关联了toucha函数 该函数向服务端发起请求

发起的请求包含了两个数据 一个是‘func: 0’ 一个是 ‘object: "test"’

func代表了功能函数的代码 后端通过前端传过来的func的值来判断 前端当前想干什么想执行哪个函数

而object就是 前端传给后端的数据内容了 这些数据传给后端之后 由后端进行相应的处理 处理完了之后再怎么弄就看开发的时候怎么来设计了

下面是后端的代码

switch里的写法有一些语法的问题 不影响结果就不理了

关键可以看一下注释的内容

注释的内容 解释了一个业务上的逻辑设计

最后经过测试 前后端成功实现了数据交互 接下来进行具体的业务设计 比较繁琐

这里把最关键的思想已经呈现出来了 一次不讲太多 避轻就重比较合适

工程文件已经上传至Github：https://github.com/BlessedChild/ArthurSlogStore

至此，确定了前后端的数据交互的业务逻辑的设计。

如果你喜欢我的文章 欢迎点赞 留言

谢谢