黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发乐淘项目-day01 [打印本页]

作者: 谷粒姐姐    时间: 2018-11-12 15:49
标题: 【郑州校区】前端与移动开发乐淘项目-day01
本帖最后由 谷粒姐姐 于 2018-11-12 15:51 编辑

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的基本使用步骤:
[AppleScript] 纯文本查看 复制代码
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>







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2