微信小程序-展示后台傳來的json格式數據

昨天粗粗的寫了下后台數據傳到微信小程序顯示，用來熟悉這個過程,適合剛入門學習案例：

需了解的技術：javaSE，C3p0，jdbcTemplate，fastjson，html，javaScript，css；

需要安裝的軟件及環境：jdk8，mysql，Navicat for mysql，idea，tomcat，微信開發工具（https://developers.weixin.qq.com/miniprogram/dev/index.html）；

 項目結構如下：

 

項目步驟及代碼演示：

1. idea(jdk8,tomcat8安裝好) 創建javaWeb項目 File->New->Project...->Java Enterpise->next->選中Create project from template,然后next->Project name創建項目名 wechat_route，finish項目建好了。然后在src目錄下建幾個包com.hcz.bean,com.hcz.dao,com.hcz.dao.daoImpl,com.hcz.service,com.hcz.service.serviceImpl,com.hcz.servlet,com.hcz.utils;

2.創建好這個項目需要的所有模板信息。

在web/WEB-INF下面創建一個叫lib的文件夾，把所需的jar包拷貝到這里來，然后選中所有這些jar包點擊右鍵，有個Add as Library..點擊jar包變成下面這樣即可；

我的數據庫中表創建是這樣的

 

我的數據庫用戶名和密碼都是root，然后創表語句如下：

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for t_route
-- ----------------------------
DROP TABLE IF EXISTS `t_route`;
CREATE TABLE `t_route` (
  `id` int(11) NOT NULL,
  `title` varchar(50) DEFAULT NULL,
  `date` varchar(20) DEFAULT NULL,
  `routeImg` varchar(30) DEFAULT NULL,
  `routeIntroduce` varchar(500) DEFAULT NULL,
  `count` int(5) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_route
-- ----------------------------
INSERT INTO `t_route` VALUES ('1', '風景秀麗，集日月之精華，看一眼神清氣爽，再看一眼快樂齊天，豈不美哉！', '2019-04-23 16:40', 'title_pic.jpg', '古老的小鎮，有一位撐着油紙傘的姑娘從遠方走來，天微微亮，有點小雨，似乎是從那位大師的油畫中剛走出來的一樣，忽遠忽近，影影綽綽，不食人間煙火！', '200');
INSERT INTO `t_route` VALUES ('2', '風景秀麗，集日月之精華，看一眼神清氣爽，再看一眼快樂齊天，豈不美哉！', '2019-04-23 16:40', 'route_pic.jpg', '古老的小鎮，有一位撐着油紙傘的姑娘從遠方走來，天微微亮，有點小雨，似乎是從那位大師的油畫中剛走出來的一樣，忽遠忽近，影影綽綽，不食人間煙火！', '100');

　　

 然后把C3p0的配置文件拷貝到src下，並進入配置文件改數據庫的信息，

一個javaWeb項目模板就創建好了。

 

3.后台代碼實現：

根據第一張圖可以知道結構，現在按圖示結構粘貼下代碼：

實體類Route旅游路線的實體類

package com.hcz.bean;

/**
 * @author HuChengZhang
 * @describtion 旅游路線bean
 * @date 2019/4/23 17:08
 */

public class Route {
    private int id;
    private String title;
    private String date;
    private String routeImg;
    private String routeIntroduce;
    private int count;

    public Route() {
    }

    public Route(int id, String title, String date, String routeImg, String routeIntroduce, int count) {

        this.id = id;
        this.title = title;
        this.date = date;
        this.routeImg = routeImg;
        this.routeIntroduce = routeIntroduce;
        this.count = count;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getRouteImg() {
        return routeImg;
    }

    public void setRouteImg(String routeImg) {
        this.routeImg = routeImg;
    }

    public String getRouteIntroduce() {
        return routeIntroduce;
    }

    public void setRouteIntroduce(String routeIntroduce) {
        this.routeIntroduce = routeIntroduce;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    @Override
    public String toString() {
        return "Route{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", date='" + date + '\'' +
                ", routeImg='" + routeImg + '\'' +
                ", routeIntroduce='" + routeIntroduce + '\'' +
                ", count=" + count +
                '}';
    }
}

　　

RouteDaoImpl

package com.hcz.dao.daoImpl;

import com.hcz.bean.Route;
import com.hcz.dao.RouteDao;
import com.hcz.utils.C3p0Utils;
import org.junit.Test;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

/**
 * @author HuChengZhang
 * @describtion
 * @date 2019/4/23 17:15
 */

public class RouteDaoImpl implements RouteDao {

    /**
     * 單純的查找數據庫數據
     * @return
     */
    @Override
    public List<Route> queryRouteList() {
        //創建jdbcTemplate核心類
        JdbcTemplate jdbcTemplate = new JdbcTemplate(C3p0Utils.getDataSource());
        //查詢所有數據
        String sql = "select * from t_route";
        List<Route> query = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class));
        return query;
    }

    /*
    單元測試：查詢所有的路線封裝到集合中
     */
    @Test
    public void test(){
        //創建jdbcTemplate核心類
        JdbcTemplate jdbcTemplate = new JdbcTemplate(C3p0Utils.getDataSource());
        //查詢所有數據
        String sql = "select * from t_route";
        List<Route> query = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class));
        System.out.println(query);
    }
}

　　

