微信小程序与SpringBoot后端整合实现CRUD

一.  小程序端 :  

         index页面:

index.wxml

            目录结构:

目录

          当点击头像时,进入主页面list

头像点击事件

事件函数

         点击时,进入list下面的wxml页面

         list.wxml 代码片段 :

list.wxml

                   list页面: 

list.wxml 页面

    由于该页面是没有连接后台的,暂时是没有数据显示,需等做完后端springboot的整合,查询数据库. 

    由于操作中有编辑和删除操作,编辑和下面添加区域信息需要共用一个页面这里我们在pages中新建operation页面

    operation.wxml代码片段:                                        

 operation.wxml

    当点击编辑和添加区域信息时会对应到operation里面去

    点击编辑:     

编辑事件

    添加操作:

添加按钮

添加区域事件

        删除事件: 

删除操作

list.js代码片段-删除事件: 

事件代码

添加与编辑页面js代码: 

初始数据:

operration.js

点击编辑页面初始化数据:

编辑完成后提交后台:

二.   后端(springboot整合mybatis):

         目录结构 :

目录结构

   controller层 : 

    查询所有表中数据

listarea

    通过id查询(因为小程序端需要编辑页面,此时需要通过id查处该条数据再编辑)  :

getareaid

    添加操作

addarea

   更新与删除 : 

service层 :

   接口代码 :

AreaService

Dao层 : 

  接口代码 :

AreaDao

SessionFactoryConfiguration文件 :

1. mybatis-config.xml文件路径 , mapper文件路径 , 并且注入dataSource

SessionFactoryConfiguration.java

  DataSourceConfiguration,AreaDao.xml文件  

DataSourceConfiguration.java

AreaDao.xml

整体效果 :

 该crud_demo是在慕课课程中学习的, 通过此次学习明白springboot与小程序的整合流程.

阿里云产品推广  :  https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=ro9q0igs

参考课程 :

springboot搭建小程序人入门