微信小程序与后端连接(Java+Mybatis-plus)

一、技术:

1、后端:
Springboot+Mysql+Mybatis-plus+Tomcat
2、前端:
微信小程序
3、项目目录:

二、后端相关配置:

1、Mysql：

spring.datasource.url= jdbc:mysql://localhost:3306/wxdatas?serverTimezone=UTC&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

2、添加Mybatis-plus依赖:

            com.baomidou
            mybatis-plus-boot-starter
            3.3.1.tmp

注:因为基本是使用它自带的,所以没有xml文件。如果需要可自己引入,并配置。
此处需要注意在启动类上添加

@SpringBootApplication
//重点
@MapperScan("com.example.wxs.mapper")
public class WxsApplication {

    public static void main(String[] args) {
        SpringApplication.run(WxsApplication.class, args);
    }

}

三、前端配置:

如果没有自己购买服务器并且没有https安全证书,需要在开发工具中勾选

一、后端代码

第一步、实体类

package com.example.wxs.entity;


import javax.persistence.*;
/*
*@author cmy
*/
@Entity(name = "users")
public class Users{

    @Id
    @GeneratedValue
    private Long id;
    @Column
    private String userName;
    @Column
    private String password;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Users() {

    }
}

第二步、Mapper

package com.example.wxs.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.wxs.entity.Users;
import org.springframework.stereotype.Repository;

/*
*@author cmy
*/
@Repository
public interface UsersMapper extends BaseMapper<Users> {
}

第三步、service接口

package com.example.wxs.service;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.wxs.entity.Users;
import java.util.List;

/*
*@author cmy
*/
public interface UsersService {
	//返回所有users并且分页
    public IPage<Users> getAllUsers(Page<Users> page);
	//插入一条数据
    public Integer insertOne(Users users);
    //通过名字返回users(模糊查询)
    public List<Users> getUserByUsername(String userName);
}

第四步、service实现类

package com.example.wxs.serviceImpl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.wxs.dao.UsersDao;
import com.example.wxs.entity.Users;
import com.example.wxs.mapper.UsersMapper;
import com.example.wxs.service.UsersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;

/*
*@author cmy
*/
@Service
public class UsersServcieImpl implements UsersService {

    @Resource
    private UsersMapper usersMapper;

    @Override
    public List<Users> usersList() {
        List<Users> allUsers=new ArrayList<>();
        Users users=new Users();
        users.setUserName("ceshi");
        users.setPassword("test");
        usersDao.save(users);
        allUsers.add(users);
        System.out.println(allUsers.isEmpty());
        return allUsers;
    }
	/**
	*返回所有人员
	*/
    @Override
    public IPage<Users> getAllUsers(Page<Users> page) {
        return usersMapper.selectPage(page,null);
    }

	/**
	*插入一条人员信息
	*/
    @Override
    public Integer insertOne(Users users) {
        return usersMapper.insert(users);
    }
	
	/**
	*通过用户名返回人员
	*/
    @Override
    public List<Users> getUserByUsername(String userName) {
        QueryWrapper<Users> queryWrapper1=new QueryWrapper<>();
        queryWrapper1.like("user_name",userName);
        return usersMapper.selectList(queryWrapper1);
    }
}

第五步、Controller层

package com.example.wxs.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.wxs.entity.Users;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.example.wxs.serviceImpl.UsersServcieImpl;
import java.util.List;

@RestController
@RequestMapping("/users")
public class UsersController {

    @Autowired
    private UsersServcieImpl usersServcieImpl;

    @RequestMapping("/test")
    public void test(){
        usersServcieImpl.usersList();
    }

    @GetMapping("/getAll")
    public IPage<Users> findByPage(@RequestParam(value = "pageNo",required = false) int pageNo, @RequestParam(value = "pageSize",required = false) int pageSize){
        Page<Users> page=new Page<>(pageNo,pageSize);
        return usersServcieImpl.getAllUsers(page);
    }

    @GetMapping("/getUserByUsername")
    public List<Users> getUserByUsername(@RequestParam String userName){
        return usersServcieImpl.getUserByUsername(userName);
    }

