first

Posted 2020-09-19

一、项目基本

目的：

①更加熟悉Thinkphp框架的使用

②熟悉各种技术在thinkphp框架中如何应用

例如jquery、ajax、ueditor、htmlpurifier、购物车等

③对商城项目的开发、维护有一定认识

 

1、搭建虚拟主机

打开apache的主机配置文件vhosts.conf，添加新的虚拟主机：

 

2、搭建thinkphp框架的运行环境

①把thinkphp的代码拷贝到站点根目录中

 

 

②    运行站点，使thinkphp自动生成home模块文件：

 

 

③创建Admin模块

方式一：直接复制Home模块，进行名称修改

 

方式二：使用thinkphp的配置文件进行自动生成（可以生成任何模块）

说明：在入口文件index.php中，添加一行配置，指定想要生成的模块，然后运行项目站点即可。

 

 

 

 

此时，会自动生成Admin模块：

 

 

测试：自动生成User模块：

 

 

成功。

此时，项目基本要素搭建完毕。

 

 

3、后台首页模板的搭建

①在后台模板中找到文件，并放入到后台首页的视图中

 

 

 

 

②修改后台首页控制器，展示页面：

 

 

③在Admin模块的配置文件中，配置资源文件的路径：

 

 

 

④把对应的资源路径替换成配置好的路径：

 

 

 

⑤预览结果

 

后台首页功能完成！

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

二、商品管理（一）

1、创建商品表

数据库名：jxshop(注意字符集--utf8)

