（七）Vue项目——轻社区：完成分类管理—创建分类表+修改、添加、删除分类+权限验证

目录

分类管理

1.创建分类表

2.分类管理页面

3.添加分类

4.权限验证

5.分类列表

6.修改分类

7.删除分类

---

分类管理

1.创建分类表

执行命令。

php think migrate:create Category

打开database\migrations\…_category.php，编写change()方法。

public function change()

{

    $table = $this->table(

        'category',

        ['engine' => 'InnoDB', 'collation' => 'utf8mb4_general_ci']

    );

    $table->addColumn(

        'name',

        'string',

        ['limit' => 100, 'null' => false, 'default' => '', 'comment' => '名称']

    )

    ->addColumn(

        'sort',

        'integer',

        ['null' => false, 'default' => 0, 'comment' => '排序']

    )

    ->addTimestamps()

    ->create();

}

执行迁移命令。

php think migrate:run

2.分类管理页面

打开src\router\index.js，添加路由。

routes: [

  ……（原有代码）

  { path: '/category', name: 'category', component: resolve => require(['@/pages/Category.vue'], resolve), meta: { title: '分类管理' } },

],

创建src\pages\Category.vue。

<template>

  <div>

    分类管理

  </div>

</template>

在src\components\Header.vue顶部导航中添加链接。

<ul class="navbar-nav header-nav" v-if="isLogin">

  ……（原有代码）

  <li class="nav-item" v-show="user.role === 'admin'">

    <router-link class="nav-link" :to="{ name: 'category' }">

      <i class="fa fa-list"></i>分类管理

    </router-link>

  </li>

  <li class="nav-item">

    <div @click="logout" class="nav-link logout">

      <i class="fa fa-sign-out"></i>退出

    </div>

  </li>

</ul>

添加样式。

.header-nav {

  ……（原有代码）

  .fa-list {

    margin-right: 6px;

  }

}

访问测试

 

3.添加分类

打开src\pages\Category.vue，编写添加分类的页面。

<template>

  <div class="cate">

    <!-- 添加分类 -->

    <div class="form-row cate-add">

      <input type="number" class="col-2" placeholder="排序" v-model="cate.sort" />

      <input type="text" class="col-4" placeholder="分类名称" v-model="cate.name" />

      <button type="submit" class="btn btn-primary" @click="add">添加</button>

    </div>

  </div>

</template>

<script>

export default {

  data () {

    return {

      cate: {

        sort: '',

        name: ''

      },

    }

  },

  methods: {

    add () {

      this.$http.post('category/save', this.cate).then(res => {

        if (res.data.code === 0) {

          this.$toastr.e(res.data.msg)

        } else if (res.data.code === 1) {

          this.$toastr.s(res.data.msg)

        }

      }).catch(() => {

        this.$toastr.e('服务器异常。')

      })

    },

  }

}

</script>

<style scoped>

.cate-add {

  margin-bottom: 10px;

}

.cate-add input {

  margin-right: 10px;

  border: 1px solid #ced4da;

  border-radius: 0.25rem;

}

.cate button {

  white-space: nowrap;

}

</style>

页面效果如下

 

打开route\route.php，编写服务器端接口。

Route::post('category/save', 'api/Category/save');

创建分类模型application\api\model\Category.php。

<?php

namespace app\api\model;

use think\Model;

class Category extends Model

{

}

创建application\api\controller\Category.php。

<?php

namespace app\api\controller;

use app\api\model\Category as CategoryModel;

class Category extends Common

{

}

编写save()方法。

public function save()

{

    $id = $this->request->post('id/d', 0);

    $data = [];

    foreach (['sort' => '/d', 'name' => '/s'] as $name => $type) {

        $input = $this->request->post($name . $type, false);

        if ($input !== false) {

            $data[$name] = $input;

        }

    }

}

创建application\api\validate\Category.php。

<?php

namespace app\api\validate;

use think\Validate;

class Category extends Validate

{

    protected $rule = [

        'name' => 'max:50',

        'sort' => 'number|max:99999999'

    ];

    protected $message = [

        'name.max' => '名称最多为50个字符',

        'sort.number' => '排序值为数字',

        'sort.max' => '排序值最大99999999',

    ];

}

在application\api\controller\Category.php中导入命名空间。

use app\api\validate\Category as CategoryValidate;

打开application\api\controller\Category.php，编写save()方法。

public function save()

{

    ……（原有代码）

    $validate = new CategoryValidate();

    if (!$validate->check($data)) {

        $this->error('操作失败，' . $validate->getError() . '。');

    }

    if ($id) {

        if ($category = CategoryModel::get($id)) {

            $category->save($data);

            $this->success('修改成功。', null, ['id' => $id]);

        }

        $this->error('修改失败，记录不存在。');

    } else {

        $newId = CategoryModel::create($data);

        $this->success('添加成功。', null, ['id' => $newId]);

    }

}

测试程序

 

4.权限验证