RouteDao

package com.hcz.dao;

import com.hcz.bean.Route;

import java.util.List;

/**
 * @author HuChengZhang
 * @describtion
 * @date 2019/4/23 17:15
 */

public interface RouteDao {
    List<Route> queryRouteList();
}

 

RouteServiceImpl

 

package com.hcz.service.serviceImpl;

import com.alibaba.fastjson.JSON;
import com.hcz.bean.Route;
import com.hcz.dao.daoImpl.RouteDaoImpl;
import com.hcz.service.RouteService;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author HuChengZhang
 * @describtion
 * @date 2019/4/23 17:13
 */

public class RouteServiceImpl implements RouteService {

    /**
     * 查到所有的路線，並用阿里巴巴的JSON插件把map集合轉成字符串形式 dataList[{},{},{},,,]
     * @return
     */
    @Override
    public String queryRouteList() {
        RouteDaoImpl routeDao = new RouteDaoImpl();
        List<Route> list = routeDao.queryRouteList();
        Map<String,Object>map = new HashMap();
        map.put("dataList",list);
        return JSON.toJSONString(map);
    }
}

　　

RouteService

package com.hcz.service;

/**
 * @author HuChengZhang
 * @describtion
 * @date 2019/4/23 17:13
 */

public interface RouteService {
    String queryRouteList();
}

　　

 RouteServlet

package com.hcz.servlet;

import com.hcz.service.serviceImpl.RouteServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author HuChengZhang
 * @version v1.0
 * @date 2019/4/23 17:11
 * @description TODO
 **/
@WebServlet(urlPatterns = "/queryRouteList")
public class RouteServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //2.處理數據
        request.setCharacterEncoding("UTF-8");
        RouteServiceImpl routeService = new RouteServiceImpl();
        String dataList = routeService.queryRouteList();
        System.out.println(dataList);

        //3、響應數據
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(dataList);
    }
}

　　

C3p0Utils工具類

package com.hcz.utils;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import javax.sql.DataSource;

/**
 * @author HuChengZhang
 * @describtion c3p0工具類
 * @date 2019/4/23 17:21
 */

public class C3p0Utils {

    //初始化C3p0連接池
    private static ComboPooledDataSource dataSource = new ComboPooledDataSource();

    //得到數據源
    public static DataSource getDataSource(){
        return dataSource;
    }

}

　　

至此，后台的簡單代碼完成。

 

 

 

4.微信小程序：

結構圖，紅線表示自己添加或者改動過的。

 

第1步在全局json這個“pages”快速創建文件夾：

 

第2步把images放圖片的文件拷貝到項目所在的本地硬盤路徑里：

 

share.png

star.png

其它這些圖片自己下載一些好看的圖片吧，哈哈坑一下

 好了，現在又要按順序粘貼代碼了：

 

route.js

 /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    //頁面加載完成之后  發送請求查詢線路列表數據
    wx.request({
      url: 'http://127.0.0.1:8080/queryRouteList',
      method: 'get',
      dataType: 'json',
      success: function (res) {
        console.log(res);
        that.setData({
          dataList: res.data.dataList
        })
      }
    })
  },

　　

