前端與移動開發樂淘專案-day01
阿新 • • 發佈:2018-12-21
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>