微信小程序+ThinkPHP6连接数据库增、删、改、查示例

╰半夏微凉° 2021-07-24 18:11 1186阅读 0赞

## 前言：本篇文章主要讲的是使用TP6框架写接口并且在前端调用接口的一个过程 ##

PS：以下开发环境是在本地使用phpEnv的集成环境，没描述到位的可以评论我及时修改/补充哈~

--------------------

**最终效果：**  
![在这里插入图片描述][20200416154830444.gif]

--------------------

## 前端工具/环境： ##

**微信开发者工具下载：**[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]  
PS:当前示例的微信开发者工具使用的稳定版

--------------------

## 后端工具/环境： ##

**phpEnv下载地址：**[https://www.phpenv.cn/download.html][https_www.phpenv.cn_download.html]

**安装tp6框架教程：**[https://www.kancloud.cn/manual/thinkphp6\_0/1037481][https_www.kancloud.cn_manual_thinkphp6_0_1037481]  
PS:当前示例安装的tp6是开发版;使用命令安装tp6框架跟创建一个vue项目差不多，需要下载Composer-Setup.exe工具，具体可以看官网说明

--------------------

## 后端内容： ##

**TP6框架：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]  
**运行TP框架：**  
运行命令：php think run  
![在这里插入图片描述][20200415114737648.png]  
**默认打开的页面：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]

--------------------

**phpEnv：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

--------------------

PS:首页建立好数据库和表，再去tp6框架写php对数据库里面的表进行查询、插入、修改、删除的操作

**1-1：登录数据库**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]

**1-2：默认的用户名和密码是root**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 4]

**1-3：创建好的数据和表**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 5]

--------------------

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

**2-1：连接数据库**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 6]

**2-2：在controller目录下新建GetUser.php文件;用来查询、插入、删除表**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 7]

**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：查询测试**

数据表内容：  
![在这里插入图片描述][20200415114106786.png]

php代码查询表内容，这里就是一个接口了返回了json数据：  
![在这里插入图片描述][20200415114041874.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 8]

--------------------

## 前端内容： ##

**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;
    }

[20200416154830444.gif]: /images/20210724/ae62ebbd49ad4f4a9f0b77bdeb4542d3.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[https_www.phpenv.cn_download.html]: https://www.phpenv.cn/download.html
[https_www.kancloud.cn_manual_thinkphp6_0_1037481]: https://www.kancloud.cn/manual/thinkphp6_0/1037481
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/a87032cc4b81453eadb19565ebdea2bb.png
[20200415114737648.png]: /images/20210724/aed26cea9c924bb4af0fdc6f65b2f119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/5aa11a489ca94960b645a20f4b4a5969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/9ef72c8918a44c51bddbf9e04fd8441f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]: /images/20210724/03531779cf164ac3891e17ce456f6312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 4]: /images/20210724/825ba78791724db48d540ccea94b6507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 5]: /images/20210724/15f8e30b94f44ac2972df62566d244cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 6]: /images/20210724/59caf57e1ae5402ea2959480abadc0f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 7]: /images/20210724/ac1fb0ebdc544d1aa78c74d21041eb06.png
[20200415114106786.png]: /images/20210724/9b44d05797ea427680825eeed99594ed.png
[20200415114041874.png]: /images/20210724/db2ca31a3a384d59b69a01d949586d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 8]: /images/20210724/e58e5adb31a24df996b5a0d7d424ef90.png