今天分享利用免费可商用的商城系统开源项目，快速搭建我们的微信商城小程序实战项目的第三次分享------商品后台管理+小程序展示，更多内容请查看前期分享，以及关注后续更多内容~
项目相关分享内容可通过下方链接直接查看了解：
一、商品后台
这里依旧还是基于BuildAdmin管理系统进行商品相关内容搭建，这次完全使用项目自带的可视化CRUD功能进行，不直接对数据库进行操作，方便快捷，几分钟就可以完成功能搭建。
1、商品分类
这里利用可视化CRUD功能创建商品分类信息表，同时快速生成商品分类的后台管理功能。
这里默认生成的路径是根据数据表名的下划线，在后台生成对应目录和文件的，如果你需要调整生成路径，可以点击高级管理修改生成路径即可。
生成成功后，后台管理系统就拥有了完整的商品分类管理功能了，可以说是0代码实现后台管理系统的功能，还是非常爽的~
当然如果在实际的商用项目开发中，建议还是优化一下，对功能层级做数据联动，同时在前端集成项目中的七牛云模块，在前端完成文件上传，这样能够减轻服务器压力。
2、商品信息
这里同样利用项目的可视化CRUD功能创建商品信息管理功能。
至此，简单的微信商城小程序后台商品管理功能就搭建好了，是不是非常便捷~
二、前端API开发
由于我们项目是前后端分离的，所以要支持前端能够正常访问我们的数据，还得开发相关的api接口，而利用BuildAdmin框架，API开发也非常的简单，几行代码就可以搞定了，具体如下：
商品分类：
php
<?php
namespace app\api\controller;
use app\api\model\ProductCategory;
use app\common\controller\Frontend;
/**
* 商品信息分类接口
*/
class MiniProductCategory extends Frontend{
protected array $noNeedLogin = ['index'];
/**
* 查询所有可用商品分类信息
*
* @return void
*/
function index(){
$data = ProductCategory::where("status", 1) -> select();
if (!$data || empty($data) || count($data) == 0){
$this->error('暂无数据', [], 0);
return;
}
// 处理图片访问路径，使用七牛云连接
foreach ($data as $item) {
$item->category_img = 自己的七牛云domain . $item->category_img;
}
$this->success('查询成功', $data, 200);
}
}商品信息：
php
<?php
namespace app\api\controller;
use app\api\model\Products;
use app\common\controller\Frontend;
/**
* 商品信息接口
*/
class MiniProduct extends Frontend{
protected array $noNeedLogin = ['index'];
function index(){
if (!$this->request->isGet()) $this->error(__('Request error'));
$categoryId = $this->request->get('categoryId', -1);
$cond = [
'category_id' => $categoryId,
'status' => 1,
];
$data = Products::where($cond) -> select();
if (!$data || empty($data) || count($data) == 0){
$this->error('暂无数据', [], 0);
return;
}
// 处理图片访问路径，使用七牛云连接
foreach ($data as $item) {
$item->cover_img = 自己的七牛云domai . $item->cover_img;
}
$this->success('查询成功', $data, 200);
}
}三、小程序端展示
小程序我们依旧是基于前期分享的wxapp-mall这个项目进行的，需要注意的是这个项目它针对商品分类设计了二级分类的，也就是先选择商品一级分类 -》再选择二级分类 -》在进入商品列表 -》 最后是商品详情。
而目前我这边只有一级分类，所以针对这个ui展示做了调整，直接在分类中展示了商品类型以及商品列表，具体如下所示：
小程序端主要修改文件路径：page/component/category
具体分类展示布局代码如下：
xml
<view class="main">
<view class="categroy-left">
<view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'on':''}}">{{item.name}}</view>
</view>
<scroll-view class="categroy-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
<block>
<view id="{{item.id}}" class="cate-box">
<view class="cate-banner">
<image src="{{currentCategory.category_img}}"></image>
</view>
<view class="cate-title">
<text>{{currentCategory.name}}</text>
</view>
<view class="product">
<!-- 这里取消了原本的二级分类展示 -->
<!-- <view class="product-list" wx:for="{{detail}}" wx:key="index" wx:for-item="val">
<navigator url="../list/list">
<image src="{{val.cover_img}}"></image>
<view class="classname"><text>{{val.name}}</text></view>
</navigator>
</view> -->
<!-- 这里使用grid-view布局了商品列表 -->
<view class="list-box">
<grid-view class="grid-view" column-count="2" item-count="{{detail.size}}" binditemrender="onItemRender">
<view class="newest-list" wx:for="{{detail}}" wx:key="index" wx:for-item="item">
<navigator url="../details/details">
<image src="{{item.cover_img}}"></image>
<view class="newest-text"><text>{{item.name}} 500g</text></view>
<view class="newest-text"><text>￥{{item.price}}</text></view>
</navigator>
</view>
<!-- 这里的内容会被onItemRender方法动态渲染 -->
</grid-view>
</view>
</view>
</view>
</block>
</scroll-view>
</view>JS相关代码如下，这里只做了简单的流程拉通，一些接口请求的交互和异常case在实际项目开发中需要完善：
php
const constants = require("../../constants/Constants");
Page({
data: {
category: [
{name:'果味',id:'guowei'}
],
currentCategory:{
category_img:'',
name:''
},
detail:[],
curIndex: 0,
isScroll: true,
toView: 'guowei'
},
onLoad(){
var self = this;
wx.request({
url: constants.URL_GET_CATEGORY,
success(res){
self.setData({
category : res.data.data,
currentCategory: res.data.data[0]
})
self.getProduct(res.data.data[0].id, 0)
}
});
},
// 根据分类id获取商品信息
getProduct(id, index){
var self = this;
wx.request({
url: constants.URL_GET_PRODUCT + "&categoryId=" + id,
success(res){
var result = []
res.data.data.forEach(item => {
result.push(item)
});
self.setData({
detail: result,
currentCategory: self.data.category[index],
curIndex: index
})
console.log("result>>", result)
}
})
},
switchTab(e){
const self = this;
console.log("e>", e)
console.log(e.target.dataset.id)
self.getProduct(e.target.dataset.id, e.target.dataset.index)
}
})这样点击商品就可以直接进入商品详情页了。
至此，本期的免费可商用的微信商城系统快速搭建实战项目的分享就到这里了，如有问题，欢迎留言、评论、私信交流~
本文首发于微信公众号【一念杂记】，欢迎关注第一时间获取更多分享：