cms新闻后台管理.md · 刘武888/web4-admincms

# cms新闻管理系统

项目演示地址：

前台：http://homecms.kuaijiankj.com/

后台：http://admincms.kuaijiankj.com/   管理员登录账号：admin  管理员登录密码：admin123

## 后台开发

开发模式：服务器端渲染

技术栈：nodeJs+express+sequelize+art-template+session+cookie+layui框架

### 一，使用express-generator快速构建项目

1）全局安装 express-generator

```js
   npm i express-generator -g
```

2）使用express语句快速构建项目

```
express 项目文件夹的名字 -e   例如 express cms -e   
```

**备注**：默认引擎是ejs, 如果要修改为art-template引擎，进行如下操作

- 安装

```js
  npm install --save art-template 
  npm install --save express-art-template
  ```

- 配置：在app.js中进行配置

```js
  app.engine('html', require('express-art-template'))
  ```

3) 进入项目目录, 运行 npm  i, 一次性安装所有的依赖模块

```js
cd cms
npm i
```

4）启动项目

- 启动项目前，可以做如下操作：

- 在项目跟目录下创建 .env文件，配置一些常用的变量，如服务器启动的端口

```js
    PORT = 8888
    ```

- 下载dotenv模块，并在bin/www中进行引入

```js
    npm i dotenv
    require('dotenv').config('../.env')
    console.log(process.env.PORT);
    ```

- 可以更改package.json中的script属性，更改启动命令

```js
  "scripts": {
      "start": "nodemon ./bin/www"
    },
  ```

- 可以使用 npm start启动时，实际执行的是nodemon命令

5）注册全局中间件

全局中间件需要在路由之前

```js
app.use(function (req, res, next) {
  //封装返回数据的函数
  res.cc = function (status = 200, msg = '成功', data = []) {
    if (data.length > 0) {
      res.json({
        status,
        msg,
        data
      })
    } else {
      res.json({
        status,
        msg
      })
    }
  }
  next()
});
```

6) 注册错误中间件，用来捕获错误

```js
app.use(function (err, req, res, next) {
   // 未知错误，通常表示服务器端的错误
   res.cc(500, err.message)
});

```

### 二，创建本地仓库，上传到远程仓库

1）git init 创建本地仓库

2）创建忽略文件   .gitignore  配置要忽略的选项，不用上传到远程仓库，将node_modules/   config/config.json/   .env 作为忽略项

3） git add . 将所有的文件提交到暂存区

4）git commit -m "注释" 将暂存区的文件提交到本地仓库

5）打开gitee官网，创建仓库

6）使用SSH 方法提交到本地仓库

先和仓库建立联系  git remote add origin SSH自动生成

例如  git remote add origin git@gitee.com:xiaohou0728/news-management.git

提交到本地仓库，第一次提交需要使用git push -u origin master 。有联系之后提交，可以使用 git push 命令

git status 检查工作区是否干净

### 三、创建登录分支

项目上传到本地仓库之后，需要创建新的分支来开发模块，不要在master分支中做任何操作。

```js
git branch  //查看当前分支
git checkout -b login   // 快速创建登录分支
```

### 四，项目模块开发

#### 项目模块一：登录

#### a 配置数据库

##### 1）使用sequelize-cli操作数据库

```js
npm install --g  sequelize-cli  // 已经安装不需要在安装

// 如果之前没有安装这2个，还得安装这个
npm i sequelize
npm i mysql2

```

##### 2）项目启动

```js
npx sequelize-cli init 或  sequelize  init 或者 sequelize-cli init
```

##### 3）更改配置项

继续进行之前,我们需要告诉 CLI 如何连接到数据库. 为此,可以打开默认配置文件 `config/config.json`. 看起来像这样:

```js
{
  "development": {
    "username": "root",
    "password": root,
    "database": "blog",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}
```

现在编辑此文件并设置正确的数据库凭据和方言.对象的键(例如 "development")用于 `model/index.js` 以匹配 `process.env.NODE_ENV`(当未定义时,默认值是 "development").

- 如果你的数据库还不存在,你可以调用 db:create 命令. 通过正确的访问,它将为你创建该数据库.

```js
  npx sequelize-cli db:create  --charset 'utf8mb4'
  ```

##### 4) 创建数据库表

```js
npx sequelize-cli model:generate --name User --attributes firstName:string,lastName:string,email:string
```

- 如果需要对表结构做一些修改的话，可以直接去修改迁移文件即可

- 如果需要对模型做修改，可以修改模型文件

- 建议创建模型的时候，数据库和模型为复数关系，如果不是，则需要设置真正的表名。 修改路径 models  --- 表名.js的文件中配置

```js
   tableName:'admin',    // 表名
   modelName: 'Login'     // 模型名
  ```

##### 5) 运行迁移文件创建表

```js
npx sequelize-cli db:migrate
```

- 如果表已经创建好了，并且有数据了，此时需要添加或者更改某个字段

```js
   npx sequelize migration:create --name 迁移文件的名字
  ```

- 修改新的迁移文件

```js
   async up (queryInterface, Sequelize) {
       await queryInterface.addColumn('cates', 'is_del', Sequelize.INTEGER);
    },
  
    async down (queryInterface, Sequelize) {
  
       await queryInterface.removeColumn('cates', 'is_del', Sequelize.INTEGER);
    }
  ```

- 重新执行迁移命令

```js
  npx sequelize-cli db:migrate  执行
  npx sequelize-cli db:migrate:undo  撤销
  ```

#### b 创建种子文件，产生测试数据

```js
npx sequelize-cli seed:generate --name demo-user
```

要做登录开发，涉及到账号和密码信息，需要对密码做加密处理，采用md5 第三方模块进行加密，生成32位的加密字符串

##### 使用方法

```js
npm i md5
const md5=require('md5')   //下载之后在导入，也可以代码中直接导入引用
```

编辑文件

