一、控制器部分
<?php
namespace app\user\controller;
use app\user\model\HelpCenterManual as HelpCenterManualModel;
use org\Response;
use app\index\logic\Upload;
use think\Controller;
use think\Request;
use org\Ucenter;
use think\Db;
/**
* 帮助中心使用手册控制器
* Class Manual
* @package app\user\controller
* @author fgf <2018-05-11>
*/
class Manual extends Controller
{
/**
* 列表数据
* @return array
*/
public function index(Request $request)
{
$page = $request->get('page', 1);//页数
$row = $request->get('row', 2);//每页数据
$source = $request->get('source', '');//版本 0-用户端 1-企业端
//查询模型取数据
$manual = new HelpCenterManualModel();
$manual->getList($page, $row, $source);
//提取模型查询的数据
$total = $manual->total;
$pages = $manual->pages;
$list = $manual->list;
$data = [
'total' => $total,//总的数据量
'page' => $page,//当前页
'pages' => $pages,//总页数
'trainlist' => $list,//每条数据详情
];
return Response::response(0, $data);
}
public function create()
{
//
}
public function save(Request $request)
{
//
}
/**
* 详情页数据
* @param $id
* @table qj_help_center_manual 使用手册表
* @return array
*/
public function read($id)
{
$info = Db::table('qj_help_center_manual')->where('id',$id)->find();
if (empty($info)) return Response::response(1,[],'数据为空');
//图片路径转oss路径
if (!empty($info['img'])) {
$info['oss_img'] = get_image_url($info['img']);
}else{
$info['oss_img'] = '';
}
return Response::response(0,$info);
}
public function edit($id)
{
}
public function update($id)
{
//
}
public function delete($id)
{
//
}
}
二、模型代码
<?php
namespace app\user\model;
use think\Model;
use think\Request;
use think\Db;
/**
* 帮助中心常见问题模型
* Class HelpCenterManual
* @package app\user\model
* @author fgf <2018-05-11>
*/
class HelpCenterManual extends Model
{
/**
* @param $page 页数
* @param $row 每页数据
* @param $source 版本 0-用户端 1-企业端
*/
public function getList($page, $row, $source)
{
$offset = ($page - 1) * $row;
$where = [];
//0用户端，1企业端
$where['source'] = $source?$source:0;
//统计总数
$total = Db::table('qj_help_center_manual')->where($where)->count();
//查询列表信息
$list = Db::table('qj_help_center_manual')->where($where)->order('id asc')->limit($offset, $row)->select();
//处理状态和图片路径处理
foreach ($list as $key => &$val) {
//图片path路径转oss路径
if ($val['img'] !='') {
$list[$key]['img']=get_image_url($val['img']);
}
}
$this->pages = ceil($total / $row);
$this->list = $list;
$this->total = $total;
}
}
三、路由定义-此处定义的是资源路由(根据实际情况自己定义)
return [
'__pattern__' => [
'name' => '\w+',
],
'/error' => 'index/error/index',//错误页面
'__rest__' => [
'user/manual'=>'user/manual',//帮助中心-使用手册
]
];
四、请求数据参考如下
{
"code": 0,
"message": "success",
-"data": {
"total": 2,
"page": "1",
"pages": 2,
-"trainlist": [
-{
"id": 4,
"title": "React的平凡之路",
"guide_read": "React的平凡之路，或许我们才刚刚上路",
"content": "<h1 style=\"font-size: 2.5rem;margin: 0.67em 0px;line-height: 1.5;color: rgb(51, 51, 51);font-family: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;white-space: normal;background-color: rgb(255, 255, 255)\">React的平凡之路，或许我们才刚刚上路</h1><h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">大家一起来</h2><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">React是一个用于构建用户界面的JS库，核心专注于视图，目的实现组件化开发</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">所谓组件化开发，其实就像堆积木一样，每个组件都包含了自己的逻辑和样式，然后再组合到一起完成一个复杂的页面</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">组件化的主要特点就是：<span style=\"font-weight: 700\">可组合、可复用、可维护</span></p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">那么废话不多说，让我们直接进入今天的主题，运用官方推荐的脚手架来搭建一个react项目开始学习吧</p><h2 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">create-react-app启动react项目</h2><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">第一步：<span style=\"font-weight: 700\">全局安装create-react-app</span>脚手架</p><pre style=\"font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">npm i create-react-app -g</pre><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">第二步：创建react项目</p><pre style=\"font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">create-react-app 项目名 // 如：create-react-app react123</pre><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"><br/></p><p><img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2018/5/9/163407dd81313cce?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/>通过以上操作就会自动创建一个名为react123的react项目了，在创建的过程中，脚手架会自动为你安好react的核心包，<span style=\"font-weight: 700\">react和react-dom</span>，在此过程完成后即可进入第三步了</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"><br/></p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">第三步：进入项目并启动服务</p><pre style=\"font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">cd react123 && npm start</pre><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"><br/></p><p><img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2018/5/9/16340810d2abf3e1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/>通过上面的三步曲，就会自动弹出浏览器访问一个<span style=\"font-weight: 700\">localhost:3000</span>(默认为3000端口)的react页面了</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"><br/></p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">现在，让我们通过进入创建好的react项目中，先去看一下搭建好的结构是什么样的？</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">下面就为大家展示一番：</p><p><img class=\"lazyload inited loaded\" src=\"https://user-gold-cdn.xitu.io/2018/5/9/163408396ca911f1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1\"/>根据上图画圈所示，public目录下的index.html表示的是项目的主静态文件(包含依赖的节点)，打开后发现一大堆内容，其实都可以删掉，只需要留一个root即可</p><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"><br/></p><pre style=\"font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html></pre><p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">说完public后，再说一下src目录，这里面的文件也都可以删掉(除了<span style=\"font-weight: 700\">index.js</span>主入口文件)，这里就和webpack4里默认的入口文件比较类似了</p><p><br/></p>",
"img": null,
"addtime": "2018-05-14 17:57:12",
"user_id": null,
"username": "admin",
"source": 1
}
]
}
}
