【项目】前端实习——知识库项目总结

经过一周快两周的时间，经历了一次完整的项目迭代需求，现在对所做的工作进行梳理，主要是熟悉了前后端分离，开发的整个流程、熟悉协同开发、搭建页面等；把踩过的坑和问题都梳理出来，以防忘记。

开发流程及协同开发

开发全流程

本次项目参与了，全流程，包括前期和产品后端一起开的产品需求评审，接口评审，主要是清楚这个项目的页面效果，想要实现的操作是什么，后面进行开发排期，就是前端、后端、测试分别安排的时间段，以配合流程顺利进行，开发完后进行转测，前期开发都是使用的development模式，（打包比较快？）。后期的测试阶段，涉及一些bug的修复，这里是有一个叫流水线的东西，每次修改bug后提交代码后，发起流水线，就会更新代码，这样测试就能进行测试。

Git协同开发

刚开始天真的以为是github代码仓库，这个开源是面向个人分享的，对于公司要求安全性，需要购买正版软件，这边用的是gitbucket；
对于实习生而言，所用到的指令还是比较少的，

1、从建立好的仓库中，以及已经搭建好框架中拉倒本地进行开发
git clone 相应的迭代分支

2、开发就是自己在组件内部进行开发，开发完后需要进行提交
git add * 将所有存到本地

git commit -m "按迭代格式提交，例如feat(迭代90): 新增查看功能”

然后推到远端分支，这样就能看见你提交的代码

git push origin head

此时如果你的分支是最新的分支，那么你就直接提交就行了，但有别人先提交，就会先主动进行分支合并

此时就会存在merge冲突，这种情况一般是出现在你和同事都对一部分代码进行了修改
会在代码中提示，解决冲突conflict，接受所有修改，还是接受外部的变化等（可能需要git pull从远端拉下最新代码）

另外，一般公司内部会有自己封装的组件在gitsubmodule中，如果他们修改了其中的值得话，就要去进行gitsubmodule更新
git submodule update

基本上就是这些操作，还是挺简单的，另外及时提交代码便于进行协调开发，提交要规范。

前后端分离

在自学阶段可能经常提到现在主流的前后端开发模式，在自学阶段的练习项目可能也进行了模拟，例如借助mock.js进行前后端模拟的开发，这次亲身体会后就对流程熟悉多了。在项目开发前，对这一块还是比较不清晰的，当时主要有两个问题

• 获取到的接口数据，如何转换为组件展示的数据，结构上可能不一样？那前期页面搭建的时候如何定义数据结构呢？？？？
• 数据挂载的阶段，数据新增删除后进行刷新的操作，实现页面的响应式渲染

以上是当时最主要的两个问题，在开发完后都有了明确的答案了。例如我要做一个树形控件展示的层级目录接口，Antd组件库中定义了响应式数组，按照组件的数据格式treeData按着这个格式，就能进行展示。

 const treeData = ref<TreeProps['treeData']>([
      {
   
        title: 'parent 1',
        key: '0-0',
        children: [
          {
   
            title: 'parent 1-0',
            key: '0-0-0',
            children: [
              {
    title: 'leaf', key: '0-0-0-0' },
              {
   
                key: '0-0-0-1',
              },
              {
    title: 'leaf', key: '0-0-0-2' },
            ],
          },
          {
   
            title: 'parent 1-1',
            key: '0-0-1',
            children: [{
    title: 'leaf', key: '0-0-1-0' }],
          },
          {
   
            title: 'parent 1-2',
            key: '0-0-2',
            children: [
              {
    title: 'leaf 1', key: '0-0-2-0' },
              {
   
                title: 'leaf 2',
                key: '0-0-2-1',
              }