ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！

1. 官方文档地址：

   ​ ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479

   ​ ElemetUI: https://element.eleme.cn/#/zh-CN

   ​ axios: https://www.kancloud.cn/yunye/axios/234845

   ​ Vue: https://cn.vuejs.org/v2/guide

2. 创建码云仓库

3. 克隆到本地

   git clone 你自己的仓库地址 0608
   

4. 创建数据库

   -- 创建数据库 0608
   create database `0608` charset utf8;
   -- 创建数据表 user
   create table `user` (
   	`id` int(11) primary key auto_increment comment '用户ID',
   	`name` varchar(30) not null default '未知' comment '用户名',
   	`pwd` varchar(32) not null default '未知' comment '用户密码' 
   ) engine = InnoDB;
   -- 给 user.name 添加唯一索引
   alter table `user` add unique key u_name(`name`);
   -- 给 user.pwd 添加普通索引
   alter table `user` add index u_pwd(`pwd`);
   -- 创建数据表 school
   create table `school` (
   	`id` int(11) primary key auto_increment comment '学校ID',
   	`name` varchar(30) not null default '未知' comment '学校名',
   	`city` varchar(30) not null default '未知' comment '学校城市',
   	`num` varchar(30) not null default '0' comment '学校人数'
   ) engine = InnoDB;
   

5. 进入项目

   cd 0608
   

6. 安装ThinkPHP6.0

   composer create-project topthink/think php
   

7. 配置域名／URL重写

   # 自行去配置域名
   # url 重写
   location / { 
      # 省略部分代码
      if (!-e $request_filename) {
      		rewrite  ^(.*)$  /index.php?s=/$1  last;
       }
   }
   

8. 修改配置文件 .env 【来源于项目中的 .example.env】

   APP_DEBUG = true
   
   [APP]
   DEFAULT_TIMEZONE = Asia/Shanghai
   
   [DATABASE]
   TYPE = mysql
   HOSTNAME = 127.0.0.1
   DATABASE = 0608
   USERNAME = root
   PASSWORD = root
   HOSTPORT = 3306
   CHARSET = utf8
   DEBUG = true
   
   [LANG]
   default_lang = zh-cn
   

9. 开启错误调试模式

   // 1 .env 文件中第 1 行
   APP_DEBUG = true
   
   // 2 config/app.php 中第 33 行
    'show_error_msg'   => true
   

10. 初始化vue

    查看node、npm、cnpm、vue-cli是否安装成功

    // 查看 node 版本
    node -v
    // 查看 npm 版本
    npm -v
    // 查看 cnpm 版本
    cnpm -v
    // 查看 vue 版本
    vue -V
    // 初始化项目
    vue init webpack vue
    

11. 进入vue进行测试、查看是否安装成功

    // 进入 vue 项目中
    cd vue
    // npm 启动项目
    npm run dev
    
    

12. 安装 Element-UI、axios

    // 安装 ElementUI
    cnpm install element-ui --save
    // 安装 axios
    cnpm install axios --save
    
    

13. 在 vue/src/main.js 中增加以下内容

    // 引入 elementUI
    // https://element.eleme.cn/#/zh-CN/component/quickstart
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    // 引入 axios
    // https://segmentfault.com/a/1190000013128858
    import axios from 'axios'
    Vue.prototype.$ajax = axios
    
    

14. 将初始化好的项目提交到远程仓库

    // 进入项目中
    cd 0608
    // 查看状态【红色、提示使用 git add 】
    git status
    // 添加代码到仓库
    git add ./
    // 查看状态【绿色、Changes to be committed:】
    git status
    // 提交代码到本地仓库
    git commit -m '提交注释'
    // 查看状态
    git status
    // 将远程仓库的更新拉取到本地
    git pull
    // 查看状态
    git status
    // 将本地的更新提交到远程仓库
    git push
    
    

15. 添加资源控制器／模型层／资源路由

    // 使用命令行：创建资源控制器
    php think make:controller School
    // 使用命令行：创建模型
    php think make:model School
      
    // 添加资源路由 php/route/app.php
    // 跨域请求【路由->跨域请求】
    Route::resource('school', 'School')->allowCrossDomain();
    
    

