微信小程序完整项目实战(前端+后端)

您所在的位置：网站首页 › 微信小程序代码实例怎么用的 › 微信小程序完整项目实战(前端+后端)

微信小程序完整项目实战(前端+后端)

2024-06-26 20:25:59| 来源: 网络整理| 查看: 265

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

前言：闲来无事，制作一个微信小程序商城。系统采用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","[email protected]")) //用于定义服务的域名 //.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’存储日期和时间参考代码块

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

微信小程序完整项目实战(前端+后端)

微信小程序完整项目实战(前端+后端)

今日新闻

点击排行

推荐新闻

图片新闻

专题文章