标题:Thinkphp实战教程-会员管理系统 part1

-------------------------------------------------------------------------------------------------------------------------------

时间:2018/2/25 14:38:14

-------------------------------------------------------------------------------------------------------------------------------

内容:

引言

 

 

前面学习了thinkphp框架的基础知识,包括框架代码的文件结构以及常用的控制器方法和模板渲染和控制器与模板传参数及控制器操作数据库的方法。凭借这些基础知识,还远远不够离完成可以交付使用的真实项目我们还需要需要将前面的基础知识组合运用。本文主要是学习 快速使用别人精美的模板套上thinkphp进行开发,到达快速开发一个精美项目的目的。具体方法是通过模板网站 下载的前台模板再使用thinkphp创建对应的控制器和数据库,将3者视图,控制器,模型进行衔接制作一个后台用户管理界面。

 

模板选择

 

 

因为使用MVC模式的thinkphp来开发。使得程序员把前端界面-View和后端业务逻辑-控制器分离了。程序员可以专心的写控制器和业务逻辑,而对应不擅长的前端界面我们可以通过下载别人设计好的模板来完成,毕竟术业有专攻 并且一个好的模板界面要考虑的兼容性太多并且对制作的人要求的美感也高。模板我这里随便找了一个国内的网站模板之家cssmoban的,里面有源代码。因为我们要开发一个后台用户管理,所以选择后台模板

http://www.cssmoban.com/cssthemes/houtaimoban/ 因为版权的原因 可能很多模板会过期 但是我们强调学习方法 ,学会模板套用方法以后你可以用自己公司设计师的模板也可以去付费购买一些专业的模板,自己的时间就用来开发业务逻辑和数据。本教程我们使用Metro磁贴风格后台为后台模板为例 http://www.cssmoban.com/cssthemes/6798.shtml

源代码下载地址是http://down.cssmoban.com/cssthemes4/sbtp_39_hs.zip

 

我们设计的后台用户管理需要有登录功能,查看用户信息功能,新增加,修改和删除用户信息功能。界面构思上,登录是一个包含账号和密码的表单界面,查看用户信息是一个包含许多行的用户信息列表页面,增加用户信息是一个填写表单界面,修改和增加信息的界面类似,删除信息不需要界面。

 

通过预览可以看到这个模板有许多丰富的界面,这里我们主要使用的是其中3个界面

login这个样式模板作为后台登录界面,

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/login.html

查看更多精彩图片




 

table这个样式模板 作为用户信息总览界面

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/table.html

Table里面包含许多字段,可以排序 筛选 搜索

查看更多精彩图片

 

forms这个样式模板  作为更新和添加用户信息界面

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/form.html

Form里面有各种好看的表单元素 单选框 复选框,文本框 下拉框 按钮

查看更多精彩图片

 

上面这个3个模板做了不同浏览器兼容和pcmobile兼容,比起自己开发要省力许多。

 

使用这3个界面作为模板视图。我们就可以通过控制器进行渲染,既可以把数据呈现在这个精明的末班中。

 

因为我们实战是做用户信息管理 所以只需要这3个界面,如果要开发其他功能可以考虑从剩余界面中寻找。

 

 

模板的结构

 

将模板下载后解压,得到sbtp_39_hs文件夹,内含4个子文件夹和若干个html文件

/css/      所有的样式文件

/fonts/   字体文件

/js/       脚本代码文件

/img/   所有的图片和icon文件

 

对于html文件,

login.html  登录验证页面

table.html   用户总览界面

form.html   用户添加和更新界面

 

只需要使用3html文件即可 其余html我们可以删掉

 

框架专门放置视图的文件夹 /tp/admin/view/

添加文件夹login,把login.html放置其中 /tp/admin/view/login/login.html

创建文件夹user,把table.html 放置其中,修改名称为showAll.html, /tp/admin/view/user/showAll.html

form.html复制2次重命名为 showAdd.html, showUpdate.html

/tp/admin/view/user/ showAdd.html  /tp/admin/view/user/showUpdate.html

 

创建了loginuser的原因是考虑到后期通过控制器调用的这些模板,控制器的名称分别是loginuser

 

下面是这4个模板的介绍和对应的控制器和方法

 

/admin/view/login/login.html 用做登录模板,通过创建控制器login 方法index来显示这个模板界面,然后通过form里面的login_try 动作调用login_try方法,与数据库进行查询验证 决定登录是否成功  session赋值后跳转到showall.html页面

 

