1. 程式人生 > >小程式基於SSM資料互動

小程式基於SSM資料互動

springmvc框架寫到現在終於牽扯到小程式了(所以別說我“不務正業”),對於一個應用程式來說,它的本質其實就是無數個對資料進行增刪改查的操作,這裡起到至關重要的就是資料,於是這篇帖子的目的就是實現小程式與後臺資料的互動。

小程式使用的是wx.request的api來提交和接收資料,最常見的就是接收後臺傳過來的json資料,並對其進行解析

先看執行結果:

這裡總結springmvc框架的三種轉json方法

後臺 前臺 返回前臺的json格式
物件/bean/實體類 json {“id”: 0,”username”: “”,”age”: 0}
List<實體類> json [{“id”:1,”username”:”2”,”age”:1},{“id”:2,”username”:”3”,”age”:2}]
Map<String,實體類> json {“success”:true,”detail”:[ ] }

按步驟,從頭開始來:

後臺

web.xml

 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  3. <servlet>
  4. <servlet-name>springmvc</servlet-name>
  5. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  6. <init-param>
  7. <param-name>contextConfigLocation</param-name>
  8. <param-value>classpath:config/ybajax.xml</param-value>
  9. </init-param>
  10. </servlet>
  11. <servlet-mapping>
  12. <servlet-name>springmvc</servlet-name>
  13. <url-pattern>*.mn</url-pattern>
  14. </servlet-mapping>
  15. <filter>
  16. <filter-name>CharacterEncodingFilter</filter-name>
  17. <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  18. <init-param>
  19. <param-name>encoding</param-name>
  20. <param-value>UTF-8</param-value>
  21. </init-param>
  22. </filter>
  23. <filter-mapping>
  24. <filter-name>CharacterEncodingFilter</filter-name>
  25. <url-pattern>/*</url-pattern>
  26. </filter-mapping>
  27. </web-app>

匯入springmvc所需要的jar包:http://pan.baidu.com/s/1jIK6sb8
匯入json所需要的jar包:http://pan.baidu.com/s/1i5bnggP

配置檔案 ybajax.xml

 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans
  3. xmlns="http://www.springframework.org/schema/beans"
  4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5. xmlns:mvc="http://www.springframework.org/schema/mvc"
  6. xmlns:context="http://www.springframework.org/schema/context"
  7. xsi:schemaLocation="http://www.springframework.org/schema/beans
  8. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  9. http://www.springframework.org/schema/mvc
  10. http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
  11. http://www.springframework.org/schema/context
  12. http://www.springframework.org/schema/context/spring-context-3.0.xsd">
  13. <context:component-scan base-package="action"/>
  14. <!-- 註冊介面卡 -->
  15. <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
  16. <property name="messageConverters">
  17. <list>
  18. <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
  19. </list>
  20. </property>
  21. </bean>
  22. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  23. <property name="prefix" value="/jsp/"/>
  24. <property name="suffix" value=".jsp"/>
  25. </bean>
  26. </beans>

注意json需要對應的介面卡類

實體類:User.java (實現bean用到)和 Bean.java(實現List、Map用到)

 
  1. package bean;
  2. public class User {
  3. private int id;
  4. private String username;
  5. private int age;
  6. public User() {}
  7. public User(int id, String username, int age) {
  8. this.id = id;
  9. this.username = username;
  10. this.age = age;
  11. }
  12. public int getId() {
  13. return id;
  14. }
  15. public void setId(int id) {
  16. this.id = id;
  17. }
  18. public String getUsername() {
  19. return username;
  20. }
  21. public void setUsername(String username) {
  22. this.username = username;
  23. }
  24. public int getAge() {
  25. return age;
  26. }
  27. public void setAge(int age) {
  28. this.age = age;
  29. }
  30. }
  31.  
  32. package bean;
  33. import java.util.ArrayList;
  34. import java.util.List;
  35. public class Bean {
  36. private List<User> listuser= new ArrayList<User>();
  37. private Bean(){}
  38. public List<User> getListuser() {
  39. return listuser;
  40. }
  41. public void setListuser(List<User> listuser) {
  42. this.listuser = listuser;
  43. }
  44. }

AjaxAction.java

 
  1. package action;
  2. import java.util.ArrayList;
  3. import java.util.HashMap;
  4. import java.util.List;
  5. import java.util.Map;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.ui.Model;
  8. import org.springframework.web.bind.annotation.RequestBody;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RequestMethod;
  11. import org.springframework.web.bind.annotation.ResponseBody;
  12. import bean.Bean;
  13. import bean.User;
  14. @Controller
  15. @RequestMapping("/user")
  16. public class YbAjaxAction{
  17. @RequestMapping(method=RequestMethod.POST,value="/bean2json")
  18. public @ResponseBody User bean2json(User user){
  19. return user;
  20. }
  21. @RequestMapping(method=RequestMethod.POST,value="/listbean2json")
  22. public @ResponseBody List<User> listbean2json(Bean bean){
  23. List<User> listuser=bean.getListuser();
  24. return listuser;
  25. }
  26. @RequestMapping(method=RequestMethod.POST,value="/mapbean2json")
  27. public @ResponseBody Map<String,Object> mapbean2json(Bean bean){
  28. List<User> listuser=bean.getListuser();
  29. Map<String, Object> mapuser=new HashMap<String, Object>();
  30. mapuser.put("success",true);
  31. mapuser.put("detail",listuser);
  32. return mapuser;
  33. }
  34. //表單提交
  35. @RequestMapping(method=RequestMethod.POST,value="/json2json")
  36. public @ResponseBody User bean2json(@RequestBody Map<String, String> map){
  37. String username="";
  38. int age=0;
  39. if(map.containsKey("username")){
  40. username=map.get("username");
  41. }
  42. if(map.containsKey("age")){
  43. age=Integer.parseInt(map.get("age"));
  44. }
  45. User user=new User(1,username,age);
  46. return user;
  47. }
  48. }

@ResponseBody: 該註解用於將Controller的方法返回的物件,通過適當的HttpMessageConverter轉換為指定格式後,寫入到Response物件的body資料區(用於返回json資料給頁面)
@RequestBody : 該註解用於讀取Request請求的body部分資料,使用系統預設配置的HttpMessageConverter進行解析,然後把相應的資料繫結到要返回的物件上;再把HttpMessageConverter返回的物件資料繫結到 controller中方法的引數上(用於接收前臺的資料)

前臺

index.wxml

 
  1. <view class="container">
  2. <button bindtap="bean_json" class="btn">bean_json</button>
  3. <button bindtap="listbean_json" class="btn">listbean_json</button>
  4. <button bindtap="mapbean_json" class="btn">mapbean_json</button>
  5. <view class="line"></view>
  6. <form bindsubmit="json_json">
  7. <view>
  8. <view >username</view>
  9. <input name="username" type="text" class="input_bg"/>
  10. </view>
  11. <view>
  12. <view >age</view>
  13. <input name="age" type="text" class="input_bg"/>
  14. </view>
  15. <button formType="submit" class="btn">json_json</button>
  16. </form>
  17. <text>{{show}}</text>
  18. </view>

index.wxss

 
  1. .container {
  2. height: 100%;
  3. display: flex;
  4. flex-direction: column;
  5. padding: 20rpx;
  6. }
  7. .input_bg{
  8. background-color: #F8F8F8;
  9. border-radius: 10rpx;
  10. }
  11. .btn{
  12. background-color: #A65353;
  13. margin: 20rpx;
  14. border-radius: 10rpx;
  15. color:#F8F8F8;
  16. }
  17. .line{
  18. height: 1rpx;
  19. width: 100%;
  20. background-color: #A65353;
  21. margin: 30rpx 0;
  22. }

index.js

 
  1. var app = getApp()
  2. Page({
  3. data: {
  4. show:""
  5. },
  6. bean_json: function() {
  7. var that=this;
  8. wx.request({
  9. url: 'http://localhost:8080/springMVC/user/bean2json.mn',
  10. data: {
  11. id:1,
  12. username:"toBeMN",
  13. age:28
  14. },
  15. method: 'POST',
  16. header: {
  17. "Content-Type":"application/x-www-form-urlencoded"
  18. },
  19. success: function(res){
  20. var show="物件轉json
  21. username:"+res.data.username+
  22. "
  23. age:"+res.data.age;
  24. that.setData({
  25. show:show
  26. })
  27. }
  28. })
  29. },
  30. listbean_json: function() {
  31. var that=this;
  32. wx.request({
  33. url: 'http://localhost:8080/springMVC/user/listbean2json.mn',
  34. data: {
  35. 'listuser[0].username':"Hello",
  36. 'listuser[0].age':18,
  37. 'listuser[1].username':"World",
  38. 'listuser[1].age':28
  39. },
  40. method: 'POST',
  41. header: {
  42. "Content-Type":"application/x-www-form-urlencoded"
  43. },
  44. success: function(res){
  45. var show="list<物件>轉json ";
  46. for(var i=0;i<res.data.length;i++){
  47. show+="
  48. username:"+res.data[i].username+
  49. "
  50. age:"+res.data[i].age;
  51. }
  52. that.setData({
  53. show:show
  54. })
  55. }
  56. })
  57. },
  58. mapbean_json: function() {
  59. var that=this;
  60. wx.request({
  61. url: 'http://localhost:8080/springMVC/user/mapbean2json.mn',
  62. data: {
  63. 'listuser[0].username':"Hello",
  64. 'listuser[0].age':48,
  65. 'listuser[1].username':"MINA",
  66. 'listuser[1].age':58
  67. },
  68. method: 'POST',
  69. header: {
  70. "Content-Type":"application/x-www-form-urlencoded"
  71. },
  72. success: function(res){
  73. var show="map<String,Obiect>轉json ";
  74. for(var i=0;i<res.data.detail.length;i++){
  75. show+="
  76. username:"+res.data.detail[i].username+
  77. "
  78. age:"+res.data.detail[i].age;
  79. }
  80. that.setData({
  81. show:show
  82. })
  83. }
  84. })
  85. },
  86. json_json: function(res) {
  87. var that=this;
  88. console.log(res.detail.value)
  89. wx.request({
  90. url: 'http://localhost:8080/springMVC/user/json2json.mn',
  91. data: res.detail.value,
  92. method: 'POST',
  93. header: {
  94. "Content-Type":"application/json"
  95. },
  96. success: function(res){
  97. var show="表單提交返回json
  98. username:"+res.data.username+
  99. "
  100. age:"+res.data.age;
  101. that.setData({
  102. show:show
  103. })
  104. }
  105. })
  106. },
  107. onLoad: function () {
  108. }
  109. })

所有的對映處理都交由框架,我們只需要設定對的屬性名、變數名,即可自動賦值
例如表單提交,這個應該是最常用的,因為小程式form提交後會將表單中的資料存入一個json串(如果表單中input的name沒有寫,則不會有資料,這是小程式內部對映的神奇之處),所以使用request請求的時候可以直接將json串傳到後臺解析,後臺處理完業務在將結果json傳回前臺,這就是一個互動的過程。

本文來自 碼農大聖 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/zalan01408980/article/details/79806794?utm_source=copy