微信小程序+Java后台开发(详细解释,附代码)

7,190 阅读4分钟

微信小程序+Java后台开发

全部代码链接

链接:pan.baidu.com/s/1viujpT2E… 提取码:wcvd

  • 通过这个博客,你可以快速的搭建一个微信小程序前端和后台相连的一个功能,在这里我会详细的解说每一个步骤,就是如何实现小程序的前后台相互关联;因为是实现简易的小程序的某个功能,主要是为了了解小程序前台如何和后台相连,所以在此博客中使用的是本地tomcat服务器。

使用的工具:

idea
springmvc
微信小程序开发工具 tomcat
微信小程序API
**所使用的jar包 **
我已经上传到百度云盘里了,如果有需要可以去下载 链接:pan.baidu.com/s/1KSqQLs9J… 提取码:9s0s

在这里插入图片描述
1.JAV后端详解

我写后台主要使用的是Java,框架是SSM,由于自己的知识浅薄,只能使用自己已有的知识进行开发学习,因为微信小程序前台和后台数据传输是以Json数据格式传送的,所以建议如果了解过springBoot的话,用它更加方便快捷。

在这里我给大家说一个json数据格式究竟是什么,希望对大家有点帮助!!!

  1. json数据格式
    json有两种格式:一个是json对象,另一种是json数组
    2.1 json对象:可以理解为Java中对象,是以键值对形式存在的
    例子: {"key":value, "key1":value1}
    2.1.2 json数组:
    例子:[{"key":value,"key":value}]

首先在idea中创建一个JavaEE项目,具体如何创建,在这里我就不祥解了,如果有不会的,可以去网上搜一艘,在这里我会直接打开我先前创建下个JavaEE项目。

  1. 首先在微信小程序开发工具中新建一个项目,然后再自己所写的某一个页面中,其次在自己页面的wxml文件中编写内容 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--前端控制器-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <!--字符编码-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
  1. 其次在src/springmvc.xml编写springMVC的配置文件 springMVC.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
         http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd"
       default-autowire="byName">

    <!--注解扫描-->
    <context:component-scan base-package="com.zb.lq.controller"/>
    <!--注解驱动-->
    <mvc:annotation-driven></mvc:annotation-driven>
</beans>
  1. 然后在控制器中编写代码 我的实在DemoController中编写的
    在这里插入图迭代的片描述
    DemoController.java
@Controller
public class DemoController {
    @RequestMapping("getUser")
    @ResponseBody
    public List<String> getUser(){
        List<String> list = new ArrayList<>();
        list.add("中北大学");
        list.add("653");
        list.add("实验室");
        return list;
    }
}

至此,使用Java编写的后台已经基本完成,接下来启动tomcat,测试看是否编写成功 如果出现一下内容,则说明后台编写成功,要以json格式输出,因为小程序前台和后台相连是以json格式输出的

在这里插入图片描述

  1. 我以简单的按钮实现前后台交互: index.wxml
<button bindtap='houduanRequest'>获取信息</button>
<view wx:for="{{list}}" wx:fot-item="item">
  姓名:{{item}}
</view>

index.js

//index.js
const app = getApp()

Page({
  data: {
    list:''
  },
  houduanRequest:function(){
    var that = this;
    wx.request({
      url: 'http://localhost:8888/xiaochengxu/getUser',//自己请求的服务器的地址
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (req) {
        var list = req.data;
        if (list == null) {
          wx.showToast({
            title: 'ErrorMessage',
            icon: 'false',   //图标
            duration: 1500  //提示的延迟的时间
          })
        } else {
          that.setData({
            list: list
          })
        }
      }
    })
  },

  onLoad: function() {
    
  }, 

})

到此基本的功能代码已经完成了,现在我们开始启动tomcat,进行运行,看看结果究竟是什么...

在这里插入图片描述

在这里插入图片描述
到此,实现小程序前后台相连已经实现了 希望对大家有点帮助!!!

公众号

希望大家多多关注,里面不定期发放干货
领取全套资料:回复关键字【666】

迈莫公众号