PbootCMS最全使用方法

技术百科 admin 发布时间:2024-04-08 浏览:42 次

基本思路,先在本地制作好,再放到线上。

所以先来看本地的制作方法。

安装本地环境(xampp)

到电脑腾讯管家直接搜索xampp点击下载即可,下一步安装成功之后如图所示:

2.打开xampp

    点击如图所示的两个按钮,意思是启动本地服务和mysql数据库,启动这两个东西之后,本地环境就ok了。

测试下本地环境是否成功:

点击下图所示的按钮,出现如图所示的页面即可证明本地环境成功。

3.下载PbootCMS

进入官网点击这里即可下载:

然后克隆到本地就可以了:

得到这样一个压缩文件,解压之后是这样的:

4.运行安装pbootCMS

C:\xampp\htdocs 找到这个路径,删除所有的东西,然后把pbootCMS文件夹复制到此处,如图所示:

然后,再次点击这里:

就会看到pbootCMS的安装界面,按要求填写信息,安装好即可。

5. 运行程序,查看网站的前台和后台

台地址:http://localhost/PbootCMS-3.X/

后台地址:http://localhost/PbootCMS-3.X/admin.php

系统后台默认访问路径:http://域名/admin.php   账号:admin   密码:123456

看到如上图所示,说明程序已安装成功。

到此,我们只是把官方的demo成功运行起来了,我们需要的是把自己的静态网站和pbootCMS后台联系起来,让后台能够动态修改静态页的数据。

简而言之,使用CMS的目的就是给静态页面配一个后台,让数据动态化。

接下来开始给自己的静态网页配pbootcms的后台。

6. 静态网站放入cms系统

需要准备好静态网站

然后,把静态网站的文件按照pbootcms的规则复制到C:\xampp\htdocs\PbootCMS-Site3\template\default目录下

然后,还需要一点改动,就是要把所有的.html文件放在一个名为html的文件夹下,而其他的css,js,img等文件都不用管,如图所示:

7. 运行自己的网站

此时再刷新http://localhost/PbootCMS-Site3/页面,会发现只有一些文字,网站的样式和图片都没了,这是因为我们把文件改动了,路径变了,自然就找不到样式图片等等东西了。

下面需要修改路径,主要修改css,js和其他依赖文件的路径,至于图片先不修改。

在所有的路径只需要在前面加上{pboot:sitetplpath}/即可,因为这个意思就是网站根路径,如图所示:

做完这一步,你就可以看到刚替换的网站页面已经正常显示了。

8. 抽离头和尾

在上一步的时候,你会发现所有的页面都有相同的文件引入,则需要挨个去修改路径,非常麻烦,那么此时就可以把这些相同的公共的部分抽离出来,放在单独的文件里,哪里用到在哪里引用即可。

常规的大部分网站页都是头部和尾部基本都是相同的,那么我们就把头和尾分别放在两个单独的文件里。

在html文件夹下新建comm文件夹,在comm文件夹下新建head.html和foot.html

然后看下网站的静态代码(打开index.html),把头部代码剪切到head.html里,尾部代码剪切到foot.html里。

如尾部代码文件:

此时,首页就缺少了头和尾,下面就把抽离出去的再引进来:

index.html的头部空闲位置使用{include file=comm/head.html}代替引入:

尾部同理 {include file=comm/foot.html}:

现在再刷新下http://localhost/PbootCMS-Site3/之后,一页已正常。

此时头尾已经是公共的了,其他所有用到头尾的页面,全部使用如上方式替换掉原本的头和尾。

9. 设置后台栏目

现在我们需要把静态页面的数据换成后台可控制的数据,先从栏目设置开始,因为栏目就是导航栏,有多少导航栏就有多少页面,而页面和导航栏就是在后台相关联的。

进入后台,先把原有的栏目全部删除,按照静态页面的导航栏的顺序依次新建栏目,如果有二级导航,那就添加二级栏目。

在添加栏目的时候,需要添加每个栏目对应的页面html名称。即页面模板。这个东西一般就按照静态页面的名字填选就好了。为啥是选填,因为这里会自动获取到你所有的html页面名称,你只需选就可以了。

像新闻和产品这样的列表到详情的页,需要选择列表页模板和详情页模板,两个模板都要填,像关于我们和联系我们这样的单页面,只需要填个详情页模板就可,详情页模板就是各自的html名字。

