vue中给的默认值是调接口取到的

Posted 2023-03-17

在企业开发过程中，往往有着明确的前后端的分工，前端负责接收、使用接口，后端负责编写、处理接口。

对于前端如何使用接口，今天在Vue中进行讲解。

一个项目往往由这几个部分组成。

其中在src文件夹中，
，有这么些内容。
我们常常把接口文件，新建一个文件夹在src下，命名为api，api内的文件便是接口文件。

通常把后端的接口写在api文件夹下，自己命名为xxx.js

// 登录
export function login(data)
return request(
url: '/api/court/login',
method: 'post',
data
)

// 获取验证码
export function captchaImage(params)
return request(
url: '/api/captchaImage',
method: 'get',
params
)

登录后复制

对于需要添加信息在头部的，可以这么写

// 获取登录用户信息
export function getInfo(params)
return request(
url: '/api/court/getInfo',
method: 'get',
params,
headers:
'Authorization': JSON.parse(localStorage.Authorization)

)

登录后复制


这个就是request.js 文件的内容
import axios from 'axios'
// import getToken from '@/utils/auth'

// create an axios instance
const service = axios.create(
// 外网更新
// baseURL: 'http://xxxxx',
baseURL: '/xxxxx',
timeout: 5000 // request timeout
)

export default service
登录后复制

项目的页面往往写在views中，每个页面设一个文件夹，其中index.vue 内容则是本页面的内容

在页面中，如果我们需要使用某个接口。则需要进行引入操作。通过 import 接口名1、接口名2 from ’ api文件地址 ’
import login,captchaImage,getInfo,logOut,reset from '@/api/login'
登录后复制
from后所跟的就是api中文件的地址路径

接口往往是在方法中进行调用，对于不同接口 ，需要的参数也不一样，根据需求，我们传入对应的参数即可。图中的 captchaImage、以及login就是接口信息。

接口的使用格式：

接口名(参数1:页面中的参1，参数2：页面中的参数2).then(res =>
console.log(res)//res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论

)
登录后复制

这样就是接口调用的全部过程了。附上控制台信息图以及apipost接口图。 参考技术A 在Vue中，您可以使用created钩子函数来为data属性初始化默认值。例如，您可以在created钩子函数中调用API接口并将返回的值作为默认值传递给data属性，这样就可以将API接口的返回值作为默认值。 参考技术B 项目要求，简化下是这样，需要先调用接口获取下拉框的值，并且设置第一项为其默认值，然后调用另外一个接口，需要带上这个

VUE的第二种封装接口、查询删除用户功能

参考技术A /* 参数methdos默认值是get，path表示具体路径，post需要给data传参默认值是空对象，

get请求需要给params传参默认值是空对象 */

/* 这里是把传过来的对象进行了解构 并给了默认值 这样写不用在意参数传递的位置、

   因为他们是根据对象的key名称来对应的 */

export const httpServe = (path='', params = , method = 'get', data = = ) =>

    return new Promise((resolve, reject) =>

        instance(

            url: path,

            params,

            method,

            data

        )

            .then(res =>

                resolve(res)

            )

            .catch(err =>

                reject(err)

            )

    )



/*这种调用的写法 必须要按照顺序 */

/* get请求的调用方法 */

/* httpServe('users',name:'zhangsan') */

/* post请求的调用方法 */

/* httpServe('login',,'post',username:'admin',password:'123123')  */

/* 使用对象解构的方式来传参 */

/* 这样的话就不用考虑参数的顺序问题,参数会通过key名来找到对应的值 */

/* 而且没有必要传的值 比如post请求不需要传params  */

/* get请求的调用方法 */

/* httpServe(path:'users',params:name:'zhangsan') */

/* post请求的调用方法 */

/* httpServe(method:'post',data:username:'admin',password:'123123',path:'login') */

import httpServe from '@/http/index.js'

/* 登录 */

export const loginPost = (path="",data=)=> httpServe(path:path,method:'post',data:data);

/* 必须以对象方式传递 */

/* 左侧菜单列表 */

export const menusGet = (path="",params=)=> httpServe(path,params);

/* 用户列表 */

export const usersGet = (path="",params=)=> httpServe(path,params);

/* 添加用户 */

export const addusersPost = (path="",data=)=> httpServe(path,method:'post',data);

/* 删除用户 */

export const usersDelete = (path="")=> httpServe(path,method:'delete');

<template>

  <div class="users">

    <el-row>

      <el-input v-model="queryName" placeholder="搜索用户名" @keyup.native.enter="search" style="width:200px"></el-input>

      <el-button icon="el-icon-search" circle @click="search" style="margin-left:15px"></el-button>

      <el-button type="primary" round @click="drawer = true"

        >添加用户</el-button

      >

    </el-row>

    <!-- :wrapperClosable="false" 表示点击遮罩区域不关闭抽屉 true则可以 -->

    <el-drawer

      title="添加用户"

      :visible.sync="drawer"

      :direction="direction"

      :wrapperClosable="false"

    >

      <add-users @addok="addok" />

    </el-drawer>

    <!-- el-table组件 需要给data属性动态传递一个数组对象tableData -->

    <el-table :data="tableData">

      <!-- el-table-column组件 表格中的数据 是数组对象tableData中的属性date所对应的值

      比如 date属性的值对应的2016-05-02 -->

      <!-- 表头标题 是由label属性来传递的 width属性是表示表头字段的宽度 不给宽度就自适应表格 -->

      <el-table-column label="创建日期">

        <template slot-scope="scope">

          <div> scope.row.create_time | getDate </div>

        </template>

      </el-table-column>

      <el-table-column prop="email" label="电子邮箱"></el-table-column>

      <el-table-column prop="mobile" label="手机号"></el-table-column>

      <el-table-column prop="role_name" label="角色名称"></el-table-column>

      <el-table-column prop="username" label="用户名"></el-table-column>

      <!-- fixed="right" 固定操作在右侧 -->

       <el-table-column fixed="right" label="操作" width="100">

          <template slot-scope="scope">

            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>

          </template>

         </el-table-column>

    </el-table>

    <!-- 分页 -->

    <!-- :page-sizes="[5, 10, 15, 20] 这个是用来选择分页的条数的 -->

    <!-- :page-size="5" 默认一页显示5条数据 -->

    <!-- :total="400" 总条数 -->

    <!-- layout="total, sizes, prev, pager, next, jumper" 管理分页展示的样式内容 -->

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage"

      :page-sizes="[5, 10, 15, 20]"

      :page-size="pagesize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    >

    </el-pagination>

  </div>

</template>

<script>

import usersGet , usersDelete from "@/http/request.js";

import AddUsers from "@/components/AddUsers.vue";

export default

  name: "UsersView",

  components:

    AddUsers,

  ,

  /* 当组件被激活的时候 , 可以为组件的菜单被点击到的时候触发*/

  activated:function()

  console.log('我被点了');

  ,

  /* 当离开组件的时候触发 */

  deactivated:function()

   console.log('我离开了');

  ,

  data()

    return

      /* 表格数据 */

      tableData: [],

      /* 抽屉打开方向从右到左 */

      direction: "rtl",

      /* 默认抽屉是关闭的 */

      drawer: false,

      /* 默认打开的是第一页的数据 */

      currentPage: 1,

      /* 一页默认展示5条 */

      pagesize: 5,

      /* 默认总条数是0 */

      total: 0,

      /* 搜索用户名 */

      queryName:''

    ;

  ,

  /* 局部的过滤器 */

  // filters:

  //   getDate(v)

  //     /* 生成当前时间戳的日期对象 */

  //     let oDate = new Date(v);

  //     return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();

  //  

  // ,

  created()

    /* 一进入页面调用获取用户数据接口 */

    this.getTableDate();

  ,

  methods:

    /* 上面通过作用域插槽把点击的一行的数据已经传过来了 */

    async del(row)

      console.log(row.id);

      try

        let data:meta:msg,status =  await usersDelete('users/'+row.id)

        if(status==200)

          this.$message.success(msg)

          /* 删除成功之后刷新列表 */

          this.getTableDate()

        else

          this.$message.error(msg)

       

      catch(err)

        this.$message.error(err)

     

    ,

    /* 通过用户名搜索 */

     search()

       console.log(this.queryName);

       /* 点击搜索 因为queryName 的值通过v-model 已经被修改

          所以直接调取接口获取数据 */

       this.getTableDate()

     ,

    /* 选择一页显示多少条数据 */

    handleSizeChange(val)

      console.log(`每页 $val 条`);

      /* 改变一页显示多少条 */

      this.pagesize = val;

      /* 重新获取数据渲染表格 */

      this.getTableDate();

    ,

    /* 点击具体页数、上一页和下一页以及输入页数 都会触发下面的函数 */

    /* 选择当前的是第几页 */

    handleCurrentChange(val)

      console.log(`当前页: $val`);

      /* 改变当前是第几页 */

      this.currentPage = val;

      /* 重新获取数据渲染表格 */

      this.getTableDate();

    ,

    /* 当子组件添加数据成功的时候触发的方法 */

    addok()

      /* 重新获取用户数据 */

      this.getTableDate();

      /* 关闭抽屉 */

      setTimeout(() =>

        this.drawer = false;

      , 600);

    ,

    getTableDate()

      usersGet("users",

        /* 当前页 */

        pagenum: this.currentPage,

        /* 一页展示多少条 */

        pagesize: this.pagesize,

        /* 查询参数 空字符串是查询全部 通过用户名查询的*/

        query:this.queryName

      )

        .then((res) =>

          let data, meta = res.data;

          /* 当状态为200表示数据获取成功 */

          if (meta.status == 200)

            /* 把数据给到tableData数组中 */

            this.tableData = data.users;

            /* 把数据中总条数给到total */

            this.total = data.total;

          else

            /* 如果获取数据有误，给出相应提示 */

            this.$message.error(meta.msg);

         

        )

        .catch((err) =>

          this.$message.error(err);

        );

    ,

  ,

;

</script>