ThinkPHP6.0 + Vue + ElementUI + axios 的環境安裝到實現 CURD 操作 · 雜記

1. 官方文檔地址： ? ThinkPHP6.0:[http://www.hmoore.net/manual/thinkphp6\_0/1037479](http://www.hmoore.net/manual/thinkphp6_0/1037479) ? ElemetUI:[https://element.eleme.cn/#/zh-CN](https://element.eleme.cn/#/zh-CN) ? axios:[http://www.hmoore.net/yunye/axios/234845](http://www.hmoore.net/yunye/axios/234845) ? Vue:[https://cn.vuejs.org/v2/guide](https://cn.vuejs.org/v2/guide) 2. 創建碼云倉庫 3. 克隆到本地 ~~~linux git clone 你自己的倉庫地址 0608 ~~~ 4. 創建數據庫 ~~~sql -- 創建數據庫 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. 進入項目 ~~~linux cd 0608 ~~~ 6. 安裝ThinkPHP6.0 ~~~linux composer create-project topthink/think php ~~~ 7. 配置域名／URL重寫 ~~~nginx # 自行去配置域名 # url 重寫 location / { # 省略部分代碼 if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; } } ~~~ 8. 修改配置文件 .env 【來源于項目中的 .example.env】 ~~~php 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. 開啟錯誤調試模式 ~~~php // 1 .env 文件中第 1 行 APP_DEBUG = true // 2 config/app.php 中第 33 行 'show_error_msg' => true ~~~ 10. 初始化vue 查看node、npm、cnpm、vue-cli是否安裝成功 ~~~js // 查看 node 版本 node -v // 查看 npm 版本 npm -v // 查看 cnpm 版本 cnpm -v // 查看 vue 版本 vue -V // 初始化項目 vue init webpack vue ~~~ 11. 進入vue進行測試、查看是否安裝成功 ~~~js // 進入 vue 項目中 cd vue // npm 啟動項目 npm run dev ~~~ 12. 安裝 Element-UI、axios ~~~js // 安裝 ElementUI cnpm install element-ui --save // 安裝 axios cnpm install axios --save ~~~ 13. 在 vue/src/main.js 中增加以下內容 ~~~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. 將初始化好的項目提交到遠程倉庫 ~~~js // 進入項目中 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 // 使用命令行：創建資源控制器 php think make:controller School // 使用命令行：創建模型 php think make:model School // 添加資源路由 php/route/app.php // 跨域請求【路由->跨域請求】 Route::resource('school', 'School')->allowCrossDomain(); ~~~ 16. 編輯 curd 接口 - 控制器 - School.php ~~~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 <?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 接口 ~~~php # 展示/分頁 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中添加路由/頁面 ~~~js // 在 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 ~~~vue <template> <div> <a href="/#/schoolAdd"><el-button type="button" size="small" style="float: left;">數據添加</el-button></a>  <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>   <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="getCurrentPage"></el-pagination>  </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 ~~~vue <template> <div> <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">數據列表</el-button></a> <br /> <br />  <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>  </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. 修改頁面 ~~~vue <template> <div> <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">數據列表</el-button></a> <br /> <br />  <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>  </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. 登錄頁面 ~~~vue <template> <div>  <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>  </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. 完工！！ 25. 聲明本人博客的所有東西,部分源于網絡書籍和視頻，其他的是個人的理解感悟，經過自己整理撰寫成博客。本人博客均只用于個人學習、復習，不作為商業用途，如有侵權，請聯系我修改或刪除。聯系郵箱：itlaowen@163.com 26. https://www.cnblogs.com/laowenBlog/p/13066263.html