优选项目day1持续更新（超级详细的带大家一步步做这个小型的电商全端项目）

最新推荐文章于 2020-02-21 21:20:27 发布

L_JL

最新推荐文章于 2020-02-21 21:20:27 发布

阅读量680

点赞数 1

CC 4.0 BY-SA版权

文章标签：电商全端项目

本文链接：https://blog.youkuaiyun.com/L_JLJL/article/details/80614431

本文分享了电商全端项目的搭建过程，从技术选型到环境配置，详细介绍了UI框架、JS库的选择与使用，以及轮播图插件的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天和朋友接手了一个小型的电商全端项目，打算为各位一步步介绍项目的开展，可能不够专业，大家就当做互相学习吧！

现在就直接进入正题吧！

项目分析

adminPC端后台管理系统技术选型
1. UI框架 : bootstrap UI框架 bootstrap比较流行的前端框架专注做UI 提供好了很多表单按钮组件插件等很适合做后台管理系统
2. 字体图标框架： Font Awesome
3. JS框架（库） : jquery 方便获取元素添加事件请求数据
4. 模板引擎js库：artTemplate 模板引擎方便渲染页面
移动端手机端的页面技术选型
1. UI框架： MUI 针对移动端的UI框架界面组件接近IOS原生界面组件提供很多丰富页面组件和插件
2. 字体图标框架： Font Awesome
3. JS框架：zepto 轻量级的jquery针对移动端获取元素添加事件发送请求
4. 模板引擎js库：artTemplate 模板引擎方便渲染页面

项目的环境搭建

安装nodejs
1. 找到对应nodejs安装包
2. 双击打开一路下一步
3. 安装完成后打开cmd命令行输入node -v 回车有版本号就表示成功
导入优选项目的数据库
1. 打开phpstudy
2. 启动mysql数据库
3. 找到优选项目的sql脚本youxuan_init.sql
4. 打开phpstudy的 mysql管理器》 mysql-front
5. 链接当前数据库
6. 点击左侧菜单的localhost
7. 点击左上角的文件》输入》 sql文件
8. 选中lyouxuan_init.sql文件把编码改成UTF-8 点击确定
9. 点击左上角的刷新出现youxuan的数据库就表示成

项目引包

CSS在head标签里面去引入CSS
JS 放到body结束标签的上面所有页面元素的下面(要优先让页面的元素加载完毕再引入但是不推荐写在html标签后面造成网页没有根节点)（这样比较规范百度淘宝都是这样做的）
引包顺序：
1. 有第三方的包先引入第三方包再引入自己的包
2. 如果第三包存在依赖关系要先依然被依赖的文件在引入不被依赖的文件（比如bootstrap依赖jquery 先引入jquery在引入bootstrap.js）
如果一些JS有特殊作用影响到页面渲染比如：less.js html5shiv response.js 要引在head里面

```html
    <!-- 1. 引入MUI的CSS包  提供基础的样式和组件-->
    <link rel="stylesheet" href="lib/mui/css/mui.css">
    <!-- 2. 引入字体图标的CSS包 提供了页面的图标 -->
    <link rel="stylesheet" href="lib/fontAwesome/css/font-awesome.css">
    <!-- 3. 引入自己的样式文件（less）文件 注意rel="stylesheet/less"  提供页面的样式 -->
    <link rel="stylesheet/less" href="less/index.less">
    <!-- 4. 引入less的编译器文件less.js 这个less.js是需要编译Less来加载页面样式 优先引入让样式能够正常显示 用来编译less文件-->
    <script src="lib/less/less.js"></script>

```

```html
    <!-- 5. 引入MUI的JS 文件 提供MUI一些JS特效 轮播图滑动之类的 -->
    <script src="lib/mui/js/mui.js"></script>
    <!-- 6. 引入获取元素要使用的zepto -->
    <script src="lib/zepto/zepto.min.js"></script>
    <!-- 7. 引入模板引擎的js文件 用来渲染页面 -->
    <script src="lib/artTemplate/template.js"></script>
    <!-- 8. 引入自己js  调用框架 发送请求之类代码-->
    <script src="js/index.js"></script>

```

轮播图插件的使用（MUI上的）

使用基本结构

  <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>

默认轮播图无法自动轮播图也无法循环
1. 支持循环轮播图再 mui-slider-group类上添加一个循环类.mui-slider-loop
2. 还需要重复添加节点把最后一个轮播图复制一份放到最前 
```

    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
```
  把第一张轮播图复制一份放到最后  <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div> </div>
  同时循环的图片要添加 mui-slider-item-duplicate 循环的类名
3. 自动轮播图
  1. 调用JSAPI去实现自动轮播图
```
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
```
4. 给轮播图添加小圆点 <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> 小圆点要加载mui-slider 容器里面 mui-slider-group的旁边

<!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>

<!--支持循环，需要重复图片节点-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>

<div class="mui-slider">

 <div class="mui-slider-group">

   <div class="mui-slider-item"></div>

   <div class="mui-slider-item"></div>

   <div class="mui-slider-item"></div>

   <div class="mui-slider-item"></div>

 </div>

  </div>