本文為本人原創，如需轉載請注明出處！
為期五天的實訓結束了，其實算起來除去機房被占用頂多四天多一點。
來給我們做培訓的是優才學院（沒有打廣告的意思，本着實事求是的態度），老師很有耐心，確實學到很多東西。
今天剛結束我想趁熱打鐵趕緊寫一份總結，近兩天總結完（明天考兩門考研大科我怎能安心更博客啊！）。
（代碼都是自己照着老師的敲的依照個人喜好略有改動，數據庫是老師給的，如果有侵權的地方，請聯系我，我將立即刪掉。）
簡單記錄一下五天的內容 重要的是做一個微票的微信小程序。
微信小程序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來追究本人的責任。
---------------------------------------------------------------------------------------------------正經的分割線結束---------------------------------------------------------------------------------------------------