```js
module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.bulkInsert('Users', [{
      firstName: 'John',
      lastName: 'Doe',
      password: require('md5')('admin123')
      createdAt: new Date(),
      updatedAt: new Date()
    }]);
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.bulkDelete('Users', null, {});
  }
};
```

##### 运行种子

```js
npx sequelize-cli db:seed:all
运行特定的种子
npx sequelize-cli db:seed 种子文件名
```

##### 撤销种子

```js
npx sequelize-cli db:seed:undo
```

#### c 登录页面渲染

##### 1）完成登录页面的html文档布局, 页面布局没有代码

##### 2）get接口，渲染登录页面

```js
// 登录页面
router.get('/login',(req,res)=>{
    res.render('login/login.html')
})

```

#### d 登录校验接口 post

##### 1）导入数据库模型，md5

```js
const  express=require('express')
const router=express.Router()

// 导入模型
const { Login }=require('../models')   // Login是要导入的模型名字
const md5=require('md5')

```

##### 2）保持登录状态，使用cookie 和 session

使用express框架，会自动下载cookie，session需要通过npm i 下载引入

```js
npm i express-session
var session = require('express-session');   // 在app.js文件中进行配置

app.use(session({
  secret: 'kuaijiancms',   //密钥，名字可以自己更改
  resave: false,           // 默认值，不能更改
  saveUninitialized: true   // 默认值，不能更改
}))
```

保持登录状态：由于登录页面有一个功能是否勾选七天免登陆，所以此处需要用session和cookie结合一起来保存用户的的登录状态

可以通过checked状态来进行判断，如果勾选免登录，使用cookie 来保存登录状态，没有勾选的情况，使用session来保存登录态

```js
// 登录验证    后端需要对数据进行重新验证
router.post('/login',async (req,res)=>{
    // 接收表单数据
    const admin_name=req.body.admin_name.trim()
    const admin_password=req.body.admin_password.trim()
    // 数据校验
    if(admin_name===''){
        return res.cc(400,'用户名为空')
    }
    if (admin_password === '') {
        return res.cc(400, '密码为空')
    }
    try{
          // 登录验证
          const result = await Login.findAll({
              where: {
                  admin_name,
                  admin_password: md5(admin_password)
              }
          })
          if (result.length === 0) {
              return res.cc(400, '用户名或者密码不正确')
          }

// 保持登录状态：由于登录页面有一个功能是否勾选七天免登陆，所以此处需要用session和cookie结合一起来保存用户的的登录状态
          // 接收登录状态
          const login7 = req.body.login7
          if(login7===1){
               // 勾选了7天免登陆，使用cookie来保存登录态
               res.cookie('admin_name',admin_name,{maxAge:3600*24*7*1000})
               res.cookie('is_login',true,{maxAge:3600*24*7*1000})
          }else{
              // 使用session来保存登录态
              req.session.is_login=true
              req.session.admin_name=admin_name
          }
          res.cc(200, '登录成功') 
    }catch(e){
          res.cc(500,e.message)
    }
  
})
```

#### e 点击登录页面操作 js流程

通过点击事件，建议采用axios的方式来发起数据请求(axios可以使用async await 函数，避免多次回调)

阻止默认提交行为，同时需要对数据进行验证  !!!!

```js
layui.use('layer', function () {
        // 点击登录按钮实现登录
        $('.sub').click(async function (e) {
            // 阻止默认提交行为
            e.preventDefault()
            // 接收表单数据
            const admin_name = $('[name=admin_name]').val().trim();
            const admin_password = $('[name=admin_password]').val().trim();
            // 数据验证    前端数据验证   引入layer.msg方法，可以参考layui官网
            if (admin_name === '') {
                return layer.msg('用户名为空', {
                    icon: 5,
                    time:2000
                })
            }
            if (admin_password === '') {
                return layer.msg('密码为空', {
                    icon: 5,
                    time:2000
                })
            }

// 接收7天免登录的状态     利用cookie和session机制
            const login7 = $('[name=login7]').prop('checked') ? 1 : 0;
            // 验证用户名和密码是否正确
            const {
                data: res
            } = await axios.post('/login', {
                admin_name,
                admin_password,
                login7
            })
            if (res.status !== 200) {
                return layer.msg('登录失败,用户名或者密码不正确', {
                    icon: 5,
                    time: 2000
                })
            }
            layer.msg('登录成功', {
                icon: 6,
                time: 1000
            }, function () {
                // 跳转到后台首页
                location.href = '/'
            })
        })

})
```

#### f 引入layui 框架

由于在页面布局中，会有弹出框等内容，需要引用第三方框架，让UI页面更加美观，操作流程

##### 1）引入layui

官网：https://layuion.com/

到官网中下载之后，引入layui

##### 2）使用layui

需要写在script 框架中，将内容放到函数中

```js
//引入layui对弹出层来做优化
layui.use('layer', function(){
  layer.msg('登录成功', {
                icon: 6,    // 弹出框带有笑脸的
                time: 1000   //默认时间3秒，建议err2秒，成功1秒   
            }, function () {  // 回调函数可有可无
                // 跳转到后台首页
                location.href = '/index'
            })
});
```

#### g 登录页面开发完毕，提交到仓库

1）通过 git add . 将所有的文件提交到暂存区

2）git commit -m "注释" 将暂存区的文件提交到本地仓库

3）提交到远程仓库，对分支进行备份   git push -u origin login

4) 退出当前分支，到主分支中进行数据合并 git checkout master

5) git merge 进行数据合并

6）在master 分支中删除login 分支（开发完毕删除） git branch -d login

**备注**：如果本地电脑中没有项目，则通过git clone 到仓库中下载代码即可。如果电脑中已经有了代码，可以通过git pull 的方式拉一下，更新本地仓库即可，适用于多人开发的情况。

####  h 登录跳转

后台操作页面，没有登录，则不能进行访问，将直接跳到登录页面。通过配置全局中间件，req.url地址来进行配置操作。在app.js中操作代码如下，可以放在封装的res.cc()函数的下方

