项目实训：用户信息管理——前端实现与交互（vue）

用户信息管理——前端实现与交互

任务

调用后端已经写好的用户信息管理的接口，如info、update等。

对用户信息进行展示，并提供可修改的表单及按钮。

具体工作

• 完善api文件夹下，user.js的后端接口

  import request from '@/utils/request'
  
  export function getInfo(token) {
    return request({
      url: '/api/user/info',
      method: 'get',
      params: { token }
    })
  }
  
  export function logout() {
    return request({
      url: '/api/user/logout',
      method: 'post',
    })
  }
  
  export function getUserInfo(data) {
    return request({
      url: '/api/user/getInfo',
      method: 'post',
      data
    })
  }
  
  export function update(data) {
    return request({
      url: '/api/user/update',
      method: 'post',
      data
    })
  }
  
  export function getUserId(data) {
    return request({
      url: '/api/user/getUserId',
      method: 'post',
      data
    })
  }
  

代码的简要介绍：
getInfo(token)：根据用户的令牌(token)，向后端发送请求以获取用户信息。这个函数发送一个 GET 请求到 ‘/api/user/info’ 路径，并通过参数传递用户的令牌。

logout()：向后端发送一个 POST 请求，以执行用户的注销操作。它请求 ‘/api/user/logout’ 路径，并没有传递任何参数。

getUserInfo(data)：根据提供的用户信息数据，向后端发送请求以获取用户信息。这个函数发送一个 POST 请求到 ‘/api/user/getInfo’ 路径，并通过请求体传递用户信息数据。

update(data)：根据提供的用户信息数据，向后端发送请求以更新用户信息。这个函数发送一个 POST 请求到 ‘/api/user/update’ 路径，并通过请求体传递用户信息数据。

getUserId(data)：根据提供的用户信息数据，向后端发送请求以获取用户的ID。这个函数发送一个 POST 请求到 ‘/api/user/getUserId’ 路径，并通过请求体传递用户信息数据。

• 在views文件夹下新建视图info.vue

  <template>
      <div>
        <el-card  style="width: 1000px; margin-top: 20px; margin-left: 20px;" shadow="hover">
          <el-form label-width="80px" size="small">
              <!--头像上传测试-->
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:8080/api/user/uploadAvatar'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
              <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-form-item label="用户名" style="margin-left: 200px; margin-top: -150px">
              <el-input v-model="form.username" disabled autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" style="margin-left: 200px">
              <el-input v-model="form.email" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="密码" style="margin-left: 200px">
              <el-input v-model="form.password" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" style="margin-left: 200px">
              <el-input v-model="form.createTime" disabled autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="更新时间" style="margin-left: 200px">
              <el-input v-model="form.updateTime" disabled autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item >
              <el-button type="primary" @click="save">保 存</el-button>
              <el-button type="primary" @click="return1">返回主页</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </template>
     
     
    <script>
    import { mapGetters } from 'vuex'
    import {getUserInfo,update} from '@/api/user'
    export default {
      name: "Info",
      computed: {
      ...mapGetters([
        'name',
        'avatar'
      ])
    },
      data() {
  
        return {
          form: {
              avatarUrl:'',
              username:'',
              email:'',
              password:'',
              createTime:'',
              updateTime:'',
  
          },
        }
      },
  
      created() {
        this.GetUserInfo()
      },
      methods: {
        GetUserInfo() {
          getUserInfo({data:{userAccount:this.name}}).then(response=>{
              this.form.username=this.name
              this.form.email=response.data.email
              this.form.createTime=response.data.createTime
              this.form.updateTime=response.data.updateTime
              this.form.password=response.data.password
          })
        },
        save() {
          update({data:{userAccount:this.name,email:this.form.email,password:this.form.password}}).then(response=>{
              if(response.code==200){
                  this.$notify({
                  title: '成功',
                  message: '信息更新成功！',
                  type: 'success'
              });
              this.$router.go(0)
              }
  
          })
        },
    return1() {
          this.$router.push("/")
        }
      }
    }
    </script>
     
    <style>
  
    </style>
  
  

代码是一个 Vue.js 的代码，主要用于渲染一个用户信息编辑页面，包括用户头像上传、用户名、邮箱、密码、创建时间、更新时间等信息的展示和编辑功能。对于排版只是简单优化了一下。对于用户信息编辑页面的逻辑处理和与后端交互：
首先，从 VueX 中导入了 mapGetters 方法，用于映射 store 中的 getters。同时从 @/api/user 中导入了 getUserInfo 和 update 方法，这些方法用于与后端进行数据交互。定义一个名为 “Info” 的 Vue 组件，使用了 mapGetters 方法，将 store 中的 name 和 avatar 映射为组件的计算属性，以便在组件中使用。定义一个 form 对象，用于存储用户编辑的表单数据，包括头像地址、用户名、邮箱、密码、创建时间和更新时间。
created：在组件创建时调用 GetUserInfo 方法，用于获取用户信息并填充表单数据。

方法：
GetUserInfo 方法：调用 getUserInfo 方法从后端获取用户信息，并将获取到的信息填充到表单数据中。
save 方法：当用户点击保存按钮时，调用 update 方法将修改后的用户信息发送给后端进行更新。如果更新成功，会弹出一个成功的通知，并且重新加载页面以刷新数据。
return1 方法：当用户点击返回按钮时，使用 $router.push 方法跳转到主页。

• 页面展示如下

  

• 页面展示如下

• 心得体会：
  前后端分离的开发模式下，调用后端提供的接口实现了前后端的交互。这种模式能够使前端与后端的开发团队独立工作，提高了开发效率和灵活性；使用了 Vue.js 构建了前端的用户信息管理页面。Vue.js 的数据绑定和组件化开发让页面逻辑清晰，代码结构清晰易懂；通过调用后端提供的 API，实现了用户信息的获取和更新功能。在处理 API 请求和响应时，需要考虑到网络延迟和错误处理，保证用户体验；将用户信息展示在表单中，并提供修改功能，这需要对表单数据的双向绑定进行处理，以确保数据的同步和正确性；在页面中提供了保存和返回按钮，以及成功更新的提示信息，这些能够增强用户体验，使用户在使用过程中感到方便和舒适。通过 Vue Router 管理页面的路由跳转，使用户能够方便地在不同页面之间进行导航。
  最后，这部分加深了我对 Vue.js 的理解和应用，同时也提升了对前端开发的技能和经验。