## 小程序+ssm框架传值到后台(带有地址选择栏)

最新推荐文章于 2023-02-15 21:37:43 发布

CodeArtist.Han

最新推荐文章于 2023-02-15 21:37:43 发布

阅读量469

点赞数 1

分类专栏：小程序文章标签： ssm+小程序

本文链接：https://blog.csdn.net/weixin_43496408/article/details/87920983

版权

小程序专栏收录该内容

0 篇文章 0 订阅

订阅专栏

小程序+ssm框架传值到后台(带有地址选择栏)

正文（纯干货，不夹杂任何多于情感）：
1.shopping.wxml页面（页面相当丑，后期自己改）

<!--pages/shopping/shopping.wxml--><view style='background-color: ;width:90%;margin-left:5%;margin-right:5%;margin-top:5%'>  <view>  <view class='title'>XXX</view>    <view class='one'>      <form bindsubmit='submit'>    <input style='width:70%;margin-left:15%;'  placeholder='姓名' name='username' class='cname' bindinput='usernameinput'></input>    <input style='width:70%;margin-left:15%;' placeholder='联系方式' id='userphone' name   ='userphone' class='cname' bindinput='userphoneinput'></input>    <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{       {customItem}}" range='array' name='address'>    <view style='width:70%;margin-left:17%;background-color:#1571FA;border-radius:15px' class="picker" id='address'  bindinput='addressinput'>      {{region[0]}}，{{region[1]}}，{{region[2]}}    </view>  </picker>    <input style='width:70%;margin-left:15%;' placeholder='详细地址' id='xaddress' class='cname' name= 'xaddress' bindinput='xaddressinput'></input>    <button style='width:70%;margin-left:15%;margin-top:15px;'>价格：￥998</button>    <button style='width:70%;margin-left:15%;'  class='button'  id='submit' bindtap='sure'    form-type='submit' >确定</button>    </form>    </view>  </view></view>

2.shopping.js

// pages/shopping/shopping.js
Page({  /**   * 页面的初始数据   */  data: {    region: ['陕西省', '西安市', 'XX区'],    customItem: '***',
  },  /*用户名获取*/  usernameinput: function (e) {    this.setData({      userName: e.detail.value    })  },  /*联系方式获取 */  userphoneinput: function (e) {    this.setData({      userPhone: e.detail.value    })  },  /*三级地址获取*/  addressinput: function (e) {    this.setData({      userAddress: e.detail.value    })  },  /*详细信息获取*/  xaddressinput: function (e) {    this.setData({      xuserAddress: e.detail.value    })  },
  /*"<========================================>" */
  //打印用户信息  submit: function (e) {    //console.log("用户名：" + this.data.userName + "联系方式：" + this.data.userPhone + "三级地址" + this.data.userAddress + "详细地址" + this.data.xuserAddress);      var userName = e.detail.value.username;      var userPhone = e.detail.value.userphone;    var userAddress = e.detail.value.address;      var xuserAddress = e.detail.value.xaddress;       wx.request({        url: 'http://127.0.0.1:8082/data/user',        method :"POST",        data : {          userName : userName,          userPhone : userPhone,          userAddress : userAddress,          xuserAddress : xuserAddress        },        header:{          'content-type':'application/x-www-form-urlencoded'        },        dataType :'json',        success:function(res){          console.log(res+"进入后台=============================>")        }                      })     },bindRegionChange: function (e) {    console.log('picker发送选择改变，携带值为', e.detail.value)    this.setData({      region: e.detail.value    })
  }

3.shopping.wxss

/* pages/shopping/shopping.wxss */.cname{  border:2px solid #1571Fa  }#ad{  margin-top: 10px}.button{  margin-bottom: 15px;  background-color: #1571Fa;  color:aliceblue}#address{  margin-top: 30px}#userphone{  margin-top: 15px}#xaddress{  margin-top: 15px}#submit{  margin-top: 110px}#name{  margin-top: 30px}page{  background-color: #f8d714}.title{
  width: 400rpx;
  height: 50rpx;  margin-left: 30%
}

ssm后台
这里只写交互层controller(我是跨域的)

package com.redeemer.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.redeemer.pojo.User;
import com.redeemer.service.UserService;
import jdk.nashorn.internal.ir.RuntimeNode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@Controller
@RestController
@RequestMapping("/data")
public class UserController {
    public void setUserService(UserService userService) {
        this.userService = userService;
    }
    @Autowired
    private UserService userService;
    @RequestMapping(value = "/user",method = RequestMethod.POST)
    // @ResponseBody
    public String  inserUser(  User user, HttpServletResponse response) throws ServletException,IOException {
        /*解决跨域*/
        response.setContentType("application/json");
        /*允许ajax访问*/
        response.setHeader("Access-Control-Allow-Origin", "*");
        /*接受所有请求*/
        response.setHeader("Access-Control-Allow-Methods","GET,POST");
        System.out.println("=================>小程序已进入交互状态,获取的值为：username："+user.getUserName()+"userphone:"+user.getUserPhone()
        +"useraddress"+user.getUserAddress()+"xuseraddress"+user.getXuserAddress());
        userService.insertUser(user);
        /*boolean bool = false;
        try{
            userService.insertUser(user);

            bool = true;
        }catch (Exception e){
            e.printStackTrace();
        }
        if (bool){
            maps.put("msg","ok");
        }else {
            maps.put("mag","no");
        }*/
        Map<String,Object> maps = new HashMap<String,Object>();
        String result = JSONObject.toJSONString(maps);
        System.out.println("信息已插入数据库userregistered=======================>");
        return result;

    }
}

显示插入数据库成功
结束
敲代码这麽久该释放你的眼睛了
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190225172808349.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ5NjQwOA==,size_16,color_FFFFFF,t_70