黑马程序员技术交流社区

标题: 【郑州校区】乐淘项目day1 [打印本页]

作者: 我是楠楠 时间: 2020-3-31 10:26
标题: 【郑州校区】乐淘项目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>

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

黑马程序员IT技术论坛 X3.2