10. 换栏目数据

后台创建好栏目之后,就可以在静态页面上替换了。

导航栏代码替换(含二级导航):

<ul id="" class="menu"><li class="menu-item hover"><a href="{pboot:sitepath}/">首页<span>HOME</span></a> {pboot:nav}<li class="menu-item"><a href="[nav:link]">[nav:name]<span>[nav:subname]</span></a><ul class="sub-menu"> {pboot:2nav parent=[nav:scode]}<li class="menu-item"><a href="[2nav:link]">[2nav:name]</a></li> {/pboot:2nav}</ul></li> {/pboot:nav}</ul>

然后就可以看到页面上的导航栏已经显示出来了。

11. 换轮播图数据

后台:

前端:

找到轮播列表

<ul> {pboot:slide gid=1 num=3}<li><img src="[slide:src]"></li> {/pboot:slide}</ul>

12. 换网站基本信息

基本信息就是,底部信息,网站名称等

后台:

前端:

找到对应的地方替换即可,替换的标签网址:

https://www.pbootcms.com/docs/217.html

13. 列表数据:

例如新闻页news.ht就是列表到详情的数据形式。

后台:

前端:

使用当前栏目列表标签:https://www.pbootcms.com/docs/221.html

列表分页:直接使用cms自带的分页即可

https://www.pbootcms.com/docs/222.html

此时列表已经显示,下面来到新闻详情页:

找到详情页的页面,使用内容详情页标签替换数据:

https://www.pbootcms.com/docs/223.html

详情页的上一篇下一篇使用如下标签替换(这里不需要跳转链接):

上一篇:{content:precontent}

下一篇:{content:nextcontent}

到此新闻页的数据就替换完了。同理,所有的列表到详情都是相同的做法

14. 单页数据替换

单页数据替换指的是例如,关于我们,联系我们等页面。

以联系我们页面为例:

后台:

前端:

使用指定内容获取,所有的无列表的页面(专题)都用这个获取,注意这个需要填写专题的id,上图中有 联系我们=48

https://www.pbootcms.com/docs/224.html

还有就是例如要在首页获取某个图片,某段文字,都可使用指定内容获取,只需要写上对应的id皆可拿到

15. 留言提交表单功能

这个可以直接使用cms提供的完整代码cv:

<form action="{pboot:msgaction}" method="post"> 联系人:<input type="text" name="contacts" > 手机:<input type="text" name="mobile" > 内容:<input type="text" name="content" > 验证码:<input type="text" name="checkcode" ><img title="点击刷新" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /><button type="submit">提交</button></form>

如果有自己的表单样式,那么按照以上的代码,把静态页面的表单的name字段替换一下即可,别忘了一定要加上验证码:

然后留言就可以了,提交成功之后就可以在后台看见。

16. 搜索功能

首先,有一个搜索框,其次有一个搜索列表页,且名称必须是search.html,并且要在html文件夹内

然后,使用以下标签替换搜索框的字段即可

<form action="{pboot:scaction}"  method="get">

    关键字:<input type="text" name="keyword" >

    <button type="submit">搜索</button>

</form>

点击搜索即可跳转search.html显示出搜索的列表

搜索结果列表

{pboot:search}

    <a href="[search:link]">[search:title]</a>

{/pboot:search}

17. 注册功能

有一个注册页面,复制如下代码:

