Форум

Ulyana1992 · #1 (**permalink**) 21.09.2020, 23:04

мне нужно закончить server.js чтобы проект заработал. у меня получилось только часть выполнить. остались операции в конце fetch update delete Save, помогите пожалуйста

server.js

const express = require("express");
const app = express();
const cors = require("cors");
const session = require("express-session");
const cookieParser = require("cookie-parser");

const whitelist = ['http://localhost', 
                   'http://localhost:3000', 
                   'http://localhost:80'];

const corsOptions = {
  credentials: true, 
  origin: (origin, callback) => {
      console.log(origin);
      if ( whitelist.includes(origin) ) {
          return callback(null, true)
      }
      callback(new Error('Not allowed by CORS'));
  }
}

app.use(cors());
app.set('trust proxy', 1)

app.use(session({
    secret: "Wok Tow3l",
    resave: false,
    saveUninitialized: true,
    cookie: { secure: true }
  }));

  var sess = {
    secret: 'Wok Tow3l',
    cookie: {}
    }

    sess.cookie.secure = true // serve secure cookies
app.use(session(sess))

app.use(session({ secret: 'Wok Tow3l', cookie: { maxAge: 60000 }}))

app.use(cookieParser());

app.get('/ping', function (req, res, next) {
    res.send('target ' + req.session + ' ');

    req.sess.destroy(function(err) {

        })
        })
app.post('/ping',(req,res) => {
    sess = req.session;
    sess.cookie = req.target;
    res.end('done');
    });
            
    app.use('/', router);

app.get("/ping", (req, res) => {
    res.send('Pong!');
});

/* Save a new Todo */
app.post("/save/:target", (req, resp) => {

});

/* Fetch the list of :target Todo item(s) */
app.get("/get/:target", (req, resp) => {
    // You need to complete this
});

/* update a Todo */
app.put("/:target/:id", (req, resp) => {
    // You need to complete this
});

/* delete a Todo  */
app.delete("/:target/:id", (req, resp) => {
    // You need to complete this
});


const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Todo (server) is listening at http://localhost:${port}`);
});

Ulyana1992 · #2 (**permalink**) 21.09.2020, 23:07

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="image/png" href="images/favicon-16x16.png">
    <title>Todo</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css">
    <link rel="stylesheet" href="styles/style.css"/>
    <script type="module">
        import { Todo } from "./modules/todo.js";
        const _todo = new Todo();
    </script>
  </head>
  <body>
      <main>
          <section title="Today" class="todoContainer">
            <header>
                <h1>Today</h1>
                <img class="icon" title="Add Item" width="36" height="36" src="images/plus.png"/>
            </header><div class="msg"></div>
            <ul></ul>
        </section> 
        <section title="Tomorrow" class="todoContainer">
            <header>
                <h1>Tomorrow</h1>
                <img class="icon" title="Add Item" width="36" height="36" src="images/plus.png"/>
            </header>
            <div class="msg"></div>
            <ul></ul>
        </section>
        <section title="Future" class="todoContainer">
            <header>
                <h1>Future</h1>
                <img class="icon" title="Add Item" width="36" height="36" src="images/plus.png"/>
                
            </header>
            <div class="msg"></div>
            <ul>
                <li>
                    <span>Test this out it is even longer...</span>
                    <img class="icon" width="36" height="36" src="images/minus.png"/>
                    <img class="icon" width="36" height="36" src="images/mom.png"/>
                </li>
            </ul>
        </section>
    </main>
  </body>
</html>

todo.js

class Todo {
    constructor() {
        this.NO_ELEMENT_FOUND = true;
        this.NO_CHILDREN = true;

        /* A list of the main containers we have in the application */
        this.targets = ['Today','Tomorrow','Future'];

        window.addEventListener("DOMContentLoaded", (event) => {
            // Setup the onclick callbacks for each Todo list 'Add' button.
            this.targets.forEach((target) => {
                const iconElem = document.querySelector(`section[title='${target}'] img[title='Add Item']`);
                iconElem.addEventListener("click", event => {
                    this.addTodoItem(target);
                });
            });
        });
    }

    /* Each target Todo list has a message div that you can display something into.  
     * Use this method to do only that. 
     * 
     * @target The Todo section DOM element to load
     * @message The message you want to display
     */
    updateMessageOn(target, message = "") {
        const ele = document.querySelector(`section[title='${target}'] > header + div.msg`);
        if ( !ele ) {
            console.error(`${MESSAGES.en_US.NO_ELEMENT_FOUND} on ${target} for updateMessageOn(target)`); 
        }
        ele.innerHTML = message;
    }

    /* Gets the main section you want ('Today', "Tomorrow" or "Future") 
     *
     * @returns NULL if the target cannot be found in the DOM 
     */
    getTodoContainerElement(target = "") {
        const todoSectionEle = document.querySelector(`section[title='${target}']`);
        if ( !todoSectionEle ) {
            console.error(`${MESSAGES.en_US.NO_ELEMENT_FOUND} on ${target} for getTodoContainerElement(target)`);
            return null;
        } 
        return todoSectionEle;
    }
    /* Get the unordered list element within your target Todo.
     *
     * @target The Todo section DOM element to load
     * @return A unordered list element, or NULL if not found
     */
    getTodoListFor(target) {
        const listEle = document.querySelector(`section[title='${target}'] ul`);
        if ( !listEle ) {
            console.error(`${MESSAGES.en_US.NO_ELEMENT_FOUND} on ${target} for getTodoListFor(target)`);
            return null;
        } 
        return listEle;
    }

