【实训项目】益农小程序

news2025/5/23 9:22:27

1.项目背景

受到疫情影响，农作物物流运输受阻、产品滞销，给农民的“菜园子”和市民的“菜篮子”带来不少影响，一边是农民种植的蔬菜、草莓等地产农副食品滞销，一边是城区居民买不到新鲜、实惠的农副产品。

有很多地区，农民伯伯们因为住所偏僻、没有好的销售渠道、没有固定的客户，导致种的农作物和自家生产的产品，没有地方销售，而且还有一些中间商从他们手中低价够买，然后再高价售出；现在的助农团队一般是由团队操作的，也会上门收农产品，但是价格也压的很低。

根据调查，农业经营户表示，在2月中后期，逐步恢复农业生产。目前在恢复农业生产经营面临的主要困难在于：一是市场需求不足，产品不好卖（38.6%）；二是人员出入管控措施，导致无法正常经营（37.7%）；三是资金困难（23.7%）。 面对这一困境，我们组制定“益农”项目来解决上述问题。

2.技术体系

2.1MVC

MCV框架是一种软件架构模式，用于将应用程序的逻辑分离成不同的组件，以实现模块化和可维护性。MCV代表模型（Model）、视图（View）和控制器（Controller）。

模型（Model）是应用程序的数据和业务逻辑的表示。它负责处理数据的存储、检索和更新，并实现与数据相关的任何业务逻辑。模型通常被设计为独立于用户界面的组件。

视图（View）是应用程序的用户界面的表示。它负责显示数据给用户，并根据用户的输入和交互更新界面。视图通常是与具体平台相关的组件，可以是图形界面、命令行界面或网页界面。

控制器（Controller）是模型和视图之间的中间件。它负责接收用户输入并将其转发给模型进行处理，然后更新视图以反映模型的状态变化。控制器还可以管理应用程序的工作流程和协调模型和视图之间的通信。

MCV框架的主要优势包括：

（1）分离关注点：MCV框架通过将应用程序的不同方面分离成不同的组件，使得每个组件可以专注于自己的任务，提高了代码的可维护性和可重用性。

（2）模块化开发：由于MCV框架的模块化结构，开发人员可以并行开发不同的组件，提高了开发效率。

（3）可测试性：MCV框架将业务逻辑从用户界面中分离出来，使得业务逻辑的单元测试更容易实现。

（4）可扩展性：通过将模型、视图和控制器分离，MCV框架可以支持应用程序的功能和规模的增长，而不会引入太多的复杂性。

然而，MCV框架也有一些限制和挑战。例如，控制器可能变得过于庞大，导致代码的复杂性增加。此外，MCV框架需要开发人员熟悉和遵循特定的设计规范和约定，以确保正确实施框架。最后，MCV框架可能不适用于所有类型的应用程序，特别是那些没有明确定义的用户界面的应用程序。

2.2小程序技术

小程序是一种轻量级的应用程序，可以在手机等移动设备上运行，不需要用户下载安装即可直接使用。小程序通常以单个页面的形式呈现，提供特定的功能或服务，并具有较小的体积和快速的加载速度。

小程序技术主要有以下几个方面：

（1）前端开发技术：小程序前端开发主要使用的是Web前端开发技术，如HTML、CSS和JavaScript。开发者可以使用类似于网页的开发方式，通过编写HTML和CSS定义界面样式，通过JavaScript实现交互逻辑。

（2）框架和库：目前市场上主要有微信小程序和支付宝小程序两种主流平台。微信小程序使用基于JavaScript的框架Taro、mpVue、mpx等进行开发，支付宝小程序使用基于React框架的Antmove进行开发。这些框架和库提供了丰富的组件和API，简化了小程序的开发过程。

（3）后端服务和接口：小程序通常需要与后端服务器进行数据交互，获取数据并进行处理。开发者可以使用各种后端技术，如Node.js、Java、Python等，来编写后端服务和接口。后端服务可以提供数据存储、用户认证、业务逻辑处理等功能。

