vue 使用后端接口

目录解析hu黄

黄![黄色部分是用到的文件夹](https://img-blog.csdnimg.cn/20210715191647616.png?x-oss-
=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzYxNTI4OQ==,size_16,color_FFFFFF,t_70)

api中是放接口的地方(后端的接口)

views中是放组件的（这里用到了后端的接口）

例如：后端有个查询的接口使用这个接口的步骤：

1. 先在api文件夹中创建此借口对应的js文件，

import request from ‘@/utils/request’
// 以下都是对应后台接口的方法实现（在这里我叫他们前端接口）通过这些方法得到想要的后端数据
export function getList(params) {
return request({
url: ‘/vue-admin-template/table/list’,
method: ‘get’,
params
})
}
export function getStudentList() {
return request({
url: ‘/cardservice/student/query/all’,
method: ‘get’
})
}

2。在views中的.vue文件中调用api中的接口

先导入

// 写在< script>中最前边

import { getStudentList } from ‘@/api/table’

再在方法集中写个方法来获取接口传来的值

// 接口的使用
getStudentApi() {
getStudentList().then(request => {
console.log(‘这是接口返回值’, request.data)
this.tableData = request.data //将前端的数据data赋上后端的值
})
}

最后不懂的话请参照下面的代码来琢磨

.vue文件代码

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="bj"
        label="班级"
        width="150"
      />
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
      />
      <el-table-column
        prop="rxsj"
        label="入学时间"
        width="120"
      />
      <el-table-column
        prop="xb"
        label="系别"
        width="120"
      />
      <el-table-column
        prop="xskh"
        label="学生卡号"
        width="300"
      />
      <el-table-column
        prop="zy"
        label="专业"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格提示-->
    <el-dialog title="哈哈" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="日期" prop="rxsj">
          <el-date-picker
            v-model="form.rxsj"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="班级" prop="bj">
          <el-input v-model="form.bj" placeholder="请输入班级" />
        </el-form-item>
        <el-form-item label="系别" prop="xb">
          <el-input v-model="form.xb" placeholder="请输入系别" />
        </el-form-item>
        <el-form-item label="学生卡号" prop="xskh">
          <el-input v-model="form.xskh" placeholder="请输入学生卡号" />
        </el-form-item>
        <el-form-item label="专业" prop="zy">
          <el-input v-model="form.zy" placeholder="请输入学生专业" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStudentList } from '@/api/table'
export default {
  data() {
    return {
      tableData: null,
      dialogFormVisible: false,
      form: {
        bj: null,
        name: null,
        rxsj: null,
        xb: null,
        xskh: null,
        zy: null
      },
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        rxsj: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        bj: [
          { required: true, message: '请输入班级名', trigger: 'blur' }
        ],
        xb: [
          { required: true, message: '请输入系别', trigger: 'blur' }
        ],
        xskh: [
          { required: true, message: '请输入学生卡号', trigger: 'blur' },
          { size: 9, message: '长度9个字符', trigger: 'blur' }

        ],
        zy: [
          { required: true, message: '请输入学生专业', trigger: 'blur' }
        ]
      }
    }
  },
  created() { // 自动执行的方法
    this.getStudentApi()
  },
  methods: { // 方法集合
    handleClick(row) {
      // if (index === 0) {
      //   this.name = row.name
      //   console.log('当前点击行的数据', row, index)
      // } else {

      // }
      this.form.name = row.name
      this.form.rxsj = new Date(row.rxsj)
      this.form.bj = row.bj
      this.form.xb = row.xb
      this.form.xskh = row.xskh
      this.form.zy = row.zy
      // this.gridData.date = row.date
      // this.gridData.province = row.province
      // this.gridData.city = row.city
      // this.gridData.zip = row.zip
      // this.gridData.address = row.address
      this.dialogFormVisible = true
      console.log('当前行的数据', this.form)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 接口的使用
    getStudentApi() {
      getStudentList().then(request => {
        console.log('这是接口返回值', request.data)
        this.tableData = request.data
      })
    },
    // 表单验证
    submitForm(formName) {
      // this.dialogFormVisible = false
      // console.log('form的数据', this.form)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    }
  }
}

</script>

作者：妹子你好既然都看了我的作品了也不差看看我这人了 本人微信号：182
33243643