    @PostMapping("/insertOne")
    public Integer insertUsers(@RequestBody Users users){
        return usersServcieImpl.insertOne(users);
    }

}

二、前端代码

<view>
  <button bindtap="getSum">测试</button>
  <button bindtap="getUsers">人员</button>
  <input value="{{sum}}" >结果</input>
  <view>
  <view>名字:{{name}}年龄:{{age}}</view>
  <view>
    <button bindtap="getUserByName">确认</button>
  </view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{names}}" style="line-height: 50px">姓名:{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{ages}}" style="line-height: 50px">年龄:{{item}}</view>
    </picker-view-column>
  </picker-view>
  </view>
  <view>
    <button bindtap="insertPage">插入</button>
  </view>
</view>

1、滚动选择器:

  /**
   * 滚动选择器
   */
  bindChange:function(e){
    const val=e.detail.value;
    var that=this;
    if(that.data.names!=null&&that.data.names!=""){
       that.setData({
         name:that.data.names[val[0]],
         age:that.data.ages[val[1]]
       })
    }
  },

e.detail.value选择器的值

2、getUsers(获取所有人员)

   /**
   * 获取所有人员
   */
  getUsers:function(){
    var that=this;
    wx.request({
      url: 'http://ip地址:8082/users/getAll',
      data:{
      	//传入参数(页码||数据条数),此处多余了
        pageNo:1,
        pageSize:100
      },
      method:'GET',
      header:{
        'content-type':'application/json'
      },
      success:function(res){
      	//将返回的值存入数组names1中
        for(let i=0;i<=res.data.records.length-1;i++){
          names1.push(res.data.records[i].userName);
          ages1.push(res.data.records[i].password);
        }
        //将names更新为names1
        that.setData({
          names:names1,
          ages:ages1,
          value:[0,0]
        })
        //选择器选中的值
        if(that.data.names!=null&&that.data.names!=""){
          that.setData({
            name:names1[0],
            age:ages1[0]
          })
        }
      },
      fail:function(res){
        console.log(res)
      }
    })
  },

3、getUserByName(获取所有人员)

   /**
   * 通过名字获取对应的所有对象(模糊查询)
   */
  getUserByName:function(){
    var that=this;
    wx.request({
      url: 'http://ip地址:8082/users/getUserByUsername',
      data:{
      	//传入参数
        userName:that.data.name,
      },
      method:"GET",
      header:{
        'content-type':'application/json'
      },
      success:function(res){
        that.setData({
          user:res.data
        })
        //将返回的结果转成json格式,带入到路径
        wx.navigateTo({
          url: '/pages/user/user?user=' + JSON.stringify(that.data.user)
        })
      },
      fail:function(res){
        console.log(res)
      }
    })
  },

注:wx.navigateTo出入数组参数,要转json

3、插入数据(页面)

<view>
  userName<input value='{{userName}}' bindinput="forName"></input>
  password<input value='{{password}}' bindinput="forPassword"></input>
  <button bindtap="insert">确认</button>
</view>

bindinput:键入时触发,输入框的值

   /**
   * 插入数据(单条)
   */
  insert:function(){
    var that=this;
    //如果输入框为空,弹窗警告
    if(that.data.userName==""||that.data.userName==null||that.data.password==""||that.data.password==null){
      wx.showModal({
        title: '提示',
        content: 'userName||password can not == null or ""',
      })
    }else{
      wx.request({
        url: 'http://ip地址:8082/users/insertOne',
        data:{
          userName: that.data.userName,
          password: that.data.password
        },
        method:'POST',
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
        //成功以后,将输入框内清空
          that.setData({
            userName:'',
            password:''
          })
        },
        fail: function (res) {
          console.log(res)
        }
        })
    }
  },

  forName:function(e){
    this.setData({
      userName:e.detail.value
    })
  },

  forPassword:function(e){
    this.setData({
      password:e.detail.value
    })
  }

总结:微信小程序和后端的连接就是通过wx.request,路径为后端代码方法对应的路径,一定要修改method的值。
欢迎大家交流。
后续补充:写代码一定要注释！！！！！血泪