/admin/view/user/showall.html 用来显示管理员登录后看到的所有人员的名单,通过创建控制器user的方法showall来显示这个模板界面,显示之前,先需要确认是否已经是登录的用户,通过session来确认,然后创建user这个数据模型 与模板进行连接后渲染模板

 

/admin/view/user/showadd.html用来显示添加新用户的表单页面,通过创建user控制器的方法showadd来展示空白表单,用户提交表单后调用add这个动作既调用add这个方法完成用户数据的增加, 之后可以跳转回到showall页面,同样需要验证是否是登录用户。

 

/admin/view/user/showupdate.html 用来显示修改老用户信息页面,通过创建方法showupdate来展示需要修改的用户信息,然后通过表单的update方法调用完成数据的更新 然后返回showall页面,同样需要验证是否是登录用户。

 

 

关于数据的删除不需要有一个模板展示,所以不需要制作它的模板页面

 

模板对应的控制器的创建

 

首先我们要讲下创建控制器的遵循的原则。当我们需要对数据库中某一张表进行操作,就需要创建一个独立的控制器进行。对这个表的不同操作 ,可以分解为通过这个控制器下的不同方法去实现。在这个项目中,我们使用了2张表,分别是记录了后台登录用户的账户的管理员名单表-admin_user和记录了普通用户信息的表-user。所以我们要创建2个控制器,控制器login,作为登录验证使用与管理员名单表进行操作,对应的模板是login.html,控制器user作为实现数据库里面user表里面的数据增删改查 对应的模板是showalll,showupdate,showadd

具体创建方法

/admin/controller/ 自带的indexController.class.php复制后重命名为UserController.class.php创建user控制器既,然后修改里面第4行控制器声明

class UserController extends Controller

同理创建login控制器 LoginController.class.php

 

 

控制器连接模板

 

login.html模板

我们先在login控制器创建方法login 来调用位于view下面的login.html模板

代码如下

    public function login(){

    $this->display();

}

输入url  http://localhost/tp/admin/login/login/

 

可以看到 网页缺少cssjs文件的

查看更多精彩图片

 

我们需要把之前模板下的文件夹css,font,js,img 4个放在 根目录下的Public文件夹下

thinkphp文件夹同级的/Public/css//Public/font//Public/js/

因为thinkphp默认的css等非html模板文件都是放在根目录下的public文件夹下

查看更多精彩图片

 

然后修改

<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">

修改

<link id="bootstrap-style" href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">

既吧所有的css文件夹前面加上前缀__PUBLIC__ 代表根目录

同理修改jsimg文件夹的引用

技巧 替换

href="css/href="__PUBLIC__/css/

 

src="js/  src="__PUBLIC__/js/

 

href="img/ href="__PUBLIC__/img/

  url(img/bg-login.jpg) url(__PUBLIC__/img/bg-login.jpg)

需要注意下 有单引号的 路径,最好的办法是查下下.js 一个个看 路径是否已经替换好

 

最后可以看到

查看更多精彩图片

 

再次访问上面的URL 可以发现能够正常调用css js等文件 模板套用成功

<form class="form-horizontal" action="index.html" method="post">

            修改为                                               

<form class="form-horizontal" action="login_try" method="post">

修改了表单的方法为login_try

同时修改2input name 一个是uname 一个是upassword

 

其他 模板

 

同理可以对其他模板页面源代码进行路径替换

href="css/ href="__PUBLIC__/css/

 

src="js/   src="__PUBLIC__/js/

 

href="img/   href="__PUBLIC__/img/

 

 

比较快捷的办法是 使用sublime 多窗口打开多个html 然后一起替换

分别得到修改好源代码路径的showall.html showadd.html showedit.html

 

 

 

 

 

数据库的创建-后台用户管理系统

 

 

通过数据库管理工具,phpmyadmin或者桌面版管理工具创建数据库test 以及2个表

 

Login控制器的对应的表admin_user数据结构

 

admin_user用来放后台登录用户信息 user用来放被管理的用户信息

admin_user 包含3个字段id-自增长,name-可变字符varchar40 uniquepassword-可变字符varchar40

查看更多精彩图片

 

user控制器的对应的表user数据结构

 

user 表包含字段4个,id-自增长,name-可变字符40,sex性别-可变字符6, -age年龄-整型,department部门 -可变字符40

 

查看更多精彩图片

 

 

Login.html前后端结合

 

后端部分

login控制器内的方法

login_try方法

