北师互助助手开发第1篇 - 客户端查看帖子模块（微信小程序+ssm服务端）
ssm服务端开发如下：
ssm服务端使用了maven+springMVC+mybatis，对于业务处理，数据库查询存储这些就不用说了。因为这些挺简单的。我们这里重点说的是服务端怎么返回json数据给微信小程序客户端。
下面我就贴代码了。
package com.ssm.controller;
import java.util.ArrayList;
import java.util.List;
import javax.json.JsonObject;
import javax.security.auth.message.callback.PrivateKeyCallback.Request;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.servlet.ModelAndView;
import com.mybatis.daoImpl.*;
import mybatis.simple.model.*;
import com.fasterxml.jackson.databind.util.*;
import com.fasterxml.jackson.core.*;
//注解@Controller表示它是一个控制器
@Controller
public class LoginController{
List<Post> postList = new ArrayList<>();
//表明当前请求的URI在/my下的时候才有改控制器响应
@ResponseBody
@RequestMapping("/myLogin")
public Object LoginController(String callback) {
// UserDaoImpl userDaoImpl = new UserDaoImpl();
//
// List<User> tempUser = userDaoImpl.selectUserById(user.getCookedId());
// if(tempUser.isEmpty() == false)
// {
// if(userDaoImpl.insertUser(user)==true)
// {
// System.out.println("插入user成功！");
// }
// else
// {
// System.out.println("插入user失败！");
// }
// }
// else
// {
// System.out.println("user不为空！");
// }
PostDaoImpl postDaoImpl = new PostDaoImpl();
postList = postDaoImpl.selectPostAll();
for(int i = 0; i < postList.size(); i++)
{
System.out.println("postId" + String.valueOf(i) +":"+ String.valueOf(postList.get(i).getPostId()));
System.out.println("title"+ String.valueOf(i) +":"+ String.valueOf(postList.get(i).getTitle()));
System.out.println("userId" + String.valueOf(i) +":"+ String.valueOf(postList.get(i).getUserId()));
System.out.println("content"+ String.valueOf(i) +":"+ String.valueOf(postList.get(i).getContent()));
}
return postList;
//return null;
}
}
上面的代码有一点注意的是，我返回的是list（列表），而我们 传输到客户端的应该是json数据，而list数据能转化为json数据很重要的便是 使用了@ResponseBody这个注解。这个注解会把放回的数据转化为json或xml格式。
下面就说到客户端了：
Page({
onLoad: function (options) {
wx.request({
url: 'http://localhost:8080/bnuzMutualAssistant_server_ssm_Wukesong/myLogin',
data: {
list:[]
},
method: 'POST',
dataType: 'json',
header: {
'content-type': 'application/json'
},
success: (res) => {
this.setData({
list: res.data,//将表中查询出来的信息传给list
})
}
})
},
})
request是发送请求，如果发送请求后便调用success，this.setData是把返回的res.data数据赋给list
现在说一下tarbar，这个是微信小程序底端的两个按钮，它们其实就是一个列表，数量大于或等于2，小于或等于5。
在app.json这里添加这个代码：
"tabBar": {
"selectedColor": "#1296db",
"list": [
{
"pagePath": "pages/loginMain/loginMain",
"text": "帖子列表",
"iconPath": "pages/images/loginMain.png",
"selectedIconPath": "pages/images/loginMain.png"
},
{
"pagePath": "pages/userInfo/userInfo",
"text": "个人中心",
"iconPath": "pages/images/userInfo.png",
"selectedIconPath": "pages/images/userInfo.png"
}
]
}
而这个tarbar关联的页面会和它的pagepath，只有pagepath路径的界面，才可以显示tarbar。
还要说到一个页面跳转tarbar的功能：使用wx.switchTab（这个是专门用来跳转tarbar界面的），不要使用navigate。
index.js
goToLoginMain:function()
{
wx.switchTab({
url: '/pages/loginMain/loginMain'
})
}
index.wxml
<view class="goToLoginMain">
<button bindtap="goToLoginMain">登录</button>
</view>
注意，如果在本机使微信小程序和ssm服务端通信的话，可以不使用https，其中进行如下配置：
勾上这个勾~~~
还有点击帖子列表查看帖子具体内容：
<view class='container'>
<loading hidden="{{!loading}}">加载中</loading>
<block class="" wx:for="{{list}}" wx:key="id" data-index="{{index}}">
<navigator url='/pages/tableInfo/tableInfo?postId={{item.postId}}'>
<view hover-class='hover-class' id="{{item.postId}}" style='display:flex; height:120px;border-bottom: 1px solid #DBDBDB'>
<!--左边图片-->
<view style='width:128rpx; height:128rpx; margin:20rpx;'>
<image class='index-logo' style='width:128rpx; height:128rpx' src="/pages/images/logo1.jpg"></image>
</view>
<!-- 右边内容 上下结构 -->
<view style='display:flex; flex-direction:column; margin:20rpx;'>
<label class='item_title'>{{item.title}}</label>
<label class='item_content'>{{item.content}}</label>
<!-- 右边底部内容 左右结构 -->
<view style='display:flex; flex-direction:row; height:40rpx;'>
<label class='item_from'>{{item.userId}}</label>
<label class='item_time'></label>
</view>
</view>
</view>
</navigator>
</block>
</view>
navigator就是跳转帖子列表，加上一个postId，帖子id的参数。
Page({
data: {
postId : null
},
onLoad: function (options) {
var that = this
that.setData({
postId : options.postId,
}),
wx.request({
url: 'http://localhost:8080/bnuzMutualAssistant_server_ssm_Wukesong/getTable?postId='+that.data.postId,
data: {
list: []
},
method: 'POST',
dataType: 'json',
header: {
'content-type': 'application/json'
},
success: (res) => {
this.setData({
list: res.data,//将表中查询出来的信息传给list
})
}
})
}
})
取出参数，发送请求到客户端，通过这个postId查询指定的帖子，返回给客户端