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;
	}
}

 

效果如下