使用thinkphp 系统函数M来创建一个数据库对象,注意表名称是admin_user s会用M方法需要变成AdminUser,鸵峰写法

另外在使用where的适合注意字段不带引号 变量是需要带引号

登录失败通过redirect跳转 带一个参数到login登录页面

主要redirect 需要带引号 和控制器以及方法的名称

如果登录成功 则创建session 并且跳转

 

    public function login_try(){//尝试使用表单的账号密码与数据库中比对

 

      $admin_user=M("AdminUser");//使用M方法创建数据库对象 表的名称是amdin_user所以这里要写AdminUser

      $name=$_POST['name'];  //将表单中post过来用户名变量赋值

      $password=$_POST['password']; //将表单中post过来用密码变量赋值

      $result=$admin_user->where(" name= '$name' and password='$password' ") ->select();//

      //使用数据库对象的方法where来进行筛选 注意字段名称不叫引号 字符串变量是需要加引号 并且将结果返回给result

      if ($result==null)  //如果取不到result 说明账户密码不符合

        {

          $msg="your name or password is not right";  // 创建错误提示信息 赋值给变量msg

          $this->assign('msg',$msg);// 将登录失败的提示信息 传递到模板里变量msg里面

          $this->display(login);  // 显示login模板

        }

      else //通过账户密码验证

        {

          session('name',$name); //创建session 并赋值 后台页面都需要检查是否存在session 判断是否非法登录

          $this->redirect('user/showall');//跳转页面到user控制器的showall方法 展示所有用户信息

        }

    }

 

login方法

使用login方法显示登录页面,判断url参数msg是否为wrong即可知道是什么类型的登录失败错误

 

    public function login(){// 展示登录页面

$this->display();  // 显示模板

 

    }

这样我们就完成了控制器login2个方法 以及与数据库的连接 并且模板的修改

实现了login.html 所有的功能

前端部分

 

login的前端页面只需要把值传递到后端,功能单一,不需要从数据库取信息在页面呈现,比较需要修改的内容很少。只需要 确保表单变量名称正确和增加一个提示信息即可

修改login.html 里面的表单元素input里面的名称 用户名文本框为name,密码文本框为password,并且增加一个H3 输出提示信息<h3>{$msg}</h3>

电子版教程

链接: https://pan.baidu.com/s/1nxf2Ksx 密码: xd8u

引言

 

 

前面学习了thinkphp框架的基础知识,包括框架代码的文件结构以及常用的控制器方法和模板渲染和控制器与模板传参数及控制器操作数据库的方法。凭借这些基础知识,还远远不够离完成可以交付使用的真实项目我们还需要需要将前面的基础知识组合运用。本文主要是学习 快速使用别人精美的模板套上thinkphp进行开发,到达快速开发一个精美项目的目的。具体方法是通过模板网站 下载的前台模板再使用thinkphp创建对应的控制器和数据库,将3者视图,控制器,模型进行衔接制作一个后台用户管理界面。

 

模板选择

 

 

因为使用MVC模式的thinkphp来开发。使得程序员把前端界面-View和后端业务逻辑-控制器分离了。程序员可以专心的写控制器和业务逻辑,而对应不擅长的前端界面我们可以通过下载别人设计好的模板来完成,毕竟术业有专攻 并且一个好的模板界面要考虑的兼容性太多并且对制作的人要求的美感也高。模板我这里随便找了一个国内的网站模板之家cssmoban的,里面有源代码。因为我们要开发一个后台用户管理,所以选择后台模板

http://www.cssmoban.com/cssthemes/houtaimoban/ 因为版权的原因 可能很多模板会过期 但是我们强调学习方法 ,学会模板套用方法以后你可以用自己公司设计师的模板也可以去付费购买一些专业的模板,自己的时间就用来开发业务逻辑和数据。本教程我们使用Metro磁贴风格后台为后台模板为例 http://www.cssmoban.com/cssthemes/6798.shtml

源代码下载地址是http://down.cssmoban.com/cssthemes4/sbtp_39_hs.zip

 

我们设计的后台用户管理需要有登录功能,查看用户信息功能,新增加,修改和删除用户信息功能。界面构思上,登录是一个包含账号和密码的表单界面,查看用户信息是一个包含许多行的用户信息列表页面,增加用户信息是一个填写表单界面,修改和增加信息的界面类似,删除信息不需要界面。

 

通过预览可以看到这个模板有许多丰富的界面,这里我们主要使用的是其中3个界面

login这个样式模板作为后台登录界面,

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/login.html

