重构实时对战小程序（二）

本文已参与「新人创作礼」活动，一起开启掘金创作之路

接上篇，介绍了一下以前的项目的情况，以及计划重构后的一些基本情况

后台目录结构：

 

我们先弄后台，后台的登录界面用Vue-element-admin原来的界面。就这样，好看吗？

我自己也搭建了一套vue-element-admin的界面，大家喜欢的话可以去看下，链接是element.6yue7.cn

对于这种项目，每更改一次代码就要打包一次才能看到效果，非常麻烦，所以我选择了安装nodemon 全局安装命令为npm install -g nodemon 这样就会实时监听，每当我修改代码就会自动更新，就可以查看到效果

 

 

首页就先设计成这样

接下来就是后台管理员管理页面，这个就简单点设计

会员列表

管理组列表

 

下面新建一个答题题库的模块

1. 新建权限，题库管理作为一级菜单

  

新建“题库列表”权限

  新建数据表  

 

新建模型

 

新建控制器

增加api路由

Route::get('question','QuestionController@list')->middleware(['permissions:QuestionrList']); //题库列表

增加题库数据列表方法

`   /**

     * QustionList

     * 题库列表

     * @param Request $request

     * @return \Illuminate\Http\Response

     * @queryParam  name string 题目标题

     * @queryParam  limit int 每页显示条数

     * @queryParam  sort string 排序

     * @queryParam  page string 页码

     */

    public function list(Request $request)

    {

        Question::$withoutAppends = false;

        $q = Question::query();

        if ($request->name) {

            $q->where('name', 'like', '$request->name . '%');

        }

        if ($request->type) {

            $q->where('type',$request->type);

        }

 

        $limit =$request->limit;

        if ($request->has('sort')) {

            $sortFormatConversion = sortFormatConversion($request->sort);

            $q->orderBy($sortFormatConversion[0], $sortFormatConversion[1]);

        }

        $paginate =$q->paginate($limit);

        return resReturn(1, $paginate);

}`

 

后台管理的前端项目上添加一个api 文件

还要要权限的js文件上增加路由指向

新建vue页面

新建题库列表页面

我们先看下效果

  感觉还可以吧，但还有很多东西要完善，例如添加，编辑，删除等。这些在下一篇再说吧。 总结，虽然新建一个模块比较麻烦，但当你做出一个模块了，后面就简单了，因为很多都是相同的。