16. 编辑 curd 接口 - 控制器 - School.php

    getPage($pageSize);
            if ($res) {
                return json(['code' => 0, 'msg' => 'ok', 'res' => $res]);
            } else {
                return json(['code' => 1, 'msg' => 'no', 'res' => null]);
            }
        }
    
        /**
         * 显示创建资源表单页.
         *
         * @return \think\Response
         */
        public function create()
        {
            //
        }
    
        /**
         * 保存新建的资源
         * 【post】http://0608.cc/school?name=shbw&city=&num=10000
         *
         * @param  \think\Request  $request
         * @return \think\Response
         */
        public function save(Request $request, ModelSchool $school)
        {
            // 接收数据
            $data['name'] = $request->param('name', '');
            $data['city'] = $request->param('city', '');
            $data['num'] = $request->param('num', '0');
            // 数据验证
            $rule = [
                'name' => 'require|max:30|min:2',
                'city' => 'require',
                'num'  => 'require'
            ];
            $message = [
                'name.require'  => '学校名称是必填项',
                'name.max'      => '学校名称最多30位',
                'name.min'      => '学校名称最少2位',
                'city.require'  => '学校所在城市是必填项',
                'num.require'   => '学校现有人数是必填项'
            ];
            // 粘贴来自于手册：验证->验证规则->方法定义
            $validate = Validate::rule($rule)->message($message);
            if (!$validate->check($data)) {
                return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]);
            }
            // 调用模型
            $res = $school->addOne($data);
            if ($res) {
                return json(['code' => 0, 'msg' => '添加成功', 'res' => $res]);
            } else {
                return json(['code' => 1, 'msg' => '添加失败', 'res' => $res]);
            }
        }
    
        /**
         * 显示指定的资源
         * 【get】http://0608.cc/school/3
         *
         * @param  int  $id
         * @return \think\Response
         */
        public function read($id, ModelSchool $school )
        {
            $where['id'] = $id;
            $res = $school->selOne($where);
            if ($res) {
                return json(['code' => 0, 'msg' => '查询成功', 'res' => $res]);
            } else {
                return json(['code' => 1, 'msg' => '查询失败', 'res' => $res]);
            }
        }
    
        /**
         * 显示编辑资源表单页.
         *
         * @param  int  $id
         * @return \think\Response
         */
        public function edit($id)
        {
            //
        }
    
        /**
         * 保存更新的资源
         * 【put】http://0608.cc/school/3?name=bjbw3&city=bj3&num=30000
         *
         * @param  \think\Request  $request
         * @param  int  $id
         * @return \think\Response
         */
        public function update(Request $request, $id, ModelSchool $school)
        {
            // 接收数据
            $where['id'] = $id;
            $data['name'] = $request->param('name', '');
            $data['city'] = $request->param('city', '');
            $data['num'] = $request->param('num', '0');
            // 数据验证
            $rule = [
                'name' => 'require|max:30|min:2',
                'city' => 'require',
                'num'  => 'require'
            ];
            $message = [
                'name.require'  => '学校名称是必填项',
                'name.max'      => '学校名称最多30位',
                'name.min'      => '学校名称最少2位',
                'city.require'  => '学校所在城市是必填项',
                'num.require'   => '学校现有人数是必填项'
            ];
            // 粘贴来自于手册：验证->验证规则->方法定义
            $validate = Validate::rule($rule)->message($message);
            if (!$validate->check($data)) {
                return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]);
            }
            // 调用模型
            $res = $school->updOne($where, $data);
            if ($res) {
                return json(['code' => 0, 'msg' => '修改成功', 'res' => $res]);
            } else {
                return json(['code' => 1, 'msg' => '修改失败', 'res' => $res]);
            }
        }
    
        /**
         * 删除指定资源
         * 【delete】http://0608.cc/school/1
         *
         * @param  int  $id
         * @return \think\Response
         */
        public function delete($id, ModelSchool $school)
        {
            $where['id'] = $id;
            $res = $school->delOne($where);
            if ($res) {
                return json(['code' => 0, 'msg' => '删除成功', 'res' => $res]);
            } else {
                return json(['code' => 1, 'msg' => '删除失败', 'res' => $res]);
            }
        }
    }
    
    

17. 编辑 curd 接口 - 模型层 - School.php

     'int',
            'name'        => 'string',
            'city'        => 'string',
            'num'         => 'string'
        ];
    
        /**
         * 分页
         */
    
        public function getPage( $pageSize)
        {
            return self::paginate( $pageSize );
        }
    
        /**
         * 添加一条数据
         */
    
        public function addOne($data)
        {
            return self::insert( $data );
        }
    
        /**
         * 删除数据
         */
    
        public function delOne($where)
        {
            return self::where( $where )->delete();
        }
    
        /**
         * 修改
         */
    
        public function updOne($where,$data)
        {
            return self::where( $where )->update( $data );
        }
    
        /**
         * 查询一条
         */
    
        public function selOne($where)
        {
            return self::where( $where )->find();
        }
    }
    
    

18. 使用Postman测试 curd 接口

    # 展示/分页 get
    http://0608.cc/school
    http://0608.cc/school?page=2
    # 添加 post 
    http://0608.cc/school?name=shbw&city=&num=10000
    # 根据 ID 查询一个 get 
    http://0608.cc/school/3
    # 修改 put
    http://0608.cc/school/3?name=shbw&city=&num=10000
    # 删除 delete
    http://0608.cc/school/1
    
    

19. Vue中添加路由/页面

    // 在 vue/src/ 中增加 page/school/{ list.vue,add.vue }
    // 增加路由 vue/router/index.js
    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    // 导入登录页面
    import login from '@/page/main/login.vue'
    // 导入以下页面
    import schoolList from '@/page/school/list.vue'
    import schoolAdd from '@/page/school/add.vue'
    import schoolEdit from '@/page/school/edit.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [{
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/login',
          name: 'login',
          component: login
        },
        {
          path: '/schoolList',
          name: 'schoolList',
          component: schoolList
        },
        {
          path: '/schoolAdd',
          name: 'schoolAdd',
          component: schoolAdd
        },
        {
          path: '/schoolEdit',
          name: 'schoolEdit',
          component: schoolEdit
        }
      ]
    })
    
    

20. 展示页面 - list.vue

21. 添加页面 - add.vue

22. 修改页面

23. 登录页面

24. 完工！！