这篇文章介绍如何在OnceDoc中,通过OnceDB定义和构建一个数据表单。
第一步、创建表单模块
在mod文件夹下新建form文件夹模块,并在form文件夹中新建form.tmpl文件、package.json文件和svr文件夹,在svr文件夹中新建form.js文件。
package.json文件代码是这样的:
{
"name": "oncedoc_form",
"version": "0.0.1",
"main": "svr/form"
}
其中name和version这两个属性一起构成了form模块的识别符,main属性指定了程序的主入口文件。
第二步、在前端网页中构造表单
这一步中我们编辑前端网页文件form.tmpl,使用Bootstrap的form元素在网页中构造一个简单的表单,供用户输入和提交自己的称呼和电话号码。
<form action="/form/submit.post" id="informationForm" method="post" data-ajax="false">
<div class="form-group">
<label for="inputName">称呼</label>
<input type="text" class="form-control" id="inputName" placeholder="称呼" name="name">
</div>
<div class="form-group">
<label for="inputTel">电话</label>
<input type="text" class="form-control" id="inputTel" placeholder="电话" name="tel">
</div>
<button type="submit" class="btn btn-default" id="information-form-submit">提交</button>
</form>
第三步、建立与表单信息相对应的数据库schema
根据我们之前构造的表单,在服务器端的javascript文件form.js中加入与表单信息相对应的数据库架构,示例的架构由id、记录称呼的name和记录电话号码的tel三个属性构成。
oncedb.schema('form', {
"id" : "id;minlen(4);maxlen(32)"
, "name" : "minlen(1);maxlen(32)"
, "tel" : "minlen(5);maxlen(32)"
})
第四步、在数据库中插入新条目
继续编辑服务器端的javascript文件form.js,加入app.post函数。当用户点击按钮提交表单时,信息将被存入数据库中。
app.post('form/submit.post', function(req, res) {
var userInfo = req.body
oncedb.insert('form', {
id : +new Date()
, name: userInfo.name
, tel : userInfo.tel
}, function(err) {
if (err) {
res.end(err.toString())
return
}
res.send('提交成功')
})
})
继续编辑服务器端的javascript文件form.js,加入app.post函数。当用户点击按钮提交表单时,信息将被存入数据库中。
回复 (0)