```js
if (req.url !== '/login') {  // 登录接口网址
    // 先判断有没有cookie
    if (!req.cookies.is_login) {    //登录过程中，保存的cookie状态
      if (!req.session.is_login) {    //登录过程中，保存的session状态
        return res.redirect('/login')
      }
    }
  }
```

### 项目模块二：新闻管理后台页面

#### 1）layui 完成后台管理布局

后台管理页面，引入layui后台管理布局，复制代码更改，没有代码。

#####  a.编写get接口，渲染新闻后台首页。通过读取cookie或者session中保存的用户名，直接渲染到页面中

```js
 // 后台首页
router.get('/',(req,res)=>{
    // 获取到登录的用户信息
    const admin_name= req.session.admin_name || req.cookies.admin_name
    res.render('index.html',{admin_name})
})
    // 读取保存的用户名，直接渲染首页, 建立新路由，indexRouter
```

#####   b. 采用页面跳转的方式，对右侧内容区进行链接跳转

```html
  
  
<dd><a href="/cates" target="right">分类管理</a></dd>
  
   <iframe name="right" style="width:100%;height: 100%"
    frameborder="0"></iframe>

```

```js
// 方式二：利用jQuery的属性操作 
     <iframe src="" style="width:100%;height: 100%;" frameborder="0"></iframe>
                  <script>
                     $('dd>a').click(function(e){
                          e.preventDefault();
                          // 获取当前访问的url
                          let url=$(this).attr('href');
                          // 赋值给iframe的src
                          $('.layui-body iframe').attr('src',url)
                     })
                  
                  </script>
//通过对 src属性值来进行操作
```

### 浏览器关闭，记住缓存

在后台主页中进行修改。我们在渲染页面的时候，采用的是ifram标签的name和rarget属性来做的。但是如果要记住地址，然后再赋值给ifram标签中的src属性，和name属性冲突，因此建议修改页面布局，采用src属性来操作

将上方的代码更改如下，采用方式二

```html
<div class="layui-side-scroll">
                
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">新闻管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/cates" >分类管理</a></dd>
                            <dd><a href="/news">新闻管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">评论管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/aaa">评论关键词管理</a></dd>
                            <dd><a href="javascript:;">评论管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <dd><a href="javascript:;">会员管理</a></dd>     
                        
                    </li>
                </ul>
            </div>
  
```

```html
<div class="layui-body">
            
            <div style="padding: 50px 0px 0px 200px;">
                <iframe src=""  style="width:1000px;height:600px" frameborder="0"></iframe>
            </div>
        </div>
  
```

```js 
<script>
        getUrl()   //页面加载的时候，掉这个函数，渲染页面读取缓存中的数据，可以实现退出刷新之后渲染的仍是之前的数据
        function getUrl() {
            let url = localStorage.getItem("url");    //读取缓存中保存的路由名字，可以获得路由地址
            $('.layui-body iframe').attr('src', url)    //直接赋值给src属性，调取路由，渲染页面
        }

$('dd>a').click(function (e) {
            e.preventDefault();
            // 获取当前访问的url
            let url = $(this).attr('href');  // attr来获取当前a标签的属性，就是路由地址
            // 赋值给iframe的src
            $('.layui-body iframe').attr('src', url)   
            localStorage.setItem("url", url);    // 将路由地址给存到缓存中，第一个参数url是名字，之后读取参数，可以通过名字直接读取，第二个参数url 是保存的路由地址

})
    </script>
```

#### 2) 退出功能

编写get接口  logout  清空浏览器缓存，cookie通过clearCookier   session可以直接置空，退出利用a链接跳转到该接口

```html
<a href="/logout">退出</a>
```

```js
router.get('/logout',(req,res)=>{
   // 清除cookie或者session
   if(req.cookies.is_login){
       res.clearCookie('is_login')
       res.clearCookie('admin_name')
   }
   if(req.session.is_login){
       req.session.is_login=null
       req.session.admin_name=null
   }
   // 跳转到登录页面去
   res.redirect('/login')
})                                                          // loginRouter路由
```

### 3）右侧内容区域渲染

#### 新闻分类get接口数据渲染

引入layui里面的动态表格数据，自行复制代码，完成页面布局

此处需要使用sequelize-cli创建数据表 cates分类，参考上方代码

导入数据库，编写get接口，layui里面的动态数据表格有分页的功能，如果需要，可以直接保留。接收分页数据，  使用findAndCountAll 来获取全部以及总数，完成分页功能。由于表格数据有严格要求，返回时，按照格式返回json数据

```js
const express = require('express')
const router = express.Router()
// 导入模型
const {Cate} = require('../models')

```

```js
// 获取分页数据
router.get('/catesApi',async (req,res)=>{
     try{
            // 接收分页参数
            const page = req.query.page || 1
            const limit =parseInt(req.query.limit || 3)  //get通过req.query获得，接受的数据是字符串，需要转化成数字类型
            const offset = (page - 1) * limit
            const data = await Cate.findAndCountAll({
                offset,
                limit
            })
            // 要求返回前端特定的数据格式
            return res.json({
                code:0,
                msg:'查询成功', 
                count:data.count,
                data:data.rows
            })
     }catch(e){
         console.log(e.message);
     }
    
})
//cateRouter路由
```

### a.新闻分类添加

#### 1. 添加——弹出层

button绑定点击事件，利用layui的弹出层效果，渲染页面，表格中需要引入layer

```js
layui.use(['table', 'layer'], function (){
     var table = layui.table;
   var layer = layui.layer;
    layer.open({                  
                    type: 2,     
                    title: '分类添加',
                    content: ['/cates/add', 'no'],   //此处是get接口
                    area: ['500px', '300px'],
                    end: function () {   // end方法表示销毁，弹出层关闭，将调用这个方法，可以不带参数
                        // 重新渲染表格
                        renderTable()    //添加完成之后，弹出层关闭，实现页面重新渲染，调用的渲染表格函数
                    }
                })
}
```

```js
router.get('/cates/add',(req,res)=>{
     res.render('cate/add.html')
})
```

