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

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

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

  1. 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代码

  1. <?php
  2. namespace app\controller;
  3. use app\BaseController;
  4. use think\facade\Db;
  5. class GetUser{
  6. //查询全部账号
  7. public function get_user(){
  8. $rs=Db::name('user')->select();
  9. return json(['code'=>200,'data'=>$rs]);
  10. }
  11. // 注册账号
  12. public function getUpData(){
  13. if(request()->isPost()){
  14. $data = [
  15. 'user_name' => input('user_name'),
  16. 'user_password' => input('user_password')
  17. ];
  18. if(Db::name('user') -> insert($data)){
  19. return json(['code'=>200,'添加成功']);
  20. }else{
  21. return json(['code'=>400,'添加失败']);
  22. }
  23. return;
  24. }
  25. return $this -> fetch('add');
  26. }
  27. //删除账号
  28. public function delUser(){
  29. if(request()->isPost()){
  30. $data = [
  31. 'id' => input('id')
  32. ];
  33. if(Db::name('user') -> delete($data)){
  34. return json(['code'=>200,'删除成功']);
  35. }else{
  36. return json(['code'=>400,'删除失败']);
  37. }
  38. return;
  39. }
  40. return $this -> fetch('add');
  41. }
  42. //修改账号密码
  43. public function upUserPassword(){
  44. if(request()->isPost()){
  45. $data = [
  46. 'user_name' => input('user_name'),
  47. 'user_password' => input('user_password')
  48. ];
  49. $list=Db::name('user')->where('user_name',$data['user_name'])->update(['user_password'=>$data['user_password']]);
  50. return $list?'成功更新'.$list.'条数据':'更新失败,用户名称或者密码错误';
  51. }
  52. }
  53. }

2-4:查询测试

数据表内容:
在这里插入图片描述

php代码查询表内容,这里就是一个接口了返回了json数据:
在这里插入图片描述

在这里插入图片描述


前端内容:

wxml:

  1. <view style="padding: 0 20rpx;">
  2. <view class="cant">
  3. <view class="clasType">查询账号:</view>
  4. <block wx:for="{ {list}}" wx:key="index">
  5. <view style="display: flex;justify-content: space-between;padding-bottom: 20rpx;">
  6. <view>
  7. <view>
  8. <text>账号名称:</text>
  9. <text>{
  10. {item.user_name}}</text>
  11. </view>
  12. <view>
  13. <text>账号密码:</text>
  14. <text>{
  15. {item.user_password}}</text>
  16. </view>
  17. </view>
  18. <view style="color: red;" data-id="{ {item.id}}" bindtap="delList">删除</view>
  19. </view>
  20. </block>
  21. </view>
  22. <view class="cant">
  23. <view class="clasType">注册账号:</view>
  24. <view>
  25. <view style="display: flex;align-items: center;">
  26. <view>账号名称:</view>
  27. <input placeholder="请输入账号名称" value="{ {username}}" bindinput="bindusername"></input>
  28. </view>
  29. <view style="display: flex;align-items: center;">
  30. <view>账号密码: </view>
  31. <input placeholder="请输入账号密码" value="{ {password}}" bindinput="bindpassword"></input>
  32. </view>
  33. <view bindtap="updata" class="btns">提交</view>
  34. </view>
  35. </view>
  36. <view class="cant">
  37. <view class="clasType">修改密码:</view>
  38. <view>
  39. <view style="display: flex;align-items: center;">
  40. <view>账号名称:</view>
  41. <input placeholder="请输入账号名称" value="{ {username2}}" bindinput="bindusername2"></input>
  42. </view>
  43. <view style="display: flex;align-items: center;">
  44. <view>账号密码: </view>
  45. <input placeholder="请输入账号密码" value="{ {password2}}" bindinput="bindpassword2"></input>
  46. </view>
  47. <view bindtap="updata2" class="btns">提交</view>
  48. </view>
  49. </view>
  50. </view>

js:

  1. Page({
  2. data: {
  3. list: '',
  4. username: '',
  5. password: '',
  6. username2: '',
  7. password2: ''
  8. },
  9. onLoad() {
  10. this.getList();
  11. },
  12. thatDelData(e) {
  13. var that = this;
  14. // console.log(e)
  15. var id = e.currentTarget.dataset.id;
  16. wx.request({
  17. url: 'http://127.0.0.1:8000/GetUser/delUser',
  18. method: 'POST',
  19. data: {
  20. id: id
  21. },
  22. success: (res) => {
  23. console.log(res);
  24. this.getList();
  25. }
  26. })
  27. },
  28. getList() {
  29. var that = this;
  30. wx.request({
  31. url: 'http://127.0.0.1:8000/GetUser/get_user',
  32. success: (res) => {
  33. console.log(res);
  34. if (res.data.code == 200) {
  35. that.setData({
  36. list: res.data.data
  37. })
  38. }
  39. }
  40. })
  41. },
  42. updata() {
  43. var that = this;
  44. wx.request({
  45. url: 'http://127.0.0.1:8000/GetUser/getUpData',
  46. method: 'POST',
  47. data: {
  48. user_name: that.data.username,
  49. user_password: that.data.password
  50. },
  51. success: (res) => {
  52. console.log(res);
  53. this.getList();
  54. }
  55. })
  56. },
  57. updata2() {
  58. var that = this;
  59. wx.request({
  60. url: 'http://127.0.0.1:8000/GetUser/upUserPassword',
  61. method: 'POST',
  62. data: {
  63. user_name: that.data.username2,
  64. user_password: that.data.password2
  65. },
  66. success: (res) => {
  67. console.log(res);
  68. // this.getList();
  69. }
  70. })
  71. },
  72. bindusername(e) {
  73. // console.log(e);
  74. this.setData({
  75. username: e.detail.value
  76. })
  77. },
  78. bindpassword(e) {
  79. // console.log(e);
  80. this.setData({
  81. password: e.detail.value
  82. })
  83. },
  84. bindusername2(e) {
  85. // console.log(e);
  86. this.setData({
  87. username2: e.detail.value
  88. })
  89. },
  90. bindpassword2(e) {
  91. // console.log(e);
  92. this.setData({
  93. password2: e.detail.value
  94. })
  95. }
  96. })

wxss:

  1. /* pages/user/user.wxss */
  2. page{
  3. background-color: white;
  4. }
  5. .cant{
  6. padding-bottom: 50rpx;
  7. border-bottom: 1px solid blue;
  8. }
  9. .clasType{
  10. font-size: 40rpx;font-weight: bold;padding: 20rpx 0;
  11. }
  12. .btns{
  13. display: inline-block;
  14. padding: 20rpx 100rpx;
  15. color: #000;
  16. background-color: #f8f8f8;
  17. margin-top: 30rpx;
  18. }

发表评论

表情:
评论列表 (有 0 条评论,1195人围观)

还没有评论,来说两句吧...

相关阅读