vue+antd权限树的回显[前端处理数据]

接着上篇文章vue+antd权限树的回显,前端对数据的处理

在本次项目中最后选择前端对数据的处理:

具体原因:点击树1的应用,树2回显是对应的菜单,但是当用户在选完应用1的值后,然后再选择应用2的菜单时,返回应用1刚才选择的内容清空了,之所以清空是因为对树2反显的接口又进行了一次请求,导致刚才选中的内容清空,所以选择前端进行对数据处理。

 

需要实现的效果:

这是前端对数据的处理,有部分注释如果还有不懂的可以留言或者私信笔者乐意讲解思路,如有不足,也可以提一下。

 await postAction(this.url.getMenuAndButtonByAppId, {
        appId: record.key,
        roleId: this.roleId,
      })
        .then((res) => {
          let menuList = res.result
          const dealTreeData = (menuList) => {
            const data = menuList.map((item) => ({
              key: item.key,
              title: item.name,
              children: item.children && item.children.length ? dealTreeData(item.children) : null,
            }))
            return data
          }
          this.menuTreeData = dealTreeData(menuList)
          // 权限树的反显
          function menuId(menuList, menuArr, result = []) {
            menuList.find((item) => {
              if (menuArr.includes(item.key) && !item.children) {
                result.push(item.key)
              }
              if (item.children) menuId(item.children, menuArr, result)
            })
            return result
          }
          /**注: this.menuTreeData:是组装成树结构 this.checkedKeysObj[record.key]是后端返回来的需要授权的标识 */
          this.menuCheckedKeys = menuId(this.menuTreeData, this.checkedKeysObj[record.key])
        })
        .finally(() => {
          this.loading = false
        })

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的示例,展示如何使用Vue和Spring Boot实现回显MySQL文件和表单数据。 1. 配置MySQL数据库连接 在Spring Boot的application.properties文件中配置MySQL数据库连接信息,例如: ``` spring.datasource.url=jdbc:mysql://localhost:3306/db_name spring.datasource.username=username spring.datasource.password=password spring.datasource.driver-class-name=com.mysql.jdbc.Driver ``` 2. 创建MySQL表 在MySQL数据库中创建一个表,用于存储文件和表单数据,例如: ``` CREATE TABLE `file_data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `file_name` varchar(255) DEFAULT NULL, `file_data` longblob, `form_data` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ``` 3. 编写Spring Boot后端代码 创建一个Spring Boot的RestController,用于处理HTTP请求并从MySQL数据库中检索文件和表单数据。下面是一个简单的示例: ``` @RestController @RequestMapping("/api") public class FileDataController { @Autowired private FileDataRepository fileDataRepository; @GetMapping("/file-data") public List<FileData> getFileData() { return fileDataRepository.findAll(); } @PostMapping("/file-data") public void saveFileData(@RequestBody FileData fileData) { fileDataRepository.save(fileData); } } ``` 4. 编写Vue前端代码 使用Vue和Element UI创建一个简单的表单,用于上传文件和提交表单数据。下面是一个简单的示例: ``` <template> <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="Upload File"> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleFileUploadSuccess" :before-upload="beforeFileUpload" :show-file-list="false"> <el-button slot="trigger" size="small" type="primary">Select File</el-button> </el-upload> </el-form-item> <el-form-item label="Form Data"> <el-input v-model="form.formData"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">Submit</el-button> </el-form-item> </el-form> </template> <script> import axios from 'axios' export default { data() { return { form: { formData: '', file: null }, uploadUrl: '/api/file-data' } }, methods: { beforeFileUpload(file) { this.form.file = file return true }, handleFileUploadSuccess(response) { console.log(response) }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let formData = new FormData() formData.append('formData', this.form.formData) formData.append('file', this.form.file) axios.post(this.uploadUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response) }).catch(error => { console.log(error) }) } else { console.log('error submit!!') return false } }) } } } </script> ``` 5. 创建FileData实体类和Repository 创建一个FileData实体类,用于映射MySQL表中的数据。创建一个FileDataRepository,用于从MySQL数据库中检索数据。下面是一个简单的示例: ``` @Entity @Table(name = "file_data") public class FileData { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "file_name") private String fileName; @Lob @Column(name = "file_data") private byte[] fileData; @Column(name = "form_data") private String formData; // getters and setters } @Repository public interface FileDataRepository extends JpaRepository<FileData, Long> { } ``` 以上就是一个简单的示例,展示了如何使用Vue和Spring Boot实现回显MySQL文件和表单数据的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值