微信小程序（二） 实现前后台交互 MVC

初次写项目，无法按捺住自己激动的心情。上次谈了谈写项目心得之后，许多小伙伴想要了解微信小程序的技术实现，我就开始我的写作，纯手打，希望你们喜欢。

另外说明一点，我想尽可能的详细讲解前后台交互的流程，希望如果是想直接拷代码拿来即用的小朋友，能够仔细看完。

声明：本文纯原创手打，且首发在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循环 遍历数组输出即可。

---

后续还会写其他方面的技术，比如获取手机号、地图定位、页面跳转传值等等，后面会不定期更新