route.wxml

<import src='../../templates/route-template/route-template.wxml' />
<!-- 頁面布局 -->
<view class='route-container'>

<!-- 輪播圖 -->
    <view class='route-swiper'>
        <swiper autoplay='true' interval='2000' indicator-dots='true' indicator-active-color='#fff'>
          <swiper-item>
            <image src='../../images/route/banner_1.jpg'></image>
          </swiper-item>
          <swiper-item>
            <image src='../../images/route/banner_2.jpg'></image>
          </swiper-item>
          <swiper-item>
              <image src='../../images/route/banner_3.jpg'></image>
          </swiper-item>
        </swiper>
    </view>

<block wx:for='{{dataList}}' wx:for-item='detail' wx:key="">
    <template is='route_template' data='{{detail:detail}}'/>
  </block>

</view>

　　

route.wxss

@import '../../templates/route-template/route-template.wxss';

.route-swiper{
  width: 100%;
  height: 300rpx;
}

.route-swiper image{
  width: 100%;
}

　　

welcome.js

/**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * onTap點擊事件觸發
   */
  onTap:function(){
    wx.navigateTo({
      url: '../route/route',
    })
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
      
  },

　　

welcome.wxml

<view class='welcome-container'>
<view class='welcome-img'>
    <image src='../../images/welcome/welcome.png'></image>
</view>

<view class='welcome-text'>
     <text>胡成長</text>
</view>

<!-- 按鈕跳轉頁面 -->
<view class='welcome-btn'>
<button size='mini' bindtap='onTap' type='primary'>
    進入另一片天地
</button>
</view>
</view>

　　

welcome.wxss

/* pages/welcome/welcome.wxss */

.welcome-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}


page{
 background-color:#F6F8F8
}

.welcome-img{
  margin-top: 140rpx;
}

.welcome-img image{
  width: 200rpx;
  height: 200rpx;
}

.welcome-text{
  margin-top: 120rpx;
}

.welcome-text text{
  font-size: 30rpx;
  font-weight: bold;
}

.welcome-btn{
  margin-top: 130rpx;
}

　　

route-template.wxml

<!--templates/route-template/route-template.wxml-->


<!-- 模板要template 包起來 -->
<template name='route_template'>
 <view class='route-list'>
       <!-- 圖片和日期 -->
      <view class='img-date'>
          <image src='../../images/route/title_pic.jpg'></image>
          <text>{{detail.date}}</text>
      </view> 

       <!-- 標題 -->
       <view class='route-title'>
          <text>{{detail.title}}</text>
       </view>

       <!-- 旅游線路圖片 -->
      <view class='route-img'>
          <image src='../../images/route/{{detail.routeImg}}'></image>
      </view>

       <!-- 介紹信息 -->
       <view class='route-introduce'>
           <text>{{detail.routeIntroduce}} </text> 
       </view>

       <!-- 收藏數量文字和圖片 -->
       <view class='route-count'>
          <image src='../../images/icon/star.png'></image>
          <text>{{detail.count}}</text>
          <image src='../../images/icon/share.png'></image>
          <text>{{detail.count}}</text>
       </view>
    </view>
</template>

　　

route-template.wxss

/* templates/route-template/route-template.wxss */
.img-date{
  margin-top: 10rpx;
}

.img-date image{
  width: 48rpx;
  height: 48rpx;
}

.img-date text{
  margin-left: 10rpx;
  font-size: 30rpx;
}

.route-title text{
  font-size: 35rpx;
  font-weight: bold;
}

.route-img{
  margin-top: 5rpx;
}

.route-img image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 5rpx;
}

.route-introduce text{
  font-size: 28rpx;
  color: #666;
  font-weight: 400;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.route-count{
  display: flex;
  flex-direction: row;
}

.route-count image{
  width: 16px;
  height: 16px;
  margin-right: 8rpx;
  vertical-align: middle;
}

.route-count text{
  font-size: 30rpx;
  vertical-align: middle;
  margin-right: 20px;
}

.route-list{
  margin-top: 20rpx;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  background-color: #fff;
}