微信小程序 侧栏分类三：数据从后台查询

一、关于后台

    1、总体结构分析

           1.entity:实体类

                1.商品类(cateItems)     2.小商品类(children)  

                    3.具体某一个商品类(水果：Fruits,干果：DryFruits,蔬菜：Vegetables,海鲜：seafood)

                    [注意：具体某一个商品类需要继承小商品类]

           2.servlet类

                1.cateItemsServlet

    2、具体代码

package eneity; // 1.商品类(cateItems) public class cateItems { private int cate_id;                   // 品种id private String cate_name;       // 品种名称 (水果,干果,蔬菜...) private children children[];       // 此品种下的小商品                 // 自行添加 get/set    方法        // 自行添加 有参/无参 构造方法        ..... }

package eneity; // 2.小商品类(children) public class children { private int child_id;      // 小商品的id private String name;   // 小商品的名字,如(樱桃,芒果,葡萄) private String image;  // 小商品对应的图片                 // 自行添加 get/set 方法        // 自行添加 有参/无参 构造方法 }

package eneity; // 3.1. 具体某个商品：水果类 public class Fruits  extends children{ public Fruits(int child_id, String name, String image) { super(child_id, name, image); } }

package eneity; // 3.2.具体某个商品：干果类 public class DryFruits extends children { public DryFruits(int child_id, String name, String image) { super(child_id, name, image); } }

package eneity; // 3.3 具体某个商品：蔬菜类 public class Vegetables extends children { public Vegetables(int child_id, String name, String image) { super(child_id, name, image); } }

package eneity; // 3.4 具体某个商品：海鲜类 public class seafood  extends children{ public seafood(int child_id, String name, String image) { super(child_id, name, image); // TODO Auto-generated constructor stub } }

package servlet; import java.io.IOException; import java.io.Writer; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import eneity.DryFruits; import eneity.Fruits; import eneity.Vegetables; import eneity.cateItems; import eneity.children; import eneity.seafood; public class cateItemsServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @SuppressWarnings("null") @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); /* 设置响应头允许ajax跨域访问 */ resp.setHeader("Access-Control-Allow-Origin", "*"); /* 星号表示所有的异域请求都可以接受， */ resp.setHeader("Access-Control-Allow-Methods", "GET,POST"); Writer out = resp.getWriter(); List<cateItems> list = new ArrayList<cateItems>(); children[] Fruits = new children[5]; Fruits[0] = new Fruits(1, "猕猴桃", "../images/mihoutao.png"); Fruits[1] = new Fruits(2, "龙眼", "../images/longyan.png"); Fruits[2] = new Fruits(3, "橘子", "../images/juzi.png"); Fruits[3] = new Fruits(4, "火龙果", "../images/huolongguo.png"); Fruits[4] = new Fruits(5, "草莓", "../images/caomei.png"); children[] DryFruits = new DryFruits[3]; DryFruits[0] = new DryFruits(1, "夏威夷果", "../images/xiaweiyi.png"); DryFruits[1] = new DryFruits(2, "开心果", "../images/kaixin.png"); DryFruits[2] = new DryFruits(3, "碧根果", "../images/bigen.png"); children[] Vegetables = new Vegetables[3]; Vegetables[0] = new Vegetables(1, "花椰菜", "../images/huaye.png"); Vegetables[1] = new Vegetables(2, "生菜", "../images/shengcai.png"); Vegetables[2] = new Vegetables(3, "番茄", "../images/fanqie.png"); seafood[] seafoods = null; cateItems c1 = new cateItems(1, "水果", Fruits); cateItems c2 = new cateItems(2, "干果", DryFruits); cateItems c3 = new cateItems(3, "蔬菜", Vegetables); cateItems c4 = new cateItems(4, "海鲜", seafoods); list.add(c1); list.add(c2); list.add(c3); list.add(c4); JSONArray jsonArray = JSONArray.fromObject(list); System.out.println(jsonArray); out.write(JSONArray.fromObject(list).toString()); out.flush(); } }

二、关于后台

   1、wxml代码