查看更多精彩图片




 

table这个样式模板 作为用户信息总览界面

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/table.html

Table里面包含许多字段,可以排序 筛选 搜索

查看更多精彩图片

 

forms这个样式模板  作为更新和添加用户信息界面

http://demo.cssmoban.com/cssthemes4/sbtp_39_hs/form.html

Form里面有各种好看的表单元素 单选框 复选框,文本框 下拉框 按钮

查看更多精彩图片

 

上面这个3个模板做了不同浏览器兼容和pcmobile兼容,比起自己开发要省力许多。

 

使用这3个界面作为模板视图。我们就可以通过控制器进行渲染,既可以把数据呈现在这个精明的末班中。

 

因为我们实战是做用户信息管理 所以只需要这3个界面,如果要开发其他功能可以考虑从剩余界面中寻找。

 

 

模板的结构

 

将模板下载后解压,得到sbtp_39_hs文件夹,内含4个子文件夹和若干个html文件

/css/      所有的样式文件

/fonts/   字体文件

/js/       脚本代码文件

/img/   所有的图片和icon文件

 

对于html文件,

login.html  登录验证页面

table.html   用户总览界面

form.html   用户添加和更新界面

 

只需要使用3html文件即可 其余html我们可以删掉

 

框架专门放置视图的文件夹 /tp/admin/view/

添加文件夹login,把login.html放置其中 /tp/admin/view/login/login.html

创建文件夹user,把table.html 放置其中,修改名称为showAll.html, /tp/admin/view/user/showAll.html

form.html复制2次重命名为 showAdd.html, showUpdate.html

/tp/admin/view/user/ showAdd.html  /tp/admin/view/user/showUpdate.html

 

创建了loginuser的原因是考虑到后期通过控制器调用的这些模板,控制器的名称分别是loginuser

 

下面是这4个模板的介绍和对应的控制器和方法

 

/admin/view/login/login.html 用做登录模板,通过创建控制器login 方法index来显示这个模板界面,然后通过form里面的login_try 动作调用login_try方法,与数据库进行查询验证 决定登录是否成功  session赋值后跳转到showall.html页面

 

/admin/view/user/showall.html 用来显示管理员登录后看到的所有人员的名单,通过创建控制器user的方法showall来显示这个模板界面,显示之前,先需要确认是否已经是登录的用户,通过session来确认,然后创建user这个数据模型 与模板进行连接后渲染模板

 

/admin/view/user/showadd.html用来显示添加新用户的表单页面,通过创建user控制器的方法showadd来展示空白表单,用户提交表单后调用add这个动作既调用add这个方法完成用户数据的增加, 之后可以跳转回到showall页面,同样需要验证是否是登录用户。

 

/admin/view/user/showupdate.html 用来显示修改老用户信息页面,通过创建方法showupdate来展示需要修改的用户信息,然后通过表单的update方法调用完成数据的更新 然后返回showall页面,同样需要验证是否是登录用户。

 

 

关于数据的删除不需要有一个模板展示,所以不需要制作它的模板页面

 

模板对应的控制器的创建

 

首先我们要讲下创建控制器的遵循的原则。当我们需要对数据库中某一张表进行操作,就需要创建一个独立的控制器进行。对这个表的不同操作 ,可以分解为通过这个控制器下的不同方法去实现。在这个项目中,我们使用了2张表,分别是记录了后台登录用户的账户的管理员名单表-admin_user和记录了普通用户信息的表-user。所以我们要创建2个控制器,控制器login,作为登录验证使用与管理员名单表进行操作,对应的模板是login.html,控制器user作为实现数据库里面user表里面的数据增删改查 对应的模板是showalll,showupdate,showadd

具体创建方法

/admin/controller/ 自带的indexController.class.php复制后重命名为UserController.class.php创建user控制器既,然后修改里面第4行控制器声明

class UserController extends Controller

同理创建login控制器 LoginController.class.php

 

 

控制器连接模板

 

login.html模板

我们先在login控制器创建方法login 来调用位于view下面的login.html模板

代码如下

    public function login(){

    $this->display();

}

输入url  http://localhost/tp/admin/login/login/

 

可以看到 网页缺少cssjs文件的

查看更多精彩图片

 

我们需要把之前模板下的文件夹css,font,js,img 4个放在 根目录下的Public文件夹下

thinkphp文件夹同级的/Public/css//Public/font//Public/js/

因为thinkphp默认的css等非html模板文件都是放在根目录下的public文件夹下