将渲染表格的信息摘取出来，封装成函数，页面加载的时候调用一次。由于是采用的ifram标签，页面内的跳转，需要将整个表格全部封装

```js
function renderTable() {
                // 创建渲染实例
                table.render({
                    elem: '#cate-table',
                    url: '/catesApi', // 数据接口地址
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['exports', 'print'],
                    //height: 'full-200', // 最大高度减去其他容器已占有的高度差
                    cellMinWidth: 80,
                    page: true, //开启分页功能
                    limit: 3, // 每页显示的条数
                    limits: [3, 6, 9], // 下拉选项
                    // 表格头部的设置
                    cols: [
                        [{
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            fixed: 'left',
                            width: 80,
                            title: 'ID',
                            sort: true
                        }, {
                            field: 'cate_name',
                            width: 150,
                            title: '分类名称'
                        }, {
                            field: 'sort',
                            title: '排序',
                            width: 90,
                            edit: 'text' // 该列可编辑
                        }, {
                            fixed: 'right',
                            title: '操作',
                            width: 155,
                            minWidth: 150,
                            toolbar: '#op'
                        }]
                    ],
                    error: function (res, msg) {
                        console.log(res, msg)
                    }
                });
            }  
```

#### 2.添加——渲染表单

用layui的内置表单

```html
<form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="cate_name" required lay-verify="required|cateName" placeholder="请输入分类名称"
                    autocomplete="off" class="layui-input" onblur="checkCateName()">
            </div>     
        </div>      
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
```

#### 3.表单数据验证——格式

前端后端都需要对数据进行验证，前端验证，通过自定义验证规则，来对表单数据进行验证，使用layui的form.verify规则，此时需要引入form，和 layer . 两种验证方式，可以通过回调函数 ，也支持数组的形式

```js
layui.use(['form', 'layer'], function () {
     var form = layui.form;
     var layer = layui.layer;
     // 自定义验证规则
     form.verify({
         cateName: function (value) {    // 验证名需要和表单中lay-verify中的名字对应
             var reg = /^[\u4e00-\u9fa5]{1,5}$/
             if (!reg.test(value)) {
                 return '分类名称必须是1-5的中文'
             }
             // 唯一性验证
             if (!flag) {
                 return '分类名称重复'
             }
         },
         sort: [
             /^[1-9]\d?$/,
             '排序必须是1-99的正整数'
         ]
     })
 });
```

#### 4.表单数据验证——分类名唯一性

添加数据要求分类唯一，因此在添加的过程中，需要通过调取get接口，传入分类名字，到数据库中查询，确保不重复可以添加

```js
router.get('/cates/check',async (req,res)=>{
     // 接收参数  get提交的参数是req.query
     const cate_name=req.query.cate_name || ''
     const result=await Cate.findAll({
         where: {
             cate_name
         }
     })
     if(result.length>0){
         return res.cc(400,'分类名称重复')
     }
     return res.cc(200,'ok')
})

```

```js
 // 分类名称唯一性验证，由于表单有主动触发验证，因此将唯一性验证封装成函数，在表单验证中调用函数。由于调用函数是异步，所以需要定制一个节流阀，确保先执行函数，阻止表单的提交行为
 var flag = false
 async function checkCateName() {
     const value = $('[name=cate_name]').val().trim();
     // 发送axios请求
     const {
         data: res
     } = await axios.get('/cates/check', {
         params: {
             cate_name: value
         }
     })
     if (res.status === 400) {
         // 分类名称重复，不可提交
         flag = false
     } else {
         flag = true
     }
 }
```

#### 5.表单数据提交 ——后端数据验证

数据提交入库，后端需要再次对数据进行重新验证，确保数据没有问题，才可以进行添加入库操作。后端验证，使用**第三方数据验证模块**，来降低出错率、提高验证的效率与可维护性，

**使用方法**

1. 安装 `joi` 包，为表单中携带的每个数据项，定义验证规则：

```bash
npm install joi
```

2. 安装 `@escook/express-joi` 中间件，来实现自动对表单数据进行验证的功能：

```bash
npm i @escook/express-joi
```

3. 新建 `/schema文件夹（建议名字，后端验证也使用这个名字）`参考代码

```js
const joi = require('joi')

/**
 * string() 值必须是字符串
 * alphanum() 值只能是包含 a-zA-Z0-9 的字符串
 * min(length) 最小长度
 * max(length) 最大长度
 * required() 值是必填项，不能为 undefined
 * pattern(正则表达式) 值必须符合正则表达式的规则
 */

//定义分类模块的表单验证
exports.cate_add_schema = {
    //  校验 req.body 中的数据， get用req.query
    body: {
        // 属性的名称必须和表单的name属性值保持一致
        cate_name: joi.string().pattern(/^[\u4e00-\u9fa5]{1,5}$/).message('分类名称必填且是1-5个中文'),
        sort: joi.string().pattern(/^[1-9]\d?$/).message('必须是1-99的正整数'),
    }
}

```

4. 修改 `/router/路由中的代码如下：

```js
const express = require('express')
const router = express.Router()

// 导入模型
const {Cate} = require('../models')

// 导入验证表单数据的中间件
const expressJoi = require('@escook/express-joi')
// 导入验证规则
const {cate_add_schema}=require('../schema/cate')

module.exports = router
```

1. 在 `app.js` 的全局错误级别中间件中，捕获验证失败的错误，并把验证失败的结果响应给客户端：

```js
const joi = require('joi')

// 注册全局错误中间件
app.use(function (err, req, res, next) {
   // 数据验证失败
   if (err instanceof joi.ValidationError) return res.cc(400, err.message)
   // 未知错误
   res.cc(500, err.message)
});
```

####  6.表单数据提交——post接口

```js
// 3.分类添加入库
 // 3.0 表单验证的中间件
 // 3.1 数据验证通过后， 会把这次请求流转给后面的路由处理函数
 // 3.2 数据验证失败后，终止后续代码的执行，并抛出一个全局的 Error 错误，进入全局错误级别中间件中进行处理
