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

2022/8/30 1:24:12

编程Tag： data php demo 目录 文本格式 public 下面 带富

本文主要是介绍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目录里面

 

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

 

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

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

RewriteRule ^(.*)$ index.php?/$1 [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>";
        }
    }
}

 

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

 



这篇关于Think PHP 完整的带富文本格式以及图片上传，并且在页面上分页展示的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程