首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

谢谢

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181020G11DLB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券