<div class="container pages"> <!-- 用户注册 --> <div class="row"> <div class="col-lg-3"></div> <div class="col-12 col-lg-6"> <form class="my-4" onsubmit="return register(this);"> <div class="form-group"> <label for="username">账 号</label> <input type="text" name="username" required id="username" onblur="isRegister()" class="form-control" placeholder="请输入登录账号"> <div id="usernote"></div> </div> <div class="form-group"> <label for="nickname">昵 称</label> <input type="text" name="nickname" required id="nickname" class="form-control" placeholder="请输入账号昵称"> </div> <div class="form-group"> <label for="password">密 码</label> <input type="password" name="password" required id="password" class="form-control" placeholder="请输入登录密码"> </div> <div class="form-group"> <label for="rpassword">确认密码</label> <input type="password" name="rpassword" required id="rpassword" class="form-control" placeholder="请再次输入登录密码"> </div> {pboot:if({pboot:registercodestatus}==1)} <div class="form-group"> <label for="checkcode">验证码</label> <div class="row"> <div class="col-6"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6"> <img title="点击刷新" style="height:33px;" id="codeimg" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /> </div> </div> </div> {/pboot:if} {pboot:if({pboot:registercodestatus}==2)} <div class="form-group"> <label for="checkcode">邮箱验证码</label> <div class="row"> <div class="col-6"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6"> <span class="btn btn-info mb-2" onclick="sendEmail();">发送</span> </div> </div> </div> {/pboot:if} <div class="form-group"> <button type="submit" class="btn btn-info mb-2">立即注册</button> <span class="text-secondary ml-3">已有账号?<a href="{pboot:login}">马上登录</a></span> </div> </form> </div> <div class="col-lg-3"></div> </div> </div><script>//ajax注册function register(obj){ var url={pboot:register}; var username=$(obj).find("#username").val(); var nickname=$(obj).find("#nickname").val(); var password=$(obj).find("#password").val(); var rpassword=$(obj).find("#rpassword").val(); var sex=$(:radio[name="sex"]:checked).val(); var checkcode=$(obj).find("#checkcode").val(); $.ajax({ type: POST,url: url,dataType: json,data: {username: username,nickname: nickname,password: password,rpassword: rpassword,sex: sex,checkcode: checkcode },success: function (response, status) {if(response.code){ alert("注册成功!"); location.href= response.tourl; }else{ $(#codeimg).click(); alert(response.data); } }, error:function(xhr,status,error){ alert(返回数据异常!); } }); return false;}//发送邮件验证码function sendEmail(){ var url={pboot:sendemail}; var username=$("#username").val(); if(!username){ $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); $("#usernote").text("请输入需要注册的账号!"); return false; } $.ajax({ type: POST,url: url,dataType: json,data: {to: username },success: function (response, status) {if(response.code){ alert(response.data); }else{ alert(response.data); } }, error:function(xhr,status,error){ alert(返回数据异常!); } }); return false;}//检查注册账号function isRegister(){ var url={pboot:isregister}; var username=$("#username").val(); if(!username){ $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); $("#usernote").text("请输入需要注册的账号!"); return false; } $.ajax({ type: POST,url: url,dataType: json,data: {username: username },success: function (response, status) {if(response.code){//已经被注册 $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); }else{//未被注册 $("#username").addClass("is-valid"); $("#usernote").addClass("valid-feedback"); $("#username").removeClass("is-invalid"); $("#usernote").removeClass("invalid-feedback"); } $("#usernote").text(response.data); }, error:function(xhr,status,error){ alert(返回数据异常!); } }); return false;}</script>

18. 登录

登录页复制如下代码或更换字段:

<div class="container pages"><!-- 用户登录 --><div class="row"><div class="col-lg-3"></div><div class="col-12 col-lg-6"><form class="my-4" onsubmit="return login(this);"><div class="form-group"><label for="username">账 号</label><div><input type="text" name="username" required id="username" class="form-control" placeholder="请输入登录用户名/邮箱/手机号码"></div></div><div class="form-group"><label for="password">密 码</label><div><input type="password" name="password" required id="password" class="form-control" placeholder="请输入登录密码"></div></div> {pboot:if({pboot:logincodestatus})}<div class="form-group"><label for="checkcode">验证码</label><div class="row"><div class="col-6"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6"><img title="点击刷新" style="height:33px;" id="codeimg" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:if}<div class="form-group"><button type="submit" class="btn btn-info mb-2">立即登录</button><span class="text-secondary ml-3"><a href="{pboot:register}">注册账号</a></span><span class="text-secondary ml-3"><a href="{pboot:retrieve}">找回密码</a></span></div></form></div><div class="col-lg-3"></div></div></div><script>//ajax登录function login(obj){var url={pboot:login};var username=$(obj).find("#username").val();var password=$(obj).find("#password").val();var checkcode=$(obj).find("#checkcode").val(); $.ajax({type: POST,url: url,dataType: json,data: {username: username,password: password,checkcode: checkcode },success: function (response, status) {if(response.code){ alert("登录成功!"); location.href=response.tourl; }else{ $(#codeimg).click(); alert(response.data); } },error:function(xhr,status,error){ alert(返回数据异常!); } });return false;}</script>

