Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示


Think php6.0官网网址:序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn)

下面是基础配置

第一步:创建TP框架,命名为tp

composer create-project topthink/think tp

第二步:点击架构里面的多应用模式,安装多应用模式拓展

composer require topthink/think-multi-app

第三步:点击视图里面的模板引擎,安装视图拓展

composer require topthink/think-view

第四步:点击tp框架里面的 .example.env 文件,将该文件重命名为 .env

第五步:创建一个名字为demo的多应用目录,该目录保存在app下

php think build demo

第六步:创建一个名为Goods的控制器

php think make:controller demo@Goods --plain

第七步:创建一个名为Good的模型

php think make:model demo@Good

第八步:在demo目录下面创建路由名为route的目录,并在该目录里面创建route.php路由文件,并借鉴框架里面的route目录下面的app.php路由文件,将下面路径复制到新建的route.php路由文件里面

use think/facade/Route;

 下面配置域名数据库

在小皮里面配置第一域名www.2006a.com,并且根目录选择tp框架里面的public目录里面

Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示

 

此时已经可以访问到该框架

Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示

 

打开Nacivat,创建2006a数据库,并创建text表

Think PHP 完整的带富文本格式以及图片上传,并且在页面上分页展示

在demo目录下面的view创建一个form.html,在网页访问的时候后因为域名需要为www.2006a.com/index.php/demo/form  才可以访问,这时需要打开public目录下面的 .htaccess文件,并将最后一行修改为

RewriteRule ^(.*)$ index.php?/\ [QSA,PT,L]

因为该表单需要富文本,所以要把下面该富文本文件复制到public目录下面

 

 

 

 

 

 

 

 

 

(因文件无法上传,所以放网盘里面了)

链接:https://pan.baidu.com/s/1fsvhldLlJz3rRjPv0kfOMw?pwd=0613
提取码:0613

基本配置已经完成

连接到数据库,找到tp框架下面的.env文件进行修改为以下

APP_DEBUG = true

[APP]
DEFAULT_TIMEZONE = Asia/Shanghai

[DATABASE]
TYPE = mysql
HOSTNAME = 127.0.0.1
DATABASE = 2006a
USERNAME = root
PASSWORD = root
HOSTPORT = 3306
CHARSET = utf8
DEBUG = true

[LANG]
default_lang = zh-cn

 

点击demo目录下面的模型文件,连接2006a数据库里面的text表单

<?php
declare (strict_types = 1);

namespace app/demo/model;

use think/Model;

/**
 * @mixin /think/Model
 */
class Good extends Model
{
    //连接表单
    public $table='text';
}

 

下面是富文本到form表单上面

首先找到public目录下的utf8-php,打开该文件夹再点开index.html文件,里面有下面三行代码

 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

选中这三行,要注意的是需要更改路径,将这三行代码复制到已经创建好的dmeo目录下的form表单,路径更改为

<script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/utf8-php/lang/zh-cn/zh-cn.js"></script>

接着回到index.html文件,在61行,有

<script type="text/javascript">
                //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

这个也直接复制到form表单里面,不过需要注意的是,后面要加一个</script>,另外editor是富文本框的id值,注意更改

然后我们大致的表单添加页面就是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/utf8-php/lang/zh-cn/zh-cn.js"></script>

<body>
<div style="width: 800px; margin: auto;padding-top: 200px;">


    <form class="form-horizontal" method="post" enctype="multipart/form-data" action="/demo/add">
        <div class="form-group">
            <label  class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">性别:</label>
            <div >
                <input type="radio" name="userend" value="男">男
                <br>
                <input type="radio" name="userend" value="女">女
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">个人头像:</label>
            <div class="col-sm-10">
                <input type="file" class="form-control" name="userimg">
            </div>
        </div>


        <div class="form-group">
            <label  class="col-sm-2 control-label">时间:</label>
            <div class="col-sm-10">
                <input type="datetime-local" name="usertime" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">个人介绍:</label>
            <div class="col-sm-10">
                <textarea name="usertext" id="goods_introduce" cols="90" rows="3" placeholder="我喜欢读书、跑步"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary btn-lg">注册</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('goods_introduce');
</script>

下面是路由

<?php
use think/facade/Route;

Route::get('form',function (){
    return view('form');
});
Route::post('add','Goods/add');

Route::get('list','Goods/list');

Route::get('delete','Goods/del');

这个是控制器

<?php
declare (strict_types = 1);

namespace app/demo/controller;

use app/Request;
use think/facade/Filesystem;
use think/facade/View;

class Goods
{
    //添加
    public function add(Request $request){
        $pram=$request->param();
        $data= new /app/demo/model/Good();
        $file=$request->file('userimg');
        $save='/'.Filesystem::disk('public')->putFile('image',$file);
        $pram['userimg']=$save;
        $res=$data->insert($pram);
        if ($res){
            return "<script>alert('添加成功');location.href='list'</script>";
        }
    }

    //展示
    public function list(){
//        $data=new /app/demo/model/Good();
//        $res=$data->paginate(3);

        $data=/app/demo/model/Good::order('id','desc')->paginate(3);
        return View::fetch('/list',['data'=>$data]);

    }

    //删除
    public function del(Request $request){
        $id=$request->param('id');
        $data= new /app/demo/model/Good();
        $del=$data->where('id',$id)->delete();
        if ($del){
            return "<script>alert('删除成功');location.href='list'</script>";
        }else{
            return "<script>alert('删除失败');location.href='list'</script>";
        }
    }
}

 

最基础的添加展示和删除就完成了

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/282849.html

(0)
上一篇 2022年8月29日
下一篇 2022年8月29日

相关推荐

发表回复

登录后才能评论