一、需求分析
输入留言内容,并发表,同时能够查看所有人在留言墙的留言。
二、功能设计
- 进入页面前,获取小程序使用者的微信账户信息(用户名+头像)
- 进入页面,向服务器发出请求,请求获取所有留言信息,并展现在页面上
- 在页面中的留言文本框输入留言信息,点击发送,将留言信息+用户名一起发送请求到服务器,新增留言信息。回到页面,重复第二点。
上述功能涉及到的服务器搭建,可以参考【SpringBoot】写一个具有留言墙功能的JavaWeb
三、页面设计
四、代码
(一)核心代码:向服务器发出请求
- 向服务器请求获取所有留言信息
/**
* 查询所有留言
*/
findAll(){
let that = this;
//向服务器请求所有的留言数据
wx.request({
url: 'https://www.peng-yujun.cn/message/find',
method:"POST",
success(res){
that.setData({
messageList:res.data
})
}
})
},
- 向服务器请求新增留言信息
/**
* 发送文本框内容
*/
send(){
//检测是否有填写留言,若无则提示
if(this.data.words.replace(/(^s*)|(s*$)/g, "").length==0){
wx.showToast({
title: '请填写留言',
icon:'error'
})
return;
}
//向服务器请求插入
var that = this;
wx.request({
url: 'https://www.peng-yujun.cn/message/add',
method: "POST",
data: {
name: that.data.userInfo.nickName,
words: that.data.words
},
header: {
'content-type' : 'application/x-www-form-urlencoded',
},
success: function(res){
//刷新页面内容
that.findAll();
that.setData({
messageList:that.data.messageList,
words:""
})
//页面弹出留言成功提示
wx.showToast({
title: '留言成功',
icon: 'success'
})
}
})
},
(二)完整代码
message.wxml
<!--pages/message/message.wxml-->
<view id="body">
<view id="typing">
<textarea value="{{words}}" bindinput="getWords"></textarea>
<button bindtap="send">发表</button>
</view>
<view class="divLine"></view>
<view id="messages" wx:for="{{messageList}}" wx:key="index">
<view class="message">
<text class="name">{{item.name}} 说:</text>
<text class="words">{{item.words}}</text>
<text class="time">{{item.time}}</text>
<view class="wordsLine"></view>
</view>
</view>
</view>
message.wxss
/* pages/message/message.wxss */
#body{
display: flex;
flex-direction: column;
align-items: center;
}
#typing{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#typing textarea{
width: 80%;
height: 18vh;
border: 2rpx solid;
padding: 8px;
}
#typing button{
margin: 10px;
}
.divLine{
background: #E0E3DA;
width: 100%;
height: 3rpx;
margin-bottom: 10px;
}
#messages{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.message{
display: flex;
flex-direction: column;
width: 80%;
}
.time{
text-align: right;
color: rgb(94, 163, 163);
}
text{
word-wrap:break-word;
margin: 4px 0;
}
.wordsLine{
background: #E0E3DA;
width: 100%;
height: 3rpx;
margin-bottom: 10px;
}
message.js
const { formatTime } = require("../../utils/util");
// pages/message/message.js
Page({
/**
* 页面的初始数据
*/
data: {
//用户信息
userInfo:{},
//留言信息
message:{id:"",name:"",words:"",time:""},
//留言集合
messageList:[],
//文本框的内容
words:""
},
/**
* 获取文本框里的内容
* @param {*} e
*/
getWords(e){
this.data.words = e.detail.value;
console.log("getwords:"+this.data.words);
},
/**
* 发送文本框内容
*/
send(){
//检测是否有填写留言,若无则提示
if(this.data.words.replace(/(^s*)|(s*$)/g, "").length==0){
wx.showToast({
title: '请填写留言',
icon:'error'
})
return;
}
//向服务器请求插入
var that = this;
wx.request({
url: 'https://www.peng-yujun.cn/message/add',
method: "POST",
data: {
name: that.data.userInfo.nickName,
words: that.data.words
},
header: {
'content-type' : 'application/x-www-form-urlencoded',
},
success: function(res){
//刷新页面内容
that.findAll();
that.setData({
messageList:that.data.messageList,
words:""
})
//页面弹出留言成功提示
wx.showToast({
title: '留言成功',
icon: 'success'
})
}
})
},
/**
* 查询所有留言
*/
findAll(){
let that = this;
//向服务器请求所有的留言数据
wx.request({
url: 'https://www.peng-yujun.cn/message/find',
method:"POST",
success(res){
that.setData({
messageList:res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//检查登陆状态,若登陆状态无时,返回登录页
if(wx.getStorageSync('localUserInfo')!=''){
this.setData({
userInfo: wx.getStorageSync('localUserInfo')
})
}else{
wx.navigateTo({
url: '/pages/login/login',
})
}
this.findAll();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})