CREATE TABLE `jxshop_goods` (

  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘主键‘,

  `goods_name` varchar(80) NOT NULL COMMENT ‘商品名称‘,

  `goods_price` decimal(10,2) NOT NULL DEFAULT ‘0.00‘ COMMENT ‘商品价格‘,

  `logo` varchar(200) NOT NULL DEFAULT ‘‘ COMMENT ‘商品logo‘,

  `sm_logo` varchar(200) NOT NULL DEFAULT ‘‘ COMMENT ‘logo小图‘,

  `mid_logo` varchar(2000) NOT NULL DEFAULT ‘‘ COMMENT ‘logo中图‘,

  `goods_desc` longtext COMMENT ‘商品描述‘,

  `add_time` int(11) NOT NULL COMMENT ‘添加时间‘,

  `upd_time` int(11) NOT NULL COMMENT ‘修改时间‘,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

 

 

 

2、商品添加页

①查找模板，找到合适的页面：

 

 

 

②在模板文件夹中，找到对应的文件form_validation.html，放入项目中的goods视图下：

 

 

③在admin模块下创建商品控制器，并做出添加页面展示效果的代码：

 

 

 

④把添加页面的CSS JS IMAGE资源文件的路径进行替换

 

⑤完成后，页面的效果如下：

 

 

 

 

 

 

 

 

3、商品添加页--左侧菜单、JS验证细节处理

①修改后台首页的左侧菜单使其变成如下：

 

 

代码部分：把原来的

 

 

 

修改为如下图，注意商品添加前面的超链接也要改。

商品管理下面多余的<li>标签全部删掉：

 

 

 

 

②修改验证的JS，使其能够配合我们的表单名称进行验证

 

找到form-validation.js，把自动验证的代码提取出来，

文件位置：\Public\Admin\js\form-validation.js

复制如下代码：

 

一直到：

 

 

 

，把它们粘贴到商品添加页，替换掉：

 

 

 

 

 

③修改表单的name和jQuery对应验证的部分，实现验证：

 

 

 

 

注意：上述过程中，删除了暂时不用的表单项，并且创建了和我们数据库中字段相同的表单内容。

 

 

修改jQuery代码，进行商品名称和价格的必填验证(暂时删掉了其他内容的验证)：

 

 

 

 

此时，若是不填数据，则进行了验证：

 

 

验证正确后：

 

 

 

 

 

 

4、完成商品添加功能--钩子、自动验证

①修改表单，让其能够提交到我们自己的控制器中：

 

 

因为这个提交按钮绑定的是“验证”事件，我们要把其改成为“提交“事件。

 

 

修改位置：

 

②在控制器中接收post提交过来的数据：

 

 

③创建goodsModel模型，用于后台数据自动验证

 

 

在控制器使用“D”方法去实例化一个模型：

 

 

 

 

④在模型中创建允许接收的字段和一套验证规则：

 

在控制器中，使用create（）方法来触发验证：

 

 

④连接数据库

模型验证需要数据库的支持，在Application/Common/Conf/config.php中，配置数据库相关信息：

 

 

⑤开始验证

连接成功后进行测试：

（不写商品名）

 

 

报错：

 

 

⑥优化错误提示

在控制器中，取出模型中的错误信息，并通过error（）方法进行跳转：

 

 

 

验证成功之后跳转到列表页面：

 

 

 

 

细节：

 

 

 

⑦添加前的钩子函数

验证成功后，在控制器中调用模型的add（）方法，进行数据的存储：

 

 

 

 

 

钩子函数在add()方法执行前，自动调用。注意，传智时的$data必须使用引用传值，否则就是局部变量，无法对要入库的数据产生影响！

 

 

添加完钩子函数后，数据在存储之前，会把添加和修改时间补上，存入数据库。

 

 

 

 

 

 

 

补充：自动验证货币类型

 

补充2：

list是关键字，请不要用作方法名：

 

5、商品logo和缩略图的处理

①为表单添加属性，允许图片上传

 

②模拟上传按钮

把下方的提交按钮的样式复制，放到上传按钮上，把上传按钮隐藏

 

添加事件

 

在普通按钮的click事件中，触发上传按钮的click事件

 

 

 

 

 

实现效果如下：点击按钮，自动打开文件上传域

 

 

③优化上传效果

目的：在上传按钮后方，添加文字，让用户知道图片状态

 

效果：

 

 

 

 

添加事件，在文件域的值发生改变（其实就是有图片被选中了）时，改变span标签中的文字：

 

 

 

④后台实现文件上传

先使用$_FILES进行表单提交的数据查看：

 

 

参照tp手册，进行文件上传的处理：

 

 

在钩子函数中，添加对上传logo的处理方法：

 

把相关代码摘抄下来：

 

修改$_FILES中的name值：

 

注意：要事先按照配置好的路径，建立对应的文件夹！

 

 

准备就绪后，打印$info数组，查看图片处理结果：

 

 

拼装路径，存入数据库：

 

 

图片上传成功：

 

 

 

 

数据库中对应的字段（笔记中，成功的只有一个，另一个是测试时上传的，没有入库）

 

 

 

⑤缩略图的处理

当商品图片上传成功之后，才能进行缩略图的处理：

 

首先，要打开一张图片，才能生成新的缩略图

 

 

然后，为缩略图生成要存放的路径：

 

最后，调用tp中的方法，生成两张尺寸不同的缩略图：

 

 

注意缩略图存放的路径，相对于入口文件，所以要添加“.”：

 

效果：

 

 

 

 

细节处理：没有图片的时候，当前的写法会报错，因为$this->error()方法是控制器的方法，而我们目前是在模型中进行处理，所以，要回避这种方法：

 

 

 

 

完善方式：

                            1 判断，如果没有图片上传则不进行处理

                            2 图片出错时不判断（以后可以打印日志，但是这里不作为知识点进行讲解）

 

 

6、商品列表页

①引入列表页页面

 

对应的文件：

 

 

把页面放入到视图中，同时创建goods_list()方法，进行页面的展示

 

 

 

 

替换页面中资源文件的路径（自行替换），效果：

 

 

 

②修改添加按钮

 

 

代码改为：注意，这里添加的按钮有ID，去掉ID，避免其触发JS事件

 

 

 

效果：点击后实现商品添加页的跳转

 

 

③拼凑数据

把表头修改为要展示的字段名：

 

 

使用<foreach>标签，进行数据的循环输出，注意图片的格式。

 

 

 

④完善排序效果

修改\jxshop\Public\Admin\js\table-editable.js文件，使数据能够根据ID（第一列）进行排序。

 

此时，列表能够根据ID上方的箭头进行排序。

 

 

说明：实现原理---后台传入数据，前端通过jQuery datatable进行处理，可以进行翻页、修改每页展示的条数、按照某个字段进行排序、搜索的功能，十分强大，是以后工作中常用的技术。

 

补充：

 

这样在每次刷新的时候，就能够保存状态了。

 

 

 

7、商品删除

①分析删除按钮

模板中自带删除按钮，效果如下：

 

点击“是”之后，

 

 

删除按钮在jxshop\Public\Admin\js\table-editable.js文件中对应的效果代码：

 

 

②实现ajax

在第二个弹窗处，写ajax请求服务器，进行真正的删除：

 

 

c_url是请求的地址，需要在具体页面中进行定义（定义一个全局变量）

 

 

 

注意，这里U（）函数的第三个参数，代表生成的地址没有后缀。

 

③传递商品的ID

 

在每个删除按钮的标签上，添加自定义属性data-id(名字随便起），值是当前商品的ID：

 

 

在JS中，因为点击删除，获取的是当前的对象，所以当前的自定义属性data-id也能获取到，使用attr()方法：

 

 

④完成后台数据删除功能

把获得的ID传递给后台

 

 

在Goods控制器创建方法goods_del，完成删除功能。

 

 

注意：ID使用get 方式接收。

 

M(‘goods’)->delete($id)  根据主键ID删除一条数据（这么写的方式，仅限于$id是主键），等同于M(‘goods’)->where(‘id=’.$id)->delete();

 

无论成功与否，要返回json数据。

 

删除成功，弹出状态，确认成功与否：

 

 

 

 

修改JS，完成功能：

 

 

 

 

 

 

 

三、提取公共部分

在一个项目中，所有的页面会有一套公共的样式、和JS、以及图片文件。

 

 

 

而且每个页面中也有单独的样式和JS等文件。

 

我们需要把公共的样式、JS文件提取出来，把特有的文件单独引入，达到一个提升效率、方便修改的目的。

 

①创建公共布局文件夹

在view下，创建公共的布局文件夹Pub，存放布局文件

 

 

建立footer.html和layout.html 来存储公共部分

 

②提取首页公共部分

先把首页公共的CSS文件提取出来

 

把公共部分剪切，提取到这里：

 

 

提出的部分放到View/Pub/layout.html中：

 

 

在首页通过<layout>标签引入公共布局，下面写上公共的样式：

 

 

在layout.html文件中，通过TP的模板变量，匹配内容{__CONTENT__}:

 

 

首页的提取部分完成

 

③提取商品添加、商品列表页的样式

商品添加页goods_add.html：

 

商品列表页goods_list.html：

 

 

④提取公共脚部

原则：提取公共的js部分和脚部部分到文件：Pub/footer.html中，特有的放到自己的页面中。使用<include>标签引入：

首页：

 

 

商品列表页：

 

 

商品添加页：

 

 

至此，公共部分提取完成。

 

⑤修改公共部分的文字

 

公共部分的提示文字需要根据不同页面而不同：

 

 

修改布局文件：

 

 

这些变量在每个控制器中的具体方法中，进行传入：

 

 

 

 

 

 

⑥ 实现菜单自动选中

首页处理

把首页的超链接改为正确的形式：

 

通过尝试得知，首页自动选中的状态，依赖于一个类：active，所以，我们要判断当前的控制器，如果是Index则默认让首页的<li>标签拥有这个类：

 

提醒：在TP的模板中，如果想写PHP代码，可以用<php></php>标签，里面写PHP代码。

 

其他页面处理：

先删除其他的菜单，留下商品管理，并添加商品列表、完成超链接：

 

 

通过判断控制器，确定二级菜单的选中状态，控制其效果的也是active 类：