（4）数据库：小程序通常需要使用数据库来存储和管理数据。常见的数据库包括关系型数据库如MySQL、PostgreSQL，以及NoSQL数据库如MongoDB、Redis等。开发者可以根据具体需求选择合适的数据库。

（5）跨平台技术：为了在不同平台上运行小程序，开发者可以使用跨平台技术来实现一次开发，多平台适配。例如，uni-app和Weex等框架可以将小程序代码转换为不同平台的原生应用程序代码。

小程序技术的主要优势包括：低成本、快速开发、无需下载安装、节省设备资源、良好的用户体验等。然而，小程序也有一些限制，如功能受限、对硬件访问的限制、平台依赖性等。因此，在选择小程序技术时，需要根据具体需求和目标平台进行评估和选择。

3.功能介绍

（1）平台共设有采摘园、线上购买、在线直播、用户中心四个界面，主要是让顾客可以下采摘订单，去采摘园自己动手采摘产品；也可以线上购买，快递到家；可以通过在线直播观看农产品采摘过程，了解农产品的质量、口感，实现采摘-打包-发货全程关注。

（2）用户中心有顾客基本信息、订单详情。用户在使用“益农”时需要进行注册，包括用户名、密码、手机号、收货地址。

（3）采摘园主要是根据用户位置信息推荐附近农场、水果园，用户根据自己的兴趣爱好，选择园区，进行了解和预约。

（4）线上购买主要是顾客根据需求自行选择进行农产品的购买。

（5）在线直播主要有两种方式，一种是农场主对自己的农产品进行直播介绍，另一种是由采摘园的顾客直播分享采摘的过程与乐趣，可以在评论区进行评论交流。

4.小组成员分工

成员1：小组成员共同商讨完成项目策划书

成员2：主要制作PPT，编写数据库表格和增、删、改代码、填写实习报告。

成员3：主要制作小程序首页和购物车页面

成员4：主要制作直播页面、订单页面填写实习报告。

5.成果展示

6.核心代码

