启动时创建一次sqlite数据库
Create sqlite database once on startup
我正在为我当地的大学参加黑客马拉松,这是我第一次使用 React Native,我有一些可衡量的 React 技能,我想学习新事物,现在我想创建一个数据库 table 当 "landing page"
打开时,它起作用了,只是不是我想要的方式。我想创建一次 tables,如果它们存在,我不想发生任何事情,但它们会被覆盖,然后每次都会清除记录,这会让人沮丧,无法一遍又一遍地创建一个帐户.我想开始将数据库与我的前端集成并完成应用程序,但我被困在这个问题上。任何想法
import React, {Component, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Image, View, Text, StyleSheet, Dimensions, StatusBar, Layout, TouchableOpacity } from 'react-native';
import Logo from '../components/assets/logo.png'
import Login from './Login';
import { openDatabase } from 'react-native-sqlite-storage';
import SignUp from './SignUp';
import Dash from './Dashboard';
import Reminder from './Reminder';
var db = openDatabase({ name: 'UserDatabase.db' });
function LoginPage(){
}
function Welcome({navigation}){
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name FROM sqlite_master WHERE type='table' AND name='user' AND name='data'",
[],
function (tx, res) {
console.log('item:', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql(
'CREATE TABLE IF NOT EXISTS user(user_id VARCHAR(75) PRIMARY KEY, Full_Name VARCHAR(75), Email VARHCAR(75), user_Password VARHCAR(75))',
'CREATE TABLE IF NOT EXISTS data(id INTEGER PRIMARY KEY AUTOINCREMENT, content VARCHAR(75), date VARCHAR(75), Type VARCHAR(75), Completed VARCHAR(5))',
[]
);
alert('Created database');
}else {
alert('database failed');
}
}
);
});
}, []);
return (
<View style={style.root}>
<Image source={Logo} style={style.icon} />
<Text style={style.title}>Note-ify</Text>
<View style={style.container}>
<Text style={style.caption}>Welcome</Text>
<Text style={style.message}>
Welcome To Note-ify. The all in one platform to manage your time effectively.
To begin your journey please start by logging in or signing up. ITS FREE!
</Text>
<View style={style.parent}>
<TouchableOpacity
title="Login"
style={style.login}
onPress={() => navigation.navigate('Login')}>
<Text style={style.login_caption}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
title="Sign Up"
style={style.signup}
onPress={() => navigation.navigate('Register')}>
<Text style={style.signup_content}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const Stack = createNativeStackNavigator();
function App(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={Welcome} options={{headerShown: false}}/>
<Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
<Stack.Screen name="Register" component={SignUp} options={{headerShown: false}}/>
<Stack.Screen name="Dash" component={Dash} options={{headerShown: false}} />
<Stack.Screen name="Reminder" component={Reminder} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
const style = StyleSheet.create({
root:{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
icon:{
alignSelf: 'center',
justifyContent: 'center',
width: 100,
height: 100,
marginTop: 85,
position:'absolute',
zIndex:1,
},
title:{
marginTop: 200,
fontSize: 26,
alignSelf: 'center',
justifyContent: 'center',
},
container:{
position: 'absolute',
backgroundColor: '#ffb900',
width: '100%',
height: 350,
borderTopRightRadius: 45,
borderTopLeftRadius: 45,
bottom: 0,
},
parent:{
flex: 1,
flexDirection: "row",
justifyContent: 'center',
},
caption:{
fontSize: 28,
paddingLeft: 25,
paddingTop: 15,
fontWeight: 'bold',
},
message:{
fontSize: 18,
paddingLeft: 20,
paddingTop: 20,
},
login:{
width: 120,
height: 45,
backgroundColor: '#111',
marginLeft: 25,
marginTop: 25,
borderRadius: 25
},
login_caption:{
color: '#fff',
textAlign: 'center',
justifyContent: 'center',
paddingTop: 12,
},
signup:{
width: 120,
height: 45,
backgroundColor: '#fff',
marginLeft: 25,
marginTop: 25,
borderRadius: 25
},
signup_content:{
color:'#111',
textAlign: 'center',
justifyContent: 'center',
paddingTop: 12,
}
});
如果这是您的实际代码,则无法覆盖这些表,因为您在 CREATE TABLE
语句中使用了 IF NOT EXISTS
。
您的代码中有问题的部分是此查询:
SELECT name
FROM sqlite_master
WHERE type='table' AND name='user' AND name='data'
很明显你是想通过执行上面的查询来查明这2个表是否已经存在,但是你的逻辑是错误的。
这个查询从来没有 return 一行,因为列 name
不可能等于 'user'
AND 'data'
同一行。
如果您使用运算符 OR
而不是 AND
:
,您可以获得结果
SELECT name
FROM sqlite_master
WHERE type='table' AND (name='user' OR name='data')
但是,这将 return 0 或 1 或 2 行,具体取决于任一表的存在。
无论如何,请删除此查询,因为根本不需要它。
您只需要 2 个 CREATE TABLE IF NOT EXISTS...
语句,仅此而已。
此外,检查一下是否有删除数据库的代码,所以当您重新启动应用程序时,会重新创建数据库。
我正在为我当地的大学参加黑客马拉松,这是我第一次使用 React Native,我有一些可衡量的 React 技能,我想学习新事物,现在我想创建一个数据库 table 当 "landing page"
打开时,它起作用了,只是不是我想要的方式。我想创建一次 tables,如果它们存在,我不想发生任何事情,但它们会被覆盖,然后每次都会清除记录,这会让人沮丧,无法一遍又一遍地创建一个帐户.我想开始将数据库与我的前端集成并完成应用程序,但我被困在这个问题上。任何想法
import React, {Component, useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Image, View, Text, StyleSheet, Dimensions, StatusBar, Layout, TouchableOpacity } from 'react-native';
import Logo from '../components/assets/logo.png'
import Login from './Login';
import { openDatabase } from 'react-native-sqlite-storage';
import SignUp from './SignUp';
import Dash from './Dashboard';
import Reminder from './Reminder';
var db = openDatabase({ name: 'UserDatabase.db' });
function LoginPage(){
}
function Welcome({navigation}){
useEffect(() => {
db.transaction(function (txn) {
txn.executeSql(
"SELECT name FROM sqlite_master WHERE type='table' AND name='user' AND name='data'",
[],
function (tx, res) {
console.log('item:', res.rows.length);
if (res.rows.length == 0) {
txn.executeSql(
'CREATE TABLE IF NOT EXISTS user(user_id VARCHAR(75) PRIMARY KEY, Full_Name VARCHAR(75), Email VARHCAR(75), user_Password VARHCAR(75))',
'CREATE TABLE IF NOT EXISTS data(id INTEGER PRIMARY KEY AUTOINCREMENT, content VARCHAR(75), date VARCHAR(75), Type VARCHAR(75), Completed VARCHAR(5))',
[]
);
alert('Created database');
}else {
alert('database failed');
}
}
);
});
}, []);
return (
<View style={style.root}>
<Image source={Logo} style={style.icon} />
<Text style={style.title}>Note-ify</Text>
<View style={style.container}>
<Text style={style.caption}>Welcome</Text>
<Text style={style.message}>
Welcome To Note-ify. The all in one platform to manage your time effectively.
To begin your journey please start by logging in or signing up. ITS FREE!
</Text>
<View style={style.parent}>
<TouchableOpacity
title="Login"
style={style.login}
onPress={() => navigation.navigate('Login')}>
<Text style={style.login_caption}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
title="Sign Up"
style={style.signup}
onPress={() => navigation.navigate('Register')}>
<Text style={style.signup_content}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const Stack = createNativeStackNavigator();
function App(){
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={Welcome} options={{headerShown: false}}/>
<Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
<Stack.Screen name="Register" component={SignUp} options={{headerShown: false}}/>
<Stack.Screen name="Dash" component={Dash} options={{headerShown: false}} />
<Stack.Screen name="Reminder" component={Reminder} options={{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
const style = StyleSheet.create({
root:{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
icon:{
alignSelf: 'center',
justifyContent: 'center',
width: 100,
height: 100,
marginTop: 85,
position:'absolute',
zIndex:1,
},
title:{
marginTop: 200,
fontSize: 26,
alignSelf: 'center',
justifyContent: 'center',
},
container:{
position: 'absolute',
backgroundColor: '#ffb900',
width: '100%',
height: 350,
borderTopRightRadius: 45,
borderTopLeftRadius: 45,
bottom: 0,
},
parent:{
flex: 1,
flexDirection: "row",
justifyContent: 'center',
},
caption:{
fontSize: 28,
paddingLeft: 25,
paddingTop: 15,
fontWeight: 'bold',
},
message:{
fontSize: 18,
paddingLeft: 20,
paddingTop: 20,
},
login:{
width: 120,
height: 45,
backgroundColor: '#111',
marginLeft: 25,
marginTop: 25,
borderRadius: 25
},
login_caption:{
color: '#fff',
textAlign: 'center',
justifyContent: 'center',
paddingTop: 12,
},
signup:{
width: 120,
height: 45,
backgroundColor: '#fff',
marginLeft: 25,
marginTop: 25,
borderRadius: 25
},
signup_content:{
color:'#111',
textAlign: 'center',
justifyContent: 'center',
paddingTop: 12,
}
});
如果这是您的实际代码,则无法覆盖这些表,因为您在 CREATE TABLE
语句中使用了 IF NOT EXISTS
。
您的代码中有问题的部分是此查询:
SELECT name
FROM sqlite_master
WHERE type='table' AND name='user' AND name='data'
很明显你是想通过执行上面的查询来查明这2个表是否已经存在,但是你的逻辑是错误的。
这个查询从来没有 return 一行,因为列 name
不可能等于 'user'
AND 'data'
同一行。
如果您使用运算符 OR
而不是 AND
:
SELECT name
FROM sqlite_master
WHERE type='table' AND (name='user' OR name='data')
但是,这将 return 0 或 1 或 2 行,具体取决于任一表的存在。
无论如何,请删除此查询,因为根本不需要它。
您只需要 2 个 CREATE TABLE IF NOT EXISTS...
语句,仅此而已。
此外,检查一下是否有删除数据库的代码,所以当您重新启动应用程序时,会重新创建数据库。