美文网首页程序员
实现微信小程序与服务器(SSM)通信

实现微信小程序与服务器(SSM)通信

作者: 其实我很菜啊 | 来源:发表于2018-03-18 15:55 被阅读0次

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring、SpringMVC、MyBatis三个开源框架整合而成。其中spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。SpringMVC分离了控制器、模型对象、分派器以及处理程序对象的角色,这种分离让它们更容易进行定制。MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架。

    1、小程序与 web 的区别

    小程序是 C/S 结构即客户机和服务器结构。这种体系结构模式是以数据库服务器为中心、以客户机为网络基础、在信息系统软件支持下的两层结构模型。这种体系结构中,用户操作模块布置在客户机上,数据存储在服务器上的数据库中。客户机依靠服务器获得所需要的网络资源,而服务器为客户机提供网络必须的资源。
    web 是B/S(Browser/Server)结构,即浏览器服务器结构。它是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户工作界面通过浏览器来实现,极少部分事务逻辑在前端(Browser)实现,主要事务逻辑在服务器端(Server)实现,形成所谓三层结构。这样就大大简化了客户端电脑载荷,减轻了系统维护与升级的成本和工作量,降低了用户的总体成本。

    2、数据传输

    首先先看看微信向我们提供的网络请求 API 例子

    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
         x: '' ,
         y: ''
      },
      header: {
          'content-type': 'application/json' // 默认值
      },
      success: function(res) {
        console.log(res.data)
      }
    })
    

    好吧这熟悉的代码不就是在 web 常用的 Ajax 吗?为什么之前要明确小程序的软件结构,因为小程序(C/S)的数据传输是不涉及跨域传输的,而 web 是跨域的。所以这就会使 SSM 有所区别。

    • SSM 服务端代码
    web
        @ResponseBody
        @RequestMapping(value="/userLogin")
        public Object UserLogin(String callback,User user){
            
            UserSession=user;//将信息保留到session中
            
            List<User> test = userSerivce.existUser(user);
            
            JSONPObject jsonpObject = new JSONPObject(callback,test ) ;
                            
            return jsonpObject ;
        }
    
    小程序
        @ResponseBody
        @RequestMapping(value="/userLogin")
        public Object UserLogin(User user){
            
            UserSession=user;//将信息保留到session中
            
            List<User> test = userSerivce.existUser(user);
                                       
            return test;
        }
    

    web 涉及跨域传输的问题,且返回的不是 json 而是 jsonp。当前端使用 AJAX 发送请求时会自带一个 callback 请求头,小程序直接响应返回 json 就好不需要任何处理。

    小程序请求
    wx.request({
          url: 'http://192.168.6.239:8080/LabProject/admin/userLogin', //用户list
          data: {
            "uUsername": '2018',
            "uPassword": '2018',    
          },
          method: 'POST',
          dataType:'json',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data);
            for (var i = 0; i < res.data.length; i++) {
              var name = res.data[i]['uUsername'];
              console.log(name);            
            }
          }
        })
    
    response

    OK 成功获取服务器数据

    相关文章

      网友评论

        本文标题:实现微信小程序与服务器(SSM)通信

        本文链接:https://www.haomeiwen.com/subject/umljqftx.html