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

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

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

前言

项目功能及技术

小程序主要有首页、商品详情、商品分类、商品评价、购物车、个人中心等模块。
管理端主要有人员管理、权限管理、商品管理、订单管理等模块。

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：用来描述类的字段的含义。

常用字段类型

字段类型	所占字节	存储范围	最大存储值	使用场景
TINYINT	1	-128~127	127	存储小整数
INT	4	-2147483648~2147483647	2147483647	存储大整数
BIGINT	8	-9223372036854775808~9223372036854775807	9223372036854775807	存储极大整数
DECIMAL	可变长度			存储精度要求高的数值
CHAR	固定长度	最多255字节	255个字符	存储长度固定的字符串
VARCHAR	可变长度	最多65535字节	65535个字符	存储长度不固定的字符串
DATETIME	8	‘1000-01-01 00:00:00’~‘9999-12-31 23:59:59’	‘9999-12-31 23:59:59’	存储日期和时间

参考代码块


<view class="yx-custom" style="padding-top:{{statusBarHeight}}px;background-image: linear-gradient(43deg, #12C206,#00C90F);">
  <view class="headerBox">
    <view class="leftAddress">
      <image class="leftAddressIcon" src="{{imgUrl}}/upload/20220608/addressIcon.png" lazy-load="true">image>
      <view class="leftAddressText little">橘猫餐厅view>
      <image class="rightJtIcon" src="{{imgUrl}}/upload/20220608/jtBottom.png" lazy-load="true">image>
    view>
    <view class="appletsTitle">view>
  view>
view>

<view class="yx-empty_custom" style="padding-top:{{statusBarHeight}}px;">view>

<view style="background: url({{imgUrl}}/upload/20220608/topBackImg.png);background-size: 100% 100%;width:750rpx;height:324rpx;">
  <view class="bannerBottom">view>
view>

<view class="containerBox" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
  <scroll-view class="menu-left" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
    <view wx:for="{{menuList}}" class="little {{menuIndex==index?"menu-item-check":"menu-item"}}  {{item.prevClass}} {{item.nextClass}}" 
    bindtap="clickMenu" data-index="{{index}}">{{item.title}}view>
    <view class="bottomHeightBox">view>
  scroll-view>
  <scroll-view class="menu-right" scroll-y="true" style="height:{{nowEquipmentHeight-((statusBarHeight*2)+162)}}px;">
    <view class="menuTitleBox">
      <text>热门推荐text>
    view>
    <view class="productContainer">
      <view class="productItem" wx:for="{{20}}" bindtap="goDetail">
        <view class="productImage" style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;">view>
        <view class="productName little">超级无敌好吃美味烤鸭view>
        <view class="productPriceBox">
          <view class="salePrice">
            <text style="font-size:22rpx;">￥text>
            <text>58.88text>
            <text style="font-weight:400;">/gtext>
          view>
          <view class="oldPrice middleLine">￥98view>
        view>
      view>
    view>
    <view class="bottomHeightBox">view>
  scroll-view>
view>
{imgUrl}}/Areas/dfapi/Content/images/cp.png" lazy-load="true"> -->
<image class="scanIcon" src="{{imgUrl}}{{scanUrl}}" lazy-load="true" bindtap="scanTableCode">image>



<view class="product-banner">
  <swiper class="product-banner" bindchange="onSlideChange" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"
    interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{productBanner}}" wx:key="id">
      <swiper-item>
        <view>
          <image src="{{item}}" class="product-banner" alt="" lazy-load="


        
                        上一篇：通过HBuilderX运行uniapp到微信者开发工具 
                        下一篇：微信小程序web-view环境下H5跳转小程序页面方法



    
        
            推荐标签
            
                                线上商城
                                官网品宣
                                在线点餐
                                到店预约
                                多门店
                                信息收集
                                营销活动
                                社区
                            
        
		
        
            下载该资源用户也下载了
            
                                
                    
                    
                        多商户商城布局小程序模板源码下载
                                        
                
                                
                    
                    
                        购物商城小程序前端模板源码
                                        
                
                                
                    
                    
                        购物商城手机商城微信小程序模板
                                        
                
                                
                    
                    
                        寒假暑假补课学习课程小程序全套页面
                                        
                
                                
                    
                    
                        外卖流程完整页面小程序模板(单店版)
                                        
                
                                
                    
                    
                        优质超市购物小程序模板源码下载
                                        
                
                                
                    
                    
                        时尚在线酒店预定旅行推荐 旅游酒店预订小程序5页面
                                        
                
                                
                    
                    
                        订餐系统微信小程序源码下载
                                        
                
                                
                    
                    
                        水果商城小程序模板源码





    

        

            小程序模板© 2019-2022 https://www.xcxmoban.cn 版权所有

            |

            桂ICP备2020009848号-3

        

        

            网站地图

        

    









    联系客服

    意见反馈



    











    

    

        签到成功!

        已连续签到1天,签到3天将获得积分VIP1天

        知道了

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

目录

前言

项目功能及技术

效果图

小程序

管理端

API

SpringBoot框架搭建

实体映射创建Mapper

接口封装

整合Swagger

常用字段类型

参考代码块

推荐标签

下载该资源用户也下载了

签到成功!