Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

JS script svarar inte! Node JS, Express, Passport!

1
Skriv svar
Permalänk
Medlem
●

JS script svarar inte! Node JS, Express, Passport!

Tjena alla! Försöker få mitt JS script att fungera, svarar inte alls. Vad kan vara fel?

Denna ligger i slutet av min body tag.

  <script src="/public/functions.js"></script>
</body>

</html>

Detta i min server.js

const express = require("express");
const mongoose = require("mongoose");
const passport = require("passport");
const flash = require("express-flash");
const session = require("express-session");
const methodOverride = require("method-override");
const User = require("./models/User");
const bcrypt = require("bcryptjs");
const app = express();

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.use(flash());
app.use(
  session({
    secret: 'secret',
    resave: false,
    saveUninitialized: false,
  })
);
app.use(passport.initialize());
app.use(passport.session());
app.use(methodOverride("_method"));
app.use(express.static("public"));

Den svarar inte alls men vet inte riktigt vart det går fel, första gången jag jobbar mot detta så håller på att lär mig här! Tack på förhand

Redigera
Citera flera Citera
Permalänk
Hedersmedlem ★
●

Du startar ju aldrig din express-server.

Visa signatur

Använd gilla för att markera nyttiga inlägg!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av giplet:

Du startar ju aldrig din express-server.

Gå till inlägget

Skickar hela filen här istället. Själva sidan fungerar men det jag inte får till är hur jag får mitt js script att fungera.

Detta är min server.js

require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const passport = require("passport");
const flash = require("express-flash");
const session = require("express-session");
const methodOverride = require("method-override");
const User = require("./models/User");
const bcrypt = require("bcryptjs");
const {
  checkAuthenticated,
  checkNotAuthenticated,
} = require("./middlewares/auth");

const app = express();

const initializePassport = require("./passport-config");
initializePassport(
  passport,
  async (email) => {
    const userFound = await User.findOne({ email });
    return userFound;
  },
  async (id) => {
    const userFound = await User.findOne({ _id: id });
    return userFound;
  }
);

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.use(flash());
app.use(
  session({
    secret: '',
    resave: false,
    saveUninitialized: false,
  })
);
app.use(passport.initialize());
app.use(passport.session());
app.use(methodOverride("_method"));
app.use(express.static("public"));

app.get("/", checkAuthenticated, (req, res) => {
  res.render("index", { name: req.user.name });
});

app.get("/register", checkNotAuthenticated, (req, res) => {
  res.render("register");
});

app.get("/login", checkNotAuthenticated, (req, res) => {
  res.render("login");
});

app.post(
  "/login",
  checkNotAuthenticated,
  passport.authenticate("local", {
    successRedirect: "/",
    failureRedirect: "/login",
    failureFlash: true,
  })
);

app.post("/register", checkNotAuthenticated, async (req, res) => {
  const userFound = await User.findOne({ email: req.body.email });

  if (userFound) {
    req.flash("error", "User with that email already exists");
    res.redirect("/register");
  } else {
    try {
      const hashedPassword = await bcrypt.hash(req.body.password, 10);
      const user = new User({
        name: req.body.name,
        email: req.body.email,
        password: hashedPassword,
      });

      await user.save();
      res.redirect("/login");
    } catch (error) {
      console.log(error);
      res.redirect("/register");
    }
  }
});

app.delete("/logout", (req, res) => {
  req.logOut();
  res.redirect("/login");
});


mongoose
  .connect("mongodb://localhost:27017/bravida", {
    useUnifiedTopology: true,
    useNewUrlParser: true,
  })
  .then(() => {
    app.listen(3000, () => {
      console.log("Server is running on Port 3000");
    });
  });
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det som ligger i din public-folder kan sökas från rooten av webbservern.

Ändra

<script src="/public/functions.js"></script>

till

<script src="/functions.js"></script>

Alternativ skapa en folder som heter Scripts i public foldern och lägg functions.js där i. Så kan du nå den från:

<script src="/scripts/functions.js"></script>

Här kan du lära dig mer
https://expressjs.com/en/starter/static-files.html

Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av KeVVa:

Det som ligger i din public-folder kan sökas från rooten av webbservern.

Ändra

<script src="/public/functions.js"></script>

till

<script src="/functions.js"></script>

Alternativ skapa en folder som heter Scripts i public foldern och lägg functions.js där i. Så kan du nå den från:

<script src="/scripts/functions.js"></script>

Här kan du lära dig mer
https://expressjs.com/en/starter/static-files.html

Gå till inlägget

Tack för snabbt svar! Försökte med detta men verkar ändå som det går galet nånstans. Tänker jag skickar lite mer här ifall du kanske ser något annat som ser snett ut.

