Uni-App - 实战《悦读》之创建用户数据表，完成App端用户登录功能

1、创建项目数据库

1.1 打开 phpMyadmin 或者其他 mysql 管理工具，phpstudy 环境下 mysql 账户 root 密码 root;

1.2 创建数据库 "yuedu"

CREATE TABLE `yuedu_members` (
  `u_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户id',
  `u_openid` varchar(100) NOT NULL COMMENT 'openid',
  `u_name` varchar(50) NOT NULL COMMENT '用户昵称',
  `u_face` varchar(200) NOT NULL COMMENT '用户头像',
  `u_random` varchar(30) NOT NULL COMMENT '用户随机码',
  `u_integral` int(10) DEFAULT '0' COMMENT '积分',
  `u_remainder` int(10) DEFAULT '0' COMMENT '余额',
  `u_regtime` int(11) NOT NULL COMMENT '用户注册时间',
  PRIMARY KEY (`u_id`),
  UNIQUE KEY `u_openid` (`u_openid`),
  UNIQUE KEY `u_id` (`u_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

2、phpMyAdmin 错误修正

Fatal error:  Cannot 'break' 2 levels in D:\phpStudy\PHPTutorial\WWW\phpMyAdmin\export.php on line 590
590 行把 break 2 改成 break;

3、配置数据库

打开 index.php 修改以下配置

/* 数据库配置 */
define('HS_DB_HOST'    , '127.0.0.1'); // mysql 服务器地址
define('HS_DB_NAME'    , 'yuedu');     // 数据库名称
define('HS_DB_USER'    , 'root');      // 数据库账号
define('HS_DB_PWD'     , 'root');      // 数据库密码
define('HS_DB_PRE'     , 'yuedu_');    // 数据表统一前缀
define('HS_DB_CHARSET' , 'utf8mb4');   // mysql 字符集类型

4、创建 member 控制器，编写以下代码

<?php
namespace hsC;
class member{
    public function index(){
        
    }
    
    public function login(){
        
        //调用模型完成用户登录及注册
        $memberModel = new \hsModel\member();
        $memberModel->login();
        
    }
}
// 原理见视频教程

5、在 app 端定义全局变量，定义全局的 api 接口地址及token

var APITOKEN  = 'api2018';
Vue.prototype.apiServer = 'http://192.168.1.188/index.php?token='+APITOKEN+'&c=member&m=login';

为什么这样定义？ 便于后期修改！

+ 如果手机端无法访问局域网ip，如何解决？

方案1、使用花生壳软件 > 内网穿透(功能收费6元)
方案2、使用模拟器调试，模拟器下载地址
方案3、将后端api 部署到公网服务器上

6、login.vue 与api交互完成app端登录功能

<template>
    <view>
        
    </view>
</template>
<script>
var _self;
export default {
    data() {
        return {
            
        };
    },
    onLoad:function(options){
        _self = this;
        //app 端微信登录
        // 手册位置 https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo
        // #ifdef APP-PLUS
        uni.login({
            success: (res) => {
                // res 对象格式
                //{"code":"***",
                //"authResult":{
                    //"openid":"***",
                    //"scope":"snsapi_userinfo",
                    //"refresh_token":"**",
                    //"code":"****",
                    //"unionid":"***",
                    //"access_token":"***",
                    //"expires_in":7200
                //},
                //"errMsg":"login:ok"}
                uni.getUserInfo({
                    success: (info) => {
                        // info 对象格式
                        // {"errMsg":"getUserInfo:ok",
                        // "rawData":"...
                        // "userInfo":{
                            //"openId":"***",
                            //"nickName":"***",
                            //"gender":1,
                            // "city":"Xi'an",
                            // "province":"Shaanxi",
                            // "country":"China",
                            // "avatarUrl":"头像",
                            // "unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"
                        //},"signature":""}
                        // 与服务器交互将数据提交到服务端数据库
                        uni.request({
                            url: _self.apiServer+'member&m=login',
                            method: 'POST',
                            header: {'content-type' : "application/x-www-form-urlencoded"},
                            data: {
                                openid : info.userInfo.openId,
                                name   : info.userInfo.nickName,
                                face   : info.userInfo.avatarUrl,
                            },
                            success: res => {
                                console.log(JSON.stringify(res));
                                res = res.data;
                                // 登录成功 记录会员信息到本地
                                if(res.status == 'ok'){
                                    uni.showToast({title:"登录成功"});
                                    uni.setStorageSync('SUID' , res.data.u_id + '');
                                    uni.setStorageSync('SRAND', res.data.u_random + '');
						                        uni.setStorageSync('SNAME', res.data.u_name + '');
                                    uni.setStorageSync('SFACE', res.data.u_face + '');
                                    // 跳转
                                    if(options.backtype == 1){
                                        uni.redirectTo({url:options.backpage});
                                    }else{
                                        uni.switchTab({url:options.backpage});
                                    }
                                }else{
                                    uni.showToast({title:res.data});
                                }
                            },
                            fail: (e) => {
                                console.log(JSON.stringify(e));
                            }
                        });
                    },
                    fail: () => {
                        uni.showToast({title:"微信登录授权失败"});
                    }
                })
            },
            fail: () => {
                uni.showToast({title:"微信登录授权失败"});
                uni.hideLoading();
            }
        })
        // #endif
    }
}
</script>

<style>

</style>