Spring Boot 整合微信小程序并实现简单CRUD

环境准备

后端

开发工具：IDEA 2019.02
开发环境：jdk1.8，maven，mysql 5.7
技术栈：spring boot 2.0 ，mybatis

前台

开发工具：微信开发者工具最新版
开发环境：微信小程序（wxml,json,js,wxss）

数据准备

需要初始化数据库并且创建两个简单的数据库表。（前期设计不足，有冗余，可合并一张表）
login表，主要存放三个字段，id，name，password
user表，主要存放三个字段，id，name，age

开发

目录结构：
1.微信小程序

2.java后端

前端开发

1.登录页面

<view>

  <form bindsubmit='doLogin'>
            <!--账号-->
            <view class="inputView"> 
                <label class="loginLabel">账号</label>
                <input name="name" value='xiaowang' 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>
        </form>

</view>

2.登录请求

  doLogin:function(e){

    wx.request({
      url:"http://localhost:8080/doLogin",
      method:"post",
      header:{
        "Content-Type": "application/x-www-form-urlencoded" 
      },
      data:{
        name:e.detail.value.name,
        password:e.detail.value.password
      },
      success:function(res){
        console.log(res);
        if(res.data.code == 200){
          if(res.data.result=="登录成功"){
            console.log("登陆成功！");
            
            wx.reLaunch({
              url: '../list/list'
            })
          }else{
            wx.showToast({ title: '用户名或密码有误', icon: 'none', duration: 2000 })
            console.log("登陆失败！");
          }
        }
      },
      fail:function(res){
        console.log("登陆失败！");
      }
      
    })

  }

其余增删改查的相关操作页面都是类似的，代码省略。

后台开发

1.创建springboot项目，导入相关依赖

		 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </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>

2.修改配置

# Spring Boot 的数据源配置
spring:
  datasource:
    name: wx
    url: jdbc:mysql://192.168.1.105:3306/wechat?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: Root1234
    # 使用druid数据源
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
# 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.wechatspring.springbootwechat.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

3.开发登录以及查询接口

@RestController
public class LoginController {
    @Autowired
    private LoginService loginService;
    @PostMapping("/doLogin")
    public Map doLogin(String name, String password){
        Map map = new HashMap();
        int count = loginService.login(name,password);
        if (count > 0){
            map.put("code",200);
            map.put("result","登录成功");
            System.out.println("登录成功");
        }else {
            map.put("result","no");
        } return map;
    }
}

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
     //查询全部
     @GetMapping("/list") public Object list(){
        System.out.println("查询成功"); return userService.list();
    }
     // 根据id删除

      @GetMapping("/delete") public boolean delete(Integer id){
        System.out.println("删除成功"); return userService.removeById(id);
    }
     //  根据id查询
    @GetMapping("/byid") public Object byid(Integer id){
        System.out.println("查询成功"); return userService.getById(id);
    }
    //修改
    @PostMapping("/update") public boolean update(@RequestBody User user){
        System.out.println("修改成功"); return userService.updateById(user);
    }
    //添加
    @PostMapping("/add") public boolean add(@RequestBody User user){
        System.out.println("添加成功"); return userService.save(user);
    }
}

4.相应的功能实现
登录（使用原生mybatis）

public interface LoginService {
    int login(String name,String password);
}

@Service
public class LoginServiceImpl implements LoginService {
    @Autowired
    private LoginDao loginDao;
    @Override
    public int login(String name, String password) {
        return loginDao.doLogin(name, password);
    }
}

public interface LoginDao {
    @Select("select count(*) from login where name = #{name} and password = #{password}")
    int doLogin(@Param("name") String name,@Param("password") String password);
}

增删改查（使用mybatis-plus）

public interface UserService extends IService<User> {
}

@Service
@Transactional
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

@Repository
public interface UserMapper extends BaseMapper<User> {
}

mapper文件

<mapper namespace="com.wechatspring.springbootwechat.mapper.UserMapper">

    <resultMap id="UserResultMap" type="com.wechatspring.springbootwechat.entity.User">
        <result property="id" column="id"/>
        <result property="name" column="name"/>
        <result property="age" column="age"/>
    </resultMap>
</mapper>

启动

1.启动springboot项目中的main方法，启动成功后，使用微信小程序登录。

查看后台日志，可以看到登录信息。

同时在登录成功后，小程序跳转到查询列表页面。

对应的编辑和删除也可以实现。

参考自：
作者：安详的苦丁茶
链接：https://www.cnblogs.com/ckfeng/p/12812214.html