最终效果:
前端四步:
一、先在utils文件夹下的app.json文件添加一个页面“ ” pages/dome01/demo01 ” ”,
Ctrl+s 保存会自动在pages文件夹下生成一个名为demo01的文件夹。
二、打开 pages 目录,打开demo01.wxml文件。代码如下:
<view class="box">
<view class="title">用户登录</view>
<form bindsubmit='loginForm'>
<input type='text' name='username' placeholder="请输入账号"></input>
<input type='password' name='password' placeholder="请输入密码"></input>
<view class='ligin-button'>
<button formType="submit">发送</button>
<button formType="reset">重置</button>
</view>
</form>
</view>
三、打开demo01.wxss文件。代码如下:
.box{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.title{
text-align: center;
font-size: 25px;
}
text{
transform: translate(-50%,0px);
text-align: center;
background-color: turquoise;
}
input {
width: 300px;
height: 40px;
border: deeppink solid 2px;
border-radius: 10px;
margin : 10px;
font-size: 20px;
}
button{
width: 200px;
height: 40px;
background-color: deeppink;
margin: 5px;
}
四、打开emo01.js文件。代码如下:
Page({
loginForm: function(data) {
var username = data.detail.value.username;//获取账号
var password = data.detail.value.password;//获取密码
wx. request ({
url: '#39;, //请求路劲
data: {
username: username,
password: password
},
header : {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)//打印响应的数据
}
})
}
})
后端 java :
一、需要有 servlet 基础,代码如下:
package wx;
import javax.servlet. annotation .WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IO Exception ;
@WebServlet(value = "/wx01")//完整路劲为:
public class wx01 extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws IOException {
String username = request.getParameter("username");//根据username获取用户账号
String password = request.getParameter("password");//根据password获取用户密码
System.out.println(username+":"+password);
response.getWriter().print(username+":"+password);//响应的数据
}
}
完结!