疫情问卷调查程序-数据上传服务器,并返回数据

在这里插入图片描述
服务器端Node代码

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)
    console.log('POST');
    // req.body接收客户端数据
    res.json(req.body)
    // 前端向后端发请求,返回res
})
// 监听3000端口
app.listen(3000, () => {
  console.log('server running at http://127.0.0.1:3000')
})
var data = {
      name:{value:'hello'},
      sex:[
        {
        value:"男",
        checked:true
        },  {
          value: "女",
          checked: false
        }  ],
      course:[{
        cname:"网页制作",
        value:'网页制作',
        checked:true
      },  {
          cname: "微信端开发",
          value:'微信端开发',
          checked: true
        },  {
          cname: "移动开发",
          value:'移动开发',
          checked: false
        }
      ],
      feel:"good"
  }
// 处理GET请求
app.get('/', (req, res) => {
    console.log('GIT');
      res.write(data);
    res.end();
//     res.json(data);
  })
    
    

index.wxml

<text class="title">停课不停学,认真填写问卷</text>
<view class="container">
<form bindsubmit="submit">
  <text class="name" name="name">姓名:</text>
  <label><input type="text" class="ipt" value="{{name}}" /></label>
  <text class="sex">性别:</text>
  <radio-group name="sex">
    <label><radio wx:for="{{sex}}" wx:key="value" value="{{item.value}}" checked="{{item.check}}">
      <text>{{item.name}}</text>
    </radio></label>
  </radio-group>
  <text>线上课程:</text>
  <checkbox-group name="course">
    <label><checkbox class="block" wx:for="{{course}}" value="{{item.value}}"  wx:key="value"  checked="{{item.check}}">{{item.cname}}</checkbox></label>
  </checkbox-group>
  <text>线上学习感受:</text>
  <textarea name="opinion" value="{{opinion}}" placeholder="我的感受" class="text"></textarea>
  <button class="submit" form-type="submit">提交</button>
  </form>
</view>

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    name: 'hello',
    sex: [{
      name: '男',
      value: 0,
      check: true
    }, {
      name: '女',
      value: 1,
      check: false
    }],
    course: [{
      cname: "网页制作",
      value: "网页制作",
      check: true
    }, {
      cname: '移动端开发',
      value: "移动端开发",
      check: true
    }, {
      cname: '微信小程序',
      value: "微信小程序",
      check: true
    }],
    opinion: ''
  },
  submit: function(e) {
    wx.request({
      url: 'http://127.0.0.1:3000',
      data: e.detail.value,
      method: 'Post',
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {
        console.log("fail")
      }
    })
  },
  onLoad: function(options) {
    var that = this
    wx.request({
      url: 'http://127.0.0.1:3000',
      success: function(res) {
        // console.log(res.data)
        that.setData(res.data)
      }
    })
  },
  getUserInfo: function(e) {

  }
})

index.wxss

.title{
  color: #f00;
  font-size: 12px;
  margin-left: 20px;  
}
.container{
  width: 90%;
  margin: 0 auto;
  /* box-shadow: 0 0 5px #ccc; */
  position: relative;
}
.ipt{
  border-bottom: 1px solid #333;
  width: 90%;
}
.block{
  display: block;
  margin-left: 5px;
}
.text{
  border-radius: 5px;
  height: 60px;
  border: 1px solid #333;
}
.submit{
  position: absolute;
  min-width: 90%;
  margin-top: 10px;
  color: #ffffff;
  background-color: #333;
}
发布了117 篇原创文章 · 获赞 146 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/printf_hello/article/details/104932188