这一章将会实现后台添加商品并在页面显示商品列表
首先创建Commodi的model文件，因为在这个功能里使用了模型查询新建数据等功能。
代码如下
~~~
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/6/22
* Time: 13:30
*/
namespace app\admin\model;
use think\Model;
class Commodi extends Model{
protected $name = 'shopsp';
}
~~~
接下来到数据库，我新建了一个shopsp表和一个详情图片的表，并做了一些常用的索引。
CREATE TABLE `wemall_shopsp` (
`id` int(25) NOT NULL AUTO_INCREMENT,
`name` text COMMENT '商品名称',
`title` text COMMENT '商品标题',
`paitaitb` text COMMENT '平台图标',
`imga` text COMMENT '首页图片路径',
`imgb` text,
`imgc` text COMMENT '首页图片c',
`jiage` text COMMENT '价格',
`sfself` int(25) DEFAULT NULL COMMENT '是否平台自营',
`stock` int(25) DEFAULT NULL COMMENT '库存',
`volume` int(25) DEFAULT NULL COMMENT '销量',
`guige` text COMMENT '规格',
`taocana` text COMMENT '套餐a',
`taocanb` text COMMENT '套餐b',
`taocanc` text COMMENT '套餐c',
`evaluate` text COMMENT '评价',
`discount` text COMMENT '优惠',
`xiangqwz` text NOT NULL COMMENT '详情文字',
`details` text COMMENT '详情图片',
`ximgid` int(25) DEFAULT NULL COMMENT '详情图片id',
`spclass` int(25) DEFAULT NULL COMMENT '商品分类',
`addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;
shangpp表的代码：
CREATE TABLE `wemall_shangpp` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`shopid` int(20) NOT NULL COMMENT '商品id',
`xqimage` text COMMENT '详情图片',
`atime` varchar(50) NOT NULL,
PRIMARY KEY (`id`),
KEY `shopid` (`shopid`),
KEY `shoptime` (`atime`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;
有一个要说明一下，添加索引的时候数据长度不能太大，过大会导致添加索引出错。
控制器的Commodity.php文件代码，这个是关键，使用foreach来实现多文件上传并保存在数据库里
~~~
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/6/18
* Time: 15:54
*/
namespace app\admin\controller;
use think\Controller;
use think\Db;
use think\Request;
use app\admin\model\Commodi;
class Commodity extends Controller{
public function shopadd(Request $request){
$shopinfo = Db::name('shopsp');
$namead = input('post.namead');
$jiagead = input('post.jiagead');
$igamead = input('post.igamead');
$kucunad = input('post.kucunad');
$xiaolad = input('post.xiaolad');
$guigead = input('post.guigead');
$taocada = input('post.taocada');
$taocadb = input('post.taocadb');
$taocadc = input('post.taocadc');
$fenleiad = input('post.fenleiad');
$xiangqad = input('post.xiangqad');
//首页图片文件接收
$files = $request->file('imagead');
$item = [];
// 循环数组保存图片文件
foreach ($files as $key => $file) {
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'ptshop');
if ($info) {
// $item[] = $info->getRealPath();
$item[$key] = $info->getSaveName();
$str[$key] = "/uploads/ptshop/" . $item[$key];
//字符串替换函数，将路径的\\替换成/
$strd[$key] = strtr($str[$key], '\\', '/');
} else {
$this->error($file->getError());
}
}
$image['name'] = $namead;
$image['title'] = $namead;
$image['paitaitb'] = "/uploads/tubiao/ajlkjfjasllkasjf1565adf.png";
$image['imga'] = $strd[0];
$image['imgb'] = $strd[1];
$image['imgc'] = $strd[2];
$image['jiage'] = $jiagead;
$image['sfself'] = 0;
$image['sfgame'] = $igamead;
$image['stock'] = $kucunad;
$image['volume'] = $xiaolad;
$image['guige'] = $guigead;
$image['taocana'] = $taocada;
$image['taocanb'] = $taocadb;
$image['taocanc'] = $taocadc;
$image['spclass'] = $fenleiad;
$image['xiangqwz'] = $xiangqad;
//保存数据
$code = $shopinfo->insert($image);
// 获取新增数据id
$testad = $shopinfo->getLastInsID();
$btime = $shopinfo->where('id','=',$testad)->value('addtime');
// 获取详情图片文件
$filesb = $request->file('xqimage');
$itemb = [];
foreach($filesb as $keyb => $fileb) {
// 移动到框架应用根目录/public/uploads/ 目录下
$infob = $fileb->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'ptshop');
if ($infob) {
$itemb[$keyb] = $infob->getSaveName();
$strb[$keyb] = "/uploads/ptshop/" . $itemb[$keyb];
//字符串替换函数，将路径的\\替换成/
$strdb[$keyb] = strtr($strb[$keyb], '\\', '/');
} else {
// 上传失败获取错误信息
$this->error($fileb->getError());
}
$imagad['xqimage'] = $strdb[$keyb];
$imagad['shopid'] = $testad;
$imagad['atime'] = $btime;
$code = Db::name('shangpp')->insert($imagad);
}
if ($code){
$this->success('商品添加成功');
}else{
$this->error('添加失败',$code->getError());
}
}
/**
* @param Request $request
* @throws \think\exception\DbException更新图片
*/
public function update(Request $request){
$id = $request->post('id');
$comm = Commodi::get($id);
$shopinfo = Db::name('shopsp');
$namead = input('post.namead');
$jiagead = input('post.jiagead');
$igamead = input('post.igamead');
$kucunad = input('post.kucunad');
$xiaolad = input('post.xiaolad');
$guigead = input('post.guigead');
$taocada = input('post.taocada');
$taocadb = input('post.taocadb');
$taocadc = input('post.taocadc');
$fenleiad = input('post.fenleiad');
$xiangqad = input('post.xiangqad');
// 获取详情图片文件
$filesb = $request->file('xqimage');
$itemb = [];
$files = $request->file('imagead');
$item = [];
// 循环数组保存图片文件
foreach ($files as $key => $file) {
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'ptshop');
if ($info) {
// $item[] = $info->getRealPath();
$item[$key] = $info->getSaveName();
$str[$key] = "/uploads/ptshop/" . $item[$key];
//字符串替换函数，将路径的\\替换成/
$strd[$key] = strtr($str[$key], '\\', '/');
} else {
$this->error($file->getError());
}
}
$comm->name = $namead;
$comm->title = $namead;
$comm->imga = $strd[0];
$comm->imgb = $strd[1];
$comm->imgc = $strd[2];
$comm->jiage = $jiagead;
$comm->sfself = 0;
$comm->sfgame = $igamead;
$comm->stock = $kucunad;
$comm->volume = $xiaolad;
$comm->guige = $guigead;
$comm->taocana = $taocada;
$comm->taocanb = $taocadb;
$comm->taocanc = $taocadc;
$comm->spclass = $fenleiad;
$comm->xiangqwz = $xiangqad;
$comm->save();
$atime = $shopinfo->where('id','=',$id)->value('addtime');
foreach($filesb as $keyb => $fileb) {
// 移动到框架应用根目录/public/uploads/ 目录下
$infob = $fileb->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'ptshop');
if ($infob) {
$itemb[$keyb] = $infob->getSaveName();
$strb[$keyb] = "/uploads/ptshop/" . $itemb[$keyb];
//字符串替换函数，将路径的\\替换成/
$strdb[$keyb] = strtr($strb[$keyb], '\\', '/');
} else {
// 上传失败获取错误信息
$this->error($fileb->getError());
}
$imagad['xqimage'] = $strdb[$keyb];
$imagad['shopid'] = $id;
$imagad['atime'] = $atime;
$code = Db::name('shangpp')->insert($imagad);
}
$this->success('修改成功',url('admin/index/modify'));
}
public function delete($id = ''){
$shopde = Commodi::get($id);
if ($shopde->delete()){
$this->success('商品删除成功');
}else{
$this->error('删除失败',$shopde->getError());
}
}
}
~~~
加载模板的index控制器文件：
~~~
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2017/5/14
* Time: 22:24
*/
namespace app\admin\controller;
use think\Controller;
use app\admin\model\Commodi;
use think\Db;
use think\Request;
class Index extends Basic{
public function index(){
return $this->fetch('index');
}
public function welcome(){
return $this->fetch('welcome');
}
public function rotationp(){
return $this->fetch('playout/rotationp');
}
public function updatead($id = ''){
// 读取数据
$shopsj = Commodi::get($id);
$this->assign('shopsjs',$shopsj);
return $this->fetch('commodity/updatea');
}
public function modify(){
//分页显示数据
$modis = Commodi::paginate(8);
$page = $modis->render();
$this->assign('modisa',$modis);
$this->assign('page',$page);
return $this->fetch('commodity/modify');
}
public function addcom(){
return $this->fetch('commodity/addcom');
}
}
~~~
后台的添加商品基本实现了，下面我再把页面代码粘贴出来：
这是前台商品列表的页面代码：
~~~
<!--平台商品页面-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平台自营</title>
<link rel="stylesheet" href="__INDEXSS__/css/shoppta.css">
<link rel="stylesheet" href="__ADMINS__/css/xadmin.css">
<script src="__ADMINS__/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="shophea">
<div class="shoptitle">
<img src="" />
</div>
<div class="shopsou">
<button class="fanhui" type="submit">返回</button><input class="sousuo" type="text" name="" /><button type="submit" class="soubut">搜索</button>
</div>
<div class="filtrate_term">
<table class="seul">
<tr>
<th class="onea"><a href="" name="list_sort_index">默认</a></th><th class="oneb"><a href="" name="list_sort_sales">销量</a></th><th class="onec"><a href="" name="list_sort_price">价格</a></th><th class="oned"><a href="" name="list_sort_date">最新</a></th>
</tr>
</table>
</div>
<div class="jianxi">
</div>
<div class="shoplie">
<table class="clearfixp_right">
{volist name="shopcx" id="shopzs" key="key"}
<tr class="shopad">
<th>
<div><a href="" name="product_item" dd_name="商品">
<p class="img"><img class="imashop" src="__INDEXTP__/{$shopzs.imga}" alt="{$shopzs.title}" ></p>
<p class="name" style="margin: 8px ;font-size: 18px;"><img width="80px" height="25px" src="__INDEXTP__/{$shopzs.paitaitb}">{$shopzs.title}</p></a><p class="price"><span class="reda" style="float: left;font-size: 15px;">￥{$shopzs.jiage}</span></p>
</div>
</th>
</tr>
{/volist}
</table>
</div>
<div class="layui-card-body ">
<div class="page">
<div>
{$page}
</div>
</div>
</div>
<!--底部固定菜单栏-->
<!--<footer class="footer">底部固定菜单</footer>-->
</div>
</body>
</html>
~~~
这个是后台页面添加商品的页面代码：
~~~
<!--平台商品页面-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平台自营</title>
<link rel="stylesheet" href="__INDEXSS__/css/shoppta.css">
<link rel="stylesheet" href="__ADMINS__/css/xadmin.css">
<script src="__ADMINS__/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="shophea">
<div class="shoptitle">
<img src="" />
</div>
<div class="shopsou">
<button class="fanhui" type="submit">返回</button><input class="sousuo" type="text" name="" /><button type="submit" class="soubut">搜索</button>
</div>
<div class="filtrate_term">
<table class="seul">
<tr>
<th class="onea"><a href="" name="list_sort_index">默认</a></th><th class="oneb"><a href="" name="list_sort_sales">销量</a></th><th class="onec"><a href="" name="list_sort_price">价格</a></th><th class="oned"><a href="" name="list_sort_date">最新</a></th>
</tr>
</table>
</div>
<div class="jianxi">
</div>
<div class="shoplie">
<table class="clearfixp_right">
{volist name="shopcx" id="shopzs" key="key"}
<tr class="shopad">
<th>
<div><a href="" name="product_item" dd_name="商品">
<p class="img"><img class="imashop" src="__INDEXTP__/{$shopzs.imga}" alt="{$shopzs.title}" ></p>
<p class="name" style="margin: 8px ;font-size: 18px;"><img width="80px" height="25px" src="__INDEXTP__/{$shopzs.paitaitb}">{$shopzs.title}</p></a><p class="price"><span class="reda" style="float: left;font-size: 15px;">￥{$shopzs.jiage}</span></p>
</div>
</th>
</tr>
{/volist}
</table>
</div>
<div class="layui-card-body ">
<div class="page">
<div>
{$page}
</div>
</div>
</div>
<!--底部固定菜单栏-->
<!--<footer class="footer">底部固定菜单</footer>-->
</div>
</body>
</html>
~~~
还有一个后台显示商品列表的页面代码：
~~~
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="__ADMINS__/css/font.css">
<link rel="stylesheet" href="__ADMINS__/css/xadmin.css">
<script src="__ADMINS__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMINS__/js/xadmin.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">演示</a>
<a>
<cite>导航元素</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<form class="layui-form layui-col-space5">
<div class="layui-inline layui-show-xs-block">
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button>
</div>
</form>
</div>
<div class="layui-card-header">
<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
<a title="添加" onclick="xadmin.open('添加','addcom.html')" href="javascript:;">
<span class="layui-btn layui-btn-normal layui-btn-mini">添加</span>
</a>
</div>
<div class="layui-card-body ">
<table class="layui-table layui-form">
<thead>
<tr>
<th>
<input type="checkbox" name="" lay-skin="primary">
</th>
<th>ID</th>
<th>商品标题</th>
<th>价格</th>
<th>销量</th>
<th>库存</th>
<th>所属分类</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
{volist name="modisa" id="spsju" key="key"}
<tr>
<td>
<input type="checkbox" name="" lay-skin="primary">
</td>
<td>{$key}</td>
<td>{$spsju.title}</td>
<td>{$spsju.jiage}</td>
<td>{$spsju.volume}</td>
<td>{$spsju.stock}</td>
<td>{$spsju.spclass}</td>
<td>{$spsju.sfself}</td>
<td class="td-manage">
<a title="编辑" href="{:url('admin/index/updatead?id=' . $spsju->getData('id'))}">
<span class="layui-btn layui-btn-normal layui-btn-mini">编辑</span>
</a>
<a title="删除" href="{:url('admin/commodity/delete?id=' . $spsju->getData('id'))}">
<span class="layui-btn layui-btn-danger">删除</span>
</a>
</td>
</tr>
{/volist}
</tbody>
</table>
</div>
<div class="layui-card-body ">
<div class="page">
<div>
{$page}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
layui.use(['laydate','form'], function(){
var laydate = layui.laydate;
var form = layui.form;
//执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
});
//执行一个laydate实例
laydate.render({
elem: '#end' //指定元素
});
});
</script>
</html>
~~~
还有css代码：做得不太好看请见谅
.shophea{
margin: 0 auto;
max-width: 640px;
height: 100%;
width: 100%;
overflow: hidden;
}
.shopsou{
margin: 0 auto;
height: 50px;
width: 100%;
background-color: #DFDFDF;
}
.shoptitle{
margin: 0 auto;
height: 50px;
width: 100%;
background-color: #EFEEF0;
}
.sousuo{
margin: 7px 0 20px ;
margin-right: 10px;
height: 30px;
width: 75%;
border-radius: 7px;
}
.soubut{
background-color: #93D1FF;
font-size: 18px;
border-radius: 5px;
border-color: #C9C9C9;
}
.fanhui{
background-color: #F8CBCB;
font-size: 18px;
border-radius: 5px;
margin-left: 10px;
}
.filtrate_term{
width: 100%;
height: 50px;
background-color: #EAEAEA;
}
.seul{
width: 87%;
height: 50px;
}
.onea{
width: 27%;
height: 50px;
border-color: #000000;
background-color: #E78E58;
}
.oneb{
width: 25%;
height: 50px;
border-color: #000000;
background-color: #00FFFF;
}
.onec{
width: 25%;
height: 50px;
border-color: #000000;
background-color: #7C8CE4;
}
.oned{
width: 27%;
height: 50px;
border-color: #000000;
background-color: #DB4443;
}
.onea a{
font-size: 25px;
}
.oneb a{
font-size: 25px;
}
.onec a{
font-size: 25px;
}
.oned a{
font-size: 25px;
}
.shoplie{
background-color: #DDDDDD;
}
.shopad{
float: left;
max-width: 320px;
width: 100%;
height: 350px;
background-color: #F0F0F0;
}
.imashop{
max-width: 300px;
width: 280px;
height: 250px;
}
.clearfixp_right{
width: 100%;
height: 100%;
max-width: 640px;
}
.jianxi{
width: 100%;
height: 25px;
background-color: #BDBDBD;
}
.textai{
max-width: 300;
}
到这里已经基本实现添加商品功能了,验证器功能这里并没有做，后期收尾再把输入验证添加上去，因为用的layui框架自带有验证功能，所以影响不大。
