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