7.前后端联调发送axios请求实现新增和修改

新增和修改可以做到一起，根据前端 有没有传 id 就可以判断，如果前端传了 id,那就说明是修改操作，如果没传 id 那就说明是新增操作。

预期效果

文件上传我们单独放后面这次先不做文件上传。logo 图片上传可以单独领出来做。

新增

后端简单

    @PostMapping("/add")
    public ResultVo add(@RequestBody AppInfo appInfo){
        appInfoService.saveOrUpdate(appInfo);

        return ResultVo.success("操作成功",null);


    }

前端：表单校验

    <el-dialog
        title="新增/修改"
        :visible.sync="dialogVisible"
        width="60%">


      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-row>
          <el-col :span="8">
            <el-form-item label="软件名称" prop="softwarename">
            <el-input v-model="ruleForm.softwarename"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="apk名称" prop="apkname">
              <el-input v-model="ruleForm.apkname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属平台" prop="flatformid">
              <el-select v-model="ruleForm.flatformid" placeholder="所属平台">
                <el-option label="手机" :value="1"></el-option>
                <el-option label="平板" :value="2"></el-option>
                <el-option label="通用" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="一级分类">
              <el-select v-model="ruleForm.categorylevel1" placeholder="一级分类" @change="getLevel22()">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="c in addlevel1" :key="c.id" :label="c.categoryname" :value="c.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二级分类">
              <el-select v-model="ruleForm.categorylevel2" placeholder="二级分类" @change="getLevel33()">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="c in addlevel2" :key="c.id" :label="c.categoryname" :value="c.id"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="三级分类">
              <el-select v-model="ruleForm.categorylevel3" placeholder="三级分类">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="c in addlevel3" :key="c.id" :label="c.categoryname" :value="c.id"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

用 form 表单的校验 rules 做的，失去焦点的时候验证，当然提交表单前的时候也会校验，其中 apkname 做一个自定义校验。

修改

主要是回显有点难度 ，下拉回显的时候可能出现数字，比如所属平台 三级分类都有可能出现。

比如 1 代表手机，如果不加: 的话，就把 1 当成"1"了

至于三级联动的回显如下

apk 名称唯一性校验

强调特殊情况：修改的时候只改其他数据，没改apkname的情况 直接 return true