html 表单提交
~~~
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="关键词" prop="keyword">
<el-input v-model.trim="form.keyword" class="w-500" :maxlength="12"></el-input>
</el-form-item>
<el-form-item label="内容" prop="text">
<el-input v-model="form.text" type="textarea" :rows="4" class="w-500"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add('form')" :loading="isLoading">提交</el-button>
<el-button @click="goback()">取消</el-button>
</el-form-item>
</el-form>
~~~
vue方法 后台接口
~~~
add() {
this.$refs.form.validate((pass) => {
if (pass) {
this.isLoading = !this.isLoading
this.apiPost('admin/text', this.form).then((res) => {
this.handelResponse(res, (data) => {
_g.toastMsg('success', '提交成功')
this.isLoading = !this.isLoading
setTimeout(() => {
this.goback()
}, 1500)
}, () => {
this.isLoading = !this.isLoading
})
})
}
})
}
~~~
完整添加页面代码
~~~
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 添加文本回复</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="form-box">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="关键词" prop="keyword">
<el-input v-model.trim="form.keyword" class="w-500" :maxlength="12"></el-input>
</el-form-item>
<el-form-item label="内容" prop="text">
<el-input v-model="form.text" type="textarea" :rows="4" class="w-500"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add('form')" :loading="isLoading">提交</el-button>
<el-button @click="goback()">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import http from '../../../../assets/js/http'
import fomrMixin from '../../../../assets/js/form_com'
export default {
data() {
return {
isLoading: false,
form: {
keyword: '',
text: ''
},
rules: {
keyword: [
{ required: true, message: '请输入关键词' }
],
text: [
{ required: true, message: '请输入内容' }
],
}
}
},
methods: {
add() {
this.$refs.form.validate((pass) => {
if (pass) {
this.isLoading = !this.isLoading
this.apiPost('admin/text', this.form).then((res) => {
this.handelResponse(res, (data) => {
_g.toastMsg('success', '提交成功')
this.isLoading = !this.isLoading
setTimeout(() => {
this.goback()
}, 1500)
}, () => {
this.isLoading = !this.isLoading
})
})
}
})
}
},
created() {
_g.closeGlobalLoading()
},
mixins: [http, fomrMixin]
}
</script>
~~~
**## 需要注意**
#### 不要忘记引进
~~~
import http from '../../../../assets/js/http'
import fomrMixin from '../../../../assets/js/form_com'
~~~
#### 更换接口地址
~~~
this.apiPost('admin/text', this.form).then((res)
~~~