router.post('/cates/add', expressJoi(cate_add_schema), async (req, res) => {
      // 接收表单数据
      const data=req.body
     // 数据唯一性验证
      const result = await Cate.findAll({
          where: {
              cate_name:data.cate_name
          }
      })
      if (result.length > 0) {
          return res.cc(400, '分类名称重复')
      }
      // 数据的添加
      await Cate.create(data)
      return res.cc(200,'添加成功')
})
```

#### 7.表单数据提交

采用axios里面的.then，不能采用async函数，会变成异步。 在代码中通过retrun false来阻止表单的提交，如果是异步函数，表单将会提交

```js
//提交
     form.on('submit(formDemo)', function (data) {
         // 获取表单数据对象   layer.msg(JSON.stringify(data.field)); 通过表单中的这个对象得到表单值
         const formData = data.field
         // 发送ajax进行数据的添加
         axios.post('/cates/add', formData).then(res => {
             if (res.data.status !== 200) {
                 return layer.msg('添加失败', {
                     icon: 5,
                     time: 2000
                 })
             }
             layer.msg('添加成功', {
                 icon: 6,
                 time: 1000
             }, function () {
                 //当你在iframe页面关闭自身时
                 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                 parent.layer.close(index); //再执行关闭 关闭弹出层。 弹出层关闭之后，会自动调用表格中的end函数，来重新渲染表格数据
             })
         })
         // 一定是同步的返回
         return false;
     });
```

### b.新闻分类删除

layui 框架中的表格，有默认的操作，可以实现对dom结构的修改和删除，因此修改和删除值需要调接口，实现对数据库的删除即可，创建动态表格的时候，需要保留这两个操作

```js
// 分类删除
router.delete('/cates/:id',async (req,res)=>{
    try{
       const id = parseInt(req.params.id)
       const row = await Cate.findByPk(id)
       row.destroy()
       return res.cc(200,'删除成功')
    }catch(e){
        throw new Error(e)
    }
     
})

```

```js
var data = obj.data;
const id = data.id    //表格的函数里面，obj对象中可以直接获取到id，将id获取，进行删除
layer.confirm('您确定要删除吗?', async function (index) {
                        // 发送ajax请求进行数据的删除
                        const {
                            data: res
                        } =await axios.delete('/cates/' + id)
                        if (res.status !== 200) {
                            return layer.msg('删除失败', {
                                icon: 5,
                                time: 2000
                            })
                        }
                        return layer.msg('删除成功', {
                            icon: 6,
                            time: 1000
                        },function(){
                             // 进行页面删除
                             obj.del();
                             // 关闭层
                             layer.close(index);
                        })
                    });
```

### c..新闻分类修改

修改利用表格的edit 属性，渲染修改页面

#### 1.修改页面渲染接口

将cate值带到修改页面，完成表单渲染，创建一个新的html页面

```js

// 1.查询出要修改的分类id并展示在修改的表单中
router.get('/cate',async (req,res)=>{
    // 接收要修改的数据id
    const id=req.query.id
    // 查询该条数据
    const cate= await Cate.findByPk(id)
    // 渲染在修改表单中
    res.render('cate/update.html',{cate})
})

```

#### 2.修改页面渲染

```js
layer.open({
                        title: '编辑分类',
                        type: 2,                          //2是ifame标签带有的表单内部跳转
                        area: ['500px', '300px'],
                        content: ['/cate?id=' + id, 'no'],  //修改接口，传参数id进去，渲染数据
                        end: function () {
                            // 重新渲染表格
                            renderTable()
                        }
                    });
```

```html
<form class="layui-form">
        
        <input type="hidden" name="id" value="{{cate.id}}">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input type="text" name="cate_name" value="{{cate.cate_name}}" lay-verify="required|cateName" placeholder="请输入分类名称"
                    autocomplete="off" class="layui-input"
                    onblur="checkCateName({{cate.id}})">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" value="{{cate.sort}}" lay-verify="required|sort" placeholder="请输入排序数字"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
```

#### 3.修改数据唯一性验证接口

由于修改数据，分类名称可以不做修改，因此在做判断的过程中，要引入Op，排除到本身id ,在到数据库中进行查询

```js
const {
    Op
} = require('sequelize')          //已经安装了sequelize，可以从中直接解构出Op对象

```

```js
// 2.修改分类名称的唯一性验证    由于修改需要返回数据，因此需要重新写get接口
router.get('/cates/checkUpdate', async (req, res) => {
    // 接收参数
    const cate_name = req.query.cate_name || ''
    const id=parseInt(req.query.id)
    const result = await Cate.findAll({
        where: {
            cate_name,
            // 修改时有可能不修改分类名称
            id:{
                [Op.ne]:id
            }
        }
    })
    if (result.length > 0) {
        return res.cc(400, '分类名称重复')
    }
    return res.cc(200, 'ok')
})
```

#### 4.修改唯一性验证页面布局

给分类名称绑定的onblur事件，用户有可能不对做出修改，因此不会触发失焦函数，此时需要flag为真。id对通过形参的方式带进来即可

```js
var flag = true
 async function checkCateName(id) {
     const value = $('[name=cate_name]').val().trim();
     // 发送ajax请求
     const {
         data: res
     } = await axios.get('/cates/checkUpdate', {
         params: {
             cate_name: value,
             id
         }
     })
     if (res.status !== 200) {
         // 分类名称重复，不可提交
         flag = false
     } else {
         flag = true
     }
 }
```

#### 5.修改数据接口

```js
// 3.进行数据库的修改   修改数据入库，后端需要再次做验证，添加schema中关于修改分类的验证规则
// 定义修改分类的表单验证
exports.cate_update_schema = {
    //  校验 req.body 中的数据
    body: {
        // 属性的名称必须和表单的name属性值保持一致
        cate_name: joi.string().pattern(/^[\u4e00-\u9fa5]{1,5}$/).message('分类名称必填且是1-5个中文'),
        sort: joi.string().pattern(/^[1-9]\d?$/).message('必须是1-99的正整数'),
    }
}

