欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-21 13:11:17
微擎小程序前端页面已完成，接下来的主要工作都在后端，本节课的内容主要介绍商城banner的增删改查，让大家对微擎框架有一个初步的认识。新建banner数据库下面是具体的数据库执行语句，点击保存即可。CREATE TABLE `shancloudy`.`ims_shangcheng_xk_banner` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT , `title` VARCHAR(60) NOT NULL COMMENT '轮播图名称' , `bann....

使用微擎框架实现轮播图的增、删、改、查功能，本节课是对微擎框架的第一次介绍，用到了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

相关标签： 后端 php jquery html 小程序 经验分享

上一篇： ​在广东大暑吃什好？广东节气饮食文化

下一篇： egg项目npm/cnpm出错Connect timeout

推荐阅读