Vue请求后台接口渲染到页面及实现修改功能

一、如何读出数据并渲染

1、首先在api下建一个js文件，然后在文件里写入拿到的接口，例如

export const getCompanyInfo = () => that.$http("/base/companyInfo", "get");

2、在前端页面引入请求接口，在此之前需要对数据进行双向绑定，我是用的是v-model，我的数据是在表单<el-input>中存放，简单叙述一下v-model，v-model指令用于表单<input>、<textarea>、<select>元素上创建双向绑定，他会根据空间类型自动选取正确的方法来更新元素。她负责监听用户的输入事件以及更新数据。我是在created()中调用的接口，实现了读出数据并渲染。接下来代码展示。

第一步
import {getCompanyInfo} from "api/server/admin";
第二步
created(){
    const loading = this.$loading({			//这里有一个等待过程
      lock: true,
      text: "Loading",					
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    getCompanyInfo()
      .then((res) => {
        console.log(res);
        this.formLabelAlign = res.data;   //formLabelAlig是我存放数据的列表
        loading.close();
      })
      .catch((err) => {
        loading.close();
        console.log(err);
      });

这样就可以实现从页面中读出数据并且将数据渲染到页面中。

二、如何使用接口添加和修改数据

1、首先在api项目下的js文件中引用后台接口。

export const updateCompanyInfo = (data) => that.$http("/base/companyInfo", "post", data);

2、先引入接口，在提交按钮上绑定一个点击事件，对这个点击事件在methods下写下此函数，这里我使用的是async/await用来执行异步任务。这里简单介绍一下async/await，在函数前面添加关键字async表示该函数将以异步模式运行，关键字await在async函数内部使用，表示紧跟在后面的表达式，需要等待结果。下面代码示例

import { updateCompanyInfo } from "api/server/admin";

 methods: {
    async submit() {
        try{
          const res = await updateCompanyInfo(this.formLabelAlign);
          this.success("完成设置");
          this.parentInit();
        }catch(e){
          this.err(e.msg);
        }
    }  

3、最后需要去页面中看是否可以使用。

这样就算操作成功了。