Detta är min index.ejs som jag vill ska köra scriptet. Den ligger i en mapp som heter views, ska tilläggas att jag har inga problem med css för denna fil.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/index.css" />
  <title>Startsida</title>
</head>

<body>
<nav>
  <div class="logo">
    <h4>LOGO</h4>
  </div>
  <ul class="nav-links">
    <li>
      <a href="#">Hem</a></li>
    <li>
      <a href="#">Om oss</a></li>
    <li>
      <a href="#">Nyheter</a></li>
    <li>
      <a href="#">Projekt</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>



  <!-- <h1 id="welcomeTag">Välkommen <%= name%>
  </h1>
  <form action="/logout?_method=DELETE" method="POST">
    <button type="submit">LOGGA UT</button>
  </form> -->
  <script src="/public/Scripts/functions.js"></script>
</body>

</html>

Här är min functions.js, namnet är en work in progress men heter så just nu iallfall, ligger i public mappen i en ny mapp som heter Scripts och ser utsåhär:

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        nav.classList.toggle('.nav-active');

        navLinks.forEach(link, index => {
            if(link.style.animation){
                link.style.animation = '';
            } else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        });
        burger.classList.toggle('toggle');
    });
}

navSlide();
Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Du borde också ta en titt på express.Router för att råda bot på kaoset som blir när man har allt i en och samma fil.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av PapaDiouf:

Tack för snabbt svar! Försökte med detta men verkar ändå som det går galet nånstans. Tänker jag skickar lite mer här ifall du kanske ser något annat som ser snett ut.

Detta är min index.ejs som jag vill ska köra scriptet. Den ligger i en mapp som heter views, ska tilläggas att jag har inga problem med css för denna fil.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/index.css" />
  <title>Startsida</title>
</head>

<body>
<nav>
  <div class="logo">
    <h4>LOGO</h4>
  </div>
  <ul class="nav-links">
    <li>
      <a href="#">Hem</a></li>
    <li>
      <a href="#">Om oss</a></li>
    <li>
      <a href="#">Nyheter</a></li>
    <li>
      <a href="#">Projekt</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>



  <!-- <h1 id="welcomeTag">Välkommen <%= name%>
  </h1>
  <form action="/logout?_method=DELETE" method="POST">
    <button type="submit">LOGGA UT</button>
  </form> -->
  <script src="/public/Scripts/functions.js"></script>
</body>

</html>

Här är min functions.js, namnet är en work in progress men heter så just nu iallfall, ligger i public mappen i en ny mapp som heter Scripts och ser utsåhär:

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        nav.classList.toggle('.nav-active');

        navLinks.forEach(link, index => {
            if(link.style.animation){
                link.style.animation = '';
            } else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
            }
        });
        burger.classList.toggle('toggle');
    });
}

navSlide();
Gå till inlägget 
<script src="/public/Scripts/functions.js"></script>

Du använder fortfarande /public som sökväg fast du inte behöver.

Om du vill göra det måste du uppdatera configen på din express server:
Ändra:

app.use(express.static("public"));

till:

app.use("/public", express.static("public"));

Lägg 2 minuter och läs igenom dokumentationen
https://expressjs.com/en/starter/static-files.html

Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av KeVVa: 
<script src="/public/Scripts/functions.js"></script>

Du använder fortfarande /public som sökväg fast du inte behöver.

Om du vill göra det måste du uppdatera configen på din express server:
Ändra:

app.use(express.static("public"));

till:

app.use("/public", express.static("public"));

Lägg 2 minuter och läs igenom dokumentationen
https://expressjs.com/en/starter/static-files.html

Gå till inlägget

Okej skall testa lite här nu! Får även denna felkoden i consolen när jag kör hemsidan "Failed to load resource: the server responded with a status of 404 (Not Found)", vet inte riktigt vad det står för, men betyder de inte iaf att den försöker köras, men att som du säger jag kanske har fel sökväg?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av PapaDiouf:

Okej skall testa lite här nu! Får även denna felkoden i consolen när jag kör hemsidan "Failed to load resource: the server responded with a status of 404 (Not Found)", vet inte riktigt vad det står för, men betyder de inte iaf att den försöker köras, men att som du säger jag kanske har fel sökväg?

Gå till inlägget

Stämmer bra, 404 betyder att webbservern inte kunde hitta sökvägen.

Scriptet kan inte köras förns det har laddats ned 😄

Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av KeVVa:

Stämmer bra, 404 betyder att webbservern inte kunde hitta sökvägen.

Scriptet kan inte köras förns det har laddats ned 😄

Gå till inlägget

Update: Fungerar som det ska nu, var sökvägen som var strul!

Redigera
Citera flera Citera
1
Skriv svar