    /* Adds a new Todo item, if there isn't pending new one's going on right now.
     *
     * @target The Todo section DOM element to load
     */
    addTodoItem(target) {
        if ( this.doesTargetTodoHaveUnsavedItem(target) ) {
            this.updateMessageOn(target, "Finish the previous one you created first...");
            window.setTimeout( () => {
                this.updateMessageOn(target);
            }, 1400);
            return;
        }
        const newHtml = 
            `<li unsaved="true" id="${target}_${Date.now()}>
                <textarea placeholder="Just tab out to save" class="todoItem" onchange="_todo.save(${target}/></textarea>
                <img class="icon" width="20" height="20" src="images/save_36x36.png"/>
            </li>`;
        this.getTodoListFor(target).innerHTML += newHtml;
    }

    /* Utility method to look for any unsaved list items in a target Todo list.
     *
     * @target The Todo section DOM element to load
     * @return false - if there are no unsaved list items;  true here are unsaved items...
     */
    doesTargetTodoHaveUnsavedItem(target) {
        let hasSavedItem = false;

        /** See [url]https://bit.ly/3hsgFbo[/url] for HTMLCollection.  It is not an Array by default.. */
        let coll = Array.from(this.getTodoListFor(target).children);

        coll.forEach((child) => {
            if ( child.getAttribute("unsaved")) {
                hasSavedItem = true;
            }
        });
        return hasSavedItem;
    }

    /* Checks the containers (Today, Tomorrow & Future).      */
    /* They should always exist.   If not returns FALSE.      */
    /* They could be empty.  That is expected.  Returns FALSE */
    /* Only returns TRUE when element exists and has kids.    */
    isListEmpty(target = "Today") {
        const targetList = 
            document.querySelector(`[title ^= '${target}']`);
        if ( !targetElement ) {
            console.error(`Expected parent node (today, tomorrow, future).  It is not in the DOM.`);
            return this.NO_ELEMENT_FOUND;
        }
        const children = targetList.children;
        if ( !children || children.length === 0 ) {
            return this.NO_CHILDREN;
        }
        return true;
    }
    addActions(target) {
        if ( !target) {
            console.error("Cannot add actions on NULL target");
            return;
        }

    }
}

const MESSAGES = {
    en_US : {
        NO_ELEMENT_FOUND: "The expected DOM element was not found.",
        NO_CHILDREN: ""
    }
}

export { Todo };

Ulyana1992 · #3 (**permalink**) 22.09.2020, 17:12

Сообщение от Rise

А похоже просто на копипаст. Какое у вас задание?

Rise, написать эти фунцкии

/* Save a new Todo */
app.post("/save/:target", (req, resp) => {

    

});

/* Fetch the list of :target Todo item(s) */
app.get("/get/:target", (req, resp) => {
    // You need to complete this
});

/* update a Todo */
app.put("/:target/:id", (req, resp) => {
    // You need to complete this
});

/* delete a Todo  */
app.delete("/:target/:id", (req, resp) => {
    // You need to complete this
});

и еще express-session который вроде получилось сделать

Ulyana1992 · #4 (**permalink**) 23.09.2020, 22:25

Rise,
подскажите в каком направлении двигаться?

Ulyana1992 · #5 (**permalink**) 24.09.2020, 21:17

Rise,
Интерфейс и исходный код были созданы как для вашего пользовательского интерфейса, так и для работы сервера NodeJS с этим приложением. Ваша задача - заполнить недостающие части; Такие как:

1. Редактирование (или обновление ..) существующего элемента Todo.

2. Сохранение / удаление элемента Todo

Для этого приложения нет БД. Вам нужно создать литерал объекта для хранения только в рамках сеанса пользователя. Форма объекта должна напоминать этот пример ниже:

let data =. [

{

id: << уникальный идентификатор из пользовательского интерфейса. Не генерируется сервером.

description: << это то, что клиент вставляет для задачи в пользовательском интерфейсе

date_deleted: << Если вы поместите здесь дату, она будет удалена. Если null, то не удаляется.

type: << это "Today", "Tomorrow" или "Future"

},

{...},

{...},

]

Когда пользовательский интерфейс загружается впервые, вам нужно получить все элементы Todo с сервера (если есть ...). И визуализируйте их в соответствующем контейнере.

Мы используем обработку Express Session. Итак, если вы закроете страницу и вернетесь, она должна загрузить данные с вашего сервера.

Rise · #6 (**permalink**) 26.09.2020, 10:03

Ulyana1992,
Про модуль express-session можно почитать на npm. Там написано, что для хранения данных есть специальное свойство req.session. Поэтому ваш массив данных let data = [...], можно представить как req.session.data = [...]. Еще там сказано, что с версии 1.5.0, модуль cookie-parser не нужен. И что cookie: { secure: true } работает с https, но не с http. И так далее. Про модуль cors тоже интересно почитать. Про модуль express можно что-то узнать на его сайте, например, что "/:target/:id" значит req.params, а req.body требуется express.json() или express.urlencoded(). Вообще, есть шаблон express приложения, там какие-то базовые вещи уже сделаны. Но у вас структура папок и файлов какая-то другая, неизвестно зачем. Про сетевые запросы, это fetch(), здесь что-то похожее для вашего задания. В остальном, если не справитесь, написал в личку.

Ulyana1992 · #7 (**permalink**) 29.09.2020, 07:03

Rise,
поздно увидела, нo спасибо за материал

Форум

Справочник

Discord чат

Курсы javascript