React进阶之路——MobX项目CRUD编写

结合之前11章内容总结

代码编写流程

• 1、分析该模块（功能）的流程
• 2、分析model，然后编写
• 3、分析url以及request， 编写
• 4、store的分析 编写代码
• 5、分析界面 并编写代码

项目目录结构如下：

CRUD:增删查改功能

添加

url.js中 注册用户对应后端接口 ，这里通过package.json文件的proxy设置为后端的url来实现跨域请求。

"proxy":"http://localhost:8080/schoFellow"

接口： Host+ port + namrOfItem + URI      此处URI即为/Fellow/user/add

// 注册用户
createUser: () => "/Fellow/user/add",

将api【请求方式，header等报文都已封装好】封装成函数，直接调用即可

新建用户代码如下：

    //新建用户
    @action createUser(user){
        const content = {...user};
        this.appStore.increaseRequest();
        return this.api.createUser(content).then(
          action(data => {
              this.appStore.decreaseRequest();
              if(!data.error){
                  this.users.unshift(UserModel.fromJS(this, data));
                  console.log(this.users);
                  return Promise.resolve();
              }else {
                  this.appStore.setError(data.error);
                  return Promise.reject();
              }
          })
        );
    }

创建用户功能部分【此处未使用css布局】：

删除

 

查询

 

修改

 

后续更新……