微信小程序+Java后台开发
全部代码链接
若失效，关注我的公众号回复关键字【666】点击领取
- 通过这个博客，你可以快速的搭建一个微信小程序前端和后台相连的一个功能，在这里我会详细的解说每一个步骤，就是如何实现小程序的前后台相互关联；因为是实现简易的小程序的某个功能，主要是为了了解小程序前台如何和后台相连，所以在此博客中使用的是本地tomcat服务器。*
使用的工具：
idea
springmvc
微信小程序开发工具
tomcat
微信小程序API
所使用的jar包
我已经上传到百度云盘里了，如果有需要可以去下载
链接：https://pan.baidu.com/s/1KSqQLs9JMWB2SqgVVEwhKw
提取码：9s0s
1.JAV后端详解
我写后台主要使用的是Java，框架是SSM，由于自己的知识浅薄，只能使用自己已有的知识进行开发学习，因为微信小程序前台和后台数据传输是以Json数据格式传送的，所以建议如果了解过springBoot的话，用它更加方便快捷。
在这里我给大家说一个json数据格式究竟是什么，希望对大家有点帮助！！！
- json数据格式
2.1 jso有两种格式：一个是json对象，另一种是json数组
2.1.1 json对象：可以理解为Java中对象，是以键值对形式存在的
例子： {“key”:value, “key1”:value1}
2.1.2 json数组：
例子：[{“key”:value,“key”:value}]
首先在idea中创建一个JavaEE项目，具体如何创建，在这里我就不祥解了，如果有不会的，可以去网上搜一艘，在这里我会直接打开我先前创建下个JavaEE项目。
- 首先在微信小程序开发工具中新建一个项目，然后再自己所写的某一个页面中，其次在自己页面的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>
- 其次在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>
- 然后在控制器中编写代码
我的实在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格式输出的
- 我以简单的按钮实现前后台交互：
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】
转载：https://blog.csdn.net/qq_41066066/article/details/87613223
查看评论