1. 程式人生 > >前端與移動開發樂淘專案-day01

前端與移動開發樂淘專案-day01

1.開發模式:開發專案的方式。
A.前後端協同開發:前端製作基本頁面交給後臺,後臺將資料填入頁面。
B.前後端分離開發:前端製作基本頁面並請求後臺提供的介面,將資料填入頁面。
後臺只需要製作介面提供資料即可。

2.專案的執行步驟:
A.安裝node
B.安裝wamp
C.在專案資料夾中開啟 命令列視窗,執行命令“npm install”用來安裝專案需要的庫
D.在專案資料夾中開啟 命令列視窗,執行命令“npm start”用來啟動專案
E.在瀏覽器中輸入“http://127.0.0.1:3000/mobile”開啟前端手機端
在瀏覽器中輸入“http://127.0.0.1:3000/admin”開啟後端pc端

3.mui的基本使用步驟:

A.引入mui:
                1).引入css:<link rel="stylesheet" href="mui/css/mui.min.css"/>
                2).引入js:<script src="mui/js/mui.min.js"></script>
        B.使用mui的元件(參考文件進行使用):
                1).編寫mui元件需要的dom結構,如下:
                <div class="mui-slider">
                      <div class="mui-slider-group">
                             <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
                             <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
                             <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
                             <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
                    </div>
                </div>
                2).編寫使mui元件執行的js程式碼,如下:
                <script>
                        var gallery = mui('.mui-slider');
                        gallery.slider({
                          interval:5000//自動輪播週期,若為0則不自動播放,預設為0;
                        });
                </script>