ThinkPHP6.0 + Vue + ElementUI + axios 的環境安裝到實現 CURD 操做！

時間  2020-06-09
標籤 thinkphp6.0 thinkphp vue elementui axios 環境 安裝 實現 curd 欄目 PHP 简体版
原文   原文鏈接

  1. 官方文檔地址：php

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

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

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

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

  2. 建立碼雲倉庫linux

  3. 克隆到本地webpack

    git clone 你本身的倉庫地址 0608

  4. 建立數據庫ios

    -- 建立數據庫 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. 進入項目nginx

    cd 0608

  6. 安裝ThinkPHP6.0git

    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

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

  17. 編輯 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();
    }
}

  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

    <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 = 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>

  21. 添加頁面 - add.vue

    <template>
  <div>
    <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">數據列表</el-button></a>
    <br />
    <br />
    <!--  表單 start https://element.eleme.cn/#/zh-CN/component/form -->
    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">
      <el-form-item label="學校名稱" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>
      <el-form-item label="所在城市" prop="city"><el-input type="text" v-model="dataForm.city"></el-input></el-form-item>
      <el-form-item label="人數" prop="num"><el-input type="number" v-model.number="dataForm.num"></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  表單 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        name: '',
        city: '',
        num: ''
      }
    };
  },
  methods: {
    submitForm() {
      var _self = this;
      _self.$ajax
        .post('http://0608.cc/school', _self.dataForm)
        .then(function(response) {
          // 無論成功與失敗、都彈出消息
          alert(response.data.msg);
          // 判斷是否成功、成功跳轉至展現頁面
          if (response.data.code == 0) {
            _self.$router.push({ name: 'schoolList' });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style></style>

  22. 修改頁面

    <template>
  <div>
    <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">數據列表</el-button></a>
    <br />
    <br />
    <!--  表單 start https://element.eleme.cn/#/zh-CN/component/form -->
    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">
      <el-form-item label="學校名稱" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>
      <el-form-item label="所在城市" prop="city"><el-input type="text" v-model="dataForm.city"></el-input></el-form-item>
      <el-form-item label="人數" prop="num"><el-input type="number" v-model.number="dataForm.num"></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  表單 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataId: this.$route.params.id,
      dataForm: {
        name: this.$route.params.name,
        city: this.$route.params.city,
        num: this.$route.params.num
      }
    };
  },
  methods: {
    submitForm() {
      var _self = this;
      _self.$ajax
        .put('http://0608.cc/school/' + _self.dataId, _self.dataForm)
        .then(function(response) {
          // 無論成功與失敗、都彈出消息
          alert(response.data.msg);
          // 判斷是否成功、成功跳轉至展現頁面
          if (response.data.code == 0) {
            _self.$router.push({ name: 'schoolList' });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style></style>

  23. 登陸頁面

    <template>
  <div>
    <!--  表單 start https://element.eleme.cn/#/zh-CN/component/form -->
    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">
      <el-form-item label="用戶名" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>
      <el-form-item label="密碼" prop="pwd"><el-input type="password" v-model="dataForm.pwd"></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">登陸</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  表單 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        name: '',
        pwd: ''
      }
    };
  },
  methods: {
    submitForm() {
      var _self = this;
      _self.$ajax
        .get('http://0608.cc/login', { params: _self.dataForm })
        .then(function(response) {
          // 無論成功與失敗、都彈出消息
          alert(response.data.msg);
          // 判斷是否成功、成功跳轉至展現頁面
          if (response.data.code == 0) {
            _self.$router.push({ name: 'schoolList' });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style></style>

  24. 完工！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程