19. 评论功能

创建一个页面 comm---comment.html 复制下面代码

{pboot:if({pboot:commentstatus})}<div class="container"><div class="shadow-sm p-3 my-5 bg-white rounded"><h4>发表评论:</h4><form class="my-4" onsubmit="return submitcomment(this);" data-action="{pboot:commentaction}" ><div class="form-group"><textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea></div> {pboot:2if({pboot:commentcodestatus})}<div class="form-group"><div class="row"><div class="col-6 col-md-3"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6 col-md-3"><img title="点击刷新" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:2if}<div class="form-group"><button type="submit" class="btn btn-info mb-2">提交评论</button></div></form><h4>评论记录:</h4><a name="comment"></a> {pboot:comment contentid={content:id} num=20}<div class="media border-bottom pb-3 pt-3"><img class="mr-3" src="[comment:headpic]" height="25"><div class="media-body"><h6 class="mt-0"><strong>[comment:nickname]</strong><small style="color:#999">[comment:date]</small></h6><p>[comment:comment] <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[comment:replyaction]">回复</span></p> {pboot:commentsub} <!-- 调用子评论 --><div class="media mt-3 border-top-dashed pt-3"><img class="mr-3" src="[commentsub:headpic]" height="25"><div class="media-body"><h6 class="mt-0"><strong>[commentsub:nickname]</strong> <small style="color:#999">[commentsub:date]</small></h6><p> @[commentsub:pnickname] [commentsub:comment] <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[commentsub:replyaction]">回复</span></p></div></div> {/pboot:commentsub}</div></div> {/pboot:comment}<!-- 分页 --> {pboot:2if({page:rows}>0)}<nav aria-label="page navigation" class="my-4"><div class="pagination justify-content-center"><a class="page-item page-link" href="{page:index}#comment">首页</a><a class="page-item page-link" href="{page:pre}#comment">上一页</a><a class="page-item page-link" href="{page:next}#comment">下一页</a><a class="page-item page-link" href="{page:last}#comment">尾页</a></div></nav> {2else}<div class="text-center my-5 text-secondary">未查询到任何数据!</div> {/pboot:2if}</div></div><!-- 评论回复弹框 --><div class="modal" tabindex="-1" role="dialog" id="reply"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">回复评论:</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><form onsubmit="return submitcomment(this);" data-action="" id="replyform"><div class="modal-body"><div class="form-group"><textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea></div> {pboot:2if({pboot:commentcodestatus})}<div class="form-group"><div class="row"><div class="col-6"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6"><img title="点击刷新" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:2if}</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="submit" class="btn btn-info">提交评论</button></div></form></div></div></div><script>//评论回复弹框$(.replybtn).on("click",function(){ var url=$(this).data("action"); $("#reply").modal("show"); $("#replyform").data("action",url);});//提交评论function submitcomment(obj){var url= $(obj).data("action");var comment=$(obj).find("#comment").val();var checkcode=$(obj).find("#checkcode").val(); $.ajax({type: POST,url: url,dataType: json,data: {comment: comment,checkcode: checkcode },success: function (response, status) {if(response.code){ alert(response.data); $(obj)[0].reset(); $(".modal").modal("hide"); window.location.reload() }else{if(response.tourl!=""){if(confirm(response.data+是否立即跳转登录?)){ location.href=response.tourl; } } $(.codeimg).click();//更新验证码 } },error:function(xhr,status,error){ alert(返回数据异常!); } });return false;}</script>{/pboot:if}

在详情页中调用:复制此标签,评论即可出现(这里是吧评论功能抽离出去,然后再引进来了)

{include file=comm/comment.html}

如果需要某个页面的字段过多,后台的字段不够的话,可以在

全局配置 -- 模型字段 -- 扩展字段新增 里面新增字段

前端调用(内容页):

[content:ext_***]调取扩展字段内容

20. 把整个文件夹上传到服务器

当所有功能都完成之后,就可以上线了

结束。

道友,可以点个赞吗👍🏻

在线咨询

点击这里给我发消息售前咨询专员

点击这里给我发消息售后服务专员

在线咨询

免费通话

24h咨询:400-888-8888


如您有问题,可以咨询我们的24H咨询电话!

免费通话

微信扫一扫

微信联系
返回顶部