查看更多精彩图片

 

然后修改

<link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">

修改

<link id="bootstrap-style" href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">

既吧所有的css文件夹前面加上前缀__PUBLIC__ 代表根目录

同理修改jsimg文件夹的引用

技巧 替换

href="css/href="__PUBLIC__/css/

 

src="js/  src="__PUBLIC__/js/

 

href="img/ href="__PUBLIC__/img/

  url(img/bg-login.jpg) url(__PUBLIC__/img/bg-login.jpg)

需要注意下 有单引号的 路径,最好的办法是查下下.js 一个个看 路径是否已经替换好

 

最后可以看到

查看更多精彩图片

 

再次访问上面的URL 可以发现能够正常调用css js等文件 模板套用成功

<form class="form-horizontal" action="index.html" method="post">

            修改为                                               

<form class="form-horizontal" action="login_try" method="post">

修改了表单的方法为login_try

同时修改2input name 一个是uname 一个是upassword

 

其他 模板

 

同理可以对其他模板页面源代码进行路径替换

href="css/ href="__PUBLIC__/css/

 

src="js/   src="__PUBLIC__/js/

 

href="img/   href="__PUBLIC__/img/

 

 

比较快捷的办法是 使用sublime 多窗口打开多个html 然后一起替换

分别得到修改好源代码路径的showall.html showadd.html showedit.html

 

 

 

 

 

数据库的创建-后台用户管理系统

 

 

通过数据库管理工具,phpmyadmin或者桌面版管理工具创建数据库test 以及2个表

 

Login控制器的对应的表admin_user数据结构

 

admin_user用来放后台登录用户信息 user用来放被管理的用户信息

admin_user 包含3个字段id-自增长,name-可变字符varchar40 uniquepassword-可变字符varchar40

查看更多精彩图片

 

user控制器的对应的表user数据结构

 

user 表包含字段4个,id-自增长,name-可变字符40,sex性别-可变字符6, -age年龄-整型,department部门 -可变字符40

 

查看更多精彩图片

 

 

Login.html前后端结合

 

后端部分

login控制器内的方法

login_try方法

使用thinkphp 系统函数M来创建一个数据库对象,注意表名称是admin_user s会用M方法需要变成AdminUser,鸵峰写法

另外在使用where的适合注意字段不带引号 变量是需要带引号

登录失败通过redirect跳转 带一个参数到login登录页面

主要redirect 需要带引号 和控制器以及方法的名称

如果登录成功 则创建session 并且跳转

 

    public function login_try(){//尝试使用表单的账号密码与数据库中比对

 

      $admin_user=M("AdminUser");//使用M方法创建数据库对象 表的名称是amdin_user所以这里要写AdminUser

      $name=$_POST['name'];  //将表单中post过来用户名变量赋值

      $password=$_POST['password']; //将表单中post过来用密码变量赋值

      $result=$admin_user->where(" name= '$name' and password='$password' ") ->select();//

      //使用数据库对象的方法where来进行筛选 注意字段名称不叫引号 字符串变量是需要加引号 并且将结果返回给result

      if ($result==null)  //如果取不到result 说明账户密码不符合

        {

          $msg="your name or password is not right";  // 创建错误提示信息 赋值给变量msg

          $this->assign('msg',$msg);// 将登录失败的提示信息 传递到模板里变量msg里面

          $this->display(login);  // 显示login模板

        }

      else //通过账户密码验证

        {

          session('name',$name); //创建session 并赋值 后台页面都需要检查是否存在session 判断是否非法登录

          $this->redirect('user/showall');//跳转页面到user控制器的showall方法 展示所有用户信息

        }

    }

 

login方法

使用login方法显示登录页面,判断url参数msg是否为wrong即可知道是什么类型的登录失败错误

 

    public function login(){// 展示登录页面

$this->display();  // 显示模板

 

    }

这样我们就完成了控制器login2个方法 以及与数据库的连接 并且模板的修改

实现了login.html 所有的功能

前端部分

 

login的前端页面只需要把值传递到后端,功能单一,不需要从数据库取信息在页面呈现,比较需要修改的内容很少。只需要 确保表单变量名称正确和增加一个提示信息即可

修改login.html 里面的表单元素input里面的名称 用户名文本框为name,密码文本框为password,并且增加一个H3 输出提示信息<h3>{$msg}</h3>

电子版教程

链接: https://pan.baidu.com/s/1nxf2Ksx 密码: xd8u