Interactive communication between front-end (WeChat applet) and back-end (IDEA-java) - based on javaweb

Front-end (WeChat applet) and back-end (java) interactive communication - based on javaweb

1. Preparation

Software: idea+WeChat developer tool
Language: java+ applet language
tool: JDK+Tomcat

2. Create a project

1. Create a new java-web project
insert image description here
Here, tomcat has been deployed. If you have deployed tomcat, see step 3

To customize a project path, it is best to name it according to the hump nomenclature, standardized naming, to facilitate project management, it does not matter if you do not follow this, it does not have any substantial impact, and the project has been newly created at this step.

This is what the newly created project looks like

2. We create a new servlet class
We create a new servlet class under the src package. This class will carry out data communication between the applet and the backend, receive data transmitted by the applet, and send data to the applet. The code is as follows

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;

@WebServlet(name = "Servlet", urlPatterns = "/Servlet")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        /*设置响应头允许ajax跨域访问*/
        response.setHeader("Access-Control-Allow-Origin", "*");

        /* 星号表示所有的异域请求都可以接受， */
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");

        //获取微信小程序传递的参数值并打印
        String transInfo = request.getParameter("transInfo");
        System.out.println("接收到小程序端传递的数据:" + transInfo);

        //像小程序端传递数据
        Writer out = response.getWriter();
        out.write("呐，这是后台给小程序端的数据");
        out.flush();


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

Next, let's try to see if the project can be successfully started in the server. We use tomcat to start the project. Click the run button in the upper right corner.
insert image description here
If the following page appears, don't panic, it means that you have successfully started. This happens because IDEA will create an index.jsp page by itself, and the content in the body is $END $

3. Deploy tomcat

1. Click Add Configuration next to the green hammer in the menu

insert image description here
2. Click the + sign in the upper left corner and select Tomcat Server -> Local

3. Modify the configuration of tomcat
(1), modify the configuration in the red box in the server

(2), after the configuration path is

configured in the deployment, the IDEA page will be If it changes, it will be rebuilt, and the previously configured tomcat will appear in the upper right corner of the page. Having a warning message is irrelevant. Does not affect the start of the project.
insert image description here

(3) The detailed configuration can refer to this blog, I think it is very good! ! !

https://blog.csdn.net/qq_38801550/article/details/78187803?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242.1

4. Create a WeChat applet project

(1) The code in index.wxml is as follows

<view>
    <button bindtap='bindtest'>数据交互</button>
    <text>接收到后台的数据：{
   
   {tt}}</text>
</view>

(2) The code in index.js is as follows

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    tt: ''
  },


  bindtest: function(options) {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/Servelt', //本地服务器地址
      data: { //data中的参数值就是传递给后台的数据
        transInfo: '呐，这是小程序端给后台的数据'
      },
      method: 'get',
      header: {
        'content-type': 'application/json' //默认值
      },
      success: function(res) { //res就是接收后台返回的数据
        that.setData({
          tt: res.data
        })
        console.log(res.data);
      },
      fail: function(res) {
        console.log("失败");
      }
    })
  }


})

The page displays as follows
insert image description here

5. After starting the project

(1), applet side

(2), back-end
insert image description here