Vue3.0小兔鲜儿电商项目

基于 vue3.0 的组合 AP I方式与选项 API 的方式开发的一个综合品类的电商前台系统。
实现了一套完整的电商业务流程，从首页，类目，搜索，品牌，商品详情，购物车，结算，支付，个人中心，订单管理，收货地址管理，评价中心，和其他个人信息管理业务。

开发环境

开发语言：Java 框架：springboot JDK版本：JDK1.8 服务器：tomcat7
数据库：mysql5.7（一定要5.7版本） 数据库工具：Navicat11 开发软件：eclipse/myeclipse/idea
Maven包：Maven3.3.9 浏览器：谷歌浏览器

后台路径地址：localhost:8080/项目名称/admin/dist/index.html
前台路径地址：localhost:8080/项目名称/front/dist/index.html （无前台不需要输入）

管理员账号：admin 管理员密码：admin

开发技术简介

Java简介

Java是一种面向对象的静态式编程语言。Java编程语言具有多线程和对象定向的特点。其特点是根据方案的属性将方案分为几个不同的模块，这些模块是封闭的和多样化的，在申请过程中具有很强的独立性。Java语言在计算机软件开发过程中的运用可以达到交互操作的目的，通过各种形式的交换，可以有效地处理所需的数据，从而确保计算机软件开发的可控性和可见性。开发java语言时，保留了网络接口，Java保留的缺省网络接口可以与web应用程序编程所依赖的类别库相匹配。为了使Java开发的应用程序更加稳定和强健，Java会自动收集程序中的垃圾，并处理程序中存在的异常。Java语言是日常开发过程中广泛使用的通用基本语言。其中Java语言课程库、句子、语法规则和关键字经常用于计算机软件的开发和编程。
面向对象编程是Java语言最显着的特点。它具有原始接口和补充接口以及继承，不仅可以实现相同类型的单个继承，而且还支持接口之间的多个继承，从而实现类、接口和接口之间以及类和接口之间的有效通信。Java的面向对象特性主要包括三个方面:继承、多态性和封装。封装是Java的核心，可以封装所有数据操作。多态性是指由面向对象行为派生的相关行为。继承作为特殊编程模式有两种类型:父类和子类，这两种类型的属性具有相同的功能和特性。对于父类的属性特性，子类可以实现继承和优化。

Spring Boot框架介绍

SpringBoot是近几年最为流行的后台开发框架，它的诞生一改过去Spring框架开发中繁琐的配置，极大地简化了Spring应用的搭建和开发。SpringBoot框架不仅保有了Spring框架中的所有优秀特性，还通过使用特定的配置方式，在底层帮助开发人员在工程创建是就预先做了很多配置，这样在开发时就不再需要开发人员过多进行繁琐的配置了。另外在SpringBoot中集成了大量框架，这就使得开发人员不再需要到处寻找在导入开发中需要依赖的jar包，同时也解决了依赖包版本冲突问题，从而提高了依赖包引用的稳定性，从而实现了对Spring应用搭建和开发过程的简化。

MySQL数据库

MySQL是一种关系型的数据库管理系统，属于Oracle旗下的产品。MySQL的语言是非结构化的，使用的用户可以在数据上进行工作。这个数据库管理系统一经问世就受到了社会的广泛关注。在各个方面，与同等的数据库相比，MySQL的优点极为突出，它的运行速度快，适用的范围广泛，而且数据库的安全性这一方面独树一帜。在语言结构方面，MySQL的语言简单，其他数据库需要一大段代码来实现的操作，MySQL仅需要一小部分代码甚至几行。综上所述，MySQL这种关系型数据库管理系统，已经成为了开发者进行项目的数据开发、存储的不二之选。MySQL的功能也多种多样，如数据操纵和数据库的建立维护等。而且该数据库的数据共享性高、冗余度低而且容易扩充。MySQL在安全性这一方面也具有自身的特点，它应用了用户的标识和鉴别技术，对试图和数据进行加密，确保资料信息的可靠性。介于数据库系统的功能与强大等性质之间，本数据库系统的设计中主要使用了MySQL实现对数据的处理。基于Web的付费自习室管理系统运用MySQL数据库，在Web应用这一块，MySQL是最好的选择。对于该系统整个的开发、搭建、运行和维护具有极其重要的作用。

详细视频演示

请联系我获取更详细的演示视频

系统功能部分效果

核心代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入自己UI组件库
import UI from '@/components/library'

