微信小程序-展示后台传来的json格式数据

2023-11-22 10:11
文章标签 数据 程序 微信 json 展示 格式 后台 传来

本文主要是介绍微信小程序-展示后台传来的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;}@Overridepublic 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*/@Overridepublic 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;}/*单元测试：查询所有的路线封装到集合中*/@Testpublic 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*/@Overridepublic 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 {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overrideprotected 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;
}

　　

 

转载于:https://www.cnblogs.com/jike1219/p/10765416.html

这篇关于微信小程序-展示后台传来的json格式数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/409410。

相关文章

MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
MySQL查询JSON数组字段包含特定字符串的方法

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案（推荐）2. 模糊匹配方案参数化查询示例使用场景建议性能优
阅读更多...
MyBatisPlus如何优化千万级数据的CRUD

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...
mysql中的数据目录用法及说明

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》：本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后，在安装目录下会有一个data目录，我们创建的数据库、创建的表、插入的
阅读更多...
java向微信服务号发送消息的完整步骤实例

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》：本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试
阅读更多...
Mysql常见的SQL语句格式及实用技巧

Mysql常见的SQL语句格式及实用技巧

《Mysql常见的SQL语句格式及实用技巧》本文系统梳理MySQL常见SQL语句格式,涵盖数据库与表的创建、删除、修改、查询操作,以及记录增删改查和多表关联等高级查询,同时提供索引优化、事务处理、临时... 目录一、常用语法汇总二、示例1.数据库操作2.表操作3.记录操作 4.高级查询三、实用技巧一、常用语
阅读更多...
Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》：本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面，查看左下角从左
阅读更多...
解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》：本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM
阅读更多...
SpringBoot中4种数据水平分片策略

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2