<!--pages/index.wxml-->
<view class="container">
  <swiper indicator-dots="true" autoplay="true" interval="{{swiper.interval}}" circular="{{swiper.circular || true }}" duration="{{swiper.duration}}"
   indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="rgb(255, 80, 0)">
    <block wx:for="{{swiper.imgsUrl}}" wx:key="index_swiper">
      <swiper-item>
        <image src="{{item}}" class="slide-image"/>
      </swiper-item>
    </block>
  </swiper>
  <view class="DFrames">
  
    <view class="layOut">
      <block wx:for="{{DFrames.layOut}}" wx:key="index_DFrames">
        <view class="layOut-item" data-route="{{item.route}}" bindtap='goto'>
          <image src="{{item.imgUrl}}"></image>
          <text class="layOut-item-text">{{item.text}}</text>
        </view>
      </block>
    </view>
    <view class="layOut-bg" style="background-image: url({{DFrames.bg}});"></view>
  </view>
  <view class="topLine">
    <swiper circular="true" autoplay="true" interval="{{topLine.interval}}" duration="{{topLine.duration}}"
     vertical="true">
      <block wx:for="{{topLine.tips}}" wx:key="index_topLine">
        <swiper-item>
          <view class="topline-item">
            <view class="topline-item-text">
              <text class="topline-item-category">{{item.category1}}</text>
              <text class="topline-item-content">{{item.text1}}</text>
            </view>
            <view class="topLine-item-text">
              <text class="topline-item-category">{{item.category2}}</text>
              <text class="topline-item-content">{{item.text2}}</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="recommend">
    <block wx:for="{{recommend}}" wx:key="index_recommend">
      <view class="rcd-item">
        <view class="rcd-item-left">
          <view class="rcd-item-title" style="background-image: url({{item.title}})"></view>
          <view class="rcd-item-subTitle" wx:if="item.subTitle">{{item.subTitle}}</view>
          <image src="{{item.imgUrl1}}"></image>
        </view>
        <view class="rcd-item-right">
          <view class="rcd-item-right-bg" style="background-image: url({{item.imgUrl2}})"></view>
        </view>
      </view>
    </block>
  </view>
  <view class="TBlive">
    <view class="live-show">
      <view class="live-show-top">
        <view class="show_top_title" style="background-image: url({{TBlive.top_bg}})"></view>
        <view class="show-top-left">
          <view class="show-top-left-content" style="background-image: url({{TBlive.top_left_bg}})">
            <view class="show_bg_mask" style="background-image: url({{TBlive.bg_mask}})"></view>
            <text class="top_left_title">{{TBlive.top_left_title}}</text>
            <text class="top_left_subTitle">{{TBlive.top_left_subTitle}}</text>
            <view class="show_top_heart" style="background-image: url({{TBlive.top_heart}})"></view>
          </view>
        </view>
        <view class="show-top-right">
          <view class="show-top-right-content" style="background-image: url({{TBlive.top_right_bg}})">
            <view class="show_bg_mask" style="background-image: url({{TBlive.bg_mask}})"></view>
            <text class="top_left_title">{{TBlive.top_right_title}}</text>
            <text class="top_left_subTitle">{{TBlive.top_right_subTitle}}</text>
          </view>
        </view>
      </view>
      <view class="live-show-bottom">
        <view class="live-show-btm-content">
          <block wx:for="{{TBlive.btm}}" wx:key="TBliveBottom">
            <!-- <block v-if="{{index == 1}}">
            </block> -->
            <view class="show-btm-item {{index == 1 ? 'show-btm-item-center' : ''}}">
              <view class="show-btm-item-top" style="background-image: url({{item.bg}})">
                <view class="btm-live-bg" style="background-image: url({{TBlive.btm_live_bg}})"></view>
              </view>
              <view class="show-btm-item-btm">
                <view><text class="show-btm-title">{{item.title}}</text></view>
                <view><text class="show-btm-subTitle">{{item.subTitle}}</text></view>
                <view></view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="container">

    <!-- 顶部固定栏 -->
    <view class="catalogue flex text-normal text-999">
        <view wx:for="{{sections}}" wx:key="{{index}}" class="catalogue-item {{ currSection === (index + 1) ? 'active' : '' }}">{{item}}</view>
        <!-- <view class="catalogue-item active">商品</view>
        <view class="catalogue-item">评价</view>
        <view class="catalogue-item">详情</view> -->
    </view>

    <view class="observe" data-observe="1">
        <!-- 轮播图 -->
        <view class="section-top">
            <swiper class="swiper" indicator-dots="false" indicator-color="transparent" indicator-active-color="transparent" autoplay="{{false}}" duration="300" bindchange="swiperChange">
                <swiper-item wx:for="{{swiper}}" wx:key="{{index}}">
                    <image src="{{item}}" class="slide-image"/>
                </swiper-item>
            </swiper>
            <view class="swiper-curr">{{currSwiper}}/{{swiper.length}}</view>
        </view>

        <!-- 商品信息 -->
        <view class="section">
            <view><text class="price">￥399.00</text></view>
            <view><text class="introd">唐狮2019春秋新款工装男外套青少年立领运动港风</text></view>
        </view>

        <!-- 选择和参数 -->
        <view class="section">
            <view class="section-item text-normal" bindtap="showSelectBox"><text class="text-sm">选择 </text>请选择颜色尺码<image class="more" src="../../assert/imgs/more.png"></image></view>
            <view class="section-item text-normal" bindtap="showParamsBox"><text class="text-sm">参数 </text>品牌 尺码...<image class="more" src="../../assert/imgs/more.png"></image></view>
        </view>
    </view>

    <view class="observe" data-observe="2">
        <!-- 商品评价 -->
        <view class="section">
            <view class="box-header">
                <text class="comment text-normal">商品评价 ({{commentLen || 0}})</text>
                <navigator url="/pages/comments/comments" class="text-danger text-normal pull-right">
                    <view >查看全部<image class="more" src="../../assert/imgs/more.png"></image></view>
                </navigator>
            </view>
            <view class="box-body">
                <comment></comment>
            </view>
        </view>

        <!-- 店家信息 -->
        <view class="section">
            <shop></shop>
        </view>

        <!-- 看了又看 -->
        <wxs module="common" src="../../filters/common.wxs"></wxs>
        <view class="section">
            <view class="box-header"><text class="text-sm text-333">看了又看</text></view>
            <view class="box-body">
                <view class="flex recomend">
                    <block wx:for="{{recomends}}" wx:key="{{index}}">
                        <view class="recomend-item {{ index == 0 ? 'text-left' : index == 1 ? 'text-center' : 'text-right'}}">
                            <image class="recomend-img" src="{{item.img}}"></image>
                            <text class="recomend-text text-sm line2 text-333">{{item.text}}</text>
                            <view class="recomend-oldPrice lineThrough text-sm text-ccc">{{common.num2Money(item.oldPrice)}}</view>
                            <view class="recomend-newPrice text-sm text-333">{{common.num2Money(item.newPrice)}}</view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </view>

    <!-- 详情 -->
    <view class="observe" data-observe="3">
        <view class="details flex">
            <view class="bar"></view>
            <view class="text-sm text-ccc details-text">详情</view>
            <view class="bar"></view>
        </view>

        <!-- 商品标题 -->
        <view class="section text-center">
            <text class="text-lg">"简约不简单 夏季好搭配"</text>
        </view>

        <!-- 商品详情图片 -->
        <view>
            <image wx:for="{{detailImgs}}" wx:key="{{index}}" src="{{item}}" class="detail-imgs-item" mode="widthFix"></image>
        </view>
    </view>

    <!-- 底部固定栏 加入购物车 -->
    <view class="buy flex">
        <view class="buy-item flex">
            <view class="link flex">
                <view class="icon icon-shop"></view>
                <text class="text-sm">店铺</text>
            </view>
            <view class="link flex">
                <view class="icon icon-service"></view>
                <text class="text-sm">客服</text>
            </view>
            <view class="link flex" bindtap="collect">
                <view class="icon {{ iscollected ? 'icon-collected' : 'icon-collect' }}"></view>
                <text class="text-sm">收藏</text>
            </view>
        </view>
        <view class="buy-item flex flex-center bg-yellow text-lg text-fff" data-footerType="true" bindtap="showSelectBox">加入购物车</view>
        <view class="buy-item flex flex-center bg-red text-lg text-fff" data-footerType="true" bindtap="showSelectBox">立即购买</view>

    </view>

    <!-- 商品规格选择弹窗 -->
    <select-box shopInfo="{{shopInfo}}" id="selectBox"></select-box>

    <!-- 参数弹窗 -->
    <params-box id="paramsBox"></params-box>

</view>

7.PPT展示效果 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1043079.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【解决方案】‘create’ is not a member of ‘cv::aruco::DetectorParameters’

【解决方案】‘create’ is not a member of ‘cv::aruco::DetectorParameters’

‘create’ is not a member of ‘cv::aruco::DetectorParameters’ 在构建AruCo标定板标定位姿代码的过程中&#xff0c;发现代码中认为create并不是aruco::DetectorParameters的成员函数&#xff0c;这是因为在4.7.0及以上的OpenCV版本中&#xff0c;对ArUco的代码做调整&…
阅读更多...
【KingFusion】如何在3D场景实现流水效果

【KingFusion】如何在3D场景实现流水效果

哈喽&#xff0c;大家好,我是雷工&#xff01; 在项目过程中&#xff0c;经常会涉及到实现管道水流动效果&#xff0c;此篇记录在KingFusion中的3D场景实现水流效果。 以下为简单流水效果的样例&#xff0c; 一、效果展示 当点击水泵&#xff0c;水泵启动&#xff0c;显示流水…
阅读更多...
Linux开篇指南针环境安装(第一课)

Linux开篇指南针环境安装(第一课)

Linux开篇指南针(第一课) 1 LINUX 系统介绍 Linux是一种自由和开放源代码的类UNIX操作系统&#xff0c;它最初由芬兰的林纳斯托瓦兹在1991年创建。Linux是一种多用户、多任务操作系统&#xff0c;可以在各种硬件平台上运行&#xff0c;包括桌面、移动设备、服务器和超级计算机…
阅读更多...
JavaScript项目1_猜数字（前导）

JavaScript项目1_猜数字（前导）

● 本节&#xff0c;我们将做这样的一个小游戏&#xff0c;意思就是随机生成一个数字&#xff0c;然后你去猜测&#xff0c;本文不涉及HTML和CSS的代码&#xff0c;如果有需要的话可以私信我&#xff01; document.querySelector() document.querySelector() 是 JavaScript 中…
阅读更多...
vue2.x 迭代更新项目去掉缓存处理

vue2.x 迭代更新项目去掉缓存处理

找到build文件下的webpack.prod.conf.js文件 定义一个常量version const Version new Date().getTime(); 然后在.js和.css前面加上.${Version}就可以了&#xff08;注意得把原本的换成&#xff09;
阅读更多...
Dink进阶之路

Dink进阶之路

1、环境变量 cat /etc/profile #flink需要 export HADOOP_CLASSPATHhadoop classpath export HADOOP_CONF_DIR/etc/hadoop/conf2、Flink配置 2.1、flink-conf.yaml jobmanager.rpc.address: node-146 jobmanager.rpc.port: 6123 # 设置jobmanager总内存 jobmanager.memory.…
阅读更多...
MongoDB（二）基础操作 创建、删除,查询等

MongoDB（二）基础操作 创建、删除,查询等

mongodb有一个特点&#xff0c;如果某个库&#xff0c;库下面没数据&#xff08;mongodb成集合&#xff09;&#xff0c;该库等于不存在的 mongodb只要创建一个库&#xff0c;在库下写入数据&#xff0c;该库才会生成 mongoshe [-hhost -pxxx] 创建数据库 use 数据库名 # 如果…
阅读更多...
阿里巴巴OceanBase介绍

阿里巴巴OceanBase介绍

前言 官网地址&#xff1a;https://www.oceanbase.com/ OceanBase是由蚂蚁集团完全自主研发的国产原生分布式数据库&#xff0c;始创于2010年。是全球唯一在 TPC-C 和 TPC-H 测试上都刷新了世界纪录的国产原生分布式数据库。 2010年&#xff0c;创始人阳振坤加入阿里巴巴&…
阅读更多...
华为云云耀云服务器L实例评测｜华为云云耀云服务器L实例CentOS的存储和备份策略

华为云云耀云服务器L实例评测｜华为云云耀云服务器L实例CentOS的存储和备份策略

1 华为云云耀云服务器L实例介绍 华为云云耀云服务器L实例是华为云计算服务中的一种虚拟云服务器&#xff0c;它提供了强大的计算资源&#xff0c;可以在云端运行各种应用程序和服务。 华为云服务器提供了多种实例类型&#xff0c;包括通用型、计算优化型、内存优化型等&#…
阅读更多...
数据中心不能“偏科”，AIGC时代算力、存力需协调发展

数据中心不能“偏科”，AIGC时代算力、存力需协调发展

黄金比例是数学上一种堪称“完美”的比例关系&#xff0c;最早由欧几里得在《几何原本》中进行了系统论述。之后&#xff0c;黄金比例的理念被广泛应用到数学、物理、建筑、农业等多个领域&#xff0c;代表着最合理、最协调的一种情况或者状态。 在数据中心领域&#xff0c;相…
阅读更多...
模板的注意事项

模板的注意事项

