列表 添加 前后端分离 注意事项

列表注意事项

@TableField("parentId")//数据库字段不标准的情况下 使用@TableField注解
private Integer parentId;  

     		<el-table-column label="头像">
				<template slot-scope="scope">
					<el-avatar :size="40" :src="scope.row.img"></el-avatar>
				</template>
			</el-table-column>

handleCheckedMenusChange(val) {
				this.checkedMenus = val;
				if(val.length>0 && val!=null){
					this.saveFormModel.mids=val.map(x=>x).join(",");
				}
				
				console.log(this.saveFormModel.mids);
			}

生成字符串

<el-form-item label="性别" prop="sex">
    <el-radio border v-model="insertModel.sex" label="1">男</el-radio>
    <el-radio border v-model="insertModel.sex" label="0">女</el-radio>
</el-form-item>

label是原来的value值

<!--      handleAvatarSuccess                       ,beforeAvatarUpload都是vue的钩子函数
				        name:名称 默认是file 可以不写
						show-file-list 上传列表展示
						action 上传的地址 -->
<el-upload name="file" action="http://localhost:8080/user/upload" class="avatar-uploader" :on-success="handleAvatarSuccess"    :before-upload="beforeAvatarUpload">
     	   <img v-if="imageUrl" :src="imageUrl" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

上传头像组件注意事项

@RequestMapping("upload")
    public ResultEntity upload(MultipartFile file){

        try {
            if(file!=null && !file.isEmpty()){
                //上传路径地址
                String path = "D:\\pic\\";
                //重新命名
                String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
                System.out.println("fileName"+fileName);
                //创建文件对象
                File file2 = new File(path,fileName);
                file.transferTo(file2);
                //返回图片的路径地址
                return ResultEntity.ok("http://localhost:8080/img/"+fileName);
            }
        }catch (Exception ex){
            ex.printStackTrace();
        }
        return ResultEntity.erro("upload");
    }

添加 跟修改 用post方法

onSubmitSaveMenu() {
				// console.log(this.saveFormModel);
				this.axios.post('http://localhost:8080/role/insert',this.saveFormModel).then((res) => {
					// console.log(res.data)
					if(res.data.code==1001){
						this.saveDialogFlag = false;
						alert("添加成功");
						this.initData();
					}else{
						alert("添加失败");
					}
				})
			}