touchWX框架实现微信小程序前后端交互，对数据库的查询 和显示

我的qq 2038373094

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

 

前提

强烈推荐一个微信小程序开发快捷的框架：touchWX框架

http://www.wetouch.net/touchwx_doc/component/summary/Introduction

 这个框架的

1、开发工具是vscode

2、需要安装Nodejs

3、新建touchwx 基础工程   环境的配置看这里  http://www.wetouch.net/touchwx_doc/quickstart/begin/ide

 

数据库数据如下

 

index.wx代码如下（index.wx可以变成index.wxml、index.wxss、index.js）

http://www.wetouch.net/touchwx_doc/component/view/nav-bar

<template> <view> <ui-segment bindchange="changeTab2"> <ui-segment-item> 推荐 </ui-segment-item> <ui-segment-item> 教育 </ui-segment-item> <ui-segment-item> 成长 </ui-segment-item> <ui-segment-item> 心理 </ui-segment-item> <ui-segment-item> 课程 </ui-segment-item> </ui-segment> <view class="tabContent"> <!-- 连接数据库 --> <view class="top_tip" wx:for="{{mydata}}" wx:key="item.nid"> <ui-row height="80" border-bottom hover-class="touchui-hover"> <ui-col width="80" align="center" vertical-align="middle"> <img src="/images/t1.jpg" class="im"/> </ui-col> <ui-col class="text" align="left" vertical-align="middle" space="20"> <view style="width: 100%;"> <ui-row height="30"> <ui-col align="left" vertical-align="middle"> <text class="tme">{{item.title}}</text> </ui-col> </ui-row> <view>类型{{item.kinds}}、浏览量{{item.count}}、{{item.time}}发布</view> </view> </ui-col> </ui-row> </view> <!-- 连接数据库 --> </view> </view> </template> <script> //引入文件 export default { data :{ contentshow: 1, mydata:[] }, changeTab2 (e) { var that=this; var kk=['教育','教育','成长','心理','课程']; let index = e.detail.index; var k=kk[index]; console.log("类型:"+k); wx.request({ url: 'http://localhost:8080/Teacher/queryNews.action', //接口地址 data: { kinds:k }, method:'get', header: { 'content-type': 'application/json' }, success: res => { console.log("真实的类型是:"+k); console.log(res.data); that.setData({ mydata:res.data }) } }) }, } </script> <style lang="less"> .im{ width:50px; height:50px; } .top_tip{ .left_icon{ width: 50px; height: 50px; border-radius: 50%; background-color:#FCB300; text-align: center; line-height: 50px; } .left_icon2{ background-color: #FF7360; } .left_icon3{ background-color: #39CCC5; } .text{ text{ font-size: 16px; color: #313338; } view{ color: #9C9FA4; font-size: 12px; .mix-text-overflow(); } } } </style>

后台使用ssh框架实现的

package cn.com.service; import java.io.IOException; import java.util.List; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import org.apache.struts2.ServletActionContext; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Repository; import org.springframework.transaction.annotation.Transactional; import cn.com.bean.News; import com.opensymphony.xwork2.ModelDriven; @Repository(value = "queryNews") @Scope("prototype") public class QueryNews implements ModelDriven<News>{ @Autowired private SessionFactory sf; @Autowired private News news; @Transactional public String querynews() { System.out.println("["+news.getKinds()+"]"); Session session = sf.getCurrentSession(); String sql = "from News where kinds=?"; Query query = session.createQuery(sql); query.setString(0, news.getKinds()); List<News> list=query.list(); //把list变成json HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); try { JSONArray json=JSONArray.fromObject(list); response.getWriter().write(json.toString()); } catch (IOException e) { e.printStackTrace(); } return null; } @Override public News getModel() { // TODO Auto-generated method stub return news; } }

 

效果如下