您的当前位置:首页正文

uniapp开发微信小程序-6.用户注册和数据存储

2024-11-26 来源:个人技术集锦

uniapp开发微信小程序-6.用户注册和数据存储

1.添加数据
(1)后端,以php的thinkphp6框架为例。

第一步 ,我们在数据库创建一个user表,因为种种原因我想为表加一个后缀,所以我将表命名为user_green。

第二步 ,在tp6框架中创建一个模型,模型名需要与数据库表名对应,所以根据命名规则设置模型名为UserGreen。

<?php
namespace app\web\model;

use think\Model;

class UserGreen extends Model{
    // // 定义json数据
    protected $json = ['information'];
    // // 定义json数据查询时返回数组
    protected $jsonAssoc = true;
    // 设置字段信息
    protected $schema = [
        'id'          => 'int',
        'openid'      => 'string',
        'information' => 'text'
    ];
}

此时查阅数据,id和openid没问题,而个人信息information字段中我打算以json格式直接存入取出,里面可以包含很多数据。
另外update_time和create_time字段可以利用tp6框架自动填充,无需在模型中设置。

第三步 ,创建后端接口,使用户注册。
复制之前讲过的restful路由,实现高复用路由接口设置,并使用tp6中间件完成跨域操作:

// 通用模型操作
Route::group('/api/rest/:model', function(){
    // 新增数据到数据库
    Route::post('/', 'index/add');
    // 查询单个数据到数据库
    Route::get('/:id', 'index/find');
    // 查询所有数据到数据库
    Route::get('/', 'index/findall');
    // 修改单个数据到数据库
    Route::put('/:id/', 'index/update');
    // 删除单个数据到数据库
    Route::delete('/:id', 'index/delete');
})->middleware([\app\admin\middleware\compareToken::class]);

public function add()
{
    // 获取前端传值
    $data = request() -> param();
    // return $data;
    if($data['model'] == "user"){
        // 使用模型格式化传来的数据
        $db_data = new UserGreen;
        // 利用模型将数据传到数据库
        $db_data->save([
            'openid' => $data['openid'],
            'information' => $data,
        ]);
        // 返回结果
        return '新增数据成功';
    }
}

(2)前端,完成用户登录后将openid发送到后端

修改login方法:

login() {
	wx.login({
		success(res) {
			console.log('code', res)
			if (res.code) {
				// 获取到code后进行下一步操作,通过auth.code2Session获取openid
				uni.request({
					url: 'http://localhost:3000/web/openid/' + res.code,
					success(res) {
						console.log('openid', res)
						
						// 将openid存储到缓存,减少资源消耗
						wx.setStorage({
							key: "openid",
							data: res.data.openid
						})
						
						// 注册
						uni.request({
							url: 'http://localhost:3000/web/api/rest/user',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							method: 'POST',
							data: {
								openid: res.data.openid
							},
							success(res) {
								console.log('注册成功', res)
							}
						})
					}
				})
			} else {
				console.log('登录失败!' + res.errMsg)
				
			}
		}
	})
}

点击授权按钮进行测试,发现总是会报错:

改动之后测试:

2.完成注册

大家多测试几次就会注意到两个问题,一是数据中 update_time 和 create_time 并没有数据填入,第二就是设置openid主键后依然会有新数据产生:

(1)先解决时间戳问题:

进入user模型中,添加这两个字段,属性为datetime:

我错啦各位大哥,我记错了,这里并不是不用写,是不用设置传入的数据。前边的有太多地方截图了,我实在懒得改了!!!
然后授权测试:

没问题。

(2)避免重复注册:

避免重复注册的方法就是提前在数据库查一下这个用户是否注册过,也就是查一下数据库中是否有该openid。
第一步 ,为了避免代码混乱,将注册过程封装成方法 register()

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

第二步 ,后端封装一个查询是否注册的方法:
路由:

// 查询是否注册
Route::get('/is_register/:openid', 'index/is_register');

方法:

// 查询是否注册
public function is_register() {
    $data = request() -> param();
    $db_data = UserGreen::where("openid", $data['openid']) -> select();
    return json($db_data);
}

第三步 ,当用户进入页面时,检查用户本地缓存是否有openid,并获取openid:

created() {
	var that = this
	wx.getStorage({
		key: 'openid',
		success(res) {
			// 如果本地缓存有openid,说明一定注册过,无需验证,直接使用openid即可
			that.openid = res.data
		},
		fail() {
			// 如果没有本地缓存的openid,可能有两个原因
			// 第一,用户是第一次登录,没有进行过注册
			// 第二,用户的本地缓存过期或清理,需要验证是否注册过
			// 都跳转到login进行登录获取openid,获取到openid后使用下一步的isRegister()方法验证是否需要注册
			this.login()
		}
	})
},

第四步 ,前端注册一个调用后端是否注册的方法 isRegister() ,并传值openid:

isRegister(openid) {
	// 是否注册
	uni.request({
		url: 'http://localhost:3000/web/is_register/' + openid,
		header: {
			'content-type': 'application/x-www-form-urlencoded'
		},
		method: 'GET',
		success(res) {
			console.log('是否注册', res)
			if(!res.data[0]) {
				// 如果没有注册过,则跳转register()方法进行注册
				this.register(openid)
			}
			// 如果注册过,则到此为止
		},
		error(err){
			console.log(err)
		}
	})
}

感觉比较复杂,但主要逻辑自己考虑一下就能明白,主要就两个判断, 是否有之前登陆的缓存 ,没有的话查一下 是否注册
而且形式上我为了逻辑通顺多出了很多步骤,大家可以根据自己的需求进行设计。主要的前后端方法和接口就是上边那些了。

这篇文章的知识点包括增加数据、查询数据。下篇文章进行数据完善,以头像、昵称、个人信息等功能为例学习修改数据。

更多设计、功能的学习经验,大家也可以去我的公众号查看!

————

显示全文