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

来源：互联网发布：无间道为什么经典知乎编辑：程序博客网时间：2024/06/05 07:38

React Native实战项目企业通信录- 登录功能实现
- 前言
- 设计到的知识点
  - Parse Server
- 启动服务器
  - 启动服务器
  - 修改服务名称和图标
- 添加用户
- 登录功能实现

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-urlmongodb-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