React Native Login connect with sql server ?
Lam trien dong
Posted on March 15, 2024
I created a Login application that connects to the sql server using Visual Studio Code. The Login and SignUp application logs into the sql server to read the Table 'TABUSERNAME' and export it to the grid, but I get an error, my computer's sql server information:
user: 'sa'
pass: 'Coffee'
server:'MICROSOFT' or '192.168.1.100'
database: 'Cafe'
ERROR Cannot convert null value to object, Can you please fix my code errors ?
File: App.js
Code:
`//App.js
import React, { useState } from 'react';
import { StyleSheet, View, TextInput, Button, FlatList, Text } from 'react-native';
import SQLite from 'react-native-sqlite-storage';
//import axios from 'axios';
const App = () => {
// Kh?i t?o state ?? l?u tr? thông tin ng??i dùng
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [sqliteData, setSqliteData] = useState([]); // Thêm 'sqliteData' vào danh sách các state
// Hàm x? lý khi ng??i dùng nh?n nút Login
const handleLogin = async () => {
//console.log('login1');
try {
// K?t n?i ??n c? s? d? li?u
const db = SQLite.openDatabase(
{
name: 'Cafe.db',
location: 'default',
//createFromLocation: '~www/test.db',
},
() => {
console.log('Connected to the database.');
},
(error) => {
console.error('Failed to connect to the database.', error);
}
);
// Th?c hi?n truy v?n SQL ?? l?y d? li?u t? b?ng
db.transaction(tx => {
tx.executeSql(
'SELECT * FROM TABUSERNAME',
[],
(_, result) => {
if (result.rows) {
const rows = result.rows.raw();
setSqliteData(rows); // L?u tr? d? li?u t? SQLite vào state 'sqliteData'
} else {
console.log('No rows returned from the query.');
}
},
error => {
console.error('Failed to execute query.', error);
}
);
});
// ?óng k?t n?i c? s? d? li?u khi không s? d?ng n?a
//return () => {
db.close();
console.log('Database connection closed.');
//};
} catch (error) {
console.error(error.message);
}
};
// Hàm x? lý khi ng??i dùng nh?n nút Signup
const handleSignup = async () => {
try {
//
} catch (error) {
console.error(error.message);
}
};
return (
<View style={styles.list}>
{/* Hi?n th? d? li?u trong ô l??i */}
<FlatList
data={sqliteData}
renderItem={({ item }) => <Text>{JSON.stringify(item)}</Text>}
keyExtractor={(_, index) => index.toString()}
/>
</View>
<View style={styles.inputText}>
<View style={styles.text}>
<View style={styles.user}>
{/* H?p v?n b?n ?? ng??i dùng nh?p tên ng??i dùng */}
<TextInput placeholder="Username" onChangeText={setUsername} />
</View>
<View style={styles.pass}>
{/* H?p v?n b?n ?? ng??i dùng nh?p m?t kh?u */}
<TextInput placeholder="Password" onChangeText={setPassword} secureTextEntry={true} />
</View>
</View>
<View style={styles.button}>
<View style={styles.login}>
{/* Nút ?? th?c hi?n ch?c n?ng ??ng nh?p */}
<Button title="Login" onPress={handleLogin} />
</View>
<View style={styles.signup}>
{/* Nút ?? th?c hi?n ch?c n?ng ??ng ký */}
<Button title="Signup" onPress={handleSignup} />
</View>
</View>
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex : 1,
backgroundColor : '#e7feff',
},
list: {
},
inputText : {
top: 340,
},
text : {
marginLeft : 30,
},
button : {
width : 360,
height : 150,
marginHorizontal : 20,
justifyContent : 'center',
},
login : {
},
signup : {
top : 20,
},
})`
File: server.js
Code:
`// server.js
const express = require('express');
const bodyParser = require('body-parser');
const sql = require('mssql');
const app = express();
const port = 3000;
app.use(bodyParser.json());
const config = {
user: 'sa',
password: 'Coffee',
server: 'MICROSOFT',
database: 'Cafe',
};
app.post('/login', async (req, res) => {
try {
await sql.connect(config);
const result = await sql.query(SELECT * FROM TABUSERNAME WHERE USERNAME='${req.body.username}' AND PASSWORDS='${req.body.password}'
);
sql.close();
res.json(result.recordset);
} catch (error) {
res.status(500).send(error.message);
}
});
app.listen(port, () => {
console.log(Server is running on port ${port}
);
});`
See attached image file
Posted on March 15, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.