问卷调查
时间:2020.9.19
学习目标
做响应式问卷调查,将浏览器上的信息在小程序上显示,通过提交按钮将修改的信息在控制器中显示。
nodejs配置
1.安装node.js
下载|node.js
2.安装git
3.打开git-bash,用命令node -v查看是否安装成功
4.安装cnpm
在git-bash中运行 npm install -g cnpm --registry=https://registry.npm.taobao.org
5.手工安装express (非必要执行)
在当前项目目录下git-bash中运行 cnpm i express -generator
6.运行node.js
在当前项目目录下git-bash中运行node index.js
7.浏览器中127.0.0.1 查看json数据是否显示
代码展示
index.wxml代码
<!--pages/index/index.wxml-->
<view class="container">
<form bindsubmit="submit">
<view>
<text>姓名:</text>
<input name="name" value="{{name}}"/>
</view>
<view>
<text>性别:</text>
<radio-group name="gender">
<label wx:for="{{gender}}" wx:key="value">
<radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}</label>
</radio-group>
</view>
<view>
<text>专业技能:</text>
<checkbox-group name="skills">
<label wx:for="{{skills}}" wx:key="value">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</label>
</checkbox-group>
</view>
<view>
<text>你的意见:</text>
<textarea name="opinion" value="{{opinion}}"></textarea>
</view>
<button form-type="submit">提交</button>
</form>
</view>
样式index.wxss代码
/* pages/index/index.wxss */
.container{
margin: 50rpx;
}
view{
margin-bottom: 30rpx;
}
text{
font-weight: bold;
}
label{
display: block; /* 标签占满一行 */
margin: 10rpx;
}
textarea{
width: 600rpx;
height: 100rpx;
margin-top: 10rpx;
border: 2rpx solid #eee;
}
input{
margin-top: 10rpx;
border: 2rpx solid #eee;
}
button{
background: green;
color: white;
}
index.js代码
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
name:'',
options:'无意见',
skills:[{
name:'HTML5',
value:'html5',
checked:false
},
{
name:'CSS3',
value:'css3',
checked:false
},
{
name:'Javascript',
value:'js',
checked:false
},
{
name:'.Net MVC',
value:'mvc',
checked:false
},
{
name:'Vue.Js',
value:'vue',
checked:false
},
{
name:'微信小程序',
value:'weixin',
checked:false
},
]
},
onLoad: function (){
//加载服务器存储的数据,查询127.0.0.1服务器的数据,并在控件上呈现
wx.request({
url: 'http://127.0.0.1:3000/',
success: result=>{
console.log(result)
this.setData(result.data)
}
})
},
submit:function(e){
//把表单的数据提交到服务器
wx.request({
method:'post',
url:'http://127.0.0.1:3000',
//参数
data:e.detail.value,
success:function(result){
console.log(result)
//其他操作
}
})
}
})
修改信息后在控制台查看