1.10.5. fejezet, ExpressJS
Beküldte pzoli - 2023, január 9 - 2:46du
Kapcsolódó hivatkozások
- ExpressJS
- Hello World example
- Understanding Cookies and Implementing them in Node.js
- Session management in NodeJS using ExpressJS and Express session
- CORS middleware
- JWT Authentication | Node JS and Express tutorials for Beginners (YouTube)
Mintakód cookie kezelésre
const express = require('express') const cookieParser = require('cookie-parser') const app = express() app.use(cookieParser()); app.get('/', (req, res) => { res.send('welcome to a simple HTTP cookie server'); }); app.get('/setcookie', (req, res) => { res.cookie(`mycookie`,`encrypted cookie string Value`, { secure: false, sameSite: 'lax' } /* { expires: new Date('01 12 2023'), secure: false, httpOnly: true, maxAge: 5000, sameSite: 'None' } */ ); res.send('Cookie have been saved successfully'); }); app.get('/deletecookie', (req, res) => { res.clearCookie("mycookie"); res.send('Cookie has been deleted successfully'); res.redirect(""); }); app.get('/getcookie', (req, res) => { console.log(req.cookies) res.send(req.cookies); }); app.listen(8000, () => console.log('The server is running port 8000...'));
Mintakód React kliens kiszolgálására
Az Access-Control-Allow-Origin és Access-Control-Allow-Headers HTTP fejléc megadása szükséges a másik portról történő adatbetöltéshez
const CustomerService = require('./service/CustomerService.js') const express = require('express') const app = express() const port = 8080 let allowCrossDomain = function(req, res, next) { res.header('Access-Control-Allow-Origin', "*"); res.header('Access-Control-Allow-Headers', "*"); next(); } app.use(allowCrossDomain); app.get('/', (req, res) => { res.send(CustomerService.getData()) }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) })
CustomerService.js tartalma
const CustomerService = { getData() { return [ { id: 1000, name: 'James Butt', country: { name: 'Algeria', code: 'dz' }, company: 'Benton, John B Jr', date: '2015-09-13', status: 'unqualified', verified: true, activity: 17, representative: { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, balance: 70663 }, ... ]; }; module.exports = CustomerService;
A React kód, amivel betölthetők az adatok:
import "primereact/resources/themes/lara-light-indigo/theme.css"; import "primereact/resources/primereact.min.css"; import "primeicons/primeicons.css"; import React, { useState, useEffect } from 'react'; import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; function App() { const [customers, setCustomers] = useState([]); useEffect(() => { fetch("http://localhost:8080/", { mode: 'cors' }).then((response) => response.json()).then(data => { setCustomers(data); }); }, []); return ( <div className="App"> <header className="App-header"> <form> <div className="card"> <DataTable value={customers} responsiveLayout="scroll"> <Column field="name" header="Name"></Column> <Column field="company" header="Company"></Column> <Column field="status" header="Status"></Column> <Column field="balance" header="Balance"></Column> </DataTable> </div> </form> </header> </div> ); } export default App;
- A hozzászóláshoz be kell jelentkezni