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>
<!-- 展示表格 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
~~~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. 修改頁面
~~~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 {
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>
<!-- 表單 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. 完工！！
- thinkphp6執行流程(一)
- php中use關鍵字用法詳解
- Thinkphp6使用騰訊云發送短信步驟
- 路由配置
- Thinkphp6,static靜態資源訪問路徑問題
- ThinkPHP6.0+ 使用Redis 原始用法
- smarty在thinkphp6.0中的最佳實踐
- Thinkphp6.0 搜索器使用方法
- 從已有安裝包（vendor）恢復 composer.json
- tp6with的用法，表間關聯查詢
- thinkphp6.x多對多如何添加中間表限制條件
- thinkphp6 安裝JWT
- 緩存類型
- 請求信息和HTTP頭信息
- 模型事件用法
- 助手函數匯總
- tp6集成Alipay 手機和電腦端支付的方法
- thinkphp6使用jwt
- 6.0session cookie cache
- tp6筆記
- TP6(thinkphp6)隊列與延時隊列
- thinkphp6 command(自定義指令)
- command(自定義指令)
- 本地文件上傳
- 緩存
- 響應
- 公共函數配置
- 七牛云+文件上傳
- thinkphp6:訪問多個redis數據源(thinkphp6.0.5 / php 7.4.9)
- 富文本編輯器wangEditor3
- IP黑名單
- 增刪改查 +文件上傳
- workerman 定時器操作控制器的方法
- 上傳文件到阿里云oss
- 短信或者郵箱驗證碼防刷代碼
- thinkphp6:訪問redis6(thinkphp 6.0.9/php 8.0.14)
- 實現關聯多個id以逗號分開查詢數據
- thinkphp6實現郵箱注冊功能的細節和代碼(點擊鏈接激活方式)
- 用mpdf生成pdf文件(php 8.1.1 / thinkphp v6.0.10LTS )
- 生成帶logo的二維碼(php 8.1.1 / thinkphp v6.0.10LTS )
- mysql數據庫使用事務(php 8.1.1 / thinkphp v6.0.10LTS)
- 一，創建過濾IP的中間件
- 源碼解析請求流程
- 驗證碼生成
- 權限管理
- 自定義異常類
- 事件監聽event-listene
- 安裝與使用think-addons
- 事件與多應用
- Workerman 基本使用
- 查詢用戶列表按拼音字母排序
- 擴展包合集
- 查詢用戶數據，但是可以通過輸入用戶昵稱來搜索用戶同時還要統計用戶的文章和粉絲數
- 根據圖片的minetype類型獲取文件真實拓展名思路
- 到處excel
- 用imagemagick庫生成縮略圖
- 生成zip壓縮包并下載
- API 多版本控制
- 用redis+lua做限流(php 8.1.1 / thinkphp v6.0.10LTS )
- 【thinkphp6源碼分析三】 APP類之父， 容器Container類
- thinkphp6表單重復提交解決辦法
- 小程序授權
- 最簡單的thinkphp6導出Excel
- 根據訪問設備不同訪問不同模塊
- 服務系統
- 前置/后置中間件
- 給接口api做簽名驗證(php 8.1.1 / thinkphp v6.0.10LTS )
- 6實現郵箱注冊功能的細節和代碼(點擊鏈接激活方式)
- 使用前后端分離的驗證碼(thinkphp 6.0.9/php 8.0.14/vue 3.2.26)
- 前后端分離:用jwt+middleware做用戶登錄驗證(php 8.1.1 / thinkphp v6.0.10LTS )
- vue前后端分離多圖上傳
- thinkphp 分組、頁面跳轉與ajax
- thinkphp6 常用方法文檔
- 手冊里沒有的一些用法
- Swagger 3 API 注釋
- PHP 秒級定時任務
- thinkphp6集成gatewayWorker(workerman)實現實時監聽
- thinkphp6按月新增數據表
- 使用redis 實現消息隊列
- api接口 統一結果返回處理類
- 使用swoole+thinkphp6.0+redis 結合開發的登錄模塊
- 給接口api做簽名驗證
- ThinkPHP6.0 + UniApp 實現小程序的 微信登錄
- ThinkPHP6.0 + Vue + ElementUI + axios 的環境安裝到實現 CURD 操作！
- 異常$e
- 參數請求驗證自定義和異常錯誤自定義