打开application\api\controller\Common.php。

protected $checkAdmin = [];

在initialize()方法中进行检查。

if (!in_array($action, $this->checkLoginExclude)) {

    ……（原有代码）

    if ($this->user->role !== 'admin' && in_array($action, $this->checkAdmin)) {

        $this->error('操作失败，您不是管理员。');

    }

}

在application\api\controller\Category.php中添加检测。

protected $checkAdmin = ['save', 'del'];

5.分类列表

打开src\pages\Category.vue，在页面打开后，查询分类列表。

data () {

  return {

    ……（原有代码）

    cates: [],

  }

},

查询数据。

export default {

  ……（原有代码）

  created () {

    this.getCategory()

  },

  methods: {

    getCategory () {

      this.$http.get('category/index').then(res => {

        if (res.data.code === 1) {

          this.cates = res.data.data

        }

      }).catch(() => {

        this.$toastr.e('操作失败，服务器异常。')

      })

    },

    ……（原有代码）

  }

}

打开route\route.php，添加服务器路由。

Route::get('category/index', 'api/Category/index');

在application\api\controller\Category.php中查询分类数据。

public function index()

{

    $data = CategoryModel::order('sort', 'desc')->select();

    $this->success('', null, $data);

}

打开src\pages\Category.vue，输出到页面中。

<template>

  <div class="cate">

    ……（原有代码）

    <!-- 分类列表 -->

    <div>

      <table class="table">

        <thead>

          <tr>

            <th scope="col">排序</th>

            <th scope="col">分类名</th>

            <th scope="col">操作</th>

          </tr>

        </thead>

        <tbody>

          <tr v-for="(cate,index) in cates" :key="index">

            <td>

              <input type="number" v-model="cate.sort" class="form-control" />

            </td>

            <td>

              <input type="text" v-model="cate.name" class="form-control" />

            </td>

            <td>

              <button class="btn btn-primary">删除</button>

            </td>

          </tr>

          <tr v-if="!cates.length">

            <td colspan="3" class="text-center">列表为空</td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</template>

页面效果如下

 

在添加分类后，更新列表。

this.$http.post('category/save', this.cate).then(res => {

  if (res.data.code === 0) {

    this.$toastr.e(res.data.msg)

  } else if (res.data.code === 1) {

    this.$toastr.s(res.data.msg)

    this.getCategory()

    this.cate.sort = ''

    this.cate.name = ''

  }

}).catch(() => {

  this.$toastr.e('服务器异常。')

})

测试程序。

6.修改分类

打开src\pages\Category.vue，绑定事件。

<td>

  <input type="number" v-model="cate.sort" class="form-control" @focus="edit(cate.sort)" @blur="save(cate, 'sort', $event)" />

</td>

<td>

  <input type="text" v-model="cate.name" class="form-control" @focus="edit(cate.name)" @blur="save(cate, 'name', $event)" />

</td>

在data中保存before。

data () {

  return {

    ……（原有代码）

    before: ''

  }

},

将方法定义出来。

methods: {

  ……（原有代码）

  edit (edit) {

    this.before = edit

  },

  save (cate, name, e) {

    if (cate[name] !== this.before) {

      var input = e.currentTarget.classList

      input.add('saving')

    }

  }

}

添加saving样式。

<style scoped>

……（原有代码）

.cate input.saving {

  background-color: #DBEDFF;

  border-color: #8FC5FF;

}

</style>

测试程序

 

提交表单。

save (cate, name, e) {

  ……（原有代码）

  var data = { id: cate.id }

  data[name] = cate[name]

  this.$http.post('category/save', data).then(res => {

    if (res.data.code === 0) {

      this.$toastr.e(res.data.msg)

    } else if (res.data.code === 1) {

      this.$toastr.s(res.data.msg)

      input.remove('saving')

      this.getCategory()

    }

  }).catch(() => {

    this.$toastr.e('服务器异常。')

  })

},

测试程序

 

7.删除分类

打开src\pages\Category.vue，为“删除”按钮绑定事件。

<td>

  <button class="btn btn-primary" @click="del(cate.id)">删除</button>

</td>

编写del()方法。

methods: {

  ……（原有代码）

  del (id) {

    this.$http.post('category/del', { id: id }).then(res => {

      if (res.data.code === 0) {

        this.$toastr.e(res.data.msg)

      } else if (res.data.code === 1) {

        this.$toastr.s(res.data.msg)

        this.getCategory()

      }

    }).catch(() => {

      this.$toastr.e('服务器异常。')

    })

  }

}

打开route\route.php，编写服务器端接口。

Route::post('category/del', 'api/Category/del');

打开application\api\controller\Category.php，编写del()方法。

public function del()

{

    $id = $this->request->post('id/d', 0);

    if ($category = CategoryModel::get($id)) {

        $category->delete();

        $this->success('删除成功。');

    }

    $this->error('删除失败，记录不存在。');

}

测试程序