当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微擎模块开发-微擎小程序商城轮播图增、删、改、查详解（后端篇）

微擎模块开发-微擎小程序商城轮播图增、删、改、查详解（后端篇）

2020年07月22日  | 移动技术网IT编程  | 我要评论

使用微擎框架实现轮播图的增、删、改、查功能，本节课是对微擎框架的第一次介绍，用到了php，html常用知识，有一点涉及到了jquery的内容，遇到的新知识点比较多，所以只完成了基础的功能，给大家一个过渡的时间，接下来的课程难度会比较大，希望大家可以认真学习，加油！

新建banner数据库

微擎模块开发-微擎小程序商城轮播图增、删、改、查详解(小康课堂)
下面是具体的数据库执行语句，点击保存即可。

CREATE TABLE `shancloudy`.`ims_shangcheng_xk_banner` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT , `title` VARCHAR(60) NOT NULL COMMENT '轮播图名称' , `banner` VARCHAR(100) NOT NULL COMMENT '轮播图地址' , `crate_time` VARCHAR(11) NOT NULL COMMENT '创建时间' , PRIMARY KEY (`id`)) ENGINE = InnoDB;

回到服务器，站点模块，微擎模块插件目录，新建template文件。
微擎模块开发-微擎小程序商城轮播图增、删、改、查详解(小康课堂)
再在template文件下建立banner文件夹，再创建banner.html，banner_add.html,banner_edit.html三个展示文件。
微擎模块开发-微擎小程序商城轮播图增、删、改、查详解(小康课堂)
接下来开始制作后台banner.html文件，也就是banner列表页面。
微擎模块最主要的逻辑文件site.php，咱们的所有后台商城逻辑都在这个文件里实现，小编用的php编辑器是sublime，一款轻量级编辑器，但功能很强大，想要学习的同学可以百度了解一下。
微擎模块开发-微擎小程序商城轮播图增、删、改、查详解(小康课堂)
使用sublime打开site.php文件，这个就是咱们微擎后台轮播图管理函数。
微擎模块开发-微擎小程序商城轮播图增、删、改、查详解(小康课堂)
下面是后台banner的逻辑代码

// 商城轮播图增删改查--------------------------------------
	public function doWebBanner() {
	//这个操作被定义用来呈现 管理中心导航菜单
		global $_W,$_GPC;
		$bannerRes = pdo_getall('shangcheng_xk_banner');
		include $this->template('banner/banner');
	}
	public function doWebBannerAdd(){
		global $_W,$_GPC;
		if($_W['ispost']){
			$data = [
				'title'	        =>$_GPC['title'],
				'banner'        =>$_GPC['banner'],
				'create_time'   =>time()
			];
			$bannerRes = pdo_insert('shangcheng_xk_banner',$data);
			if($bannerRes){
				if($bannerRes){
				    $url = $this->createWebUrl('banner');
					message('轮播图添加成功',$redirect = $url,$type = 'success');
				}else{
					message('轮播图添加失败',$redirect = 'referer',$type = 'error');
				}
			}
		}

		include $this->template('banner/banner_add');
	}
	public function doWebBannerDel(){
		global $_W,$_GPC;
		$id = $_GPC['id'];
		$bannerRes = pdo_delete('shangcheng_xk_banner',['id'=>$id]);
		if($bannerRes){
			if($bannerRes){
			    $url = $this->createWebUrl('banner');
				message('轮播图添加成功',$redirect = $url,$type = 'success');
			}else{
				message('轮播图添加失败',$redirect = 'referer',$type = 'error');
			}
			}
	}
	public function doWebBannerEdit(){
		global $_W,$_GPC;
		$id = $_GPC['id'];
		if($_W['ispost']){
			$data = [
				'title'		=>$_GPC['title'],
				'banner'	=>$_GPC['banner'],
				'create_time'=>time()
			];
			if($data != false){
				$bannerRes = pdo_update('shangcheng_xk_banner',$data,['id'=>$id]);
				if($bannerRes){
				    $url = $this->createWebUrl('banner');
					message('轮播图修改成功',$redirect = $url,$type = 'success');
				}else{
					message('轮播图修改失败',$redirect = 'referer',$type = 'error');
				}
			}
		}
		$bannerRes = pdo_get('shangcheng_xk_banner',['id'=>$id]);
		include $this->template('banner/banner_edit');

	}

