graphql准备

QQ20210317-153059.pngQQ20210317-153412.png

这样就能够运行一个graphql服务了

相关schema文件在项目目录下graphql.schema

demo说明

image.png

运行 yarn start 可以看到demo运行效果

这是一个简单的示例,用到了 query allTests, mutation deleteTest

sevices是管理api请求的地方, 如下示例

image.png

models中是管理数据流的地方

image.png

pages存放所有页面

image.png

路由在此注册

image.png

git协作

gitlab看板

  1. 新建议题(标题先用自己的名字,不要照抄test!)

image.png

  1. 创建分支与合并请求

image.png

  1. 分支已经创建好了(如下),记得在vscode中切换到自己的分支完成任务image.png
  2. 注意要点

每次写代码前:

  1. 用 git branch 检查当前分支,避免代码写在错误的分支
  2. 用 git pull origin master 拉取最新主分支(避免自己的代码与主分支冲突)
  3. 用 git status 检查代码状态,看有没有忘记commit的代码

eslint

新任务的项目配置有强制eslint检查(会在git commit之前运行,如果有错误会导致无法commit)

因此学会使用vscode eslint插件很重要

  1. 安装eslint (重新启动或许会弹窗提问是否允许eslint访问项目,授权允许)

image.png

  1. 例如 下方代码提示setList 从未被修改过,需要使用const 代替 let, 或许还有其他错误提示,不知道怎么修改可以百度

image.png

修改后就没有错误提示了

image.png

  1. 修改tab size, 1个tab转化为2个空格(项目eslint规定2个空格缩进,这样不管习惯tab还是空格都能够正常使用并通过检查了)

image.png

任务

image.png

第一部分以自己名字命令,需要开创自己的分支,建立自己的页面。(不要删除demo)

第二部分需要根据company相关接口实现增删查改表格,显示根据company有的字段(3个)显示,所需接口如下
image.png
接口是随机模拟返回值的,所以实现效果不一定正确(例如demo的删除不一定成功),但是增删查改的操作都需要调用相关api!不能自己写数据在代码中!