用vue写一个修改个人资料的页面，组件用elementui，用springboot和mysql获取数据，个人资料包括username,id_card,name,phone,email,password

好的，我可以帮你解答这个问题。

首先，在 Vue 中使用 ElementUI 组件库，需要先安装 ElementUI，可以通过以下命令进行安装：

npm install element-ui --save

然后，在 Vue 中引入 ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

接下来，我们可以创建一个组件来展示用户的个人资料，包括 username、id_card、name、phone、email 和 password。假设这个组件的名称叫做 `Profile`。

<template>
  <div>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="formData.idCard"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据对象
      formData: {
        username: '',
        idCard: '',
        name: '',
        phone: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 调用后端接口保存数据
          // ...
        }
      })
    }
  }
}
</script>

在这个组件中，我们使用了 ElementUI 的表单组件来展示用户的个人资料，并且添加了一个提交按钮来提交表单数据。

接下来，我们需要使用 Spring Boot 和 MySQL 来获取数据，并且提供一个接口来保存用户修改后的数据。这里提供一个简单的示例。

首先，我们需要定义一个实体类来表示用户的个人资料：

public class UserProfile {
    private Long id;
    private String username;
    private String idCard;
    private String name;
    private String phone;
    private String email;
    private String password;
    // 省略 getter 和 setter 方法
}

然后，我们可以定义一个接口来获取指定用户的个人资料：

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping("/{id}")
    public UserProfile getUserProfile(@PathVariable Long id) {
        return userRepository.findById(id).orElse(null);
    }
}

在这个接口中，我们使用了 `@GetMapping("/{id}")` 注解来定义了一个 GET 请求的接口，接口路径为 `/api/user/{id}`，其中 `{id}` 表示用户的 ID。在接口实现中，我们使用了 Spring Data JPA 提供的 `findById` 方法来查询指定 ID 的用户。

最后，我们需要定义一个接口来保存用户修改后的个人资料：

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @PutMapping("/{id}")
    public UserProfile updateUserProfile(@PathVariable Long id, @RequestBody UserProfile userProfile) {
        UserProfile existingUserProfile = userRepository.findById(id).orElse(null);
        if (existingUserProfile != null) {
            existingUserProfile.setUsername(userProfile.getUsername());
            existingUserProfile.setIdCard(userProfile.getIdCard());
            existingUserProfile.setName(userProfile.getName());
            existingUserProfile.setPhone(userProfile.getPhone());
            existingUserProfile.setEmail(userProfile.getEmail());
            existingUserProfile.setPassword(userProfile.getPassword());
            return userRepository.save(existingUserProfile);
        } else {
            return null;
        }
    }
}

在这个接口中，我们使用了 `@PutMapping("/{id}")` 注解来定义了一个 PUT 请求的接口，接口路径为 `/api/user/{id}`，其中 `{id}` 表示用户的 ID。在接口实现中，我们使用了 Spring Data JPA 提供的 `findById` 方法来查询指定 ID 的用户，然后使用传入的 `UserProfile` 对象更新用户的个人资料，并且使用 `userRepository.save` 方法来保存更新后的用户资料。

以上就是一个简单的用 Vue、ElementUI、Spring Boot 和 MySQL 实现修改个人资料的示例。