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

 

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

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

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

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

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

 

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

           e.printStackTrace();

       }

       finally {

           DBUtils.closeAll(conn, ps, rs);

       }

       return list;

  

 

这个包里主要做的工作就是把数据库里wp表的内容读出来。

d.biz里也就两个:InfoBiz接口和InfoBizImpl实现类

private InfoDao dao = new InfoDaoImpl();

    @Override

    public 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({
     //修改1
     url: 'https://www.****/WeiPiao/GetInfo?type=wp',
     data: {},
     method: 'GET',
     //设置请求
     header: {
       "Accept": "application-json"
     },
     success: function (res) {
       console.log(res);
       //修改2
       var 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来追究本人的责任。

---------------------------------------------------------------------------------------------------正经的分割线结束---------------------------------------------------------------------------------------------------

                  

                    

 

posted on 2017-06-23 14:57  Amy鱼  阅读(5077)  评论(1编辑  收藏  举报