初次写项目，无法按捺住自己激动的心情。上次谈了谈写项目心得之后，许多小伙伴想要了解微信小程序的技术实现，我就开始我的写作，纯手打，希望你们喜欢。
另外说明一点，我想尽可能的详细讲解前后台交互的流程，希望如果是想直接拷代码拿来即用的小朋友，能够仔细看完。
声明：本文纯原创手打，且首发在CSDN，我的博客地址，转载注明出处，谢谢！
一：理清思路
首先，我们日常的web开发，都是采用MVC模式。MVC不是什么框架，他是一种思想。
M是model（模型），就是后端Java类，每一个Java类相当于数据库中的一张表。比如一个学生，他有 姓名、性别，那么姓名、性别就相当于Java类中的一个私有变量，用private封装；模型模型，就是所谓的“模拟的形状”（原谅我的脑洞），他只是一个模板，至于我们用的时候需要对其进行实例化。比如ACM，我们使用的那些模板，比如01背包，ACM比赛中总不会单纯考我们01背包吧？他可能会考其变形，比如完全背包、状压背包等等。Java也是一样，我们在使用模板类的时候，需要对其进行实例化，也就是大家常见的：
Student stu = new Student();当然在Spring中并不是这样创建对象的，而是通过控制反转给工厂来实现。具体的以后在深入，感兴趣的可以看看
V就是View（视图），就是前端部分，就是后台传来的数据在前端的体现。比如后台从数据库读到了一个helloworld，在后台存在我们是看不见摸不到的，我们可以把他发送到前台，在前台页面（view）显示这个helloworld，这样我们就可以看到了。
C就是控制器，英文是Controller，他的作用是把M（后端）和V（前端）连起来。前台要请求后台的数据，那么就需要经过控制器；相反，后台要发送请求到的数据到前台，也需要经过控制器。
总的来说，我们可以归纳为下图：
这张图是我在写SSM的时候画的图，SSM有很多配置文件，当然SpringBoot并不需要这么多。我们重点是要了解到，view视图层要请求后台的数据，需要先通过控制器（Controller），再经过业务层Service，再经过业务逻辑层Service，再经过持久层Dao，最后读取到数据库。相反，数据库的SQL语句执行成功之后，先传到Dao，然后Service、Controller，最后再到前台View层。
好，了解了这个之后，我们来正式开始今天的前后台交互。
二：配置Spring环境
相信了解过SSM或者SpringBoot的朋友，已经对配置有了一定的了解。我希望电脑手机前的朋友，能多多花时间在核心技术上，而不是花在软件安装破解、环境配置。如果不会配，请看：eclipse配置教程 、 IDEA SSM前后台交互
三：编写后台
一个小项目，你可以先把后台写完再写前台，也可以先把前台界面做完，再去写后端逻辑实现。那么我在这先写后台。
因为是第一篇，简单一点，我们只要实现前后台能正常交互就可以了，也就是控制器（Controller）和视图（View）的交互。
我们先来看完整代码：
-
package app.com.controller;
-
-
import org.springframework.stereotype.Controller;
-
import org.springframework.web.bind.annotation.RequestMapping;
-
import org.springframework.web.bind.annotation.RequestMethod;
-
import org.springframework.web.bind.annotation.ResponseBody;
-
import javax.servlet.ServletException;
-
import javax.servlet.http.HttpServletResponse;
-
import java.io.IOException;
-
import java.util.ArrayList;
-
import java.util.List;
-
-
@Controller
-
@RequestMapping(
"/test")
-
public
class AppTestController {
-
-
@ResponseBody
-
@RequestMapping(value =
"/hello", method = { RequestMethod.POST, RequestMethod.GET })
-
public List<String> getTenant(HttpServletResponse response) throws ServletException, IOException, IOException {
-
-
List<String> ans =
new ArrayList<String>();
-
ans.add(
"hello zwz");
-
return ans;
-
}
-
}
注解
-
@Controller
-
@RequestMapping(
"/test")
上面的这两个，是注解，他们相当于一个java类。使用了@Controller标记的Java类，会被系统认为是一个控制器类，然后会扫描使用该注解的类的方法，并检测该方法是否使用了@RequestMapping注解。
而使用@RequestMapping注解的方法是处理请求的处理器。
比如我们在Tomcat跑起来的情况下，打开如下网址，会发现：
其中forestry是该工程在服务器上部署的名字，就是整个Java项目的名字，当然也可以在Tomcat中修改。
其中test就是对应着类名，就是被@RequestMapping("/test")标记的Java类。
其中hello就是被@RequestMapping("/hello")标记的方法。该方法返回了一个ArrayList数组，数组内有且仅有一个String字符串，就是“hello zwz”，最后被返回。
又因为我们添加了@ResponseBody注解，返回的数组被转化成JSON形式，就是我们现在在浏览器中看到的。
如果我们把代码改成如下所示:
-
@Controller
-
@RequestMapping(
"/test")
-
public
class AppTestController {
-
-
@ResponseBody
-
@RequestMapping(value =
"/hello", method = { RequestMethod.POST, RequestMethod.GET })
-
public List<StudentDemo> getTenant(HttpServletResponse response) throws ServletException, IOException, IOException {
-
-
List<StudentDemo> ans =
new ArrayList<StudentDemo>();
-
ans.add(
new StudentDemo(
"zwz",
18));
-
return ans;
-
}
-
}
其中StudentDemo是我自己写的Java类（Model），包括name和age属性:
-
package app.com.model;
-
-
public
class StudentDemo {
-
-
private String name;
-
private
int age;
-
-
public StudentDemo(String name,int age){
-
this.name = name;
-
this.age = age;
-
}
-
-
//省略get set 和无参构造方法
-
-
}
那么我们刷新浏览器，会发现：
这就是所谓的JSON格式，这也是微信小程序支持接收的格式之一，我基本就是使用这种格式进行前后端交互。
好了，只要浏览器能够正常显示，那么小程序一样也可以。
四：编写小程序前台
使用小程序开发工具之前，我们先关掉合法域名检测。
先来科普一下，什么叫域名。域名是企业或机构等在互联网上注册的名称，是互联网上识别企业或机构的网络地址。
当然我也没有那么专业，我的理解就是Tomcat运行的localhost:8080肯定不是能用的域名，我们把它关闭就可以了。
接着创建一个新的小程序界面，我们发起数据请求：
HTML页面
-
<view class="container">
-
{{msg}}
-
</view>
JS页面
-
Page({
-
data: {
-
msg:
'',
-
},
-
onLoad:
function () {
-
var that =
this;
-
wx.request({
-
url:
'https://localhost:8443/forestry/test/hello',
-
method:
'POST',
-
data: {
-
},
-
header: {
-
'content-type':
'application/json'
-
},
-
success(res) {
-
console.log(res);
-
}
-
})
-
},
-
})
onLoad是生命周期函数，指当前页面加载完毕立刻执行的方法
wx.request是微信提供的请求接口，
url就是我们上一步在浏览器输入的URL地址，
method就是请求数据的方法，有GET和POST两大类，我们使用POST，
data是前台发送到后台的数据
header我们选择JSON格式
sucess是请求成功之后调用的方法，接着我们执行一下
我们从控制台中，可以看到获取到的值，接着我们如何输出到前台？
很简答，给msg变量赋值即可，
-
that.setData({
-
msg: res.data[
0].name,
-
msg02:res.data[
0].age,
-
})
完整代码：
WXML：微信没了（WX + HTML 去掉HT）
-
<view class="container">
-
{{msg}}
-
{{msg02}}
-
</view>
JS：
-
Page({
-
data: {
-
msg:
'',
-
msg02:
'',
-
},
-
onLoad:
function () {
-
var that =
this;
-
wx.request({
-
url:
'https://localhost:8443/forestry/test/hello',
-
method:
'POST',
-
data: {
-
},
-
header: {
-
'content-type':
'application/json'
-
},
-
success(res) {
-
console.log(res);
-
that.setData({
-
msg: res.data[
0].name,
-
msg02:res.data[
0].age,
-
})
-
}
-
})
-
},
-
})
接着如果要返回一大串数据的数组呢？
我们在后台增加一些数据
-
@Controller
-
@RequestMapping(
"/test")
-
public
class AppTestController {
-
-
@ResponseBody
-
@RequestMapping(value =
"/hello", method = { RequestMethod.POST, RequestMethod.GET })
-
public List<StudentDemo> getTenant(HttpServletResponse response) throws ServletException, IOException, IOException {
-
-
List<StudentDemo> ans =
new ArrayList<StudentDemo>();
-
ans.add(
new StudentDemo(
"zwz01",
18));
-
ans.add(
new StudentDemo(
"zwz02",
19));
-
ans.add(
new StudentDemo(
"zwz03",
20));
-
ans.add(
new StudentDemo(
"zwz04",
21));
-
ans.add(
new StudentDemo(
"zwz02",
22));
-
return ans;
-
}
-
}
附上完整代码：
WXHL：
-
<view wx:for="{{stu}}" wx:for-index="index" wx:for-item="item">
-
<view>姓名 ： {{item.name}}
</view>
-
<view>年龄 ： {{item.age}}
</view>
-
</view>
JS：
-
Page({
-
data: {
-
stu:[],
-
},
-
onLoad:
function () {
-
var that =
this;
-
wx.request({
-
url:
'https://localhost:8443/forestry/test/hello',
-
method:
'POST',
-
data: {
-
},
-
header: {
-
'content-type':
'application/json'
-
},
-
success(res) {
-
console.log(res);
-
that.setData({
-
stu:res.data
-
})
-
}
-
})
-
},
-
})
上方，我们定义了一个数组 stu[]，用来接受后台传过来的数据。
接着前台使用了for循环 遍历数组输出即可。
后续还会写其他方面的技术，比如获取手机号、地图定位、页面跳转传值等等，后面会不定期更新
转载：https://blog.csdn.net/qq_41464123/article/details/105049973