“小程序案例:调查问卷”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
第37行: 第37行:
  
 
5)启动服务
 
5)启动服务
 +
 +
 +
用代码创建服务:
 +
 +
创建服务;
 +
监听端口;
 +
 +
<nowiki>
 +
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')
 +
})
 +
</nowiki>
 +
 +
利用wx.request()向本地HTTP服务器发送POST请求:
 +
 +
<nowiki>
 +
submit: function(e) {
 +
  wx.request({
 +
    method: 'post',
 +
    url: 'http://127.0.0.1:3000/',
 +
    data: e.detail.value,
 +
    success: function (res) {
 +
      console.log(res)
 +
    }
 +
  })
 +
},
 +
</nowiki>
 +
 +
利用wx.request()向本地HTTP服务器发送POST请求:
 +
 +
[[文件:wexin2021092803.png]]
 +
 +
请求接口获取后台数据:
 +
 +
前台代码
 +
 +
<nowiki>
 +
onLoad: function(options) {
 +
  wx.request({
 +
    url: 'http://127.0.0.1:3000/',
 +
    success: res => {
 +
      this.setData(res.data)
 +
    }
 +
  })
 +
},
 +
</nowiki>
 +
 +
后台接口
 +
 +
<nowiki>
 +
app.get('/', (req, res) => {
 +
  res.json(data)
 +
})
 +
</nowiki>
 +
 +
值得一提的是,由于wx.request()参数中的method属性的默认值为GET,因此在发送GET请求时可以省略method属性。

2021年9月28日 (二) 08:44的版本

案例分析

调查问卷效果展示:

实现步骤:

1)填写表单数据;

2)提交发送到服务器;

3)后台数据渲染到页面

Wexin2021092802.png

页面代码结构:

<form bindsubmit="submit">
<view>... </view>
<view>... </view>
<view>...</view>
<view>...</view>

<button form-type="submit">提交</button>
</form>

服务器数据交互

Express安装和使用流程:

1)初始化项目

2)安装Express框架

3)安装nodemon监控文件修改

4)创建服务;

5)启动服务


用代码创建服务:

创建服务;
监听端口;
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')
})

利用wx.request()向本地HTTP服务器发送POST请求:

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

利用wx.request()向本地HTTP服务器发送POST请求:

Wexin2021092803.png

请求接口获取后台数据:

前台代码

onLoad: function(options) {
  wx.request({
    url: 'http://127.0.0.1:3000/',
    success: res => {
      this.setData(res.data)
    }
  })
},

后台接口

app.get('/', (req, res) => {
  res.json(data)
})

值得一提的是,由于wx.request()参数中的method属性的默认值为GET,因此在发送GET请求时可以省略method属性。