這一章將會實現后臺添加商品并在頁面顯示商品列表
首先創建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框架自帶有驗證功能,所以影響不大。