微信小程序+ThinkPHP6連接數據庫查詢、插入、修改、刪除示例

前言：本篇文章主要講的是使用TP6框架寫接口並且在前端調用接口的一個過程

PS：以下開發環境是在本地使用phpEnv的集成環境，沒描述到位的可以評論我及時修改/補充哈~

---

最終效果：

---

前端工具/環境：

微信開發者工具下載：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
PS:當前示例的微信開發者工具使用的穩定版

---

後端工具/環境：

phpEnv下載地址：https://www.phpenv.cn/download.html

安裝tp6框架教程：https://www.kancloud.cn/manual/thinkphp6_0/1037481
PS:當前示例安裝的tp6是開發版;使用命令安裝tp6框架跟創建一個vue項目差不多，需要下載Composer-Setup.exe工具，具體可以看官網說明

---

後端內容：

TP6框架：

運行TP框架：
運行命令：php think run

默認打開的頁面：

---

phpEnv：

---

PS:首頁建立好數據庫和表，再去tp6框架寫php對數據庫裏面的表進行查詢、插入、修改、刪除的操作

1-1：登錄數據庫

1-2：默認的用戶名和密碼是root

1-3：創建好的數據和表

---

PS：下面去TP6框架開始php文件了

2-1：連接數據庫

2-2：在controller目錄下新建GetUser.php文件;用來查詢、插入、刪除表

2-3：GetUser.php文件;查詢、插入、修改、刪除表php代碼

<?php

namespace app\controller;

use app\BaseController;
use think\facade\Db;

class GetUser{
	
	//查詢全部賬號
	public function get_user(){
		$rs=Db::name('user')->select();
		return json(['code'=>200,'data'=>$rs]);
	}
	
	// 註冊賬號
	public function getUpData(){
		if(request()->isPost()){
			$data = [
				'user_name' => input('user_name'),
				'user_password' => input('user_password')
			];
			
			if(Db::name('user') -> insert($data)){
				return json(['code'=>200,'添加成功']);
			}else{
				return json(['code'=>400,'添加失敗']);
			}
			return;
		}
		return $this -> fetch('add');
	}
	
	//刪除賬號
	public function delUser(){
		if(request()->isPost()){
			$data = [
				'id' => input('id')
			];
			
			if(Db::name('user') -> delete($data)){
				return json(['code'=>200,'刪除成功']);
			}else{
				return json(['code'=>400,'刪除失敗']);
			}
			return;
		}
		return $this -> fetch('add');
	}
	
	//修改賬號密碼
	public function upUserPassword(){
		
		if(request()->isPost()){
			$data = [
				'user_name' => input('user_name'),
				'user_password' => input('user_password')
			];
			
			$list=Db::name('user')->where('user_name',$data['user_name'])->update(['user_password'=>$data['user_password']]);
			return $list?'成功更新'.$list.'條數據':'更新失敗,用戶名稱或者密碼錯誤';
		}
		
	}
}

---

2-4：查詢測試

數據表內容：

php代碼查詢表內容，這裏就是一個接口了返回了json數據：

---

前端內容：

wxml:

<view style="padding: 0 20rpx;">
  <view class="cant">
    <view class="clasType">查詢賬號:</view>
    <block wx:for="{{list}}" wx:key="index">
      <view style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
        <view>
          <view>
            <text>賬號名稱:</text>
            <text>{{item.user_name}}</text>
          </view>
          <view>
            <text>賬號密碼:</text>
            <text>{{item.user_password}}</text>
          </view>
        </view>
        <view style="color: red;" data-id="{{item.id}}" bindtap="delList">刪除</view>
      </view>
    </block>
  </view>

  <view class="cant">
    <view class="clasType">註冊賬號:</view>
    <view>
      <view style="display: flex;align-items: center;">
        <view>賬號名稱：</view>
        <input placeholder="請輸入賬號名稱" value="{{username}}" bindinput="bindusername"></input>
      </view>
      <view style="display: flex;align-items: center;">
        <view>賬號密碼： </view>
        <input placeholder="請輸入賬號密碼" value="{{password}}" bindinput="bindpassword"></input>
      </view>
      <view bindtap="updata" class="btns">提交</view>
    </view>
  </view>

  <view class="cant">
    <view class="clasType">修改密碼:</view>
    <view>
      <view style="display: flex;align-items: center;">
        <view>賬號名稱：</view>
        <input placeholder="請輸入賬號名稱" value="{{username2}}" bindinput="bindusername2"></input>
      </view>
      <view style="display: flex;align-items: center;">
        <view>賬號密碼： </view>
        <input placeholder="請輸入賬號密碼" value="{{password2}}" bindinput="bindpassword2"></input>
      </view>
      <view bindtap="updata2" class="btns">提交</view>
    </view>
  </view>
</view>

js:

Page({
  data: {
    list: '',
    username: '',
    password: '',
    username2: '',
    password2: ''
  },
  onLoad() {
    this.getList();
  },
  thatDelData(e) {
    var that = this;

    // console.log(e)

    var id = e.currentTarget.dataset.id;

    wx.request({
      url: 'http://127.0.0.1:8000/GetUser/delUser',
      method: 'POST',
      data: {
        id: id
      },
      success: (res) => {
        console.log(res);
        this.getList();
      }
    })
  },
  getList() {
    var that = this;
    wx.request({
      url: 'http://127.0.0.1:8000/GetUser/get_user',
      success: (res) => {
        console.log(res);
        if (res.data.code == 200) {
          that.setData({
            list: res.data.data
          })
        }
      }
    })
  },
  updata() {
    var that = this;

    wx.request({
      url: 'http://127.0.0.1:8000/GetUser/getUpData',
      method: 'POST',
      data: {
        user_name: that.data.username,
        user_password: that.data.password
      },
      success: (res) => {
        console.log(res);
        this.getList();
      }
    })
  },
  updata2() {
    var that = this;

    wx.request({
      url: 'http://127.0.0.1:8000/GetUser/upUserPassword',
      method: 'POST',
      data: {
        user_name: that.data.username2,
        user_password: that.data.password2
      },
      success: (res) => {
        console.log(res);
        // this.getList();
      }
    })
  },
  bindusername(e) {
    // console.log(e);
    this.setData({
      username: e.detail.value
    })
  },
  bindpassword(e) {
    // console.log(e);
    this.setData({
      password: e.detail.value
    })
  },
  bindusername2(e) {
    // console.log(e);
    this.setData({
      username2: e.detail.value
    })
  },
  bindpassword2(e) {
    // console.log(e);
    this.setData({
      password2: e.detail.value
    })
  }
})

wxss:

/* pages/user/user.wxss */
page{
	background-color: white;
}
.cant{
	padding-bottom: 50rpx;
	border-bottom: 1px solid blue;
}
.clasType{
	font-size: 40rpx;font-weight: bold;padding: 20rpx 0;
}
.btns{
	display: inline-block;
	padding: 20rpx 100rpx;
	color: #000;
	background-color: #f8f8f8;
	margin-top: 30rpx;
}