关闭

React Native实战项目企业通信录(含视频教程)- 登录功能实现

标签: native服务器
659人阅读 评论(0) 收藏 举报
分类:

React Native实战项目企业通信录- 登录功能实现

前言

前面两篇文章讲解了如何使用Baker开发React Native应用,以及通过登录页面实战了下,效果还是很不错的,这节课我们继续开发该项目,实现登录功能。

登录界面效果

设计到的知识点

要实现登录功能,APP需要与服务端交互,所以从这节课开始我们就要设计到服务端的技术了。

Parse Server

指导文档:Parse JavaScript Guide
API文档:Parse JavaScript API Docs

启动服务器

启动服务器

npm run server

启动服务

这个命令会启动服务器,在启动前,会自动下载mongodb,下载过程会有点慢,你可以按照下面的步骤手动下载。

安装mongodb-download-url,并获取mongodb下载地址:

npm install -g mongodb-download-url
mongodb-download-url

这样会输出一个mongodb的下载地址,用下载工具或浏览器下载到本地,然后把下载的文件放到:
/AddressBook/node_modules/mongodb-version-manager/.mongodb/downloads目录下,然后再执行npm run server

修改服务名称和图标

用浏览器打开http://localhost:8000/dashboard

用户名:admin
密码:admin

登陆后可以看到,服务器应用的名称是baker-server,图标也不是我们想要的图标::
启动服务器

修改服务名称:vim server/package.json修改应用name的值就OK了。

修改服务图标:准备一张自己的png图标,替换/server/public/images/logo.png后重启服务就可以了。

添加用户

打开后台http://localhost:8000/dashboard,登录后可以看到有张表User,系统里叫Class,先增加一条数据,用来测试登录。

username: peter
password: 1223456

用户添加完以后,我们就开发APP来测试登录效果。

登录功能实现

在APP端,我们要使用Parse,使用Parse之前要先初始化,所以我们在app/src/目录下新建一个api目录,在api目录下新建一个server.js文件,用来初始化Parse,这样在用到Parse的时候就不必再次初始化,只需要import server.js文件就可以了。

app/src/api/server.js

import Parse from 'parse/react-native';
import Settings from '../settings';

const settings = Settings.load();

Parse.initialize(settings.parseServerApplicationId);
Parse.serverURL = settings.parseServerURL;

export default Parse;

初始化完Parse,在登录页面引入这个文件:

import Parse from '../../api/server.js';

对登录按钮添加onPress响应函数:

<Button style={styles.button} textStyle={styles.buttonText} onPress={()=>this.onLogin()}>登录</Button>

添加onLogin函数:

  onLogin(){
    Parse.User.logIn(this.state.username, this.state.password, {
      success: function(user) {
        Toast.show('登录成功');
      },
      error: function(user, error) {
        Toast.show('登录失败,请重新登录');
      }
    });
  }

然后写构造函数中添加username和password两个状态(state):

  constructor(props){
    super(props);
    this.state ={
      username: '',
      password: '',
    };
    this.onLogin = this.onLogin.bind(this);
  }

对应的我们要对用户名和敏吗两个输入框加上onChangeText

          <Fumi
            label={'用户名'}
            labelStyle={{ color: '#a3a3a3' }}
            inputStyle={{ color: '#f95a25' }}
            iconClass={FontAwesomeIcon}
            iconName={'user'}
            iconColor={'#f95a25'}
            onChangeText={(username)=>this.setState({username})}
          />
          <Fumi
            style={styles.input}
            label={'密    码'}
            labelStyle={{ color: '#a3a3a3' }}
            inputStyle={{ color: '#f95a25' }}
            iconClass={FontAwesomeIcon}
            iconName={'unlock'}
            iconColor={'#f95a25'}
            secureTextEntry 
            onChangeText={(password)=>this.setState({password})}
          />

这样我们整个登录功能就实现了,请大家关注我的微信公众号回复【13】查看这节课的视频源代码,大家有任何疑问,都可以在下方给我留言,或者在微信公上给我发消息,我会第一时间回复大家,:

微信公众号

0
0
查看评论

React Native实战项目企业通信录(含视频教程)- 登录界面开发

React Native实战项目企业通信录- 登录界面开发 前言 修改应用图标 修改应用名称 修改Android应用名称 修改IOS应用名称 使用Navigator 在根组件中引入Navgitor以及第一个要展示的组件 想好导航跳转时路由的信息 在根组件中使用Navigaor 组件内跳转 开发登录组...
  • peter900910
  • peter900910
  • 2017-01-02 11:52
  • 435

React Native实战项目企业通信录(含视频教程)- 主界面开发

React Native实战项目企业通信录含视频教程- 主界面开发 创建主界面 使用到的开源组件 创建主界面 创建三个内嵌组件 组合主界面 登录跳转 React Native实战项目企业通信录(含视频教程)- 主界面开发 创建主界面 各位小伙伴,大家好,我是Peter,前...
  • peter900910
  • peter900910
  • 2017-01-05 20:24
  • 680

React Native实战项目企业通信录(含视频教程)-环境搭建

React Native实战项目企业通信录-环境搭建 说在前面的话 环境搭建 RN开发环境搭建 使用的工具 初始化项目 关注微信公众号查看对应的视频教程React Native实战项目[企业通信录]-环境搭建说在前面的话
  • peter900910
  • peter900910
  • 2017-01-02 06:37
  • 656

React Native视频教程电商项目实战教学

下载地址:http://www.feixueteam.net/thread-1034-1-1.html
  • u013948181
  • u013948181
  • 2016-12-16 16:07
  • 1336

手把手教React Native实战开发视频教程 干货

手把手教React Native实战开发视频教程【更新到70集啦。。。】 授课简介与环境: 目标:打造全网最全面最详细最易懂的React Native开发视频教程 操作系统:Win7 64位 中文旗舰版 React Native开发:Android & IOS原生应用
  • ztop_f
  • ztop_f
  • 2016-06-20 11:35
  • 15427

东方耀 手把手教React Native实战开发视频教程共237集

链接:https://pan.baidu.com/s/1pLHrkkb 密码: qq群:377215114 适用人群: 已经有一定Javascript基础,正在准备向进阶方向努力的前端工程师 有基础的Native工程师(iOS/Android) 有兴趣提升架构能力的工程师 教学目...
  • jianyue178826
  • jianyue178826
  • 2017-12-01 11:26
  • 370

React Native 学习资料,教程,项目实践,视频

React Native Awesome(汇聚知识,分享精华)React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。
  • fengyuzhengfan
  • fengyuzhengfan
  • 2016-09-03 11:54
  • 2210

蓝鸥React Native零基础入门到项目实战 Hello React

蓝鸥React Native零基础入门到项目实战 Hello React
  • lanouyihuiyun
  • lanouyihuiyun
  • 2016-12-27 10:27
  • 509

【备忘】2017年最新React Native(RN)框架入门到精通四阶段精品视频教程

什么是React Native React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的...
  • qq_38155396
  • qq_38155396
  • 2018-01-13 11:43
  • 101

React-Native开源项目GITHUB

一.快速开发框架篇 1.FastDev4Android 本项目是Android快速开发框架,采用AndroidStudio进行开发。 集成工具包,采用MVP开发模式,EventBus数据分发,沉浸式状态栏,ORM,网络请求(HTTPClint,Volley,OkHttps),数据解析,依赖注...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-27 16:10
  • 491
    个人资料
    • 访问:2449次
    • 积分:63
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档