前端实习周记1

yikina
533 阅读6分钟

前端实习周记1

​ 第一周入职，主要的工作就是看看目前正在做的项目代码，也简单上手改了一点样式和功能，写周记的目的也是记录一下自己遇到的难点和解决办法，也算是一种反思和总结了.

如何有效阅读他人代码

​ 咱们新入职的员工前几周的任务一般都是公司项目代码，所幸第一个接触到的项目不算特别难，总的架构可以理解，再就是这个项目基本上就是我们组其他两位前端写的，不懂的地方直接去问他们本人就好了，像公司的另外一个大项目就是三年前建立的了，都不知道沦落到过多少人手里= =，所幸还有一点文档和项目架构思维导图（噢不过问了mentor他说这个文档也是很久写的了，那还是得硬看orz）

一直看项目代码还是很容易困的，经过这一周困上加困、昏昏欲睡的读代码的历程，我还是总结了一些尽快上手的读前端代码和快速定位的方式：

  1. 理清项目整体架构：这一块如果是大项目的话可以看看文档，注意src下面每个文件夹代表的意思，一般都会分展示数据的页面和处理数据逻辑的页面，还有路由、api、样式、封装的hooks、redux等等，每个子文件夹看一两个文件 差不多
  2. 看路由定位具体文件位置：因为目前参与的这个项目页面很多，如果真正上手要改的时候不可能一个一个的慢慢找，这时候可以启动项目看看后缀的路由名，一般都会对应着具体位置
  3. 善用搜索和ctrl：有时候一个页面里面写了很多逻辑和组件，从头看到尾不太现实，这时候就可以利用搜索快速定位到要修改的地方，用ctrl也可以快速跳转到其他组件定义的地方，方便我们理清页面逻辑，特别是封装后的内容。

git操作

踩坑注意：

  1. 先pull代码再push自己的代码到远程，不然可能会造成问题要merge
  2. 拉远程分支代码的时候一定要注意有没有切换到本地目标分支
  3. 注意项目commit message的提交规则，比如我们公司就要feat: 加一个空格再写message

常见操作:

  • git init [project-name]：创建或在当前目录初始化一个git代码库
  • git branch -a : 查看远程和本地的分支
  • git add . : 添加所有未追踪的文件到暂存区
  • git commit -m 'feat: some issue': 把暂存区的文件提交
  • git remote add origin git@projectlink.git : 关联远程仓库
  • git push -u origin layout : 把本地提交的内容推送到远程仓库

如何在本地创建一个与远程仓库一样的分支:

  • git checkout -b layout origin/layout 创建并切换到layout分支并与远程的origin/layout分支关联
  • git pull origin layout 从远程的origin/layout拉取分支并合并（merged)
    • ——区分git fetch origin layout 从远程的origin/layout拉取分支不合并
  • git status // 显示有变更文件的状态

具体问题

下面来总结以下，本周我在工作中所遇到的一些问题

display:inline-flex

场景：使用样式为display:flex组件包裹住导出按钮和人数统计，需要让导出按钮和人数统计为一行展示，但是二者都是单独各占一行展示。

解决：考虑到可能是块级元素-行内元素的问题，使用line-flex可以解决

<div style={{display:'inline-flex'}}>

页面添加select框

场景：页面添加一个select选择框，其中该选择框的接口来自另一个页面

解决：

  1. 参考了项目中的代码，是通过useState(）来管理每个select框数据的请求，封装一个获取数据的函数，利用useEffect每次页面一加载就请求后端获取数据。于是自己写了一个state和发送请求的方法和封装发请求的方法，把这个方法添加到useEffect里面去：
const [pointTypes, setpointTypes] = useState([])
const getPointTypes = () => {
    ...
    setpointTypes(...)
  }

//添加到useEffect，每次打开页面时请求
useEffect(() => {
  ...
    getPointTypes()
  }, [])
  1. 再写具体的getPointTypes代码中，遇到了一个问题：后端返回的数据是一个对象，需要读取到该对象中的属性数组（数组的每一项也是一个对象），再遍历这个数组的每一项得到其中的属性
//后端返回的对象
res={
...
area:[{county_id: 3, county_name: '草莓国'}],
type:[{typeNum:1,typeName:'草莓'},{typeNum:2,typeName:'蓝莓'}]
}

可以使用...操作符，取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。我这里用pointTypes存储select下拉框的数组（数组中的每一项为对象，有着typeNum和typeName属性），第一个数据为全部的标识，剩下的数据通过...取出type属性遍历每一项添加到当前的pointType中。

const getPointTypes = () => {
    query(`{接口地址}`).then((res) => {
      const pointTypes = [
    {
      typeNum: "-2",
      typeName: '全部',
    },
    ...res.type.map((item) => ({
      typeNum: item.typeNum,
      typeName: item.typeName
    }))
  ];//请求完毕后重新setState
      setpointTypes(pointTypes)
    })
  }

引申：如果后端返回的是一个数组，如何操作？

假设后端返回的是一个数组res

res=[
{typeNum:1,typeName:'草莓'},{typeNum:2,typeName:'蓝莓'}
]

我们在编写getPointTypes可以通过设立一个结果数组（内置全部），再通过遍历并push的形式存储下来

const getPointTypes = () => {
    query(`{接口地址}`).then((res) => {
        //先定义一个数组，包含全部的设置
      const pointTypes = [
    {
      typeNum: "-2",
      typeName: '全部',
    }];
        //遍历返回的每一项数据，push进pointTypes
      res.map((item)=>{
          pointTypes.push({
              typeNum:item.typeNum,
              typeName:item.typeName
          })
      })  
  )
  ];//请求完毕后重新setState
      setpointTypes(pointTypes)
    })
  }

添加新数据展示

场景：在上方查询条件-状态select框下面添加一个状态option选择框，表格上方及表格内添加一个新数据展示

问题：添加一个状态option选择框后点击查询，下方数据没有正确的过滤显示

解决：

经过排查，是因为状态为全部的typeNum和新添加的状态的typeNum重合了，他们的字段都为-1，尝试过将全部的typeNum改为字符串的'-1'并没有奏效，且该属性if_online字段在发送请求时并没有带上（被方法过滤掉了），将全部的改为-2，遂解决

学习经验：

  • 使用谷歌浏览器开发者工具查看参数字段、接口信息——是否被过滤、是否在请求时携带上
avatar
文章
阅读
粉丝