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

效果如下