调查问卷–案例分析

开发一个“调查问卷”的案例来学习常用表单组件的使用，收集用户填写胡表单信息提交给服务器，或者从服务器获取数据后显示在表单中。

1.1 编写表单页面

在微信开发者工具中，创建新项目：pages/index/index.wxml
具体代码如下：

<view class="container">
  <form bindsubmit="submit">
    <view>
      <text>姓名：</text>
      <input name="name" value="小脆筒"/>
    </view>
    <view>
      <text>性别：</text>
      <radio-group name="gender">
        <label><radio value="0" checked/>男</label>
        <label><radio value="1"/>女</label>
      </radio-group>
    </view>
    <view>
      <text>专业技能：</text>
      <checkbox-group name="skills">
        <label><checkbox value="html"/>HTML</label>
        <label><checkbox value="css"/>CSS</label>
        <label><checkbox value="js"/>JavaScript</label>
        <label><checkbox value="ps"/>Photoshop</label>
      </checkbox-group>
    </view>
    <view>
      <text>您的意见：</text>
      <textarea name="opinion" value="测试" />
    </view>
    <button form-type="submit">提交</button>
  </form>
</view>

在pages/index/index.css中文件中编写样式，具体代码如下：

.container{
  margin:50rpx
}
view{
  margin-bottom: 30rpx
}
input{
  width: 600rpx;
  margin-top: 10rpx;
  border-bottom: 2rpx solid #ccc
}
label{
  display: block;
  margin:8rpx
}
textarea{
  width: 600rpx;
  height: 100rpx;
  margin-top: 10rpx;
  border: 2rpx solid #eee
}

在pages/index/index.json文件中设置导航栏标题，具体代码如下：

{
  "navigationBarTitleText": "调查问卷"
}

1.2 服务器数据交互

关闭验证

在pages/index/index.js，代码如下：

Page({
  submit: function(e) {
    wx.request({
      method:'post',
      url: 'http://127.0.0.1:3000/',
      data: e.detail.value,
      success:function(res){
        console.log(res)
      }
    })
  }
})

server.js代码如下：

const express  = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
//处理POST请求
app.post('/',(req,res) =>{
  console.log(req.body)
  res.json(req.body)
})

//监听3000端口
app.listen(3000,() =>{
  console.log('server running at http://127.0.0.1:3000')
})

效果实现如下：

如果觉得本文写得不错，顺手点个赞，感谢老铁！