建网站笔记
1.安装phpstudy(最好不要安装到C盘),然后
php,启动!电脑,关闭!(不)
2.安装后,同级目录下名称为 WWW 的文件夹是网站的根目录
(其中有三个文件,删除了一个中间的 I.php )
然后在浏览器中输入localhost,显示:
(因为删除了 I.php 才显示如下界面,如果不删除显示的是phpstudy的探针)
3.到thinkphp官网(http://www.thinkphp.cn/)下载 thinkphp_3.2.3_full压缩包
(顺便吐槽一句。。那个真的是thinkphp官网吗。。第一眼以为是个广告页面差点退出来QAQ)
然后解压复制到 blog 文件夹里,刷新网页
再点进blog/
blog文件夹
此时app文件夹里多出来文件,app文件夹很重要,用来放网站的前台和后台,前后台链接,php代码
public文件夹是公共文件夹,用来放网站的图片,css,js......
thinkPHP文件夹是php自带的,里面是函数库等
网站配置的一个文件
在22行加入 define('BIND_MODULE', 'Admin'); (注意后面需要注释掉,并且不要注释错了orz要不然页面刷新不了,给自己提个醒)
之前的app文件夹多出来一个admin文件夹(后台)
再把之前打上去的代码注释掉 (必需)
4.找一个前端和后端模板
在app-->home-->view-->新建一个 Index文件夹,把前端模板命名 index.html 粘贴进去
之后就开始连接网页,打开app-->home-->controller-->IndexController.class.php 打开,再改成如下
再刷新网页,则显示模板页面
但是css样式不在,则需要把这些关于 css,图片,js 的文件夹粘贴到blog-->Public-->Home (Home是新建的)
打开app-->home-->view-->Index-->index
以下就是连接css样式的代码
然后在这三处加上 __PUBLIC__/Home/原路径
-------------------------------------------------
----------------------------
5.导入后台模板类似前台,注意css文件也要复制粘贴到pubic文件夹(建一个admin文件夹)
6.公共页面分离
之后在app-->admin-->view建一个common文件夹,里面新建两个网页
分离顶端和左侧的代码,再连接上去
7.添加栏目
将可以添加作品的模板复制到新建的Cate文件夹里
新建一个控制器,控制Cate文件夹
连接
再精简侧边栏
再加个动态超链接,将栏目管理链接到list页面
到add页面精简栏目添加
8.增加数据库
(1)进入数据库 输入 localhost ,选择phpMyAdmin
用户名和密码默认都为 root
(2)点击数据库,然后新建数据库
(3)建好数据库后(是空的),再新建数据表
此张数据表就用来存栏目
(4)连接数据库
'DB_TYPE' => 'mysql', // 数据库类型
'DB_HOST' => '127.0.0.1', // 服务器地址
'DB_NAME' => 'ykj', // 数据库名
'DB_USER' => 'root', // 用户名
'DB_PWD' => 'root', // 密码
'DB_PORT' => 3306, // 端口
'DB_PARAMS' => array(), // 数据库连接参数
'DB_PREFIX' => 'ykj_', // 数据库表前缀
'DB_CHARSET'=> 'utf8', // 字符集
'DB_DEBUG' => TRUE, // 数据库调试模式 开启后可以记录SQL日志
将这个文件复制到
将数据库名和数据库表前缀名修改(注意不要修改错了)
--------------------------
--------------------------
9.增加栏目,提交到数据库里(之后再读取数据库)
(1)进入控制器,新加一个函数
再进入add.html,将action里面全删掉,name修改
然后刷新界面,出现类似这个界面,则数据提交过程完成
再进入控制器,增加代码
到此,新增栏目就成功了,数据库也有显示。
--------------
--------------
10.栏目列表显示
首先打开lst.html,精简界面
打开控制器,修改index函数
再打开lst前端,找到下图处的代码进行修改,使栏目循环
其中name里的cates是数据库里的名字
刷新界面如下:
(数据库里有几个栏目,这里就循环几个栏目)
接下来在lst.html中修改ID和标题,使之动态变化
11.栏目删除
(1)打开控制器和lst.html
---在此之前优化一下(在第7步)----
--------------
在控制器增加delete函数
在lst中修改,顺便在a标签里加一个容错机制
(函数意思是 在控制器里找delete函数,删除id,因为cate_id是主键且唯一)
容错机制:
12.栏目修改
(1)在控制器里增加edit函数
(和add函数差了 add和save、新增和修改)
(2)在lst里修改
但是此时并不能进入修改界面
这个时候需要在view文件夹下复制add.html再粘贴重命名为edit.html
将add.html中的代码全部复制到edit.html中,再将所有的 新增 字样全都替换成 修改
(sumline快捷键为 Ctrl+H)
此时修改栏目页面就加载出来了
但是修改栏目还是失败的
进入控制器,在edit函数增加代码
$cateid=I('id'); //加入id为1
$caters=$cate->find($cateid); //在cate里找id为1 的数据
$this->assign('caters',$caters); //分配数据
还要进入edit.html找到form表单,在form表单下一行加入如图代码
(目的就是告诉电脑我要修改的id号是多少)
(属性为hidden隐藏,就看不见要修改的id)
除此之外还要进行优化
在edit.html中栏目标题那里修改代码
使点击修改栏目后,框里出现原来的栏目名
BUT!!!这个时候修改栏目这个功能还是失败的
因为此时控制器里并没有接受到要修改的值,需要在控制器里增加代码
这个时候栏目修改功能就完全完成了。
------------注意------------------------------
7.14这一天。。突然我的PHPadmin登录不上了,密码用 root 登录不上,百度了说把config.default.php其中两行改为 true,但是没用。我之前就已经在电脑上安装过mysql数据库,密码是8888,然后我就用8888登录PHPadmin,登陆上了。。但是没有我之前建的blog数据库了 QAQ
但是我重新建了个blog数据库和bo_cate数据表,并在config.php里更改了一些东西
然后一切显示正常了,虚惊一场 QAQ
大清早来这一出,很慌。然后就疯狂百度,在大佬群里提问。。。
orz丢人。。但是我还是没搞懂为什么之前root可以登录,现在不行。(是不是电脑迟钝了???)
-----------------------------------
13.修改剩下的三行
<1>
进入left.html修改代码,并添加跳转地址
再在view文件夹里新建3个文件夹(About、Article、First),再把Cate文件夹里面的3个网页复制粘贴到First文件夹里
再把模板里的inser.html的一部分代码粘贴到add(first文件夹里的add)里
此时需要新建一个控制器,控制系统管理这一模块
首页管理模板就已经导入成功了,接下来写数据表
打开blog数据库,新建一张bo_first数据表,用来存放首页的内容
数据表建立完成后,开始写php
进入first-->add,将所有 新增栏目 替换为 新增首页
然后进入add给输入框input起名字
-------
-------
接哈来,写first控制器的代码(与Cate控制器中add函数有名字区别)
其中上传图片的代码如下:
if ($_FILES['a_pic']['tmp_name']!='') {
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = './Uploads/'; // 设置附件上传(子)目录
$upload->rootPath = './'; // 设置附件上传根目录
$info=$upload->uploadOne($_FILES['a_pic']);
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$data['f_pic']=$info['savepath'].$info['savename'];//article_pic 为数据库字段
}
}
复制粘贴过后,仍然需要改动一些东西
(其中3145728是3M)
则此时图片就能上传成功:
14.修改这一模块,使之显示上传图片和文章的目录
此时打开first控制器,在lst添加代码,注意和Cate控制器的差别
也需进入lst改代码,找到循环数据那一块
(那个cate_name也改成f_title)
注意:我这里 删除 那个按钮改错了,应该也把 删除 的那个按钮改成{$vo.f_id}
-------------------------------
此时图片那一栏显示的是图片的路径,而我们要将它显示成具体图片
这个时候!我们!将之前的<td>{$vo.f_pic}</td>代码修改成<td><img src="{$vo.f_pic}"></td>; 这样图片就可以显示出来了
但是呢,图片大小不规则看起来不美观,我们可以在标签里给图片加上高度:height="30";
这样看起来就很舒服。
这个时候注意,如果我们新增首页文章后,只填写了标题和内容,没有加上图片,提交完成后,图片那一栏里就会显示图裂,
---------------------------------
但是我的电脑并没有显示图裂...直接是提交不成功,然后我在数据库里对f_pic默认值修改成null,就可以选择不上传图片了
----------------------------
在代码里加上if语句
显示成功。
<1.1>操作-->删除
直接把Cate控制器里的delete函数复制到first控制器里,再把cate替换成first就可以了
<1.2>操作-->修改
进入edit界面,替换add部分代码
显示和新增首页文章一样的界面
打开first控制器
因为edit函数和add函数差不多,先复制代码到edit函数里再做修改
此时在进入edit.html里修改代码
(在value里面加代码,是为了在 修改页面 的 修改栏目标题 中能显示原来的标题 )
注意:我又眼花出错误了,图片里的if代码__ROOT__{$firsts.f_pic}; 图里first我少了个s
-----------------------
进入first控制器
则修改成功。
15.修改剩下的三行的第二行---文章管理
------------------
其中新加了一个推荐文章模块
-----------------------
复制first文件夹下的三个网页到article文件夹里,再新建一个article控制器
接下来新建一个数据表bo_article
进入article-->add里,复制首页标题相关的代码,并修改名字和type
并且value赋值为1
接哈来,写article控制器代码,将first全替换成article,个别的也要改一下
add.html里面也是
添加成功。
现在修改这一模块,使之显示上传的文章的目录
先改控制器,在lst函数增加内容
进入lst.html改代码,找到循环数据那一块修改代码
因为增加了是否推荐这一栏目,则需要增加代码
成果:
此时将是否推荐那一栏的结果修改为未推荐和已推荐,加一个判断语句
在lst.html里面修改,并设置颜色,则完成。
<1.1>操作-->删除
直接复制delete函数,再修改部分代码
<1.2>操作-->修改
将first控制器里的edit函数代码复制到article控制器里,再修改,并且加一个a_rem
老步骤,进入edit.html里修改代码
将add里面 是否推荐 模块的代码复制到edit.html里,再修改一些名字细节
这样修改功能就差不多完成了。
但我们可以注意到已推荐和未推荐的文章点击修改后,是否推荐那一栏都未打钩(比如我选择第二篇文章)
所以我们需要在edit.html里加一个if语句进行判断
完成!
16.后台做的差不多了,转到前台
再将Index里的网页复制到About和Article文件夹里。
再进入Home里的控制器,新建两个控制器并修改名字
17.分离公共页面
在地址栏里输入一下地址(或者/Article)
显示的界面是一样的,但是我们要修改这两个模块,但是最上面,最下面和最右边一块的页面是一样的,要修改的是中间一块,所以我们首先要分离公共页面
18.显示动态栏目
进入header.html中,只留一个栏目,再用volist标签进行循环,并将栏目名称改成{vo.cate_name},与后台连接
进入后台管理修改一下栏目标题
这个时候要加个a标签,使点击栏目后跳转到那个页面
(注意:这里的代码不能留有空格,否则会出现报错 好像是%20%20这种? ,然后if里condition的cate_id 123要和后台的一样)
这样点击 首页/文章/关于 栏目后,地址栏就会发生变化,但是点击 文章/关于 后,栏目那一行是空的
此时我们把index控制器里显示页面的代码复制到另外两个控制器里,再点击栏目内容,就能看到栏目了。
之前我们给页面分离过公共页面,而控制器也能分公共的,再连接。
先写一个Common控制器
( __construst 是初始化)
19.一个优化
但是当我们跳转到栏目中任一个时,栏目的背景颜色都不会显示出来
我们想要呈现这样的效果就需要改动一下
(1)进入header.html相应位置添加如下代码
但是颜色都显示上了
(2)进入公共控制器,再进入其他控制器把display写回来
(3)再进入index等其他控制器里添加代码(除common),注意id不同
(4)进入header加个if判断
这时我们就达到了我们想要的效果了:
19.前端文章循环显示(显示数据库里的文章)
(1)打开Home里的index控制器,先做首页文章的循环添加
(2)接下来打开view-->Index-->index.html,找到相应的文章模块加上volist循环标签
(其中的 volist name="firsts" 的 firsts 是和控制器中 $this->assign('firsts',$firsts); 一致的,改成其他名字也行,如下图,但是为了容易区分,不要起其他乱七八糟的名字)
(3)使首页显示后台的文章,修改下面三处
但是当我们上传无图片的文章后,图片那一栏应该加一个默认的图片,这个时候我们需要加一个判断
(1)首先将你准备好的照片放在Upload文件夹里
(2)再回到index.html里修改一下代码和图片路径,此时上传无图片的文章就会出现事先你准备好的图片
20.文章循环做好了,开始做文章内容页
(1)打开Home-->view 复制index,并命名为article,article就成了文章的内容页
删除volist代码和循环文章部分的代码
然后再进入index.html在a标签加个超链接
这个时候当我们把鼠标放在文章标题上就会有地址出现(传id号)
(2)给article写方法
进入index控制器
(3)继续完善代码,然后进入article,将之前的vo改成firsts,并增加一行代码
这个时候点开文章栏目,就可以看到文章的内容了
但是我们注意到,栏目中的首页并没有变蓝,进入index控制器如下图操作
21.让文章发布视频
(1)将ueditor文件夹复制到Public里
再将里面的帮助文档里的最后代码复制到app-->admin-->view-->first-->add.html最后面
这个时候我们进入后台管理
增加已经变成了这个样子,但是修改还没有,同理,我们把刚才的代码复制到edit.html里
剩下的栏目同理。
(2)但让百度编辑器仅仅加载出来是不行的,且修改文章后出现了p标签
我们需要人为改进(如下图)
(3)放B站的视频
进入B站选择一个视频,复制嵌入代码,然后粘贴到编辑器的html里
再点一下html就会显示视频了,然后提交,刷新文章首页,再点进去就会看到视频
22.文章分页
(1)进入home下的index控制器将这一部分代码注释掉
再将下面的文章分页代码复制上去
$first=D('first');
$count=$first->count();// 查询满足要求的总记录数
$Page=new\Think\Page($count,2);// 实例化分页类 传入总记录数和每页显示的记录数(2)
$show=$Page->show();// 分页显示输出
$list=$first->limit($Page->firstRow.','.$Page->listRows)->select();// 进行分页数据查询 注意limit方法的参数要使用Page类的属性
$this->assign('list',$list);// 赋值数据集
$this->assign('page',$show);// 赋值分页输出
(注意如果要改first意外的页面,要把first改成article和about,否则页面无法正常显示,但要注意是图下的四处)
进入home-->view-->Index文件夹里的index.html修改代码(之后的是view-->article/about)
因为之前文章循环的代码被注释掉了,所以volist name="firsts"是没有用的,所以将名字改成 list (与index控制器相对应)
(2)此时下面的1/2按钮还是没用的
将下面的style样式复制到index中的title标签下面
<style type="text/css">
.b-page {
background: #fff;
box-shadow: 0px 1px 2px 0px #E2E2E2;
}
.page {
width: 95%;
padding: 30px 15px;
background: #FFF;
text-align: right;
overflow: hidden;
}
.page .first,
.page .prev,
.page .current,
.page .num,
.page .current,
.page .next,
.page .end {
padding: 8px 16px;
margin: 0px 5px;
display: inline-block;
color: #008CBA;
border: 1px solid #F2F2F2;
border-radius: 5px;
}
.page .first:hover,
.page .prev:hover,
.page .current:hover,
.page .num:hover,
.page .current:hover,
.page .next:hover,
.page .end:hover {
text-decoration: none;
background: #F8F5F5;
}
.page .current {
background-color: #008CBA;
color: #FFF;
border-radius: 5px;
border: 1px solid #008CBA;
}
.page .current:hover {
text-decoration: none;
background: #008CBA;
}
.page .not-allowed {
cursor: not-allowed;
}
</style>
把下面这段代码复制到index中volist标签的下面
<div class="list page b-page">
{$page}
</div>
这样就有个分页按钮,也可以使用,然后再把之前的按钮删掉(之前的按钮在common里面,之前有分离公共页面)
23.推荐文章模块的操作
(1)推荐模块在公共部分,打开Common控制器
再进入Common文件夹里的right.html修改代码,加个volist标签,修改一下名字
(2)但是如果推荐文章多的话,我们还是限制推荐文章的个数,在common控制器的pop函数里加limit
(3)点击推荐文章的封面和标题能够跳转到相应的页面,在a标签里加链接
24.登录模块的增加
(1)将login文件夹,控制器粘贴过去
(2)再回到app-->admin层打开common 将function.php复制过来
(3)这时在网址输入login/login就可进入登录界面
(4)打开数据库新建个用户表
(5)但是此时后台和后台登录界面是分离的,将除了login和base的控制器都打开,在controller前面都加上base,继承base控制器
这时候进入后台就需要先登录了。
25.还有一些剩下的操作,将下图功能完成
将如下三条代码对应的加到相应的地方
管理员:<?php echo $_SESSION['user_name'];?>
__MODULE__/Login/edit/id/<?php echo $_SESSION['user_id'];?>
__MODULE__/Login/logout
这三个功能就能够正常使用了。
下一篇: border制作三角形