查看“小程序案例:调查问卷”的源代码
←
小程序案例:调查问卷
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==案例分析== 调查问卷效果展示: 实现步骤: 1)填写表单数据; 2)提交发送到服务器; 3)后台数据渲染到页面 [[文件:wexin2021092802.png|400px]] 页面代码结构: <nowiki> <form bindsubmit="submit"> <view>... </view> <view>... </view> <view>...</view> <view>...</view> <button form-type="submit">提交</button> </form> </nowiki> ==服务器数据交互== Express安装和使用流程: 1)初始化项目 2)安装Express框架 3)安装nodemon监控文件修改 4)创建服务; 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属性。
返回至
小程序案例:调查问卷
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息