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
至此,确定了前后端的数据交互的业务逻辑的设计。
如果你喜欢我的文章 欢迎点赞 留言
谢谢
领取专属 10元无门槛券
私享最新 技术干货