<!--主盒子--> < view class= "container"> <!-- 左侧栏开始 --> < view class= 'nav_left'> < block wx:for= "{{cateItems}}" wx:key= "id"> < view class= "nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap= "switchRightTab" data-id= "{{item.cate_id}}"> {{item.cate_name}} </ view > </ block > </ view > <!-- 左侧栏结束 --> <!-- 右侧栏开始 --> < view class= "nav_right"> < view wx:if= "{{curNav==curIndex}}"> < block wx:for= "{{cateItems[curIndex-1].children}}" wx:key= "id"> < view class= "nav_right_items"> < image src= "{{item.image}}"></ image > < text >{{item.name}} </ text > </ view > </ block > </ view > </ view > <!-- 右侧栏结束 --> </ view >

2、js代码

// pages/stock/stock_main.js Page({ /* 页面的初始数据 */ data: { curNav: 1, curIndex: 1 /* 此变量用于判断该显示某个子item */ }, /* 把点击到的某一项 设为当前curNav */ switchRightTab: function (e) { let id = e.target.dataset.id; console.log(id); this.setData({ curNav: id, curIndex: id }) }, onLoad: function (options) { var that = this; console.log( 'oload....'); wx.request({ url: 'http://localhost:8080/Min_Chengxu/Communications', data: { }, method: 'GET', header: { 'content-type': 'application/json' // 默认值 }, success: function (res) { console.log(res.data); that.setData({ cateItems: res.data, }) }, fail: function (res) { console.log( ".....fail....."); } }) } })

3、wxss代码

/* 1. 设置整个页面的背景颜色 */ page{ background: #f5f5f5; /* 避免左侧Item不够时 被白色覆盖*/ } /* 2.主盒子 */ .container { width: 100%; /* 宽度占屏幕的100% */ height: 100%; /* 高度占屏幕的100% */ background-color: #fff; /* 背景颜色 */ } /* 3.左盒子*/ /* 3.1. 左侧栏主盒子总体设置 */ .nav_left{ position: absolute; /* 使用绝对定位 */ top: 0px; /* 距离上边距：0px */ left: 0px; /* 距离左边距：0px */ width: 25%; /* 每个item所占的宽度 */ background: #f5f5f5; /* 主盒子设置背景色为灰色 */ text-align: center; /* 文字居中显示 */ } /* 3.2. 左侧栏的每个item */ .nav_left .nav_left_items{ height: 40px; /* 每个item高40px*/ padding: 6px 0; /* 上内边距和下内边距是 6px[增加高度] 右内边距和左内边距是 0px*/ border-bottom: 1px solid #dedede; /* 设置下边线 */ font-size: 14px; /* 设置文字大小：14px */ } /* 3.3. 左侧栏list的item被选中时*/ .nav_left .nav_left_items.active{ background: #fff; /* 背景色变成白色 */ color: #3385ff; /* 字体编程蓝色 */ border-left: 3px solid #3385ff; /* 设置边框的宽度以及颜色 */ } /* 4.右盒子 */ /* 4.1. 右侧栏主盒子总体设置 */ .nav_right{ position: absolute; /* 使用绝对定位 */ top: 0; /* 距离上边距：0px */ left: 80px; /* 距离左边距：80px */ width: 75%; /* 右侧主盒子所占宽度 */ height: 600px; /* 右侧主盒子所占高度 */ padding: 10px; /* 所有 4 个内边距都是 10px*/ box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ background: #fff; /* 右侧主盒子背景颜色 */ } /* 4.2. 右侧栏中的每个item */ .nav_right .nav_right_items{ float: left; /* 浮动向左 */ width: 33.33%; /* 每个item设置宽度是33.33% */ height: 120px; /* 每个item设置高度是120px */ text-align: center; /* 设置图片下方的提示文字居中显示 */ } /* 4.3. 右侧栏中的每个item的图样式设置 */ .nav_right .nav_right_items image{ width: 60px; /* 给图片设置宽度 */ height: 60px; /* 给图片设置高度 */ margin-top: 15px; /* 图片距离上边距15px */ border-radius: 40%; /* 给图片添加圆角边框 */ }