目录解析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中是放组件的(这里用到了后端的接口)
例如:后端有个查询的接口使用这个接口的步骤:
- 先在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