前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

这篇具有很好参考价值的文章主要介绍了前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端(微信小程序)后端(java)的交互通信——基于javaweb

一、准备

软件:idea+微信开发者工具
语言:java+小程序语言
工具:JDK+Tomcat

二、创建项目

一、新建一个java-web项目
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
这里是已经部署好了tomcat的,如果木有部署过tomcat看步骤三
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

自定义一个项目路径,命名最好是按照驼峰命名法,规范命名,方便项目管理,不按照这个也木有关系,木有什么实质性的影响,到这步骤项目就已经新建完成了。

前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
这个是刚刚新建好项目的样子

二、我们新建一个Servlet类
我们在src包下面新建一个servlet类,这个类里面会进行小程序和后端的数据通信,可以接收小程序传输的数据,可以发送数据给到小程序,代码如下

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);
    }
}


接下来,我们试试看项目是否可以在服务器里面启动成功,我们使用的是tomcat启动项目。点击右上角的run按钮
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
如果出现如下页面,不要慌,就代表你已经启动成功了。出现这个情况是因为IDEA会自己创建一个index.jsp页面,body里面的内容就是 $ END $
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

三、部署tomcat

一、点击菜单中绿色小锤子旁的 Add Configuration

前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
二、点击左上角+号,选择Tomcat Server ->Local
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
三、修改tomcat的配置
(一)、在server里面修改红色框框内的配置
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
(二)、在deployment里面配置路径
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
配置好之后,IDEA的页面会发生改变的,会重新build,页面的右上角会出现之前配置的tomcat。有警告信息是木有关系的。并不影响项目的启动。
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

(三)详细的配置可以参考这个博客,我觉得特别特别好!!!

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

四、创建微信小程序项目

(一)、index.wxml里面的代码如下

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


(二)、index.js里面的代码如下

//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("失败");
      }
    })
  }


})

页面显示如下
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

五、启动项目后

(一)、小程序端
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb
(二)、后端
前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb文章来源地址https://www.toymoban.com/news/detail-485902.html

到了这里,关于前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序完整项目实战(前端+后端)

    基于微信小程序的在线商城点单系统 前言:闲来无事,制作一个微信小程序商城。系统采用Java语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋友当个参考。 小程序 管理端 1.创建maven project,先创建一个名为SpringBootDemo的项目,选择【New Project】 然后在

    2024年02月03日
    浏览(64)
  • 微信小程序商城搭建--后端+前端+小程序端

    前端技术:React、AntdesignPro、umi、JavaScript、ES6、TypeScript、 小程序 后端技术:Springboot、Mybatis、Spring、Mysql 后端采用Springboot搭配前端React进行开发,完成用户管理、轮播图管理、一级分类管理、商品管理、日志管理。 支持多图上传功能,封面图。 采用JWT+拦截器进行接口拦截

    2024年02月05日
    浏览(52)
  • 微信小程序登录+获取手机号码(前端+后端)

    上面这张是微信小程序官方原图,登录流程如上图所示,下面一步步进行以及说一下碰到的坑。 1.wx.login()获取code         调用微信小程序官方提供的方法获取code提供给后端用以换取session_key、openid。         注意:code只能使用一次就会失效,且有效期为5分钟 2.后端收到

    2024年02月12日
    浏览(59)
  • 微信小程序登录流程(包含前端、后端代码)

    在微信小程序的开发过程中,如果想要保留 用户 的 数据 (比如: 操作记录 、 购物车信息 等等)就必须要 用户 登陆。为什么呢?比如说,数据库中有一条 数据 你如何知道这条数据属于谁?属于那个用户呢?这就需要用户登录来获取 用户 的 唯一标识 从而确定这条数据是属

    2024年02月03日
    浏览(58)
  • 搭建flask后端和微信小程序前端

    目录 一、准备工作 (1)我的前端代码 (2)我的后端代码 (3)后端运行成功的截图 (4)前端运行成功的截图  (5)整体运行成功的截图 二、部署后端  (1)在腾讯云的学生入口处购买服务器(建议选择ubuntu系统),设置管理秘钥,方便在本地远程连接。 (2)在本地的

    2024年02月04日
    浏览(56)
  • 在线选课的微信小程序(微信前端+网站后端)

    目录 一、前言 二、微信小程序端(老师、学生) 1.学生用户前端小程序界面  2.老师前端小程序界面 三、后端(管理员、老师、学生) 3.老师后端 4.管理员后端 四、代码获取与调试 这是一个在线选课的微信小程序,使用了 idea + Navicat + maven + vue + 微信开发者工具 。 1.学生用

    2024年02月11日
    浏览(52)
  • 微信小程序获取用户手机号码教程(前端+后端)

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 在开发微信小程序时,获取用户手机号码是常见的需求之一。本教程将为你详细介绍如何在前端和后端实现获取用

    2024年02月08日
    浏览(63)
  • 微信小程序获取用户手机号码教程(前端+后端)

    在开发一款微信小程序时,需要用户进行微信登录,获取用户的手机号码来作为用户的唯一标识(userId),于是探索获取用户手机号码的方式; (当然,通过wx.login来获取code,进而换取用户的openid也是可以的) 目前版本的微信小程序获取用户手机号码的方式如下: 前端开发

    2024年02月12日
    浏览(54)
  • 【微信小程序】前端+后端 :第一篇(基于javaweb 案例)

    博主:👍不许代码码上红 欢迎:🐋点赞、收藏、关注、评论。 点击新建项目 这里记得选择web application 点击下一步 这是我们需要的目录结构 如果没有如下图这个东西 可以点击+号 选择Artifact 即可 4.1、创建一个新的页面pages 目录结构 4.2、demo2.js 4.3、demo2.wxml 微信小程序端

    2024年02月09日
    浏览(50)
  • 前端将后端数据流转为图片(微信小程序)

    获取后端流的请求responseType必须使用arraybuffer 将后端数据刘转换为base64再转换为本地图片 html与data

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包