SSM+小程序知识点，防入坑！！！

1.最近在自学小程序，发现有很多的小坑，对于有一定编程经验的
小伙伴来说应该是容易上手的
2.接下来就以—水果商城的项目为例来讲讲
后台基于JAVA SSM框架(根据配置文件,dao/mapper包中的接口与xml文件一一对应)+小程序
话不多说——直接上代码

前台

1.index.wxml

<!--index.wxml-->
<!-- 主盒子 -->
<view class="maxdiv"><!-- 左盒子 数据json动态显示--><view class="leftdiv"><!-- 根据每个类型(type)的数组长度循环 --><block wx:for="{{typeValue}}" wx:key="id"><!-- 改变点击后的样式 拼接上selected--><view class="leftdiv_items {{selectedNum == item.typeId ? 'selected' : ''}}" bindtap="dianjiLift" data-id="{{item.typeId }}">{{item.typeNAme}}</view></block><!-- 水果 (静态数据)/*若js中存储的变量值不为1时 class名字则不拼接selected*/ 三元运算符<view class="leftdiv_items {{selectedNum == 1 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="1">水果</view>干果<view class="leftdiv_items {{selectedNum == 2 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="2">干果</view>蔬菜<view class="leftdiv_items {{selectedNum == 3 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="3">蔬菜</view>海鲜<view class="leftdiv_items {{selectedNum == 4 ? 'selected' : ''}}" bindtap="dianjiLift" data-id="4">海鲜</view>    --></view><!-- 右盒子 数据json动态显示--><view class="rightdiv"><!-- wx:key="id"在循环的时候加上， --><view wx:if="{{selectedNum == typeNum}}"><!-- 根据每个类型的children数组长度循环 --><block wx:for="{{typeValue[typeNum-1].children}}" wx:key="id"><view class="rightdiv_item" ><image src="{{item.goods_url}}"></image><text>{{item.goods_name}}</text></view></block></view><!-- 水果商品展示区<view wx:if="{{selectedNum == 1}}"><view class="rightdiv_item"><image src="../../images/shuiguo/橘子.png"></image><text>橘子</text></view><view class="rightdiv_item"><image src="../../images/shuiguo/草莓.png"></image><text>草莓</text></view><view class="rightdiv_item"><image src="../../images/shuiguo/猕猴桃.png"></image><text>猕猴桃</text></view> </view>干果商品展示区<view wx:if="{{selectedNum == 2}}"><view class="rightdiv_item"><image src="../../images/ganguo/开心果.png"></image><text>开心果</text></view><view class="rightdiv_item"><image src="../../images/ganguo/松子.png"></image><text>松子</text></view><view class="rightdiv_item"><image src="../../images/ganguo/蓝莓干.png"></image><text>蓝莓干</text></view></view>蔬菜商品展示区<view wx:if="{{selectedNum == 3}}"><view class="rightdiv_item"><image src="../../images/shucai/白菜.png"></image><text>白菜</text></view><view class="rightdiv_item"><image src="../../images/shucai/胡萝卜.png"></image><text>胡萝卜</text></view><view class="rightdiv_item"><image src="../../images/shucai/藕.png"></image><text>藕</text></view></view>海鲜商品展示区<view wx:if="{{selectedNum == 4}}"><view class="rightdiv_item"><image src="../../images/haixian/螃蟹.png"></image><text>螃蟹</text></view><view class="rightdiv_item"><image src="../../images/haixian/龙虾.png"></image><text>龙虾</text></view></view>   --></view></view>

2.index.js

// let typeValue1 =  [{
//   typeid:"1",
//   typename:"水果1",
//   children:[{
//      childid:"1",
//      name:"橘子",
//      url:"../../images/shuiguo/橘子.png"
//   },{
//     childid:"2",
//     name:"草莓",
//     url:"../../images/shuiguo/草莓.png"
//   },{
//     childid:"3",
//     name:"猕猴桃",
//     url:"../../images/shuiguo/猕猴桃.png"
//   }]
// },{
//   typeid:"2",
//   typename:"干果1",
//   children:[{
//     childid:"1",
//     name:"开心果",
//     url:"../../images/ganguo/开心果.png"
//   },{
//     childid:"2",
//     name:"松子",
//     url:"../../images/ganguo/松子.png"
//   },{
//     childid:"3",
//     name:"蓝莓干",
//     url:"../../images/ganguo/蓝莓干.png"
//   }]
// },{
//   typeid:"3",
//   typename:"蔬菜1",
//   children:[{
//     childid:"1",
//     name:"白菜",
//     url:"../../images/shucai/白菜.png"
//   },{
//     childid:"2",
//     name:"胡萝卜",
//     url:"../../images/shucai/胡萝卜.png"
//   },{
//     childid:"3",
//     name:"藕",
//     url:"../../images/shucai/藕.png"
//   }]
// },{
//   typeid:"4",
//   typename:"海鲜",
//   children:[{
//     childid:"1",
//     name:"螃蟹",
//     url:"../../images/haixian/螃蟹.png"
//   },{
//     childid:"1",
//     name:"龙虾",
//     url:"../../images/haixian/龙虾.png"
//   }]
// }]let typeValue = [];
// let goodsValue = [];
Page({data:{selectedNum:1,typeNum:1,typeValue:typeValue// goodsValue:goodsValue},dianjiLift:function(num){let id = num.target.dataset.id;console.log(id);this.setData({// 修改当前点击item的num值selectedNum:id,typeNum:id});},// 种类方法getTypes:function(){// 小程序在有请求的方法中不能使用this，request有自带的this，相冲突var that = this;// 向后台接口发送请求wx.request({url: 'http://localhost:8080/mini_01/getValues',data:{},method:'GET',header: {'content-type': 'application/json' // 默认值},success:function(res){let values = res.data;console.log(values);// console.log(values[1].typeNAme);that.setData({// 从后台获得的数据，不需在data中定义typeValuetypeValue:res.data});}});},// 商品信息方法// getGoods:function(){//   // 获得商品信息// // 小程序方法中不能使用this//       var that = this;//       // 向后台接口发送请求//       wx.request({//         url: 'http://localhost:8080/mini_01/selectGoods',//         method:'POST',//         header: {//           'content-type': 'application/json' // 默认值//         },//         success:function(res){//           let value2 = res.data;//           console.log(value2);//           that.setData({//             goodsValue : res.data//           });//         }//       });// },// 生命周期函数-监听页面加载onLoad:function(options){//加载类型方法(将两个网络请求的方法在此处加载，项目启动便调用后台接口)//可以使用thisthis.getTypes()// this.getGoods();}})

3.index.wxss

page{background-color: aquamarine;
}
/* 主盒子 */
.maxdiv{/*宽度占满屏幕*/width: 100%;height: 100%;background-color: #fff;
}
/*左盒子*/
.leftdiv{/*绝对定位*/position: absolute;top: 0px;left: 0px;width: 25%;/*左盒子颜色*/background-color:rgb(173, 101, 101);/*文字居中显示*/text-align: center;
}
/*左盒子中每个items*/
.leftdiv_items{height: 40px;/*上下左右内边距(上下，左右)*/padding: 6px 0px; /*每个item下边框*/border-bottom: 1px solid black;/*设置文字大小*/font-size: 14px;
}
/*设置选中的item的样式*/
.leftdiv .leftdiv_items.selected{background-color: gray;color: blue;border-right: 3px solid blue;
}
/*1.右侧大盒子整体样式*/
.rightdiv{/* 绝对定位 */position: absolute;top: 0px;left: 80px;width: 75%;height: 600px;padding: 10px;/* 在盒子范围内绘制 */box-sizing: border-box;background-color: white;
}
/* 2.右侧每个item的(商品)的样式设置 */
.rightdiv .rightdiv_item{/* 浮动向左 */float: left;width: 33%;height: 120px;text-align: center;
}
/* 3.右侧每个item中图片的样式 */
.rightdiv .rightdiv_item image{width: 60px;height: 60px;/* 设置图片边距 */margin-top: 12px;/* 圆角边框 */border-radius: 40%;
}

后台

package cn.hnkjxy.controller;import cn.hnkjxy.po.Goods;
import cn.hnkjxy.po.Types;
import cn.hnkjxy.service.GoodsService;
import cn.hnkjxy.service.TypesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;//查询所有商品及分类信息
//整合为一段json
@Controller
public class miniController {
//    自动装配@Autowiredprivate GoodsService goodsService;@Autowiredprivate TypesService typesService;//设置浏览器响应数据的乱码问题@RequestMapping(value = "/getValues",produces="text/plain;charset=utf-8")@ResponseBodypublic String getValues(HttpServletResponse resp){
//        设置跨域问题resp.setHeader("Access-Control-Allow-Origin","*");
//        查询商品信息List<Goods> goods = goodsService.findAll();
//        查询分类信息List<Types> types = typesService.findAllTypes();System.out.println(goods);System.out.println(types);System.out.println("=====================================");// ======如何整合数据，整合为json数据String json = "[";int index = 0;for (int i = 0; i < types.size(); i++) {System.out.println(i+"i===");json+="{";json+="\"typeId\":";json+=types.get(i).getTypeId()+",";json+="\"typeNAme\":";json+="\""+types.get(i).getTypeNAme()+"\""+",";json+="\"children\":[";for (int j = 0; j < goods.size(); j++) {System.out.println(j+"j===");if(goods.get(j).getTypeid()==(i+1)){System.out.println("index"+index);if(index==0){index=1;}else{json+=",";}json+="{";json+="\"goods_id\":";json+=goods.get(j).getGoods_id()+",";json+="\"goods_name\":";json+="\""+goods.get(j).getGoods_name()+"\""+",";json+="\"goods_url\":";json+="\""+goods.get(j).getGoods_url()+"\"";json+="}";}}index=0;json+="]}";if(i!=types.size()-1){json+=",";}}json+="]";System.out.println(json);return json;}
}

注意1：在小程序for循环时，注意要使用循环的唯一标识
，可以是数组的index或id值，item作为循环的变量，
指代的是数组

 <block wx:for="{{typeValue[typeNum-1].children}}" wx:key="id"><view class="rightdiv_item" ><image src="{{item.goods_url}}"></image><text>{{item.goods_name}}</text></view>

注意2：
****1.微信小程序向后台进行请求时，this是不能使用的，request请求中存在自己的this去指代变量，有冲突问题，所有将this赋值给that，在小程序中用that代替this执行（在自定义的方法中this可以使用，在有网络请求时不可用）
2. that.setData({
// 从后台获得的数据，不需在data中定义typeValue
typeValue:res.data
});
**
*2.setData是将data中定义的变量的值重新赋予后台传入的值
3.setData中接收数据的变量不需在DATA中定义( typeValue)，可直接在xml中使用

 getTypes:function(){// 小程序在有请求的方法中不能使用this，request有自带的this，相冲突var that = this;// 向后台接口发送请求wx.request({url: 'http://localhost:8080/mini_01/getValues',data:{},method:'GET',header: {'content-type': 'application/json' // 默认值},success:function(res){let values = res.data;console.log(values);// console.log(values[1].typeNAme);that.setData({// 从后台获得的数据，不需在data中定义typeValuetypeValue:res.data});}});},

SSM+小程序知识点，防入坑！！！相关推荐

微信小程序知识点总汇
微信小程序知识点总汇文件结构:最上层app ->多个page ->多个组件(内置组件/自定义组件) app: app.js:创建app实例代码 [app:实例对象 app.json:程序 ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
开发微信小程序中遇到的坑及解决方法
开发微信小程序中遇到的坑及解决方法参考文章: (1)开发微信小程序中遇到的坑及解决方法 (2)https://www.cnblogs.com/feiye512/p/6070052.html ...
漫画 | 如何让程序员顺利入坑？
张大胖觉得差不多了,拿去给经理看. 张大胖按照经理的意见进行了修改, 新的JD很快出炉让张大胖没想到的是,JD发出去,简历如同雪片一样飞来. 一周后,公司新人小李入职了,他打开了公司的项目源代码更 ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
小程序SetTimeOut的一个坑
小程序SetTimeOut的一个坑先看代码 onReady: function () {console.log("加载完成");setTimeout(function () {t ...
会员卡券领取小程序_微信小程序会员卡开发跳坑
微信小程序会员卡开发跳坑最近看好多人问,小程序里面怎么显示会员卡,然客户领取后,去对应店铺核销. 本身以为会很简单,最后费了好大心思才找到对应文档. 会员卡是见过微信最差的文档了,没说明参数从哪里获 ...
云开发小程序倒计时防刷新功能及签到功能
小程序倒计时防刷新功能这是一个不美好的事情,我使用的是vant的倒计时,不管什么倒计时,刷新后倒计时就会重新开始.从晚上查到下班,从回家查到11点,结果没找到,没办法了自己写,结果10min写出来了 ...
小程序云开发出坑系列（一）
小程序云开发出坑系列(一)-初识小程序开发一.什么是小程序? 1.1 小程序简介是一种不需要下载安装即可使用的应用,实现应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. ...

SSM+小程序知识点，防入坑！！！

前台

后台

SSM+小程序知识点，防入坑！！！相关推荐

最新文章

热门文章