微信小程序之微票前后端简易版+五天实训总结
本文为本人原创,如需转载请注明出处!
为期五天的实训结束了,其实算起来除去机房被占用顶多四天多一点。
来给我们做培训的是优才学院(没有打广告的意思,本着实事求是的态度),老师很有耐心,确实学到很多东西。
今天刚结束我想趁热打铁赶紧写一份总结,近两天总结完(明天考两门考研大科我怎能安心更博客啊!)。
(代码都是自己照着老师的敲的依照个人喜好略有改动,数据库是老师给的,如果有侵权的地方,请联系我,我将立即删掉。)
简单记录一下五天的内容 重要的是做一个微票的微信小程序。
微信小程序4月份的时候我研究过, 还买了本书(建议不要买书,这个东西改朝换代很快的,而且不像java那么难学),每次登陆开发者工具都有更新, 还有更新日志,发展很迅猛。主要是轻量级的,简易方便。打算暑假做比赛有余力就再写个小程序(上一届比赛肯定是没有这个东西的)。虽然学过,但经过老师一讲,果然!自己看书跟有老师带着就是不一样!!
第一天下午+第二天上午 飞机大战游戏 截图如下
不是特别难,重要的是理清逻辑。
编译器是eclipse jdk8
第二天下午 数据库等基本操作 不做详细记录 但作为后期基础
第三天 json的生成 此处详细记录,后期的基础
1、
首先创建项目导入gson包 https://pan.baidu.com/s/1c2GiCRQ百度云
和mysql-connector包http://pan.baidu.com/s/1nvlyklV
配置文件(右击项目 buil path add jars)
三个sql文件wp,wp_image, wp_cinema http://pan.baidu.com/s/1pLylqFx导入到数据库中
创建这几个包 bean:实体类 biz:控制层也就是业务逻辑层
Dao:访问数据库的方法 servlet:服务器 util:数据库工具
2、 在bean里创建一个WeiPiao的实体类,代码不做展示,照着数据库表的写出成员,其他的构造和getset一键生成。不要把id放到构造函数里!总之不要让id参与进来否则会很 麻烦
a.先搞数据库(无论是什么项目,先把数据库搞通)properties那里边:
jdbcDriver = com.mysql.jdbc.Driver
jdbcUrl = jdbc:mysql://localhost:3306/你的数据库名?user=你的数据库用户名&password=密码
b.util里创建PropertiesUtil类,以下只写类里的方法和必要的成员变量
public static String getValue(String key,String proName){String value = null;Properties p = new Properties();String path = PropertiesUtil.class.getResource("/").getPath();try {p.load(new FileInputStream(new File(path,proName)));value = p.getProperty(key);} catch (FileNotFoundException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return value;}
和DBUtil类
public static Connection getConn(){Connection conn =null;try {Class.forName("com.mysql.jdbc.Driver");conn =DriverManager.getConnection("jdbc:mysql://localhost:3306/test?user=root&password=123456");} catch (Exception e) {e.printStackTrace();}return conn;}public static void closeAll(Connection conn,PreparedStatement ps,ResultSet rs){try {if (rs!=null) {rs.close();}} catch (SQLException e) {e.printStackTrace();}try {if (ps!=null) {ps.close();}} catch (SQLException e) {e.printStackTrace();}try {if (conn!=null) {conn.close();}} catch (SQLException e) {e.printStackTrace();}}
c.
dao包里创建一个InfoDao接口和InfoDaoImpl实现类
就一个方法:
public List<WeiPiao> getAll()Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;List<WeiPiao> list = new ArrayList<WeiPiao>(); try {conn=(Connection) DBUtils.getConn();ps=conn.prepareStatement("select * from wp");rs=ps.executeQuery(); //遍历结果对象,获取对应字段的数据while(rs.next()){String image=rs.getString("image");String title = rs.getString("title");String subTitle = rs.getString("subTitle");String actor=rs.getString("actor");String score=rs.getString("score");String action=rs.getString("action");//声明weipiao对象,并且传入每个字段的数据WeiPiao weiPiao = new WeiPiao(image, title, subTitle, actor, score, action);//将对象添加到集合里list.add(weiPiao);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally {DBUtils.closeAll(conn, ps, rs);}return list;
这个包里主要做的工作就是把数据库里wp表的内容读出来。
d.biz里也就两个:InfoBiz接口和InfoBizImpl实现类
private InfoDao dao = new InfoDaoImpl();@Overridepublic String getInfo(String type) {/** 拿到参数* 1、如果参数是wp,获取全部的影片信息*///声明集合List<WeiPiao> list=new ArrayList<WeiPiao>();List<WeiPiaoImage> list2=new ArrayList<WeiPiaoImage>();List<Cinema> list3=new ArrayList<Cinema>();if("wp".equals(type)){//wp在前,避免空指针异常list=dao.getAll();String json=wpToJson(list);return json;}else if("wp_image".equals(type)){list2=dao.getAllimage();String json=wpiToJson(list2);return json;}else if("cinema".equals(type)){list3=dao.getAllCinema();String json=wpcToJson(list3);return json;}return "参数写错";}//将集合写成json数据并且返回public String wpToJson(List<WeiPiao> list){//声明一个root对象Root root = new Root();//将集合放入到root对象中root.setResult(list);//使用gson,将root写成json数据Gson gson = new Gson();String json =gson.toJson(root); return json;}这个包做的事情就是把都出来数据库里边的数据生成json数据e.servlet包里建一个servlet :GetInfo@WebServlet("/GetInfo")public class GetInfo extends HttpServlet {private static final long serialVersionUID = 1L;private InfoBiz biz = new InfoBizImpl();public GetInfo() {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {/** 1、接收用户的请求数据* 2、根据要求从数据库中获取数据* 3、将取出来的数据封装成对象,并写成json字符串* 4、将json数据写入到客户端*///设置返回数据的编码格式response.setContentType("text/html;charset=utf-8");//获取请求的参数,交给业务层处理String type=request.getParameter("type");//获取业务层返回的json数据String json=biz.getInfo(type);//将json数据写在页面response.getWriter().println(json);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}
用doget方法!!方便选择不同的数据表!
f.运行:右击项目 run as 第一个 地址栏加入参数:GetInfo?type=wp//传参造么?然后就会出现:
这就是json!!天啦好神奇!!!不好看是吧?百度be json格式化一下!这个就是我们接下来需要的json数据。
当然还有image cinema,都是照葫芦画瓢的,也就是说,我们可以生成三个json的。
走完这一步,因为我是紧跟老师步伐,所以没有什么报错,但是通过给同学改程序,基本有以下几个错误:
①-数据库部分走不动:可能是properties写的不对,也可能mysql-connector放到lib包里了但是没有配置好,还有可能sql语言写错了。建议:单独把数据库部分 拿出来跑,调通后放回去,没毛病。
②-@这个符号所在的一行报错:是没有配置jdk吧?或者jdk版本/tomcat版本过低,jdk1.6以下的请换更高版本,毕竟向下兼容,高了不吃亏。建议:build path 看看,该换换,一般就是这种原因。
③-乱码:数据库有的视图化工具导入表时有选择编码项一定要注意,还有工程本身也有编码,编码不一致才会乱码。建议:重新导表utf8编码,右击项目-- properties---resourse里边改编码。
④-代码怎么看都没错但就是提示各种各样奇怪的错误:李同学经典做法,报错从后往前调,以每个错误为一个结点,输出信息或者其他方式调试程序(不愧是 做ACM的),总比干瞪眼好。实在不行重新创建一个项目把原来的代码粘贴进去。
/(ㄒoㄒ)/~~忍痛离开
----------------------暂更,跑开去复习---------------------------------------------------------------------------------------------------------------------------------------------------------6.23
6.24 继续
艾玛 终于考完了两门大科,行了不吐槽了,血槽空了,来我们继续。
第四天 微信小程序之布局演示、从本地获取视频播放(最后来记录)
第五天 微信小程序之(#`O′微票 先展示一下老师做的:不一样大就不一样大吧。。。
但如果按照下边的来做,将会看到以下
样式可以改,改成自己喜欢的都可以。
上面已经生成了json。
现在来写前端。首先,有一个微信小程序开发者工具、还要有一个开发者账号,操作步骤在微信公众号平台都有。域名什么的,买一个就好。
pages里创建三个文件夹 home cinema my
app.json里边:
{"pages":["pages/home/index","pages/cinema/index","pages/logs/logs","pages/my/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "微票","navigationBarTextStyle":"black"},
"tabBar": {"selectedColor": "#3cc51f","list": [{"pagePath": "pages/home/index","text": "上映","iconPath": "image/icon_normal.png","selectedIconPath": "image/icon_pressed.png"},{"pagePath": "pages/cinema/index","text": "影院","iconPath": "image/icon_normal.png","selectedIconPath": "image/icon_pressed.png" },{"pagePath": "pages/my/index","text": "我的","iconPath": "image/icon_normal.png","selectedIconPath": "image/icon_pressed.png"}]
}}
home/index.js
//home/index.js
//获取应用实例
var app = getApp()
//初始化数据
Page({data: {},//生命周期函数,页面加载时调用onLoad: function () {var that=this//获取轮播图数据wx.request({url: 'https://www.****/WeiPiao/GetInfo?type=image',data:{},method:'GET',//设置请求header:{"Accept":"application-json"},success:function(res){console.log(res);var data=res.data.images;console.log(data);//解析到数组,设置数据给页面that.setData({image:data})}}),//获取接口请求信息wx.request({//修改1url: 'https://www.****/WeiPiao/GetInfo?type=wp',data: {},method: 'GET',//设置请求header: {"Accept": "application-json"},success: function (res) {console.log(res);//修改2var data = res.data.result;console.log(data);//解析到数组,设置数据给页面that.setData(//修改三{items: data})}})}
})
home/index.wxml
<!--index.wxml-->
<view class="container">
<!--indicator-dots="true"显示面板指示点-->
<!--autoplay="true" 自动轮播-->
<!--interval="3000"自动轮播的时间间隔-->
<!--duration="1000"滑动动画时长-->
<swiper class="swiper_box" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<!--swiper-item滑动视图的每一项-->
<!--wx:for 绑定一个数组,即可使用数组中各项的数据重复渲染该组件-->
<!--wx:for-item 子元素,相当于数组中的每一项-->
<swiper-item wx:for="{{image}}" wx:for-item="item">
<image src="{{item.images}}" class="slide_image"></image>
</swiper-item>
</swiper><!--2-->
<view class="text">
<view class="line_flag"></view>
<view class="text_content">正在上映</view>
</view><!--3-->
<view wx:for="{{items}}" wx:for-item="item">
<view class="item">
<!--左边部分-->
<view class="item_left"><image src="{{item.image}}"></image>
</view>
<!--中间-->
<view class="item_middle">
<!--影片名--><view><text class="title"> {{item.title}} </text></view><!--影片简介--><view><text class="sub_title"> {{item.subTitle}} </text></view><!--演员--><view><text class="actor"> {{item.actor}} </text></view></view>
<!--右边--><view class="item_right"><!--评分--><view><text class="score"> {{item.score}} </text></view><!--购票方式--><view><text class="action"> {{item.action}} </text></view></view>
</view>
</view>
</view>
wxss 样式表里自己可以随意改,按照自己的风格来。css具体样式w3school都有。
/**index.wxss**/
.container{background-color: #f2f2f2;
}
.swiper_box{width:100%;height:200px;
}
.slide_image{width:100%;height:200px;display:inline-block;overflow:hidden;}
/*第二部分样式*/
.text{display:flex;width: 100%;padding: 10px;color: #656565;background-color: #ddd;
}
/*标记的样式*/
.line_flag{width: 3px;
height:18px;background-color:hotpink;margin-left: 10px;
}
.text_content{line-height:18px;margin-left: 10px;font-family: "kaiti";
}
.score{color:red;font-size: 70%;}
.item_middle{float:left;margin:auto;width:50%;height:200px;
}
.item_right{width:25%;height:200px;float:right;}
.action{border-style: solid;border-bottom-color: greenyellow;font-size:70%;color:greenyellow;}
.actor{font-size: 80%;
}
.sub_title{
font-size:80%;}
同样,cinema的也可以照猫画虎。
到此,微票这一块就总结完毕了。
这是做的其他微信小程序的项目,还能发弹幕,神奇!!
--------------------------------------------------------------------------------------------------正经的分割线开始---------------------------------------------------------------------------------------------------
声明:为了保护老师所在培训学校的知识产权某些url打了马赛克。另外,这不是教学帖,只是实训总结,所以没必要因为完全照抄本人的代码而出了任何bug来追究本人的责任。
---------------------------------------------------------------------------------------------------正经的分割线结束---------------------------------------------------------------------------------------------------
转载于:https://www.cnblogs.com/Amy-is-a-fish-yeah/p/7069926.html
微信小程序之微票前后端简易版+五天实训总结相关推荐
- 从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调
目录 项目介绍 vx小程序简介 VX开发工具介绍 列表页开发 list的编写 列表页前后端联调 信息编辑页开发 operation的编写 区域信息编辑页的联调 项目介绍 从0搭建后端的Springbo ...
- 2022最新微信小程序授权登录(前后端分离)
一.前言 首先说一下微信小程序最近两个比较大的变动: 1. 获取用户信息接口由原来的wx.getUserInfo更换为wx.getUserProfile 2021年4月28日24时后发布的新版本小程序 ...
- 微信小程序获取手机号:前后端源码示例,解决47001这个错误提示
小程序中自动获取手机号为很常见的一个功能点,可以减少用户输入,目前小程序规则是不允许系统直接自动获取,需要用户手动触发 本文中的实现方式:前端使用uniapp生成小程序,后端使用springboot ...
- java版微信小程序多商家入驻前后端分离商城源码 Spring Cloud+Spring Boot+mybatis+security+uniapp+Redis+MQ+VR全景+b2b2c
@源码地址来源: https://minglisoft.cn/honghu2/business.html 微信小程序登录代码: /*** Copyright © 2012-2017 <a hre ...
- 微信小程序:电影选票系统 (简易版) 可以选择场次座位并生成订单
简介:这本来是一个课设作品,完整版连接了JAVA后台数据库,但因为我基本只负责微信小程序的后端数据交互,所以只发一个没有连接数据库,用静态数据作为代替的简易版,但还是保留了部分连接数据库的代码,大家可 ...
- 微信小程序文件上传 前后端
搭建小程序端 用vant组件 <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead ...
- Uniapp微信小程序授权的登录前后端全套
前言 用Uniapp写的小程序要上线了,结果微信不过审,我也觉得很奇怪!驳回信息如下 这么一说的话确实,因为之前的写的代码获取用户openid的时候必须要是调试模式,我还以为是没上线的问题!这下好了, ...
- 微信小程序仿淘票票之登录注册讲解
微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言 一.登录以及注册的业务逻辑 二.核心代码 1.register代码 2.login代码 总结 前言 愉快的期末,终于结束了,我准备把程 ...
- 商城前端模板_如何理解微信小程序和微商城,微信公众号以及APP之间的关系?一张图看懂了!...
老张的一位粉丝,花了几天时间把知乎里面分享的一些关于微信小程序,微信商城,微信公众号,以及APP的相关介绍全看完了. 然后用他自己的话描述了微信小程序和微商城,微信公众号以及APP之间的关系,如下图所 ...
最新文章
- 程序员毕业两年,如何在帝都购房上车?
- Bag of Tricks for Image Classification
- Flask 自定义过滤器多个参数传入
- OpenStack 的部署T版(三)——Glance组件
- SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
- php_self nginx,nginx中的PATH_INFO为什么会影响$_SERVIER['PHP_SELF']
- JS-面向对象---属性的特性 / 修改属性的特性
- stm32F051系列教程 前哨篇 建立一个KEIL工程模板
- 网站集成QQ登录功能
- ansys icem cfd网格划分技术实例详解_新软速递极简的CFD软件in:Flux
- javascript获取屏幕高度和宽度、监听屏幕大小改变
- AD转换的一个硬件实现原理
- 计算机网络基础简答题
- 用于即使在太空中也能随时随地进行编码的移动应用程序
- 凹入表示法(C语言版)
- 计算机实验报告word结果总结,计算机网络实验报告.doc
- 计算机考研院校对比与分析-南京理工VS华南理工
- 网页端对接linux发起cc,网页端和mLink指南
- 存储过程代码关于反跑批批量与日更新
- 1.UE4的获取及商城应用
热门文章
- ERP销售管理系统是什么?销售管理软件有哪些核心功能?
- 拼多多批发业务能做成吗?
- win10待机状态仍然联网设置
- java clip_java – 使用Clip对象播放多个声音片段
- python 动漫卡通人物图片大全_用Python实现抖音上的“人像动漫化”特效,原来这么简单...
- SATA硬盘与IDE硬盘的优劣势对比
- python gui编程for mac_Python IDE 开发软件-PyCharm pro for Mac
- 【名言】后生看经书,须着看注疏及先儒解释,不然,执己见议论,恐入自是之域,便轻视古人。...
- finereport与finebi差别_finebi和finereport区别
- windows平台 VS2017 live555 rtsp推流服务器编译