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

古城微笑少年丶 2022-01-27 21:27 346阅读 1赞

> ### 我的qq 2038373094 ###
> 
> 我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会
> 
> 做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

### ***前提*** ###

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

[http://www.wetouch.net/touchwx\_doc/component/summary/Introduction][http_www.wetouch.net_touchwx_doc_component_summary_Introduction]

这个框架的

1、开发工具是vscode

2、需要安装Nodejs

3、新建touchwx 基础工程   环境的配置看这里  [http://www.wetouch.net/touchwx\_doc/quickstart/begin/ide][http_www.wetouch.net_touchwx_doc_quickstart_begin_ide]

### ***数据库数据如下*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

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

[http://www.wetouch.net/touchwx\_doc/component/view/nav-bar][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;
    	}
    }

### ***效果如下*** ###

![20190522215341268.gif][]

[http_www.wetouch.net_touchwx_doc_component_summary_Introduction]: http://www.wetouch.net/touchwx_doc/component/summary/Introduction
[http_www.wetouch.net_touchwx_doc_quickstart_begin_ide]: http://www.wetouch.net/touchwx_doc/quickstart/begin/ide
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220128/79b736c7113340faafff9bcca221f8ea.png
[http_www.wetouch.net_touchwx_doc_component_view_nav-bar]: http://www.wetouch.net/touchwx_doc/component/view/nav-bar
[20190522215341268.gif]: /images/20220128/3b62712ae20848fcaf8b774bb8efbb89.png