React Native - 无法在前端导入猫鼬(但它可以从后端工作)
Posted
技术标签:
【中文标题】React Native - 无法在前端导入猫鼬(但它可以从后端工作)【英文标题】:React Native - can't import mongoose on the front end(but it works from the backend) 【发布时间】:2018-06-11 17:42:57 【问题描述】:我不能在前端导入猫鼬,但它在后端可以工作。
我有一个单独的后端目录。我有一些代码可以将几个用户添加到我的数据库中。在这里.....
import mongoose from 'mongoose';
import User from './models/user';
const users = [
id: 1,
username: 'Matthew',
password: 'Smith',
,
id: 2,
username: 'Deborah',
password: 'Smith',
,
];
// Connect to MongoDB
mongoose.connect('mongodb://localhost/users');
// Go through each movie
users.map(data =>
// Initialize a model with movie data
const user = new User(data);
// and save it into the database
user.save();
);
上面的代码有效。
现在我希望我的登录屏幕接受用户名和密码并将其发送到数据库。我被卡住了,因为我什至不能导入猫鼬(你会在下面看到我把它注释掉了)。
我得到的错误是: 'TransformError: [我的项目的目录路径]/node_modules/mongoose/lib/drivers/index.js: require() 必须有一个字符串文字参数:[我的项目的目录路径]/mongoose/lib/drivers/index. js:7'
登录界面代码:
import React from 'react';
import StyleSheet, Text, View,Navigator,TextInput, KeyboardAvoidingView,TouchableOpacity,
AsyncStorage,
from 'react-native';
//import mongoose from 'mongoose';
import
StackNavigator,
from 'react-navigation';
export default class Login extends React.Component
//check to see if user has logged in already
componentDidMount()
this._loadInitialState().done();
//get info from async storage
_loadInitialState = async () =>
var value = await AsyncStorage.getItem('user');
if(value != null) //if the user is already logged in
this.props.navigation.navigate('Profile'); //**profile page that we will create later
constructor(props)
super(props);
this.state =
username: '',
password: '',
render()
return (
//<View style=styles.container>
<KeyboardAvoidingView behavior = 'padding' style = styles.wrapper>
<View style = styles.container>
<Text style=styles.header> - LOGIN - </Text>
<TextInput
style=styles.textInput placeholder='Username'
onChangeText=(username) => this.setState(username)
/>
<TextInput
style=styles.textInput placeholder='Password'
onChangeText=(password) => this.setState(password)
/>
</View>
<TouchableOpacity
style=styles.btn
onPress = this.login>
<Text>Log in</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
// </View>
);
login = () =>
alert('test');
//send to server
fetch('http://1.1.1.1/3000/users',
method: 'POST',
headers:
'Accept': 'application/json',
'Content-Type': 'application/json',
,
body: JSON.stringify(
username: this.state.username,
password: this.state.password,
)
)
//handle response
.then((response) => response.json())
.then((res) =>
//if user and pass exists, then log them in
// res: result
if(res.sucess === true)
AysncStorage.setItem('user',res.user);
this.props.navigation.navigate('Profile'); //navigate user to profile page
//else, tell the user they dont exist in the database
else
alert(res.message);
)
.done();
const styles = StyleSheet.create(
wrapper:
flex: 1,
,
container:
flex: 1,
backgroundColor: '#2896d3',
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 40,
paddingRight: 40,
,
header:
fontSize: 24,
marginBottom: 60,
color: '#fff',
justifyContent: 'center',
paddingLeft: 40,
paddingRight: 40,
,
textInput:
alignSelf: 'stretch',
paddingLeft: 16,
marginBottom: 20,
backgroundColor: '#fff',
,
btn:
alignSelf: 'stretch',
padding: 20,
marginBottom: 20,
backgroundColor: '#01c853',
alignItems: 'center',
,
);
为什么我不能导入?
【问题讨论】:
您的前端没有运行 Node,而是在浏览器中运行。 Mongoose 不能在前端工作,因为它依赖于 Node 的功能,而浏览器 JS 实现中不存在这些功能。您不能将 Mongoose 导入前端代码。 这是不正确的,但被广泛使用。 Mongoose 带有一个内置的浏览器版本,您可以在其中公开。有关详细信息,请参阅下面的答案。 【参考方案1】:Mongoose's browser library 不支持mongoose.connect()
。它仅支持模式和文档验证,目前无法实际连接到 MongoDB 或保存文档。
【讨论】:
【参考方案2】:就在今天,我在尝试为您解决类似问题时发现了 Mongoose's browser module。这是 Mongoose 的一个非常有限的版本,但可以让您对模式进行验证,例如,在前端。抱歉,我是在您发帖后 6 个月才发现这个的。
【讨论】:
以上是关于React Native - 无法在前端导入猫鼬(但它可以从后端工作)的主要内容,如果未能解决你的问题,请参考以下文章
React Native 导入错误:无法使用 .bin 解析模块(如何导入某种类型的文件?)
我在设置我的 jest 配置时遇到问题 react native 无法导入组件