基于微信小程序的在线商城点单系统

前言:闲来无事,制作一个微信小程序商城。系统采用Java语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋友当个参考。

目录

前言项目功能及技术效果图小程序管理端

APISpringBoot框架搭建实体映射创建Mapper接口封装整合Swagger常用字段类型

参考代码块

前言

项目功能及技术

小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。

管理端主要有人员管理、权限管理、商品管理、订单管理等模块。

html+css+js:微信小程序界面。

SpringBoot框架+Java程序语言:小程序及后台管理系统API的实现。

Layui前端框架:web后台管理界面样式及数据渲染框架。

MySQL数据库:数据支持。

效果图

小程序

管理端

API

SpringBoot框架搭建

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

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

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

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

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

实体映射创建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;

}

接口封装

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

创建控制器Controller

整合Swagger

添加依赖

先导入spring boot的web包

io.springfox

springfox-swagger2

2.9.2

io.springfox

springfox-swagger-ui

2.9.2

配置Swagger

创建一个swagger的配置类,命名为SwaggerConfig.java

/*

*用于定义API主界面的信息,比如可以声明所有的API的总标题、描述、版本

*/

private ApiInfo apiDemo() {

return new ApiInfoBuilder()

//用来自定义API的标题

.title("SpringBoot项目SwaggerAPIAPI标题测试")

//用来描述整体的API

.description("SpringBoot项目SwaggerAPI描述测试")

//创建人信息

.contact(new Contact("测试员张三","http://localhost:8080/springboot/swagger-ui.html","xxxxxxxx@163.com"))

//用于定义服务的域名

//.termsOfServiceUrl("")

.version("1.0") //可以用来定义版本

.build();

}

接口测试

运行Spring Boot项目,默认端口8080,通过地址栏访问url

接口组定义

根据不同的业务区分不同的接口组,使用@API来划分

@Api(tags = "用户管理") // tags:组名称

@RestController

public class RoleController {

}

接口定义

使用@ApiModel来标注实体类,同时在接口中定义入参为实体类作为参数。

@ApiModel:用来标类 常用配置项:value:实体类简称;description:实体类说明 @ApiModelProperty:用来描述类的字段的含义。

常用字段类型

字段类型所占字节存储范围最大存储值使用场景TINYINT1-128~127127存储小整数INT4-2147483648~21474836472147483647存储大整数BIGINT8-9223372036854775808~92233720368547758079223372036854775807存储极大整数DECIMAL可变长度存储精度要求高的数值CHAR固定长度最多255字节255个字符存储长度固定的字符串VARCHAR可变长度最多65535字节65535个字符存储长度不固定的字符串DATETIME8‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’‘9999-12-31 23:59:59’存储日期和时间

参考代码块

橘猫餐厅

bindtap="clickMenu" data-index="{{index}}">{{item.title}}

热门推荐

超级无敌好吃美味烤鸭

58.88

/g

¥98

interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">

style="background: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;">

58.8

¥98

限量200份

已售198份

class="just-rightText">每人限购1份

距秒杀结束仅剩

{{hour}}

:

{{min}}

:

{{second}}

超级无敌好吃美味烤鸭

色泽红艳,肉质细嫩,味道醇厚,肥而不腻

该商品分享可得奖励¥10

立即分享

服务

新鲜品质 配送到家 售后无忧

评价(2824)

查看全部评价

橘猫大侠

味道好,配送快,值得信赖!

{{spuList[0].name}}

{{spuList[0].content}}

{{item.name}}

{{item.content}}

src="{{imgUrl}}/upload/20220608/nextJt.png" lazy-load="true">

展开

src="{{imgUrl}}/upload/20220608/topJt.png" lazy-load="true">

收起

北京烤鸭

干净又卫生

58

¥98

class="footImg">

首页

class="footImg2">

购物车

加入购物车

立即购买

购物车

共有5件商品

删除

热门推荐

超级无敌好吃美味烤鸭

500g

58.8

¥98

-

+

删除

因配送范围,库存原因等导致失效的商品

失效

曾经好吃的烤鸭

抱歉,该商品已售罄或下架

0

清空失效宝贝

切换地址

{{item.productName}}

{{item.remark}}

{{item.price}}

¥{{item.proSalePrice}}

优惠明细

商品总额

¥{{totalPrice}}

运费

+¥{{freight}}

优惠券

-¥{{couponAmount}}

折扣

-¥{{discountMoney}}

合计

¥{{amountPayable}}

全选

合计:

¥198

优惠:

{{finalCou}}

查看明细

结算

摔跤猫子

用户

我的订单

查看更多

{{toBePaid}}

待付款

{{toBeDelivered}}

待发货

{{toBeReceived}}

待收货

{{toBeReply}}

评价

{{cancel}}

售后/退款

常用工具

class="toolImgBack">

我的收益

class="toolImgBack">

我的团队

class="toolImgBack">

我的优惠券

class="toolImgBack">

收货地址

class="toolImgBack">

联系客服

class="toolImgBack">

设置

相关文章

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。