【郑州校区】乐淘项目day1

【郑州校区】乐淘项目day1

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结构，如下：

[AppleScript] 纯文本查看 复制代码

<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代码,如下：

[AppleScript] 纯文本查看 复制代码

<script>

            var gallery = mui('.mui-slider');

            gallery.slider({

              interval:5000//自动轮播周期，若为0则不自动播放，默认为0；

            });

        </script>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】乐淘项目day1

0 个回复