目录解析hu黄
黄
api中是放接口的地方(后端的接口)
views中是放组件的（这里用到了后端的接口）
例如：后端有个查询的接口使用这个接口的步骤：
先在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"borderstyle="width: 100%"><el-table-columnfixedprop="bj"label="班级"width="150"/><el-table-columnprop="name"label="姓名"width="120"/><el-table-columnprop="rxsj"label="入学时间"width="120"/><el-table-columnprop="xb"label="系别"width="120"/><el-table-columnprop="xskh"label="学生卡号"width="300"/><el-table-columnprop="zy"label="专业"width="120"/><el-table-columnfixed="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-pickerv-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.namethis.form.rxsj = new Date(row.rxsj)this.form.bj = row.bjthis.form.xb = row.xbthis.form.xskh = row.xskhthis.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.addressthis.dialogFormVisible = trueconsole.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
