Spring Boot与微信小程序建立简单联系

写在前面

个人感觉,微信小程序承担了前端的展示,Spring Boot承担了后端的数据接口。

点击之前

点击之后

前端:小程序

主要是两个文件

  1. .wxml文件(这里是test.wxml,可以说是HTML文件)
  2. .js文件(这里是test.js,可以说是JavaScript文件)

完整文件:

test.wxml
<button bindtap='click'>点击发起请求</button>

<view wx:for="{{mylist}}" wx:key="*this">
  <view>id: {{item.id}}</view>
  <view>username: {{item.username}}</view>
  <view>password: {{item.password}}</view>
  ======
</view>
test.js
// pages/test/test.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    mylist: '',
  },
  click: function () {
    var that = this;
    wx.request({
      url: 'http://192.168.0.233:8080/user',
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var info = res.data
        console.log(info)
        that.setData({
          mylist: info
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
})

个人分析:

analysis

  1. 触发点击。
  2. wx.request发起网络请求,详细用法:官方网站
  3. 展示结果。

后端:Spring Boot

实现效果

service
package com.moon.pi.service;

public class UserService {
} 
entity
package com.moon.pi.entity;


import javax.persistence.*;

@Entity
public class User {
    @Id
    @GeneratedValue
    private Integer id;
    private String username;
    private String password;

    public User(){
    }

    public int getId() {
        return id;
    }

    public void setId(int 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;
    }
}   
dao
package com.moon.pi.dao;

import com.moon.pi.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface UserDAO extends JpaRepository<User, Integer> {
}
controller
package com.moon.pi.controller;

import com.moon.pi.dao.UserDAO;
import com.moon.pi.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Example;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Optional;

@RestController
public class UserController {
    @Autowired
    UserDAO userDAO;


    @GetMapping(value = "/user")
    private List<User> userList(){
        return userDAO.findAll();
    }

    @PostMapping(value = "/user")
    public User userAdd(@RequestParam("username") String username,
                        @RequestParam("password") String password){
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        return userDAO.save(user);
    }

    @GetMapping(value = "/user/{id}")
    public Optional<User> userFindOne(@PathVariable("id") Integer id){
        User user = new User();
        user.setId(id);
        Example<User> example = Example.of(user);
        return userDAO.findOne(example);

    }

    @DeleteMapping(value = "/user/{id}")
    public void userDelete(@PathVariable("id") Integer id){
        userDAO.deleteById(id);
    }

    @PutMapping(value = "/user/{id}")
    public User userUpdate(@PathVariable("id") Integer id,
                           @RequestParam("username") String username,
                           @RequestParam("password") String password){
        User user = new User();
        user.setId(id);
        user.setUsername(username);
        user.setPassword(password);
        return userDAO.save(user);
    }
}   
application.properties
server.port=8080

spring.application.name=pi

spring.datasource.url=jdbc:mysql://localhost:3306/milk
spring.datasource.username=milk
spring.datasource.password=milk
spring.datasource.driver-class-name=com.mysql.cj.jdbc.NonRegisteringDriver


spring.jpa.show-sql=true
spring.jpa.database=mysql

相关数据库设计

展示user

user表


comment: