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>
