#javascript #sql #node.js #reactjs #express
Вопрос:
Это страница просмотра, на которую перенаправляются сведения о пользователе
Всем привет, в настоящее время я работаю над проектом, в котором есть две формы входа в систему и форма сведений о пользователе. Когда пользователь войдет в систему и заполнит форму сведений, после этого он перенаправит его на страницу просмотра ,где он/она может просматривать, редактировать, удалять свою запись. Но при входе пользователя в систему должны быть видны только его записи. В моем случае это извлечение всех записей на странице просмотра. Я использую сеанс в узле js. Я не знаю, что пошло не так.
Код сервера
const express = require("express");
const app = express();
const cors = require('cors');
const mysql = require("mysql");
const cookie=require("cookie-parser");
const session=require("express-session");
const bodyparser=require("body-parser");
app.use(cors({
origin:("http://localhost:3000"),
methods:("GET","POST"),
credentials:true
}));
app.use(cookie("secret"));
app.use(bodyparser.urlencoded({extended:true}));
app.use(session({
key:"userid",
resave:false,
saveUninitialized:false,
secret:"userinfo",
cookie:{
expires:60*60*24,
},
}))
app.use(express.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'demo'
});
db.connect((err) => {
if (err) {
throw err;
}
else {
console.log("Mysql Connected");
}
})
//var sess
app.post('/register', (req, res) => {
const email = req.body.email;
const password = req.body.password;
const cpassword = req.body.cpassword;
db.query("SELECT FROM registration WHERE email='" email "';", [email], (err, result) => {
if(result){
res.send({message:"User already exists"})
}
else{
db.query("INSERT INTO registration (email,password,cpassword) VALUES(?,?,?)", [email, password, cpassword], (err, result) => {
if(err){
res.send(err);
}
else{
res.send({message:"Registered Successful"})
}
})
}
})
})
app.post("/login", (req, res) => {
const email = req.body.email;
const password = req.body.password;
db.query("SELECT * FROM registration WHERE email='" email "' AND password='" password "';", [email,password], (err, result) => {
if(err){
res.send({err:err});
}
if(result.length>0){
req.session.user=resu<
console.log( req.session.user)
res.send(result);
// sess=req.session;
// sess.userid=req.body.email;
// console.log(req.session)
else{
res.send({message:"Wrong username/passsword"})
}
})
app.get("/login",(req,res)=>{
if(req.session.user){
res.send({loggedIn:true,user:req.session.user})
}
else{
res.send({loggedIn:false});
}
})
app.post('/add', (req, res) => {
const firstname=req.body.firstname;
const lastname=req.body.lastname;
const email=req.body.email;
const mobile=req.body.mobile;
const address=req.body.address;
const city=req.body.city;
const pincode=req.body.pincode;
const conference=req.body.conference;
const seminar=req.body.seminar;
const paper=req.body.paper;
//const user_id=req.body.user_id;
if(firstname==""||lastname==""||email==""||mobile==""||address==""||city==""||pincode==""||conference==""||seminar==""||paper=="")
{
return res.status(422).json({error:"Please Fill the form correctly"});
}
db.query("INSERT INTO teacher (firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper) VALUES(?,?,?,?,?,?,?,?,?,?)", [firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper], (err, result) => {
console.log(err)
// if(result){
// //sess=req.session;
// req.session.user=resu<
// console.log(req.session.user)
// res.send(result)
//sess.email=req.body.email;
//if(sess.email){
//console.log( sess)
//res.send(result)
//res.redirect("/view");
//}
// }
// else{
// res.send(err)
// }
})
})
// })
//
app.get("/teachersdata" , (req, res) => {
db.query("SELECT * FROM teacher ",(err,result)=>{
if(result){
res.send(result);
}
})
app.get("/teachersdata/:id", (req, res) => {
db.query('SELECT * FROM teacher WHERE id=?',[req.params.id], (err, result)=>{
if(err){
console.log('Error while fetching employee by id', err);
}else{
res.send(result)
}
})
})
app.get("/logout",(req,res)=>{
console.log("logout page");
//req.logout()
console.log( req.session.user)
res.clearCookie("user")
//res.redirect("/login")
req.session.destroy((err) => {
res.redirect('/login') // will always fire after session is destroyed
})
})
})
app.put('/edit/:id',(req,res)=>{
const firstname=req.body.firstname;
const lastname=req.body.lastname;
const email=req.body.email;
const mobile=req.body.mobile;
const address=req.body.address;
const city=req.body.city;
const pincode=req.body.pincode;
const conference=req.body.conference;
const seminar=req.body.seminar;
const paper=req.body.paper;
const id=req.params.id;
db.query("UPDATE teacher SET firstname=?,lastname=?,mobile=?,email=?,address=?,city=?,pincode=?,conference=?,seminar=?,paper=? WHERE id=?",[id,firstname,lastname,email,mobile,address,city,pincode,conference,seminar,paper],(err,res)=>{
if(err){
console.log(err)
}
else{
res.send(res);
}
})
})
app.delete("/delete/:id",(req,res)=>{
db.query("DELETE FROM teacher WHERE id=?",[req.params.id],(result,err)=>{
if(err){
res.send(err)
}
else{
res.send(result)
}
})
})
app.listen(3001)
Это код реакции
import React from 'react';
import axios from 'axios';
import { useState,useEffect } from 'react';
import { Link } from 'react-router-dom';
export const View = () => {
const [teacherList, setteacherList] = useState([]);
useEffect(() => {
loadUsers();
}, [])
const loadUsers= async()=>{
const result =await axios.get("http://localhost:3001/teachersdata");
console.log(result)
setteacherList(result.data)
}
const deleteUser = async id => {
await axios.delete(`/delete/${id}`);
loadUsers();
};
return (
<div>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">FirstName</th>
<th scope="col">LastName</th>
<th scope="col">Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
teacherList.map((user,index)=>(
<tr>
<th scope="row">{index 1}</th>
<td>{user.firstname}</td>
<td>{user.lastname}</td>
<td>{user.email}</td>
<td>
<Link class="btn btn-primary me-md-2" to={`/teachersdata/${user.id}`}>View</Link>
<Link class="btn btn-outline-primary me-md-2" to={`/edit/${user.id}`}>Edit</Link>
<Link class="btn btn-danger" onClick={() => deleteUser(user.id)}>Delete</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
login page (client)
import React from 'react'
import { useState } from 'react';
import axios from 'axios';
import {useHistory} from 'react-router-dom';
const Login = () => {
axios.defaults.withCredentials=true;
const history=useHistory();
const [emailreg,setemail]=useState('');
const [passreg,setpass]=useState('');
const login=()=>{
axios.post("/login",{
email:emailreg,
password:passreg,
}).then((res)=>{
//alert(res.data.message)
//setLoginUser(res.data.user)
//history.push("/add")
//console.log(res);
if(res.data.message){
alert(res.data.message);
}
else{
alert("Login Sucessfully");
history.push("/add")
}
})
}
return (
<div className="login">
<h1>Login</h1>
<label>Email ID</label>
<input type="text" onChange={(e)=>{
setemail(e.target.value);
}}/><br/>
<label>Password</label>
<input type="password" onChange={(e)=>{
setpass(e.target.value);
}}/><br/>
<button onClick={login}>Login</button>
</div>
)
}
export default Login
Страница сведений о пользователе
import { useState } from 'react'
import axios from 'axios';
import {useHistory} from 'react-router-dom';
import { useEffect } from 'react';
const Main = () => {
const [formStep, setFormStep] = useState(0);
const history=useHistory();
const [firstname,setfirstname]=useState('');
const [lastname,setlastname]=useState('');
const [email,setemail]=useState('');
const [mobile,setmobile]=useState('');
const [address,setaddress]=useState('');
const [city,setcity]=useState('');
const [pincode,setpincode]=useState('');
const [conference,setconference]=useState('');
const [seminar,setseminar]=useState('');
const [paper,setpaper]=useState('');
const [loginstatus,setlogin]=useState('');
//const [userid,setuserid]=useState('');
const completeFormStep = () => {
setFormStep(step => step 1)
}
const backFormStep = () => {
setFormStep(step => step - 1)
}
const handlesubmit = () => {
axios.post("http://localhost:3001/add",{
firstname:firstname,
lastname:lastname,
email:email,
mobile:mobile,
address:address,
city:city,
pincode:pincode,
conference:conference,
seminar:seminar,
paper:paper,
//userid:userid
}).then((res)=>{
console.log("success");
})
history.push("/view")
};
useEffect(() => {
axios.get("/login").then((res)=>{
console.log(res)
if(res.data.loggedIn===true){
setlogin(res.data.user[0].email)
// if(res.data.loggedIn===true){
// setlogin(res.data.userid)
}
})
}, []);
return (
<div className="create">
<form method="POST">
{formStep === 0 amp;amp; (
<section>
<h1>{"Welcome" loginstatus}</h1>
<h2>Names</h2>
<label>First Name</label>
<input
type="text"
required
onChange={(e)=>{
setfirstname(e.target.value);
}}
/>
<br />
<label>Last Name</label>
<input
type="text"
required
onChange={(e)=>{
setlastname(e.target.value);
}}
/>
<br />
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
<div className="step2">
{formStep === 1 amp;amp; (
<section>
<h2>Contact</h2>
<label>Email ID</label>
<input
type="email"
required
onChange={(e)=>{
setemail(e.target.value);
}}
/>
<br />
{/* <label>UserID</label>
<input
type="userid"
required
onChange={(e)=>{
setuserid(e.target.value);
}}
/>
<br/> */}
<label>Mobile No.</label>
<input
type="text"
required
onChange={(e)=>{
setmobile(e.target.value);
}}
/>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
</div>
<div className="step3">
{formStep === 2 amp;amp; (
<section>
<h2>Address</h2>
<label>Address</label>
<textarea onChange={(e)=>{
setaddress(e.target.value);
}}>
</textarea>
<br />
<label>City</label>
<input
type="text"
required
onChange={(e)=>{
setcity(e.target.value);
}}
/>
<br />
<label>Pincode</label>
<input
type="text"
required
onChange={(e)=>{
setpincode(e.target.value);
}}
/>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="button" onClick={completeFormStep}>Next</button>
</section>)}
</div>
<div className="step4">
{formStep === 3 amp;amp; (
<section>
<h2>Conferences attended,seminar and paper presented</h2>
<label>Conferences name</label>
<textarea placeholder="conferences names" onChange={(e)=>{
setconference(e.target.value);
}}></textarea>
<br />
<label>Seminar attended</label>
<textarea placeholder="seminar names"onChange={(e)=>{
setseminar(e.target.value);
}}></textarea>
<br />
<label>Paper presented</label>
<textarea placeholder="paper names" onChange={(e)=>{
setpaper(e.target.value);
}}></textarea>
<br />
<button type="button" onClick={backFormStep}>Back</button>
<button type="submit" onClick={handlesubmit}>Submit</button>
</section>)}
<div>
</div>
</div>
</form>
</div>
);
}
export default Main
Я хочу, чтобы при входе пользователя в систему и заполнении формы сведений отображались только его данные или данные вошедшего пользователя, каждый пользователь должен получить свои собственные данные на странице просмотра после входа в систему. Я новичок в node js и реагирую.
Заранее спасибо
Комментарии:
1. Где ваша логика входа в систему на стороне клиента?
2. @SanishJoseph Я отредактировал свой пост прямо сейчас
3. После входа в систему вы просто переходите к
addмаршруту, который, как я предполагаю, указывает наMainкомпонент, и нет никакой логики, чтобы увидеть, вошел ли пользователь в этот компонент. На экране входа в систему вы ничего не делаете с получаемым ответом. Я добавлю отдых в качестве ответа.
Ответ №1:
Я вижу, что вы отправляете {loggedIn:true,user:req.session.user} сообщение после входа в систему, но ваше клиентское приложение теперь игнорирует его. Что вы можете сделать, так это сохранить этот объект, полученный после входа в локальное хранилище, чтобы, даже если они обновят страницу, у нас был доступ к объекту.
После сохранения объекта в локальном хранилище в вашем Main компоненте вам необходимо проверить, существует ли объект в локальном хранилище, loggedIn имеет ли значение true и user срок действия объекта сеанса не истек. Если какое-либо из этих условий не выполнено, вам необходимо очистить локальное хранилище и перенаправить пользователя на страницу входа в систему.
Я не уверен, истек ли у вас срок действия сеанса в user объекте, но у вас наверняка должен быть файл cookie с истекшим сроком действия.
Я надеюсь, что это ясно.
Комментарии:
1. Да, я постараюсь, Большое вам спасибо