ThinkPHP6.0 + Vue + ElementUI + axios 的環境安裝到實作 CURD 操作！-有解無憂

官方檔案地址：

? 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
創建碼云倉庫

克隆到本地

git clone 你自己的倉庫地址 0608

創建資料庫

-- 創建資料庫 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;

進入專案
```
cd 0608
```

安裝ThinkPHP6.0

composer create-project topthink/think php

配置域名／URL重寫

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

修改組態檔 .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

開啟錯誤除錯模式

// 1 .env 檔案中第 1 行
APP_DEBUG = true

// 2 config/app.php 中第 33 行
 'show_error_msg'   => true

初始化vue

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

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

進入vue進行測驗、查看是否安裝成功

// 進入 vue 專案中
cd vue
// npm 啟動專案
npm run dev

安裝 Element-UI、axios

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

在 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

將初始化好的專案提交到遠程倉庫

// 進入專案中
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

添加資源控制器／模型層／資源路由

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

編輯 curd 介面 - 控制器 - School.php

<?php

declare(strict_types=1);
namespace app\controller;
use app\model\School as ModelSchool;
use think\facade\Validate;
use think\Request;

class School
{
    /**
     * 顯示資源串列
     * 【get】http://0608.cc/school
     * 【get】http://0608.cc/school?page=2
     *
     * @return \think\Response
     */
    public function index(ModelSchool $school)
    {
        $pageSize = 3;
        $res = $school->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]);
        }
    }
}

編輯 curd 介面 - 模型層 - School.php

<?php
declare (strict_types = 1);
namespace app\model;
use think\Model;

/**
 * @mixin think\Model
 */
class School extends Model
{
    protected $table = 'school';
    protected $pk = 'id';
    // 設定欄位資訊
    protected $schema = [
        'id'          => '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();
    }
}

使用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

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
    }
  ]
})

展示頁面 - list.vue

<template>
  <div>
    <a href="/#/schoolAdd"><el-button type="button" size="small" style="float: left;">資料添加</el-button></a>
    <!--  展示表格 start https://element.eleme.cn/#/zh-CN/component/table -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="150"></el-table-column>
      <el-table-column prop="name" label="學校名" width="150"></el-table-column>
      <el-table-column prop="city" label="所在城市" width="150"></el-table-column>
      <el-table-column prop="num" label="人數" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">洗掉</el-button>
          <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  展示表格 end -->
    <!-- 分頁控制元件 start https://element.eleme.cn/#/zh-CN/component/pagination -->
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="getCurrentPage"></el-pagination>
    <!-- 分頁控制元件 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 3
    };
  },
  created() {
    var _self = this;
    _self.getPage();
  },
  methods: {
    // 呼叫介面、獲取分頁資料
    getPage: function() {
      var _self = this;
      // 使用 ajax 請求后臺提供的展示介面
      _self.$ajax
        .get('http://0608.cc/school', {
          params: {
            page: _self.currentPage
          }
        })
        .then(function(response) {
          _self.tableData = https://www.cnblogs.com/laowenBlog/p/response.data.res.data;
          _self.total = response.data.res.total;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //當前頁改變事件
    getCurrentPage: function(page) {
      var _self = this;
      // 改變當前頁碼
      _self.currentPage = page;
      // 獲取當前頁資料
      _self.getPage();
    },

    // 洗掉一條資料
    deleteRow(data) {
      var _self = this;
      var id = data.id;
      _self.$ajax
        .delete('http://0608.cc/school/' + id)
        .then(function(response) {
          alert(response.data.msg);
          if (response.data.code == 0) {
            _self.getPage();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 編輯
    editRow(row) {
      this.$router.push({ name: 'schoolEdit', params: row });
    }
  }
};
</script>

<style></style>

添加頁面 - add.vue

<template>
  <div>
    <a href=https://www.cnblogs.com/laowenBlog/p/"/#/schoolList">資料串列
    

    

    
    
      
      
      
      
        提交
        資料串列
    

    

    
    
      
      
      
      
        提交
        





        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/27444.html
      標籤：PHP 
      上一篇：新版阿里云短信服務之發送驗證碼介面快速實作
下一篇：[vuejs] 聊天框在overflow:auto中填資料時滾動到底部