微信小程序之微票先後端簡易版+五天實訓總結

時間 2019-11-19

標籤微信程序後端簡易五天 5天總結简体版

原文原文鏈接

本文爲本人原創，如需轉載請註明出處！javascript

爲期五天的實訓結束了，其實算起來除去機房被佔用頂多四天多一點。css

來給咱們作培訓的是優才學院（沒有打廣告的意思，本着實事求是的態度），老師頗有耐心，確實學到不少東西。html

今天剛結束我想趁熱打鐵趕忙寫一份總結，近兩天總結完（明天考兩門考研大科我怎能安心更博客啊！）。前端

（代碼都是本身照着老師的敲的依照我的喜愛略有改動，數據庫是老師給的，若是有侵權的地方，請聯繫我，我將當即刪掉。）java

簡單記錄一下五天的內容重要的是作一個微票的微信小程序。mysql

微信小程序4月份的時候我研究過，還買了本書（建議不要買書，這個東西改朝換代很快的，並且不像java那麼難學），每次登錄開發者工具都有更新，還有更新日誌，發展很迅猛。主要是輕量級的，簡易方便。打算暑假作比賽有餘力就再寫個小程序（上一屆比賽確定是沒有這個東西的）。雖然學過，但通過老師一講，果真！本身看書跟有老師帶着就是不同！！sql

第一天下午+次日上午飛機大戰遊戲截圖以下數據庫

不是特別難，重要的是理清邏輯。json

編譯器是eclipse jdk8小程序

次日下午數據庫等基本操做不作詳細記錄但做爲後期基礎

第三天 json的生成此處詳細記錄，後期的基礎

一、

首先建立項目導入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：數據庫工具

二、在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();

       }

    }

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) {

       /*

        * 拿到參數

        * 一、若是參數是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 {

       /*

        * 一、接收用戶的請求數據

        * 二、根據要求從數據庫中獲取數據

        * 三、將取出來的數據封裝成對象，並寫成json字符串

        * 四、將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來追究本人的責任。

---------------------------------------------------------------------------------------------------正經的分割線結束---------------------------------------------------------------------------------------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。