小程序反馈功能并回显（包括前后端）

前台：

message.js

//获取应用实例
const app = getApp()
Page({

  data: {
    nickName: "微信账号登录",
    avatarUrl: "3254"
  },
  onLoad: function (options) {
    var that = this;
    var nickName = that.data.nickName;
    var avatarUrl = that.data.avatarUrl;
    wx.getUserInfo({
      success: function (res) {
        that.data.nickName = res.userInfo.nickName,
          that.data.avatarUrl = res.userInfo.avatarUrl,
          that.setData({
            nickName: that.data.nickName,
            avatarUrl: that.data.avatarUrl,
          })
      },
      
      fail: function (res) {
        that.data.nickName = "未授权无法获取用户信息",
          that.setData({
            nickName: that.data.nickName
          })
      }
    })
  },
  
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  },

  formSubmit: function (e) {
    wx.showToast({
      title: '反馈成功',
      icon: 'success'
    })
    var that = this;
    var liuyantext = e.detail.value.liuyantext; //获取表单所有name=liuyantext的值 
    wx.getUserInfo({
      success: function (res) {
        that.data.nickName = res.userInfo.nickName,
          that.data.avatarUrl = res.userInfo.avatarUrl,
          that.setData({
            nickName: that.data.nickName,
            avatarUrl: that.data.avatarUrl,
          }),
          wx.request({
            url: 'http://localhost/xiaoyuan/liuyan/liuyantext.php',
            header: { "Content-Type": "application/x-www-form-urlencoded" },
            method: "POST",
            data: {
              nickName: res.userInfo.nickName,
              avatarUrl: res.userInfo.avatarUrl,
              liuyantext: e.detail.value.liuyantext
            },
            success: function (res) {
              console.log(res.data)
              that.setData({
                re: res.data,
              })
              wx.hideToast();
            }
          }) 
      }
      
    })
    
  },
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading();
    var that = this
    wx.request({
      url: 'http://localhost/xiaoyuan/liuyan/loadliuyan.php',
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      success: function (res) {

        //将获取到的json数据，存在名字叫list的这个数组中
        that.setData({
          liuyanlist: res.data,
          //res代表success函数的事件对，data是固定的，liuyanlist是数组
        })
        console.log(res.data)
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      }
    })
  },

  //加载最新数据
  onLoad: function () {
    var that = this
    wx.request({
      url: 'http://localhost/xiaoyuan/liuyan/loadliuyan.php',
      header: { "Content-Type": "application/x-www-form-urlencoded" },
      success: function (res) {
        console.log(res.data)
        //将获取到的json数据，存在名字叫list的这个数组中
        that.setData({
          liuyanlist: res.data,
          //res代表success函数的事件对，data是固定的，liuyanlist是数组
        })
      }
    })
  }


})

wxml：

<!-- 表单 -->
<form bindsubmit="formSubmit">
  <textarea type="text" name="liuyantext" placeholder='请输入反馈内容' class="input-style"></textarea>
  <button formType="submit" class="btn" wx:if="{{nickName == empty}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" bindtap='login'>反馈</button>
  <button formType="submit" class="btn" wx:else>反馈问题</button>
</form>


<view style="text-align:center;font-size:14px;color:#ccc;margin-top:20px;">以下是留言内容
</view>
<view wx:for="{{liuyanlist}}" wx:key="liuyanlist" class="liuyanview">

  <view class="heading">
    <image src="{{item.heading}}" class='img'></image>
  </view>

  <view class="nickname_liuyantext">
    <view class="nickname">{{item.nickname}} 
      <view class="time">{{item.createtime}}</view>
    </view>
    <view class="text">{{item.liuyantext}}</view>
</view>

  <view style="width:100%;height:10px;"></view>
</view>

wxss;

image{
  width: 300px;
  height: 300px;
}

/**index.wxss**/
.input-style{
  width: 90%;
  height: 200px;
  border:1px solid #ccc;
  margin:10px auto;
}
 
.btn{
  width: 88%;
  margin:5px auto;
}
 
.liuyanview{
  /*width: 90%;*/
  margin: 10px;
}
 
.result{
  text-align: center;
  font-size: 14px;
  color: #f00;
  margin-top: 20px;
}
 
.headimg{
  width: 45px;
  height: 45px;
  border-radius: 100%;
}
 
.headimg image{
  width: 45px;
  height: 45px;
  border-radius: 100%;
}
 /*
.nickname_liuyantext{
  width: calc(100% - 55px);
  float: right;
  margin-top:-45px;
}
 */
.nickname_liuyantext .nickname{
  font-size: 15px;
  color: #999;
}
 
.nickname_liuyantext .nickname .time{
  font-size: 11px;
  color: #999;
  float: right;
}
 
.nickname_liuyantext .text{
  font-size: 16px;
  color: #666;
}

后台：我用的集成软件XAMPP，把PHP放到htdocs目录文件夹下。

liuyantext.php

<?php
    $conn=mysql_connect("localhost","root","root") or die("数据库服务器连接错误".mysql_error());
    mysql_select_db("db_database18",$conn) or die("数据库访问错误".mysql_error());
    mysql_query("set names utf-8");
	$nickname=$_POST[nickName];
	$heading=$_POST[avatarUrl];
	$liuyantext=$_POST[liuyantext];
	echo $nickname;
	echo $heading;
	
	date_default_timezone_set(PRC);
	$createtime=date("Y-m-d H:i:s");
	$sql=mysql_query("insert into tb_message(nickname,heading,liuyantext,createtime)values('$nickname','$heading','$liuyantext','$createtime')");
	echo "添加成功!";
	mysql_free_result($sql);
	mysql_close($conn);
	
?>

loadliuyan.php

<?php
	
    $conn=mysql_connect("localhost","root","root") or die("数据库服务器连接错误".mysql_error());
    mysql_select_db("db_database18",$conn) or die("数据库访问错误".mysql_error());
    mysql_query("set names utf-8");
	$sql=mysql_query("select * from tb_message");
	// $liuyanlist=mysql_num_rows($sql);
	//echo $liuyanlist;
	// 将数组转成json格式
	// echo json_encode($liuyanlist);

	$liuyanlist=mysql_fetch_array($sql);
	// 将数组转成json格式
	// echo json_encode($liuyanlist);
	

	// echo "查询成功!";
	$rows = array();
	do{
		// echo $liuyanlist; 	
		$rows[$liuyanlist[id]]	=  $liuyanlist;
		 // echo $liuyanlist[nickname];   
   //       echo $liuyanlist[heading]; 	
   //      echo $liuyanlist[liuyantext]; 
   //       echo $liuyanlist[createtime]; 
	}
	while($liuyanlist=mysql_fetch_array($sql));
	 echo json_encode($rows);
?>