基于Java+SpringBoot制作一个奶茶点单小程序_基于java的奶茶订单

再也不用担心秋天的第一杯奶茶有没有人送了，制作一个奶茶点单系统自己当店主，开怀畅饮，一劳永逸。

一、API

1.1 SpringBoot框架搭建

1.创建maven project，先创建一个名为SpringBootDemo的项目，选择【New Project】

然后在弹出的下图窗口中，选择左侧菜单的【New Project】

2.在project下创建module，点击右键选择【new】—【Module…】

左侧选择【Spring initializr】，通过idea中集成的Spring initializr工具进行spring boot项目的快速创建。窗口右侧：name可根据自己喜好设置，group和artifact和上面一样的规则，其他选项保持默认值即可，【next】

Developer Tools模块勾选【Spring Boot DevTools】，web模块勾选【Spring Web】，此时，一个Springboot项目已经搭建完成，可开发后续功能

1.2 数据库设计

可使用MySQL / SQL Server 数据库作为数据支持，表结构及字段设计大致如下图，未完善待补充

--创建数据库
CREATE DATABSE Shop;

--选中数据库
USE Shop;

--创建用户表
CREATE TABLE [dbo].[t_sys_user](
	[user_code] [nvarchar](40) NOT NULL,--用户账号
	[user_name] [nvarchar](200) NOT NULL,--用户姓名
	[user_pwd] [nvarchar](50) NOT NULL,--账号密码
	[id_number] [nvarchar](20) NULL,--身份证号
	[email] [nvarchar](200) NULL,--邮箱
	[tel] [nvarchar](40) NULL,--电话
	[mobile] [nvarchar](40) NULL,--手机
	[valid] [int] NOT NULL,--状态
	[last_login_time] [datetime] NULL,--最后登录时间
	[login_err_times] [int] NOT NULL,--累计登录错误次数(登录正确后置为0)
	[remarks] [nvarchar](2000) NULL,--备注
	[time_create] [datetime] NULL,
	[create_by] [nvarchar](40) NULL,
	[time_update] [datetime] NULL,
	[update_by] [nvarchar](40) NULL,
	[open_id] [nvarchar](50) NULL,--小程序的openid
	[union_id] [nvarchar](50) NULL,--小程序的unionid
 CONSTRAINT [pk_t_sys_user] PRIMARY KEY CLUSTERED 
(
	[user_code] ASC
)
) ON [PRIMARY]
GO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

1.3 实体映射创建Mapper

创建一个entity实体类文件夹，并在该文件夹下创建项目用到的实体类

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

@Data
public class User {
    @TableId(type = IdType.AUTO)
    private Long id;

    private String account;

    private String pwd;

    private String userDesc;

    private String userHead;

    private LocalDateTime createTime;

    private Long role;

    private String nickname;

    private String email;

    private String tags;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

1.4 接口封装

由于我们使用mybatis-plus，所以简单的增删改查不用自己写，框架自带了，只需要实现或者继承他的Mapper、Service

创建控制器Controller

数据库连接、mybatis-plus的分页插件、以及跨域配置

1.5 常用字段类型

二、小程序

2.1 项目创建

小程序账号申请及项目创建可参考该专栏其他文章内容，这里不再重复赘述

2.2 首页

首页可以采用banner当背景的形式来进行展示，后台可以对banner进行管理，设置其类型是广告/产品/外链等，小程序端可根据其类型进行不同的响应。

首页下方获取用户头像、昵称等字段进行展示，同时可以通过跑马灯的方式将站内通知进行展示

<image src="{{banner}}" class="banner" mode="widthFix"></image>
<view class="content">
  <view class="userInfo">
    <image src="../../images/cat.jpg" class="userHead"></image>
    <view class="userName">
      <image src="{{user.Image}}" class="userIcon"></image>
      <view>{{user.Name}}</view>
    </view>
    <image src="../../images/order.png" class="goOrder" bindtap="choicePro"></image>
  </view>
  <view class="border"></view>
  <view class="notice" bindtap="goOrder">
    <view class="noticeTitle">{{notice}}</view>
    <image src="../../images/right.png" class="right"></image>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.3 详情页

在首页点击商品进入商品详情页

点单页可设计成通过类型筛选产品的形式，上方避免页面元过于单一的问题可以放上广告轮播图

<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
  <swiper-item wx:for="{{1}}" wx:key>
    <image src="https://img0.baidu.com/it/u=3945519598,1315447112&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=383" mode='aspectFill'></image>
  </swiper-item>
</swiper>
  <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - 375rpx)">
    <view class="cu-item text-green cur"  wx:key bindtap='tabSelect' data-id="{{index}}">
      {{item.typeName}}
    </view>
  </scroll-view>
1
2
3
4
5
6
7
8
9
10

2.4 购物车页

购物车页用于展示用户加入的商品数据，通过类型对数据进行区分

顶部通过swiper对类型进行展示

<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
  <swiper-item wx:for="{{1}}" wx:key>
    <image src="https://img0.baidu.com/it/u=3945519598,1315447112&fm=253&fmt=auto&app=120&f=JPEG?w=900&h=383" mode='aspectFill'></image>
  </swiper-item>
</swiper>
1
2
3
4
5

<view class="orderItem">
  <view class="storeBox">
    <view class="storeTitle">{{item.store}}</view>
    <view class="status">{{item.status}}</view>
    <image src="../../images/right.png" class="jt"></image>
  </view>
  <view class="orderInfo">
    <view class="imgBox">
      <image src="{{item.image}}"></image>
    </view>
    <view class="proSum">
      <view class="priceBox">￥{{item.price}}</view>
      <view style="color:grey;">共{{item.num}}件</view>
    </view>
  </view>
  <view class="btnBox">
    <view class="btn">去评价</view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三、管理端

3.1 项目创建

可通过vsCode / Hbulider等开发工具进行项目创建，根据个人的开发习惯选择项目类型

3.2 页面设计

页面主要分为左侧菜单导航及右侧内容，通过iframe实现点击展示的效果

   // 滚动条
    const ps = new PerfectScrollbar('.lyear-layout-sidebar-scroll', {
		swipeEasing: false,
		suppressScrollX: true
	});
    
    // 侧边栏
    $(document).on('click', '.lyear-aside-toggler', function() {
        $('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
        $("body").toggleClass('lyear-layout-sidebar-close');
        
        if ($('.lyear-mask-modal').length == 0) {
            $('<div class="lyear-mask-modal"></div>').prependTo('body');
        } else {
            $( '.lyear-mask-modal' ).remove();
        }
    });
  
    // 遮罩层
    $(document).on('click', '.lyear-mask-modal', function() {
        $( this ).remove();
    	$('.lyear-layout-sidebar').toggleClass('lyear-aside-open');
        $('body').toggleClass('lyear-layout-sidebar-close');
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.3 接口调用

前端框架使用layui渲染数据，通过url请求在控制器定义的接口