1.10.5. fejezet, ExpressJS

Kapcsolódó hivatkozások

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;