banner列表页面代码

{template "common/header"}

<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
	<ul id="myTabs" class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">轮播图列表</a></li>
		<li role="presentation"><a href="{php echo $this->createWebUrl('bannerAdd');}">添加轮播图</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab" style="margin-top: 30px;">
			<table class="table table-hover">
				<thead>
					<tr>
						<th style="text-align: center;width: 5%;">ID</th>
						<th style="text-align: center;width: 20%;">名称</th>
						<th style="text-align: center;">图片</th>
						<th style="text-align: center;width: 15%">创建时间</th>
						<th style="text-align: center;width: 15%;">操作</th>
					</tr>
				</thead>
				<tbody>
				    {loop $bannerRes $k $v}
					<tr>
						<th scope="row" style="text-align: center;vertical-align: middle;">{$v['id']}</th>
						<td style="text-align: center;vertical-align: middle;">{$v['title']}</td>
						<td style="text-align: center;vertical-align: middle;">
    						 <img src="{php echo $_W['attachurl'].$v['banner']}" alt="{$v['title']}" style="width:60px;" />
						</td>
						<td style="text-align: center;vertical-align: middle;">{php echo date('Y-m-d H:i:s',$v['create_time']);}</td>
						<td style="text-align: center;vertical-align: middle;">
							<a href="{php echo $this->createWebUrl('bannerEdit')}&id={$v['id']}" type="button" class="btn btn-primary btn-sm">编辑</a>&nbsp;&nbsp;|&nbsp;&nbsp;
							<a href="{php echo $this->createWebUrl('bannerDel')}&id={$v['id']}" type="button" class="btn btn-danger btn-sm">删除</a>
						</td>
					</tr>
					{/loop}
				</tbody>
			</table>
		</div>
	</div>
</div>

{template "common/footer"}

添加banner列表页面代码

{template "common/header"}
<div>
    <h3>添加轮播图</h3>
    <hr />
</div>
<div style="margin-top:45px">
    <form class="form-horizontal" method="post">
	<div class="form-group">
		<label for="inputEmail3" class="col-sm-2 control-label">名  称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" name="title" placeholder="请输入轮播图名称...">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">轮播图</label>
		<div class="col-sm-10">
			{php echo tpl_form_field_image('banner');}
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-primary">提交</button>
		</div>
	</div>
</form>
</div>

{template "common/footer"}

修改banner列表页面代码

{template "common/header"}
<div>
    <h3>修改轮播图</h3>
    <hr />
</div>
<div style="margin-top:45px">
    <form class="form-horizontal" method="post">
    <input type="hidden" name="id" value="{$bannerRes['id']}" />
	<div class="form-group">
		<label for="inputEmail3" class="col-sm-2 control-label">名  称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" name="title" placeholder="请输入轮播图名称..." value="{$bannerRes['title']}">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">轮播图</label>
		<div class="col-sm-10">
			{php echo tpl_form_field_image('banner');}
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-primary">提交</button>
		</div>
	</div>
</form>
</div>
<script type="text/javascript" charset="utf-8">
    $(function(){
        $('.img-responsive').attr('src',"{php echo $_W['attachurl'].$bannerRes['banner'];}")
        $("input[name='banner']").val("{$bannerRes['banner']}")
    })
</script>

{template "common/footer"}

总结：本节课主要给大家介绍了轮播图的增删改查，简单展示了微擎数据库语句，让大家有一个初步的了解。
1、数据库执行语句，pdo_get()，pdo_insert()，pdo_update()，pdo_delete()的基本用法；
2、还有一个比较重要的知识点就是微擎的tpl_form_field_image() - 图片上传与选择控件，它可以轻松的将图片传至服务器；
3、加载模板函数include this−>template();4、全局变量this->template(); 4、全局变量_W，$_GPC的简单用法；
5、数据执行成功后的message()函数的用法；
6、使用jquery方法修改图片src属性和input框的value值。
在文章结束时小编提醒大家可以先看两遍“微擎开发者文档”，对微擎框架有一个基本的概念，看完后如果有时间的话可以实操1-2遍，避免一看就会，一做就废的情况发生。

本文地址：https://blog.csdn.net/dgtgihtyyvii/article/details/107466125

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网