本文为本人原创,如需转载请注明出处!

为期五天的实训结束了,其实算起来除去机房被占用顶多四天多一点。

来给我们做培训的是优才学院(没有打广告的意思,本着实事求是的态度),老师很有耐心,确实学到很多东西。

今天刚结束我想趁热打铁赶紧写一份总结,近两天总结完(明天考两门考研大科我怎能安心更博客啊!)。

(代码都是自己照着老师的敲的依照个人喜好略有改动,数据库是老师给的,如果有侵权的地方,请联系我,我将立即删掉。)

简单记录一下五天的内容 重要的是做一个微票的微信小程序。

微信小程序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

微信小程序之微票前后端简易版+五天实训总结相关推荐

  1. 从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调

    目录 项目介绍 vx小程序简介 VX开发工具介绍 列表页开发 list的编写 列表页前后端联调 信息编辑页开发 operation的编写 区域信息编辑页的联调 项目介绍 从0搭建后端的Springbo ...

  2. 2022最新微信小程序授权登录(前后端分离)

    一.前言 首先说一下微信小程序最近两个比较大的变动: 1. 获取用户信息接口由原来的wx.getUserInfo更换为wx.getUserProfile 2021年4月28日24时后发布的新版本小程序 ...

  3. 微信小程序获取手机号:前后端源码示例,解决47001这个错误提示

    小程序中自动获取手机号为很常见的一个功能点,可以减少用户输入,目前小程序规则是不允许系统直接自动获取,需要用户手动触发 本文中的实现方式:前端使用uniapp生成小程序,后端使用springboot ...

  4. java版微信小程序多商家入驻前后端分离商城源码 Spring Cloud+Spring Boot+mybatis+security+uniapp+Redis+MQ+VR全景+b2b2c

    @源码地址来源: https://minglisoft.cn/honghu2/business.html 微信小程序登录代码: /*** Copyright © 2012-2017 <a hre ...

  5. 微信小程序:电影选票系统 (简易版) 可以选择场次座位并生成订单

    简介:这本来是一个课设作品,完整版连接了JAVA后台数据库,但因为我基本只负责微信小程序的后端数据交互,所以只发一个没有连接数据库,用静态数据作为代替的简易版,但还是保留了部分连接数据库的代码,大家可 ...

  6. 微信小程序文件上传 前后端

    搭建小程序端 用vant组件 <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead ...

  7. Uniapp微信小程序授权的登录前后端全套

    前言 用Uniapp写的小程序要上线了,结果微信不过审,我也觉得很奇怪!驳回信息如下 这么一说的话确实,因为之前的写的代码获取用户openid的时候必须要是调试模式,我还以为是没上线的问题!这下好了, ...

  8. 微信小程序仿淘票票之登录注册讲解

    微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言 一.登录以及注册的业务逻辑 二.核心代码 1.register代码 2.login代码 总结 前言 愉快的期末,终于结束了,我准备把程 ...

  9. 商城前端模板_如何理解微信小程序和微商城,微信公众号以及APP之间的关系?一张图看懂了!...

    老张的一位粉丝,花了几天时间把知乎里面分享的一些关于微信小程序,微信商城,微信公众号,以及APP的相关介绍全看完了. 然后用他自己的话描述了微信小程序和微商城,微信公众号以及APP之间的关系,如下图所 ...

最新文章

  1. 程序员毕业两年,如何在帝都购房上车?
  2. Bag of Tricks for Image Classification
  3. Flask 自定义过滤器多个参数传入
  4. OpenStack 的部署T版(三)——Glance组件
  5. SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
  6. php_self nginx,nginx中的PATH_INFO为什么会影响$_SERVIER['PHP_SELF']
  7. JS-面向对象---属性的特性 / 修改属性的特性
  8. stm32F051系列教程 前哨篇 建立一个KEIL工程模板
  9. 网站集成QQ登录功能
  10. ansys icem cfd网格划分技术实例详解_新软速递极简的CFD软件in:Flux
  11. javascript获取屏幕高度和宽度、监听屏幕大小改变
  12. AD转换的一个硬件实现原理
  13. 计算机网络基础简答题
  14. 用于即使在太空中也能随时随地进行编码的移动应用程序
  15. 凹入表示法(C语言版)
  16. 计算机实验报告word结果总结,计算机网络实验报告.doc
  17. 计算机考研院校对比与分析-南京理工VS华南理工
  18. 网页端对接linux发起cc,网页端和mLink指南
  19. 存储过程代码关于反跑批批量与日更新
  20. 1.UE4的获取及商城应用

热门文章

  1. ERP销售管理系统是什么?销售管理软件有哪些核心功能?
  2. 拼多多批发业务能做成吗?
  3. win10待机状态仍然联网设置
  4. java clip_java – 使用Clip对象播放多个声音片段
  5. python 动漫卡通人物图片大全_用Python实现抖音上的“人像动漫化”特效,原来这么简单...
  6. SATA硬盘与IDE硬盘的优劣势对比
  7. python gui编程for mac_Python IDE 开发软件-PyCharm pro for Mac
  8. 【名言】后生看经书,须着看注疏及先儒解释,不然,执己见议论,恐入自是之域,便轻视古人。...
  9. finereport与finebi差别_finebi和finereport区别
  10. windows平台 VS2017 live555 rtsp推流服务器编译