学习
实践
活动
专区
工具
TVP
写文章

Slog104_使用React框架进行前端开发15

ArthurSlog

SLog-104

Year·1

Guangzhou·China

October 29th 2018

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

Medium:https://medium.com/@ArthurSlog

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

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

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

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

贵以贱为本 高以下为基

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

信息源

开始编码

本次来设计 ‘开发前端’ 的功能界面

暂时先支持PC端

这里我们使用React框架来搭建

同时引入less编译器 使用less语法来提供样式解决方案

整个界面主要由四个部分组成

一个下拉选择栏: 用于选择测试接口(就是在开发阶段 我们选择把数据传给后端的指定接口)

input输入框:根据上面的选择 这里输入的是准备发给后端的数据

测试按钮:当点击测试按钮的时候 会调用我们上面选中的函数 和 数据 向后端发起请求

结果显示框:显示后端返回的所有数据

这里是开发前端的界面

使用方式是这样的

首先选择下拉选择栏 选中用于后端接收数据的接口

然后在输入框里 输入要传给后端的数据

接着点击测试按钮

后端接受到数据之后 会反馈数据回来

所以 结果显示框 就会显示得到的测试结果了

开发前端 在项目前期开发 到 项目上线之后的持续集成和功能、业务的拓展 起到了一个持续更新迭代的作用

将不再影响已有的功能和业务

在界面样式的处理上

将root节点的字体大小固定为16px

样式采用rem单位

主要的逻辑代码如下:

这里使用的请求函数 与 ‘客户端前端’ 里的请求函数是一样的

后面把这些频繁使用的功能函数打包起来 降低开发成本

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

至此,完成了‘开发前端’的界面和功能的开发。

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

谢谢

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

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券