router.put('/cates/:id', expressJoi(cate_update_schema),async (req, res) => {
    try{
        const id = parseInt(req.params.id)
        const data = req.body
        const cate = await Cate.findByPk(id)
        cate.update(data)
        return res.cc(200,'修改成功')
    }catch(e){
        throw new Error(e.message)
    }
   
})

```

#### 6.修改页面渲染

```js
 //Demo
 layui.use(['form', 'layer'], function () {
     var form = layui.form;
     var layer = layui.layer;

// 自定义验证规则    表单自己的验证规则，将上方唯一性验证通过节流阀的方式在此处引用
     form.verify({
         cateName: function (value) {
             var reg = /^[\u4e00-\u9fa5]{1,5}$/
             if (!reg.test(value)) {
                 return '分类名称必须是1-5的中文'
             }
             // 唯一性验证
             if (!flag) {
                 return '分类名称重复'
             }
         },
         sort: [
             /^[1-9]\d?$/,
             '排序必须是1-99的正整数'
         ]
     })

//提交
     form.on('submit(formDemo)', function (data) {
         // 获取表单数据对象
         const formData = data.field
         // 发送ajax进行数据的修改
         axios.put('/cates/' + formData.id, formData).then(res => {
             if (res.data.status !== 200) {
                 return layer.msg('修改失败', {
                     icon: 5,
                     time: 2000
                 })
             }
             layer.msg('修改成功', {
                 icon: 6,
                 time: 1000
             }, function () {
                 //当你在iframe页面关闭自身时
                 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                 parent.layer.close(index); //再执行关闭    与修改弹出层open 方法中的函数合起来使用
             })
         })
         // 一定是同步的返回
         return false;
     });
 });
```

### d.新闻表格即点即改

引入的动态数据表格，里面有个edit事件，在创建表格的时候保留，则可以通过单击input框直接修改dom结构，我们需要再次通过发送ajax请求数据库，完成表格的即点即改操作。由于点击获取到的值，是修改后的值，如果验证不通过的情况，将修改不成功，需要将表格付给原有的值，因此需要进行判断，如果符合要求，发送ajax请求，对数据库进行修改。如果不符合要求，发送ajax中的get请求，获得修改之前的值，付给input框。

#### 1.页面布局

```js
{
 field: 'sort',
title: '排序',
width: 90,
 edit: 'text' //表格选项中，保留此项，表示此项数据可以编辑
           }
```

#### 2. get请求接口

```js
// 根据id查询数据     如果验证不通过，调用此接口，返回数据库中的数据，重新付给input框中的value值。
  router.get('/cates/getCateById',async (req,res)=>{
       const id=parseInt(req.query.id)
       const cate= await Cate.findByPk(id)
       return res.json({
           status:200,
           data:cate
       })
  })
```

#### 3. post接口

```js
// 即点即改   验证符合要求，调用此接口，来对数据库进行更新。修改也可以使用post put 都可以，由于上面使用过put，这里采用post接口修改。  数据入库，还需要再次验证

// 定义修改分类排序的验证   添加新的修改schema规则
exports.cate_sort_update_schema={
    body:{
         sort: joi.string().pattern(/^[1-9]\d?$/).message('必须是1-99的正整数')
    }
}

// post 接口
  router.post('/cates/editSort/:id', expressJoi(cate_sort_update_schema),async (req, res) => {
       // 接收id
       const id=parseInt(req.params.id)
       // 接收修改后的排序数据
       const sort=parseInt(req.body.sort)
       await Cate.update({
           sort
       },{
           where:{
               id
           }
       })
       return res.cc(200,'ok')
  })

```

#### 4.页面修改

```js
 // 单元格编辑事件---实现分类排序的即点即改功能
            table.on('edit(test)', async function (obj) {
                var field = obj.field, //得到字段，
                    value = obj.value, //得到修改后的值
                    id = obj.data.id; //得到所在行所有键值
                // 获取数据修改前的值。验证不通过需要使用此数据，对原有表单进行赋值，操作dom结构用
                const cate = await axios.get('/cates/getCateById?id=' + id)
                const old_sort = cate.data.data.sort
                // 定义空对象    
                var update = {};
                var reg = /^[1-9]\d?$/     //前端验证，通过自己写的正则，没有引入表单的验证，也可以引入form.verify. 可以参考修改中的页面信息
                if (!reg.test(value)) {   //判断验证是否符合要求，如果不符合，用get接口中的值来更改dom 
                    return layer.msg('排序数字必须是1-99的数字', {
                        icon: 5,
                        time: 2000
                    }, function () {
                        update[field] = old_sort;
                        obj.update(update);
                    })
                }

// 验证通过，发送ajax post请求实现分类的修改 
                const {
                    data: res
                } = await axios.post('/cates/editSort/' + id, {
                    sort:value
                })
                if (res.status === 200) {
                    layer.msg('修改成功', {
                        icon: 6,
                        time: 1000
                    }, function () {
                        update[field] = value;
                        obj.update(update);
                    })
                } else {
                    return layer.msg('修改失败', {
                        icon: 5,
                        time: 2000
                    }, function () {
                        update[field] = old_sort;
                        obj.update(update);
                    })
                }

});
```

### 项目模块二 新闻页面

#### a. 新闻页面渲染

##### 1 新闻列表页面接口

```
// 1.1 展示新闻页面
router.get('/news',(req, res)=>{
   res.render('news/index.html')
})
```

##### 2新闻html 页面布局  数据还是采用动态数据表格渲染

```html

    <span class="layui-breadcrumb" lay-separator="/">
        <a href="/">首页</a>
        <a href="javascript:;">新闻管理</a>
        <a href="/news">新闻管理</a>       
        <a><cite>新闻列表</cite></a>
    </span>
    <div class="layui-card">
        <div class="layui-card-header" style="padding:10px;">
            <button class="layui-btn layui-btn-sm news-add">
                添加新闻
            </button>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="cate-table" lay-filter="test"></table>
            
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                </div>
            </script>
            
            <script type="text/html" id="op">
                    <a class=" layui-btn layui-btn-xs" lay-event="edit">
                编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
```

##### 3.新闻数据接口

需要对时间做格式化处理，需要下载安装moment，并且引入

1.下载moment

```
npm i moment
```

2.在需要使用的地方导入moment

```
const moment = require('moment')
```

路由接口设置

```js
//cate模型配置
 static associate(models) {
       models.Cate.hasMany(models.New)
    }
//new模型配置
static associate(models) {
         models.New.belongsTo(models.Cate)
    }

// 1.2.查询分页数据
router.get('/newsApi', expressJoi(news_list_schema),async (req, res) => {
     const page=req.query.page || 1
     const limit=parseInt(req.query.limit || 3)
     // 调用模型方法
     const offset = (page - 1) * limit
     const data = await New.findAndCountAll({     //此处需要使用两表联查，因此需要在模型层进行配置
         attributes: ['id', 'title', 'img_url', 'author', 'view_nums', 'add_time', 'cateId'],
         where: {
             data_flag: 1
         },
         order: [
             ['add_time', 'desc']
         ],
         offset,
         limit,
         include: [{
             model: Cate,
             attributes: ['cate_name']    // cate_name需要在cate表格中查询出来
         }]
     })

for(let i=0;i<data.rows.length;i++) {
         // 增加cate_name属性
         data.rows[i].dataValues.cate_name = data.rows[i].dataValues.Cate.cate_name
         // 修改图片
         
         
         // 时间格式化
          data.rows[i].dataValues.add_time = moment(data.rows[i].dataValues.add_time).format('YYYY-MM-DD HH::mm:ss')  
     } 
     return res.json({
         code:0,
         msg:'ok',
         count:data.count,
         data:data.rows
     })
})
```

数据添加要进行验证，在schema中配置验证规则

```js
exports.news_list_schema ={
    query: {
        page: joi.string().pattern(/^[1-9]\d*$/).message('page必须是正整数'),
        limit: joi.string().pattern(/^[1-9]\d*$/).message('limit必须是正整数')
    }
}
```

##### 4 表格数据页面渲染

```js
layui.use(['table', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    // 页面加载完成就渲染表格
    renderTable()

// 单元格编辑事件---实现分类排序的即点即改功能
    table.on('edit(test)', async function (obj) {
        var field = obj.field, //得到字段
            value = obj.value, //得到修改后的
            id = obj.data.id; //得到所在行所有键值
        // 获取数据修改前的值
        const cate = await axios.get('/cates/getCateById?id=' + id)
        const old_sort = cate.data.data.sort
        // 定义空对象    
        var update = {};
        var reg = /^[1-9]\d?$/
        if (!reg.test(value)) {
            return layer.msg('排序数字必须是1-99的数字', {
                icon: 5,
                time: 2000
            }, function () {
                update[field] = old_sort;
                obj.update(update);
            })
        }

// 发送ajax请求实现分类的修改 
        const {
            data: res
        } = await axios.post('/cates/editSort/' + id, {
            sort: value
        })
        if (res.status === 200) {
            layer.msg('修改成功', {
                icon: 6,
                time: 1000
            }, function () {
                update[field] = value;
                obj.update(update);
            })
        } else {
            return layer.msg('修改失败', {
                icon: 5,
                time: 2000
            }, function () {
                update[field] = old_sort;
                obj.update(update);
            })
        }

});

// 点击添加按钮实现跳转
    $('.news-add').click(function () {
           location.href ='/news/add'
    })
    // 结束
});
```

#### b.新闻数据添加

##### 1 数据添加页面接口

```js
model cate.js
// 获取分类列表数据
async getCateList(){
return await Cate.findAll()
 }

// 2.1 展示新闻添加表单
router.get('/news/add',async (req,res)=>{
    // 获取新闻分类数据
    const cates = await cateModel.getCateList()    //添加需要有新闻分类，因此需要在cate模型中配置数据查询规则
    res.render('news/add.html',{
        cats
    })
})
```

##### 2 添加页面渲染 add.html

```html
 
    <span class="layui-breadcrumb" lay-separator="/">
        <a href="/">首页</a>
        <a href="javascript:;">新闻管理</a>
        <a href="/news">新闻管理</a>
        <a><cite>新闻添加</cite></a>
    </span>
    <div class="layui-card">

<input lay-verify="img_url" class="save_img" type="hidden" name="img_url">
                    </div>
                </div>

<div class="layui-form-item">
                    <label class="layui-form-label">新闻分类</label>
                    <div class="layui-input-block">
                        <select name="cateId" lay-verify="required">
                            {{each cates v}}
                            <option value="{{v.id}}">{{v.cate_name}}</option>
                            {{/each}}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻内容</label>
                    
                    <div class="layui-input-block" style="z-index: 0">
                        <div id="div1">

</div>
                        
                        <textarea name="content" lay-verify="content" id="text1"
                            style="display:none"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻作者</label>
                    <div class="layui-input-block">
                        <input type="text" name="author" lay-verify="author" placeholder="请输入作者"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>

<script src="/libs/js/wangEditor.js"></script>
    <script type="text/javascript">
        const E = window.wangEditor
        const editor = new E('#div1')
        const $text1 = $('#text1')
        editor.config.onchange = function (html) {
            // 第二步，监控变化，同步更新到 textarea
            $text1.val(html)
        }
        // 设置本地上传的图片转换为base64格式的字符串进行处理
        editor.config.uploadImgShowBase64 = true
        editor.create()
    </script>
    <script src="/js/news/news_add.js"></script>
```

##### 3. 图片上传

#### 使用 multer 解析表单数据

1. 运行如下的终端命令，在项目中安装 `multer`：

```bash
npm i multer
```

2. 在 `/router/news.js` 模块中导入并配置 `multer`：

```js
// 导入解析 formdata 格式表单数据的包
const multer = require('multer')
// 导入处理路径的核心模块
const path = require('path')

// 创建 multer 的实例对象，通过 dest 属性指定文件的存放路径
const upload = multer({ dest: path.join(__dirname, '../uploads') })
```

###### 图片上传接口

```js
// 2.2 图片上传的接口
// 导入解析 formdata 格式表单数据的包
const multer = require('multer')
// 导入处理路径的核心模块
const path = require('path')
const fs = require('fs')

// 创建 multer 的实例对象，通过 dest 属性指定文件的存放路径
//创建目录
var upload_dir = path.join(__dirname, '../public/uploads/');
const upload = multer({
    dest: upload_dir
})
// upload.single() 是一个局部生效的中间件，用来解析 FormData 格式的表单数据
// 将文件类型的数据，解析并挂载到 req.file 属性中

router.post('/news/upload', upload.single('file'),(req, res) => {
    
    //  获取上传好的文件数据对象
    const fileData = req.file
     // 获取上传的文件后缀名
    const ext = fileData.mimetype.split('/')[1]
    // 获取文件上传的名字
    const filename = fileData.filename+'.'+ext
    // 读取文件的内容并且写入到文件中
     // 读取文件内容
     let img_str = fs.readFileSync(fileData.path)
     // 写文件
    fs.writeFileSync(path.join(fileData.destination,filename), img_str)
    // 删除原始文件
    fs.unlinkSync(fileData.path)
    // 最终返回的文件名必须是带有绝对路径的文件名，否则，无法被外部访问
    return res.cc(200,'上传成功','/uploads/'+filename)
})
```

##### 添加接口

```js
// 2.3 新闻添加入库
router.post('/news/add',async (req,res)=>{
     try{
           // 接收表单数据
           const data = req.body
           data.add_time = new Date()
           await newsModel.addNews(data)
           res.cc(200, '添加成功')
     }catch(e){
         throw new Error(e.message)
     }
   
})
```

##### 添加页面渲染

```js
layui.use(['form', 'layer', 'upload'], function () {
     var form = layui.form;
     var layer = layui.layer;
     var upload = layui.upload;
     //form.render(); // 渲染全部动态数据
     // 文件上传
     //执行实例
     upload.render({
         elem: '#test1', //绑定元素
         url: '/news/upload', //上传接口
         accept: 'images',
         field:'file',
         done: function (res) {
             //上传完毕回调
             if(res.status===200){
                  $('.preview_img').attr('src',res.data).show()
                  $('.save_img').val(res.data)
             }
         },
         error: function (err) {
             //请求异常回调
         }
     });

// 自定义验证规则
      form.verify({
           title:function (value){
               if(value===''){
                   return '新闻标题不能为空'
               }
           },
           img_url: function (value) {
               if (value === '') {
                   return '必须上传图片'
               }
           },
           content: function (value) {
               if (value === '') {
                   return '新闻内容不能为空'
               }
           },
           author: function(value){
               if (value === '') {
                   return '添加人不能为空'
               }
           }
     })

//提交
     form.on('submit(formDemo)', function (data) {
         // 获取表单数据对象
         const formData = data.field
        // 发送ajax进行数据的修改
         axios.post('/news/add', formData).then(res => {
             if (res.data.status !== 200) {
                 return layer.msg('添加失败', {
                     icon: 5,
                     time: 2000
                 })
             }
             layer.msg('添加成功', {
                 icon: 6,
                 time: 1000
             }, function () {
                 location.href='/news'
             })
         }) 
         // 一定是同步的返回
         return false;
     });
 });
```

#### c.搜索功能

layui动态表格中，可以直接携带搜索条件

##### 1.定义搜索规则

```js
 
// 定义搜索条件
        var whereData = {
            cate_id: 0,
            title: ''
        }
        
//在table.render中携带搜索参数
        table.render({
                    elem: '#test',
                    url: '/newsApi',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['exports', 'print'],
                    height: 'full-200',
                    // 搜索条件
                    where: whereData,}）
```

##### 2.更改配置接口

```js
// 分页数据加载
router.get('/newsApi', async (req, res) => {
    const page = req.query.page || 1
    const limit = parseInt(req.query.limit || 3)
    const offset = (page - 1) * limit

// 接收搜索条件
    const cate_id = parseInt(req.query.cate_id || 0)
    const title = req.query.title || ''

// 定义空对象保存搜索条件,并组装搜索条件
    var searchWhere = {
        data_flag: 1
    }
    if (cate_id) {
        searchWhere.cateId = cate_id
    }
    if (title) {
        searchWhere.title = {
            [Op.substring]: title,
        }
    }

const result = await New.findAndCountAll({
        attributes: ['id', 'title', 'img_url', 'author', 'view_nums', 'createdAt', 'cateId'],
        where: searchWhere,
        order: [
            ['createdAt', 'desc']
        ],
        offset,
        limit,
        include: [{
            model: Cate,
            attributes: ['cate_name']
        }]
    })
  
    return res.json({
        code: 0,
        msg: 'ok',
        count: result.count,
        data: result.rows
    })
})
```

##### 3.前台页面布局

```html
<div class="layui-card-body">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">新闻分类</label>
                    <div class="layui-input-inline cateSelect">
                        <select class="cate">
                            <option value="0">请选择分类</option>
                            {{each cates v}}}
                            <option value="{{v.id}}">{{v.cate_name}}</option>
                            {{/each}}
                        </select>
                    </div>
                </div>

</div>
```

##### 4. 关键词变红

```js
//数据动态表格中，用自定义模板进行匹配，用正则进行替代
{
                                field: 'title',
                                width: 170,
                                title: '新闻标题',
                                templet: function (d) {
                                    let search = whereData.title
                                    if (search.length > 0) {
                                        let reg = new RegExp(`${search}`, 'g')
                                        return d.title.replace(reg,
                                            `<span style="color:red">${search}</span>`)
                                    } else {
                                        return d.title
                                    }

}

}
```

刘武888/web4-admincms

简介

发行版

贡献者

近期动态

刘武888/web4-admincms .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

刘武888/web4-admincms