Quasar 框架使用 axios 用 GET 方式提交简单表单
在处理简单查询，或者其他不需要修改数据库中的数据的情况下，可以简单地通过GET 请求方式提交表单。这样提交的最大好处就是，简单。只需要在网址中构造和包含查询参数即可。在Quasar 框架中使用 axios 用 GET 方式提交简单（无文件）表单比较容易。
Template 部分
Quasar 框架使用<q-form> 组合<q-input> ，在<q-form> 中使用@submit 、@reset 指定监听submit 、reset等事件的方法，然后再用<q-btn> 添加type=”submit”、type=”reset” 等按钮，点击按钮后，会调用<q-form> 中指定的对应事件的方法。每个<q-input> 通过v-model 绑定到Vue中的某个数据(除type=”file”时外)，通过type=”textarea” (默认type为text，可取值为 password、textarea、email、search、tel、file、number、url、time、date)设置需要的输入类型。
示例如下
<q-form
@submit="onSubmit2"
@reset="onReset"
class="q-gutter-xs"
>
<q-input
filled
hide-bottom-space
v-model="postdata.title"
label="标题 *"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
<q-input
filled
hide-bottom-space
type="textarea"
v-model="postdata.body"
label="内容 *"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
/>
<q-input
@input="val => { postdata.postfile = val[0] }"
filled
hide-bottom-space
type="file"
hint="Native file"
/>
<div>
<q-btn label="提交" type="submit" color="primary"/>
<q-btn label="重置" type="reset" color="primary" flat class="q-ml-sm" />
</div>
</q-form>
Script 部分
Script中，可以将需要通过表单提交的数据都绑定data 上，提交的方法名称须与<q-form> 的@submit 中指定的方法名称相同，在此方法中将表单数据组合成查询字符串，接到查询网址后面，通过 axios 的get 方法直接提交即可。
示例如下
export default {
data () {
return {
postdata: {
title: '',
body: '',
},
}
}
methods: {
onSubmit2 () {
var url = 'api/new_post/'
var params = 'title=' + this.title + '&body=' + this.body
this.$axios
.get(url + ‘?’ + params)
.then(response => {
console.log(response.data)
var res = response.data
} else {
console.log(res.msg)
}
})
},
}
}
其中的params 可以通过定制一个类似其他语言format 功能的函数来改进
function formatString (s, rep) {
console.log(typeof (rep))
console.log(Array.isArray(rep))
if (Array.isArray(rep)) {
// rep is array, e.g. [0, 1]
for (var i = 0; i < rep.length; i++) {
var regl = new RegExp('\\{' + i + '\\}', 'gm')
s = s.replace(regl, rep[i])
}
} else if (typeof (rep) === 'object') {
// rep is object, e.g. {key1: 0, key2: 1}
for (var key in rep) {
if (rep[key] !== undefined) {
var regd = new RegExp('\\{' + key + '\\}', 'g')
s = s.replace(regd, rep[key])
}
}
}
return s
}
……
var params = formatString('title={title}&body={body}', this.postdata)
……
冀公网安备 13010402001886号