轻松开发微信小程序实现用户增删改查功能
Posted 全栈弄潮儿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轻松开发微信小程序实现用户增删改查功能相关的知识，希望对你有一定的参考价值。
文章目录
前言
上一篇博客中我们学习了什么是小程序以及开发一个小程序的具体步骤。
在本篇博客中，我们来开发一个用户列表增删改查功能的完整流程，包括微信小程序项目目录、项目创建、编码、实现功能以及最终效果的展示。
创建微信小程序项目
首先，在微信开发者工具中，选择新建小程序项目，填写小程序名称、AppID以及项目路径，点击确定即可创建微信小程序项目。
创建项目目录结构
在创建好的微信小程序项目中，创建以下目录结构：
- pages/
- index/
- index.js
- index.json
- index.wxml
- index.wxss
- edit/
- edit.js
- edit.json
- edit.wxml
- edit.wxss
- app.js
- app.json
- app.wxss
编写首页页面
在pages目录下，创建一个index目录，用于存放首页页面相关文件。在index目录下，创建以下文件：
- index.js
- index.json
- index.wxml
- index.wxss
在index.js中，编写以下代码：
// index.js
Page(
data:
listData: []
,
onLoad: function ()
// 页面加载时，从本地缓存中获取数据
const listData = wx.getStorageSync('listData') || []
this.setData(
listData
)
,
gotoAdd: function ()
// 跳转到添加页面
wx.navigateTo(
url: '/pages/edit/edit',
)
,
gotoEdit: function (e)
// 跳转到编辑页面
const id = e.currentTarget.dataset.id
wx.navigateTo(
url: `/pages/edit/edit?id=$id`,
)
,
deleteData: function (e)
// 删除数据
const id = e.currentTarget.dataset.id
const listData = wx.getStorageSync('listData') || []
const index = listData.findIndex(item => item.id === Number(id))
listData.splice(index, 1)
wx.setStorageSync('listData', listData)
this.setData(
listData
)
)
在index.wxml中，编写以下代码：
<!-- index.wxml -->
<view class="container">
<button class="add-btn" bindtap="gotoAdd">添加</button>
<view class="list">
<block wx:for="listData" wx:key="id">
<view class="item" bindtap="gotoEdit" data-id="item.id">
<text class="text">item.text</text>
<text class="delete" bindtap="deleteData" data-id="item.id">删除</text>
</view>
</block>
</view>
</view>
在index.wxss中，编写以下代码：
/* index.wxss */
.container
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.add-btn
width: 80%;
background-color: #4caf50;
color: #fff;
border-radius: 5rpx;
padding: 10rpx;
text-align: center;
margin-bottom: 20rpx;
.list
width: 80%;
.item
display:flex;
justify-content: space-between;
align-items: center;
padding: 10rpx;
background-color: #fff;
border-radius: 5rpx;
margin-bottom: 10rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
.text
font-size: 16rpx;
.delete
color: red;
font-size: 14rpx;
在index.json中，编写以下代码：
"navigationBarTitleText": "首页"
编写编辑页面
在pages目录下，创建一个edit目录，用于存放编辑页面相关文件。在edit目录下，创建以下文件：
- edit.js
- edit.json
- edit.wxml
- edit.wxss
在edit.js中，编写以下代码：
// edit.js
Page(
data:
id: 0,
text: ''
,
onLoad: function (options)
if (options.id)
// 如果是编辑页面，从本地缓存中获取数据
const listData = wx.getStorageSync('listData') || []
const data = listData.find(item => item.id === Number(options.id))
this.setData(
id: data.id,
text: data.text
)
,
handleInput: function (e)
// 监听输入框输入事件
this.setData(
text: e.detail.value
)
,
handleSave: function ()
// 保存数据
const listData = wx.getStorageSync('listData') || []
let id, text = this.data
if (id)
// 如果是编辑数据，修改原有数据
const index = listData.findIndex(item => item.id === Number(id))
listData[index] =
id: Number(id),
text
else
// 如果是新增数据，生成新的id，并添加到列表中
id = listData.length ? listData[listData.length - 1].id + 1 : 1
listData.push(
id,
text
)
wx.setStorageSync('listData', listData)
wx.navigateBack()
)
在edit.wxml中，编写以下代码：
<!-- edit.wxml -->
<view class="container">
<input class="input" type="text" placeholder="请输入内容" value="text" bindinput="handleInput" />
<button class="save-btn" bindtap="handleSave">保存</button>
</view>
在edit.wxss中，编写以下代码：
/* edit.wxss */
.container
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.input
width: 80%;
height: 80rpx;
font-size: 16rpx;
border-radius: 5rpx;
padding: 20rpx;
background-color: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
margin-bottom: 20rpx;
.save-btn
width: 80%;
background-color: #4caf50;
color: #fff;
border-radius: 5rpx;
padding: 10rpx
实现增删改查功能
在index.js中，添加以下代码：
// index.js
Page(
data:
listData: []
,
onShow: function ()
// 页面显示时，从本地缓存中获取数据，并更新数据
const listData = wx.getStorageSync('listData') || []
this.setData(
listData
)
,
handleAdd: function ()
// 点击新增按钮，跳转到编辑页面
wx.navigateTo(
url: '/pages/edit/edit'
)
,
handleEdit: function (e)
// 点击列表项，跳转到编辑页面，并携带id参数
const id = e.currentTarget.dataset.id
wx.navigateTo(
url: `/pages/edit/edit?id=$id`
)
,
handleDelete: function (e)
// 点击删除按钮，删除该项数据，并更新本地缓存
const id = e.currentTarget.dataset.id
const listData = wx.getStorageSync('listData') || []
const index = listData.findIndex(item => item.id === Number(id))
listData.splice(index, 1)
wx.setStorageSync('listData', listData)
this.setData(
listData
)
)
在index.wxml中，修改以下代码：
<!-- index.wxml -->
<view class="container">
<button class="add-btn" bindtap="handleAdd">新增</button>
<view class="list">
<block wx:for="listData" wx:key="id">
<view class="list-item" bindtap="handleEdit" data-id="item.id">
<text class="text">item.text</text>
<text class="delete" bindtap="handleDelete" data-id="item.id">删除</text>
</view>
</block>
</view>
</view>
至此，一个简单的小程序用户列表增删改查功能就完成了。
展示最终效果
使用微信开发者工具打开项目，点击编译运行按钮，即可看到最终效果。
总结
本文介绍了开发微信小程序所需的基本知识，包括微信小程序的目录结构、项目创建、编码等方面。并以一个简单的用户列表增删改查功能为例，演示了如何在小程序中实现常见的增删改查操作。
需要注意的是，本文只是一个入门级别的示例，实际的小程序开发中可能会涉及更多的技术和知识，例如网络请求、数据绑定、组件开发等等。如果想要深入了解微信小程序开发，建议多阅读官方文档和相关书籍，积累更多的实战经验。
希望本文对初学者有所帮助，如果有任何问题或建议，欢迎留言讨论。
写在最后
✨原创不易，希望各位大佬多多支持。
👍点赞，你的认可是我创作的动力。
⭐️收藏，感谢你对本文的喜欢。
✏️评论，你的反馈是我进步的财富。
springboot整合微信小程序实现登录与增删改查
项目描述：在微信小程序中通过与Springboot操作数据库实现简单的增删改查，其中我是用springboot整合mybatis-plus 和mysql使用的
1. 开发前准备
1.1 前置知识
- java基础
- SpringBoot简单基础知识
1.2 环境参数
- 开发工具：IDEA
- 基础环境：Maven+JDK8
- 主要技术：SpringBoot、lombok、mybatis-plus、mysql 、微信小程序
- SpringBoot版本：2.2.6
2.开发者服务器
项目结构：
2.1 初始配置
（1）pom.xml配置
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<!--模板引擎-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 引入阿里数据库连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.14</version>
</dependency>
<!-- mysql依赖-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.42</version>
<scope>runtime</scope>
</dependency>
<!-- mybatisPlus 核心库 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.1.0</version>
</dependency>
<!--生成实体成get set-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- pagehelper 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.5</version>
</dependency>
<!--junit 测试-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
（2）application.yml
# Spring Boot 的数据源配置
spring:
datasource:
name: wx
url: jdbc:mysql://localhost:3306/wx_mini_program?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: root
# 使用druid数据源
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.jdbc.Driver
filters: stat
maxActive: 20
initialSize: 1
maxWait: 60000
minIdle: 1
timeBetweenEvictionRunsMillis: 60000
minEvictableIdleTimeMillis: 300000
validationQuery: select \'x\'
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
maxPoolPreparedStatementPerConnectionSize: 20
maxOpenPreparedStatements: 20
# mybatis-plus相关配置
mybatis-plus:
# xml扫描，多个目录用逗号或者分号分隔（告诉 Mapper 所对应的 XML 文件位置）
mapper-locations: classpath:mapper/*.xml
# 以下配置均有默认值,可以不设置
global-config:
db-config:
#主键类型 AUTO:"数据库ID自增" INPUT:"用户输入ID",ID_WORKER:"全局唯一ID (数字类型唯一ID)", UUID:"全局唯一ID UUID";
id-type: auto
#字段策略 IGNORED:"忽略判断" NOT_NULL:"非 NULL 判断") NOT_EMPTY:"非空判断"
field-strategy: NOT_EMPTY
#数据库类型
db-type: MYSQL
# 指定实体类的包
type-aliases-package: com.ckf.login_wx.entity
configuration:
# 是否开启自动驼峰命名规则映射:从数据库列名到Java属性驼峰命名的类似映射
map-underscore-to-camel-case: true
# 如果查询结果中包含空值的列，则 MyBatis 在映射的时候，不会映射这个字段
call-setters-on-nulls: true
# 这个配置会将执行的sql打印出来，在开发或测试的时候可以用
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# PageHelper分页插件
pagehelper:
helperDialect: mysql
reasonable: true
supportMethodsArguments: true
params: count=countSql
2.2 小程序用户表
CREATE table users(
id int not null PRIMARY key auto_increment,
name varchar(255) not null,
age int not null
);
insert into users value(null,\'陈克锋\',18);
insert into users value(null,\'陈克帅\',11);
insert into users value(null,\'陈克兵\',14);
select * from users;
2.3 pojo
2.4 mapper
2.5 service
2.5 serviceImpl
配置SpringBoot扫描mapper
2.6 controller
LoginController
package com.ckf.login_wx.controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
/**
* @author 安详的苦丁茶
* @date 2020/4/30 11:46
*/
@RestController
public class LoginController {
/**
* 登录
* @param phone
* @param password
* @return
*/
@PostMapping("/doLogin")
public Map doLogin(String phone, String password){
Map map = new HashMap();
if ((phone.equals("10086")&& password.equals("123456"))){
map.put("code",200);
map.put("result","登录成功");
System.out.println("登录成功");
}else {
map.put("result","no");
}
return map;
}
}
UserController
package com.ckf.login_wx.controller;
import com.ckf.login_wx.entity.User;
import com.ckf.login_wx.servic.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* @author 安详的苦丁茶
* @date 2020/4/30 13:39
*/
@RestController
@RequestMapping("/test")
public class UserController {
@Autowired
private UserService userService;
/**
* 查询全部
* @return
*/
@GetMapping("/list")
public Object list(){
System.out.println("查询成功");
return userService.list();
}
/**
* 根据id删除
* @param id
* @return
*/
@GetMapping("/delete")
public boolean delete(Integer id){
System.out.println("删除成功");
return userService.removeById(id);
}
/**
* 根据id查询
* @param id
* @return
*/
@GetMapping("/byid")
public Object byid(Integer id){
System.out.println("查询成功");
return userService.getById(id);
}
/**
* 修改
* @param user
* @return
*/
@PostMapping("/update")
public boolean update(@RequestBody User user){
System.out.println("修改成功");
return userService.updateById(user);
}
/**
* 添加
* @param user
* @return
*/
@PostMapping("/add")
public boolean add(@RequestBody User user){
System.out.println("添加成功");
return userService.save(user);
}
}
3. 微信小程序
项目结构：
3.1 初始配置
3.2 bing.wxml
<!--pages/bind/bind.wxml-->
<view>
<form bindsubmit=\'doLogin\'>
<!--账号-->
<view class="inputView">
<label class="loginLabel">账号</label>
<input name="phone" value=\'10086\' class="inputText" placeholder="请输入账号" />
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<label class="loginLabel">密码</label>
<input name="password" value=\'123456\' class="inputText" password="true" placeholder="请输入密码" />
</view>
<view class="line"></view>
<!--按钮-->
<view class=\'backColor\'>
<button class="loginBtn" formType="submit" open-type=\'getUserInfo\' >登录</button>
</view>
<!-- <view>
<button class="goRegistBtn" type="warn" open-type=\'getUserInfo\' bindgetuserinfo=\'doLogin\'>微信登录</button>
</view> -->
</form>
</view>
3.3 bing.js
3.3 list.wxml
<!--pages/list/list.wxml-->
<button class="add" type=\'primary\' bindtap=\'addArea\'>添加</button>
<view class="container">
<view class=\'widget\'>
<text class=\'column\'>编号</text>
<text class=\'column\'>姓名</text>
<text class=\'column\'>年龄</text>
<text class=\'link-column\'>操作</text>
</view>
<scroll-view scroll-y="true">
<view>
<block wx:for=\'{{list}}\'>
<view class=\'widget\'>
<text class=\'column\'>{{item.id}}</text>
<text class=\'column\'>{{item.name}}</text>
<text class=\'column\'>{{item.age}}</text>
<view class=\'link-column\'>
<navigator class=\'link\' url=\'../operation/operation?id={{item.id}}\'>编辑</navigator> |
<text class=\'link\' bindtap=\'deleteArea\' data-areaid=\'{{item.id}}\' data-areaname=\'{{item.name}}\' data-index=\'{{index}}\'>删除</text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
3.4 list.js
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that=this;
wx.request({
url: \'http://localhost:8080/test/list\',
method:\'GET\',
data:{},
success:function(res){
var list=res.data;
if(list==null){
var toastText=\'获取数据失败\';
wx.showToast({
title: toastText,
icon:\'\',
duration:2000 //弹出时间
})
}else{
that.setData({
list:list
})
}
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
addArea:function(){
wx.navigateTo({
url:\'../operation/operation\'
})
},
deleteArea: function (e) {
var that=this;
wx.showModal({
title: \'提示\',
content: \'确定要删除[\' + e.target.dataset.areaname +\']吗？\',
success:function(sm){
if(sm.confirm){
wx.request({
url: \'http://localhost:8080/test/delete\',
data: { id: e.target.dataset.areaid},
method:\'GET\',
success:function(res){
var result=res.statusCode;
var toastText="删除成功";
if(result!=200){
toastText = "删除失败";
}else{
that.data.list.splice(e.target.dataset.index,1);
that.setData({
list:that.data.list
});
}
wx.showToast({
title: toastText,
icon:\'\',
duration:2000
});
}
})
}
}
})
}
})
3.5 app.json
{
"pages": [
"pages/bind/bind",
"pages/list/list",
"pages/logs/logs",
"pages/operation/operation",
"pages/index/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#29d",
"navigationBarTitleText": "login",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
4. 测试
启动开发者服务器，启动SpringBoot的main方法。
打开微信小程序开发者工具
登录页面
首页
添加页面
修改页面
删除
到此基本的增删改查（crud）操作已经完成了
如有需要前往 Gitee（码云）下载
前台：https://gitee.com/ckfeng/applet_of_wechat.git
后台：https://gitee.com/ckfeng/wx_login.git
以上是关于轻松开发微信小程序实现用户增删改查功能的主要内容，如果未能解决你的问题，请参考以下文章
如何利用Spring Boot 整合微信小程序实现登录与增删改查（含代码解析）