注册/留言/问卷

@Form

目的

掌握数据绑定的使用

熟悉常见表单元素的事件

了解表单提交和网络请求的基本过程

内容

数据绑定

表单事件

Json-Server数据服务器搭建

网络请求

使用组件

input - text/nickname

slider

picker

radio radio-group

checkbox checkbox-group

textarea

buttton - submit

要求

自行设计场景，完成留言、用户注册或问卷调查，并应用到小程序项目中

三个应用案例完成一个即可，建议全部完成

实验报告：采用学院统一下发的 实验模板 文件，以文字说明，配以必要的效果图片或核心代码，展示并说明数据来源、实施过程、各部分功能、具体内容和实现细节；最后导出为PDF，按照要求命名，提交个人学习通作业

未按要求在规定时间内提交视为无效，不得分

相关格式规范，请参考 论文格式规范 Paper Prettier

特别提示

实验报告除了各要素齐全外，特别要体现

完成的案例

接口文档和字段说明；其中信息字段info要体现个人信息或小组信息

结构WXML - 代码

逻辑js -代码

效果- 截图，统一宽度，高度随内容、有编号、有说明标题，如：图1 页面布局

接口设置

服务器支持 json-server

数据文件 form.json - info开发者信息；msg用户留言数据，user用户注册数据、survey用户问卷数据

{
    "info": {},
    "msg": [],
    "user": [],
    "survey": []
}

留言模块

.婚礼邀请函案例

表单各字段名字name：用户姓名uname、用户性别ugender、用户电话ucell、用户邮箱umail、用户留言umsg

效果图

用户注册模块

用户节点信息参考字段，可根据实际需求定制

user:{
    id:20221001
    ubirth:'2020-08-01',
    udesc:'hi,there.',
    ulike:[],
    uage:18,
    ugender:'女',
    uname:'glpla',
}

提交代码 - 默认提交json，所以不需要额外指定header

submit(e){
    wx.request({
        url: 'http://127.0.0.1:3000/user',
        method:'POST',
        data:this.data.user,
        success:(res)=>{
            console.log(res);
        },
        fail:err=>{
            console.log(err);
        }
    })
}

效果图

问卷调查模块

问卷内容以小组为单位自定

表单各字段名字name：用户姓名uname、用户邮箱umail、用户选择urx（x:1-n）、用户留言umsg

表单提交事件处理函数 - 具体服务器地址视当时开发环境

submitSurvey(e) {
    wx.request({
        url: 'http://127.0.0.1:3000/survey',
        method:'POST',
        data: e.detail.value,
        success:res=>{
        console.log(res);
        },
        fail:err=>{
        console.log(err);
        },
        complete:()=>{
        console.log('log done');
        }
    })
}                

效果图

扩展

使用node.js服务器，提交数据单独保存为一个文件

const express = require('express')
const fs = require('fs');

// 创建Web服务器
const app = express();
const port = 3000;

// 静态资源；系统中间件-靠前引用；路由中间件
app
  .use(express.static('./public'))
  .use(express.json())

app.post('/userInfo', (req, res) => {
    console.log(req.body);
    fs.writeFile('./public/data/userInfo.json', JSON.stringify(req.body), (error) => {
        if (error) {
            console.log('保存文件失败了')
        }
    });
    res.json(req.body)
})

app.listen(port, () => {
  console.log('server is on at: http://127.0.0.1:3000');
});

如何改善用户体验？如加入各种提示信息

. wx.showLoading()

. wx.hideLoading()

. wx.showToast()