项目开发流程、前后端合作流程

项目开发流程

> 1. 产品经理根据项目写需求文档
> 2. 产品经理召集前后端测试开会明确项目需求：前端做哪些页面，后端写哪些逻辑，测试哪些功能
> 3. 根据产品经理给的需求文档，评估工时
> 4. 前后端并行开发代码：前端先写静态页面，后端写接口
> 5. 前后端联调，打包以邮件形式发给测试
> 6. 进行第二期开发，循环上面的过程

前后端合作流程

界面做完以后，没有数据，需要跟后端要接口协定要数据：

1. 开会定接口风格、接口文档

• 前后端等项目相关人员开会把界面功能过一遍（登录、查询items、查询tags），后端考虑如何实现这些功能，最后要定下来接口风格（ REST / RPC ）和接口文档(后端提供接口调用文档，告诉前端如何调用)，接口文档需要全面、实时、可用。

2. 后端制作接口API，输出API文档

接口文档主要内容
接口名称：会话API/登录
接口路径： POST /api/v1/session
返回响应：

API Documentation

会话
- 登录
当前用户
- 获取当前用户
标签
- 修改标签
- 创建标签
- 删除标签
- 获取标签
- 获取标签列表
账目
- 创建账目
- 统计信息
- 获取账目
验证码
- 请求发送验证码

3. 根据接口文档，前端Mock

• 前端已经写好页面了，但后端还没有写好它的接口，只是有接口文档
• Mock，模拟接口测试，用于在后端接口还没有开发好API文档时，确保前端还能干活，先按照接口文档的数据格式做一个模拟数据，把界面做出来，等后端开发好API文档以后，再替换为真实API。

4. 后端写好了api接口，但并未部署到公用服务器

可以沟通后端把本地的服务器启动一下，前端设置连接本地服务器ip地址

5. 后端写好了api接口，已部署到公用服务器

前端直接设置真实API接口即可：

// vite.config.ts
server: {
    proxy: {
      "/api/v1": {
        target: "http://xxx.xxx.xxx.xx:8080/",
      },
    },
},

6. 前后端联调

登录 API

• 先写前端的发送验证码按钮的onClickSendValidationCode事件，以实现button可以实现响应点击事件。

// Form.tsx
export const FormItem = defineComponent({
    props: {
      onClick: Function as PropType<() => void>,
    }
    setup: (props, context) => {
      const content = computed(() => {
        switch (props.type) {
          case "text":
            return();
          ...
          case "validationCode":
            return(
              <>
                <input />
                <Button 
                  onClick={props.onClick}  // 新增
                >
            );
      })
    }

// Button.tsx
export const Button = defineComponent({
  props: {
    onClick: {
      type: Function as PropType<(e: MouseEvent) => void>,
    },
    type: {
      type: String as PropType<"submit" | "button">,
      default: "button",  // 默认为submit，触发onSubmit 修改为button
    },
    ...
  },
  setup: (props, context) => {
    ...
    return()=>(
      <button
         disabled={_disabled.value}
         type={props.type}
         class={[s.button, s[props.level]]}
         onClick={props.onClick}     // 新增
      >
        {context.slots.default?.()}
      </button>
    )
  }  
})

// SignInPage.tsx

const onClickSendValidationCode = ()=>{
    console.log('11111')
}

<FormItem
    ref={refValidationCode}
    label="验证码"
    type="validationCode"
    onClick={onClickSendValidationCode}  // 监听
    placeholder="请输入六位数字"
    countFrom={1}
    disabled={refDisabled.value}
    v-model={formData.code}
    error={errors.code?.[0]}
/>

• 写onClickSendValidationCode事件的请求：

// vite.config.ts 设置代理，先借助vite服务器做转发
export default defineConfig({
    server:{
      proxy:{
        "/api/v1": {
           target: "http://121.xxx.xxx.xx:xxxx/" // 后端提供API地址
      }
    }
})

// SignInPage.tsx
const onClickSendValidationCode = async()=>{
  const response = await axios.post("/validation_codes", {email: formData.email})
}

• 前端写好代码之后，会有几轮与后端调测接口，指定成功响应并收到验证码。