his项目思考

阅读数:1023 发布时间:2016-05-22 14:40:32

作者:zzl005 标签: react.js 朱忠来005 mysql api php

React.js制作页面

前段时间,和师兄一起通过 React.js 写了 his 这个挂号项目的几个主要页面,比如选择医院页面、选择科室页面、挂号详情页面等等,然后引入了路由,进行单页面间内容的跳转。
这个阶段基本都是界面,考虑的点是组件颗粒化到什么地步才算合适?

后端数据--数据库(MySQL)

这个阶段,肯定得先有数据库,因为已经有了 xyt_db 这个数据库,所以不用新建了,然后在 xyt_db 这个数据库中,需要建立几个存放不同内容的数据表,比如科室表 dep_tbl,医生表 doc_tbl,病人表 pat_tbl。有了这些表,才能为前面提供数据。
多个表之间的层级关系是:地区———>医院——>科室——>医生——>订单——>病人
而不同的表之间也有一些联系,比如一个医院有多个具体的科室,外科,内科,耳鼻喉科,儿科等等。科室表为了跟医院表 hosp_tbl 建立联系,科室表中必须要有一个 h_id 字段,代表该科室所属的医院。his项目数据库分解

获取后端数据--编写api(PHP)

前面界面已经有了,后端的数据也有了,那用户怎么通过点击获取到需要的数据呢,比如用户在选择医院页面,如何通过点击就能获取到选中的那个医院的科室列表呢?这个时候就需要编写 api 了。api笔记

用户通过点击,发送请求,服务器接受到请求,找到这个 api 文件,然后执行里面的方法,到数据库中查询数据,返回数据等。

接收数据,更新页面

在 react.js 中,将数据请求放在 componentDidMount 中,也就是 dom 一完成挂载就触发数据请求。通过 fetch 方法从后台获取到数据,调用 setState 方法,更新组件状态,修改以后,自动调用 this.render 方法,再次渲染组件,更新用户界面。组件的状态改变,会触发重新渲染。

整个流程梳理

假设用户现在处于选择医院页面,他想通过点击选择一个医院,然后跳转到这个医院的科室列表,以供进一步选择。他点击之后,首先是路由起到作用,进行跳转,组件开始挂载,有一些初始数据,然后,挂载完成后,在 componentDidMount 中, fetch 方法被执行,发送带有参数(h_id = XX)的数据请求,服务器接受到请求,找到这个 api 文件,执行查询数据的方法,到数据库中查找到数据,再返回数据,前台接收到数据后,调用 setState 方法,更新组件状态,重新渲染 dom ,更新用户页面,用户就看到了该医院的所有科室列表,供他进一步的选择。

执行路径:
点击某个医院————>通过路由跳转到科室列表————> getInitialState() 初始化组件————>dom 挂载完成后调用 fetch 方法,发出数据请求————>后台服务器接受到带参请求————>从数据库中查到数据,接着返回数据————>前台接受到数据————>调用 setState 方法,更新组件状态————>自动调用 this.render 方法,再次渲染组件————>更新用户界面————>用户在页面上看到该医院的科室列表

相关文章推荐: