深圳职业技术大学2024届毕业生毕业设计（论文）

1. 引言

1.1 研究背景

1.1.1 移动购物APP的发展趋势

• 移动购物APP的兴起得益于移动互联网技术的飞速发展。
• 智能手机的普及使得用户能够随时随地通过APP进行购物，提高了购物便利性。
• 随着用户对购物体验的要求不断提高，移动购物APP需要提供更加个性化和高效的购物服务。

1.1.2 Vue.js的优势

• Vue.js是一种高效、灵活的前端框架，特别适合构建动态和用户友好的界面。
• 它以数据驱动和组件化的思想为核心，使得开发效率和用户界面性能得到显著提升。
• Vue.js具有渐进式框架的特点，使得开发者可以根据项目需求逐步集成其功能。

1.2 研究现状

1.2.1 现有移动购物APP的不足

• 尽管市场上存在众多移动购物APP，但在用户界面设计、交互流畅度以及功能实用性等方面仍有提升空间。
• 现有的移动购物APP在页面响应性、图片加载优化、触摸事件处理等方面存在不足。

1.2.2 Vue.js在移动购物APP中的应用

• Vue.js在移动购物APP前端开发中的应用越来越广泛，但针对特定需求的研究和实践仍相对匮乏。
• 深入分析和系统性实践总结对于优化移动购物APP的用户体验和性能至关重要。

1.3 实现功能

1.3.1 功能概述

• 本论文的移动购物APP将采用Vue.js作为前端框架，Go语言作为后端技术。
• 实现的功能包括首页页面、分类页面、购物车页面、我的页面、登录页面、注册页面、搜索页面、列表页面、商品详情页面、商品结算页面、我的订单页面和收货地址列表等。

1.3.2 功能详细介绍

• 首页页面：展示热门商品和推荐活动，提供用户快速浏览和购买的入口。
• 分类页面：按照商品类别进行分类展示，方便用户根据需求进行筛选和浏览。
• 购物车页面：展示用户已添加的商品列表，支持增加、减少商品数量以及删除商品等操作。
• 我的页面：提供用户的个人信息管理、订单查询等功能。
• 登录页面：用户输入账号和密码进行登录验证，确保用户身份的安全。
• 注册页面：用户填写相关信息进行账号注册，以便后续登录和使用。
• 搜索页面：用户可以通过关键词搜索商品，快速找到所需商品。
• 列表页面：展示符合搜索条件的商品列表，支持排序、筛选等功能。
• 商品详情页面：展示商品的详细信息，包括图片、价格、描述等，并提供加入购物车和立即购买的选项。
• 商品结算页面：展示用户选择的商品信息，计算总价并提供支付方式选择。
• 我的订单页面：展示用户的历史订单记录，包括订单状态、商品信息等。
• 收货地址列表：展示用户已保存的收货地址，方便用户选择和管理。
• 添加地址页面：用户添加新的收货地址，包括姓名、电话、详细地址等信息。

2. 技术栈介绍

2.1 前端基础HTML、CSS、JavaScript

2.1.1 HTML、CSS、JavaScript的基本概念

• HTML负责页面结构和内容，CSS负责样式和布局，JavaScript负责交互和动态功能。
• 三者的结合使得前端开发者能够创建出丰富、互动和用户友好的Web应用程序。

2.1.2 前端技术的发展

• 随着技术的发展，前端开发也在不断进化，新的框架和工具（如React、Vue、Angular等）被引入，以帮助开发者更高效地构建复杂的前端系统。

2.2 VUE框架介绍

2.2.1 Vue.js的特点

• 渐进式框架：Vue的设计哲学是渐进式，意味着开发者可以根据项目需求逐步集成Vue的功能。
• 易于上手：Vue的API设计简单直观，使得新手开发者可以快速理解和开始构建应用。
• 双向数据绑定：通过双向绑定机制，当修改了绑定的数据时，相关的视图将自动更新，这极大地简化了DOM操作的工作，提高了开发效率。
• 组件化开发：Vue鼓励通过可复用的组件来构建应用。每个组件是一个独立且可复用的功能单元，有助于代码的组织和维护。
• 社区驱动：Vue是由尤雨溪（Evan You）创建并由活跃社区支持的项目。自2014年发布以来，它已成为最广泛使用的JavaScript框架之一。

2.2.2 Vue.js的应用场景

• Vue.js适合构建从小型项目到大型企业级应用的各种类型的Web应用程序。
• 它特别适合需要高效、灵活和用户友好的界面的应用场景。

2.3 uni-app框架介绍

2.3.1 uni-app的特点

• 跨平台能力：Uni-app允许开发者使用Vue.js编写代码，并将其编译成能在不同平台如iOS、Android、微信小程序等运行的应用程序。
• 开发体验：Uni-app继承了Vue.js的开发体验，支持完整的Vue.js特性。
• 组件与API：Uni-app在组件规范和扩展API方面与微信小程序基本相同，这意味着开发者可以利用他们对微信小程序的知识来构建uni-app应用。
• 条件编译优化：Uni-app提供了条件编译的功能，这使得开发者可以为特定平台编写专属代码或调用特定平台的能力，而不影响其他平台的兼容性。
• 非H5端运行原理：在非H5端，uni-app的架构分为逻辑层和视图层。逻辑层负责执行业务逻辑，运行在一个独立的JavaScript核心中，不依赖于本机的webview，因此无法运行浏览器专用的JS API。
• 运行时（Runtime）：Uni-app在非Web端运行时，会将逻辑层和渲染层分离，其中逻辑层负责JS代码的执行，而视图层负责页面的渲染。
• 服务器端：Uni-app还提供了uniCloud和serverless服务，这些服务进一步增强了其作为后端解决方案的能力。

2.3.2 uni-app的应用场景

• Uni-app适合需要跨平台运行的应用场景，如iOS、Android、微信小程序等。
• 它也适合开发者希望利用Vue.js的特性来构建应用的场景。

3. 项目搭建

3.1 创建uni-app项目

• 在HBuilder X中创建uni-app项目。
• 选择项目模板，如默认模板、经典模板等。
• 填写项目名称、项目路径等信息，并点击创建。

3.2 初始化项目

• 进入创建的项目目录，执行npm install命令，安装项目所需的依赖。
• 初始化项目，包括创建src目录、App.vue文件、main.js文件等。

3.3 引入组件并测试

3.3.1 SASS安装

• 在项目目录中，执行npm install --save-dev sass命令，安装SASS。
• 在src目录下创建scss目录，并创建对应的SCSS文件。
• 在需要使用SCSS的组件中，导入对应的SCSS文件，并使用SCSS变量和混合等特性。

3.3.2 uview-plus UI安装

• 在项目目录中，执行npm install uview-plus命令，安装uview-plus UI。
• 在需要使用uview-plus UI的组件中，导入对应的组件，并使用其提供的UI组件和样式。

3.3.3 pinia状态管理库安装

• 在项目目录中，执行npm install pinia命令，安装pinia状态管理库。
• 在main.js文件中，引入pinia，并创建pinia实例。
• 在需要使用状态管理的组件中，使用pinia提供的store，进行状态的创建和管理。

3.3.4 @shene/uni-request网络请求库安装

• 在项目目录中，执行npm install @shene/uni-request命令，安装@shene/uni-request网络请求库。
• 在需要进行网络请求的组件中，使用uni.request方法，进行网络请求的发送。

4. 页面开发

4.1 底部tabbar栏的创建

• 在src目录下，创建pages目录，并在pages目录中创建对应的tabbar页面。
• 在App.vue文件中，创建tabbar组件，并引入对应的tabbar页面。
• 在App.vue文件中，将tabbar组件添加到页面中，并配置对应的页面路由。

4.2 组件编写

• 在pages目录中，创建对应的组件文件，如Home.vue、Category.vue、Cart.vue等。
• 在组件文件中，编写对应的页面逻辑和样式，实现对应的功能。
• 在需要的地方，导入对应的组件，并使用其提供的功能和样式。

5. 结论

5.1 工作总结

• 通过本论文的研究和实践，我们成功开发了一款基于Vue.js和Go的移动购物APP。
• 该APP实现了首页页面、分类页面、购物车页面、我的页面、登录页面、注册页面、搜索页面、列表页面、商品详情页面、商品结算页面、我的订单页面和收货地址列表等功能。
• 我们使用了Vue.js作为前端框架，Go语言作为后端技术，通过整合这两种前沿技术，构建了一个高性能、易维护且具有良好用户体验的移动购物平台。
• 通过具体案例分析和性能测试，验证了所提出开发方案的有效性和实用性。

5.2 参考文献

• [1] 尤雨溪. Vue.js 实战[M]. 人民邮电出版社, 2016.
• [2] 谢孟军. uni-app实战[M]. 电子工业出版社, 2018.
• [3] 谢孟军. HBuilder X 权威指南[M]. 电子工业出版社, 2019.

6. 致谢

• 感谢我的导师魏彦，对我的毕业设计论文进行了细致的指导和帮助。
• 感谢我的同学们，在论文写作过程中给予了我很多帮助和启发。
• 感谢深圳职业技术大学，提供了良好的学习环境和资源，使我能够顺利完成毕业设计论文。