fzhiy

Running all the time.

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

点击量:19

结合之前11章内容总结

代码编写流程

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

项目目录结构如下:

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

CRUD:增删查改功能

添加

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

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

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

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

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

将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();
              }
          })
        );
    }

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

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

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

删除

查询

修改

后续更新……

 

点赞

发表评论

电子邮件地址不会被公开。