目录 swap函数&#xff1a; 模板不支持分离编译 声明和定义分离的好处 swap函数&#xff1a; #include<iostream> using namespace std; template <class T> void swap(T&left, T&right) {T temp right;right left;left temp; } int main() {int a …
阅读更多...
Vue比较两个数字大小

Vue比较两个数字大小

实现一个比较两个数字大小的页面&#xff0c;练习Vue实例的创建、数据绑定和事件监听方法&#xff1b; <div id"aa"> <ul> <li> <span>第一个数&#xff1a;</span><input v-model.number"first"/> </li> <…
阅读更多...
详解Java执行groovy脚本的两种方式

详解Java执行groovy脚本的两种方式

详解Java执行groovy脚本的两种方式 文章目录 详解Java执行groovy脚本的两种方式介绍记录Java执行groovy脚本的两种invokeFunction:invokeMethod:以下为案例&#xff1a;引入依赖定义脚本内容并执行运行结果&#xff1a;例如把脚本内容定义为这样&#xff1a;执行结果就是这样了…
阅读更多...
微盟十年：踩准节奏，持续增长

微盟十年：踩准节奏，持续增长

今年以来&#xff0c;中国SaaS行业经历了资本由炽热到寒冬&#xff0c;行业融资笔数和金额均呈现断崖式下跌&#xff0c;截至7月共发生投融资50笔&#xff0c;与去年相比直接腰斩&#xff1b;投融资金额43.52亿元&#xff0c;与2021年同期的258.2亿元、2022年同期的142.37亿元形…
阅读更多...
适合在家做的副业 整理5个，有电脑就行

适合在家做的副业 整理5个，有电脑就行

今天&#xff0c;我们不说别的&#xff0c;整理5个适合个人在家单干的副业。需要电脑&#xff0c;如果你没电脑就不用看了&#xff0c;最后两个&#xff0c;我们也在做&#xff0c;你可以看到最后了解。这些副业&#xff0c;大家多去实践操作&#xff0c;前期&#xff0c;每月三…
阅读更多...
单层和多层中的应力和分层控制

单层和多层中的应力和分层控制

引言 类金刚石碳(DLC)膜具有诸如高硬度和低摩擦系数的优异特性&#xff0c;并且在切削工具、金属模具和机器部件中具有应用。不幸的是&#xff0c;它们通常表现出低粘合强度由于高的内部压缩应力&#xff0c;导致从衬底上剥离。英思特已经尝试了各种方法来降低内应力&#xff…
阅读更多...
OJ练习第181题——寻找两个正序数组的中位数

OJ练习第181题——寻找两个正序数组的中位数

寻找两个正序数组的中位数 力扣链接&#xff1a;4. 寻找两个正序数组的中位数 题目描述 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例…
阅读更多...
V4L2 Camera 开发

V4L2 Camera 开发

一、什么是V4L2 vl42是video for Linux 2的缩写&#xff0c;是一套Linux内核视频设备的驱动框架&#xff0c;该驱动框架为应用层提供一套统一的操作接口(一系列的ioctl) 假如要进行视频数据采集&#xff0c;大体的步骤如图左侧所示&#xff1a; 打开设备文件/dev/videoX&…
阅读更多...
从零学算法（LCR 178）

从零学算法（LCR 178）

教学过程中&#xff0c;教练示范一次&#xff0c;学员跟做三次。该过程被混乱剪辑后&#xff0c;记录于数组 actions&#xff0c;其中 actions[i] 表示做出该动作的人员编号。请返回教练的编号。 示例 1&#xff1a; 输入&#xff1a;actions [5, 7, 5, 5] 输出&#xff1a;7 …
阅读更多...
java中使用redis2个库并支持Redis哈希表

java中使用redis2个库并支持Redis哈希表

一个redis实例&#xff0c;默认包含16个库&#xff0c;序号从0到15。在redis命令行中&#xff0c;可以用select 序号来切换。我最近在做的一个项目中&#xff0c;需要使用redis的2个库。一个是由其他子系统写入&#xff0c;web后端&#xff08;java&#xff09;只读取&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023