《移动应用开发》实验报告——仿饿了么商家页面

た入场券 2022-10-17 00:53 162阅读 0赞

源代码：https://gitee.com/shentuzhigang/mini-project/tree/master/vue-eapp

# 实验目标 #

1.  掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并会运行调试工具。
2.  了解前端框架mint-ui的开发方法，掌握基本编程方法。
3.  掌握手机网上商城网页布局、图片轮播等编程方法。
4.  设计友好的操作界面，培养服务意识。

# 实验内容 #

第一步：下载案例代码eapp-master.rar，使用VScode打开打开代码，查看代码中的README.md文件，安装依赖包，使用npm run dev运行源代码，了解界面布局设计、mint-ui的编程方法。  
第二步：下载案例代码vue-shop-app.rar，了解界面布局设计和图片轮播编程方法。  
第三步：使用vue-cli新建项目，使用vue.js,mint-ui等技术来创建一个模仿饿了么的APP。只要求完成手机前端部分功能，不少于2个页面（主页、热门推荐、特色菜等），建议使用vue.js、mint-ui等技术。

--------------------

## 截图展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]

## 主要代码及实现方法简介 ##

<div>
        <div class="goods">
          <div class="menu-wrapper" ref="menu">
            <ul>
              <li
                  class="menu-item"
                  v-for="(item,index) in goods"
                  :key="index"
                  :class="{active:currentIndex===index}"
                  @click="scrollTo(index)">
                <span class="text border-1px">
                  <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{ { item.name}}
                </span>
              </li>
            </ul>
          </div>
          <div class="foods-wrapper" ref="foods">
            <ul>
              <li v-for="item in goods" :key='item' class="food-list food-list-hook">
                <h1 class="title">{ { item.name}}</h1>
                <ul>
                  <li v-for="food in item.foods"  :key='food' @click="selectFood(food)" class="food-item border-1px">
                    <div class="icon">
                      <img width="57" height="57" :src="food.icon">
                    </div>
                    <div class="content">
                      <h2 class="name">{ { food.name}}</h2>
                      <p class="description">{ { food.description}}</p>
                      <div class="extra">
                        <span class="count">月售{ { food.sellCount}}份</span>
                        <span class="">好评率{ { food.rating}}%</span>
                      </div>
                      <div class="price">
                        ￥
                        <span class="now">{ { food.price}}</span>
                        <span class="old" v-if="food.oldPrice">￥{ { food.oldPrice}}</span>
                      </div>
                      <div class="cartcontrol-wrapper">
                        <cartcontrol :food="food" @update:increase="food.count == undefined ? food.count = 1:food.count++"
                                     @update:decrease="food.count--"></cartcontrol>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <food :food="selectedFood" ref="food"></food>
      </div>

# 参考项目 #

[https://github.com/zsqosos/eapp][https_github.com_zsqosos_eapp]

# 参考文章 #

https://vue3js.cn

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]: /images/20221014/e7c85680fdf548c2b469f20c5e7e18db.png
[https_github.com_zsqosos_eapp]: https://github.com/zsqosos/eapp