// 1. 重置样式的库
import 'normalize.css'
// 2. 自己项目的重置样式和公用样式
import '@/assets/styles/common.less'

// mockjs
import '@/mock'

createApp(App).use(store).use(router).use(UI).mount('#app')

import Mock from 'mockjs'
import qs from 'qs'

// 基本配置
Mock.setup({
  // 随机延时200-300毫秒，模拟网络延时
  timeout: '200-300'
})

// 拦截接口  /my/test
// 1. 接口地址路径规则，需要匹配到它
// 2. 请求方式
// 3. 返回数据（函数返回数据）
Mock.mock(/\/my\/test/, 'get', () => {
  // 随机数据逻辑 目标：5条数据  [{id:'',name:''},...]
  const arr = []
  for (let i = 0; i < 5; i++) {
    // arr.push(Mock.mock('@id'))
    arr.push(Mock.mock({
      id: '@id',
      name: '@cname'
    }))
  }
  return { msg: '获取数据成功', result: arr }
})

// 模拟 我的收藏
Mock.mock(/\/member\/collect/, 'get', config => {
  const queryString = config.url.split('?')[1]
  const queryObject = qs.parse(queryString)
  const items = []
  for (let i = 0; i < +queryObject.pageSize; i++) {
    items.push(Mock.mock({
      id: '@id',
      name: '@ctitle(10,20)',
      desc: '@ctitle(4,10)',
      price: '@float(100,200,2,2)',
      // http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg
      picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`
    }))
  }
  return {
    msg: '获取收藏商品成功',
    result: {
      counts: 35,
      pageSize: +queryObject.pageSize,
      page: +queryObject.page,
      items
    }
  }
})

/**
 * Find power-set of a set using BITWISE approach.
 *
 * @param {*[]} originalSet
 * @return {*[][]}
 */
 export default function bwPowerSet(originalSet) {
  const subSets = [];

  // We will have 2^n possible combinations (where n is a length of original set).
  // It is because for every element of original set we will decide whether to include
  // it or not (2 options for each set element).
  const numberOfCombinations = 2 ** originalSet.length;

  // Each number in binary representation in a range from 0 to 2^n does exactly what we need:
  // it shows by its bits (0 or 1) whether to include related element from the set or not.
  // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to
  // include only "2" to the current set.
  for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) {
    const subSet = [];

    for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) {
      // Decide whether we need to include current element into the subset or not.
      if (combinationIndex & (1 << setElementIndex)) {
        subSet.push(originalSet[setElementIndex]);
      }
    }

    // Add current subset to the list of all subsets.
    subSets.push(subSet);
  }

  return subSets;
}

系统功能测试

本系统首先在本地服务器上进行了安装和测试,之后鉴于对系统的结构和处理方法的充分熟悉和对系统特性的充分了解，对系统进行了白盒测试和黑盒试验。
在发展软件系统的整个过程中,人们必须面临错综复杂性的实际问题,所以,在软件系统生存周期的各个过程中都必然地会形成错误。应用软件检测目的在于:出现出错并运行某个程序的步骤,而应用软件检测的最重要目的便是找到其中尚未发生的出错。
为了制定出合理的测试计划,根据以下原则开始了测量；任何测试都要追溯到客户需要；当确定了客户使用模型后就要着手制定测试计划,并在编码以前就对整个软件测试工作做出规划和制定；御用Pareto原理,主要对占出了百分之八十九以上的最易于出错的约百分之二十的模板实施了检测,并从小规模开始逐步实施大量检测,范围一般从主要检测单编程模板再到完全集成的模板;同时精心设计了检测方法,尽可能地全面覆盖所有程序逻辑并使其满足要求的能力。

结论

本系统相对于我查阅到的其他小兔鲜儿电商项目具有如下优点：其功能全面、易于日后程序更新、数据库管理容易、界面友好、操作方便、效率高、安全性好。
本系统在技术层面具有如下优点：第一，用java实现动态页面，使软件系统具备了很好的可维护性和可复用性。其次，在本系统的编写流程中使用的是Spring
Boot框架，该框架将更有效的把显示功能与逻辑分开，使得模块更易于管理，尤其适用于大型项目的编写。第三，后台使用的MySQL数据库系统，MySQL的数据库系统引擎主要集中在了对XML标准的支持，同时具备可扩充、容易应用和安全性高的优点。
综上所述，通过这次从零开始的毕业设计是一次全新的开始，也期待圆满结束。我也希望这次的设计能通过我后期的自主学习把它趋向于完美，成为我的自主创作经验。