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

建网站笔记

程序员文章站 2022-04-25 11:17:49
...

 

 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

 建网站笔记

建网站笔记

这三个功能就能够正常使用了。