昨天粗粗的写了下后台数据传到微信小程序显示，用来熟悉这个过程,适合刚入门学习案例：
需了解的技术：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;
}