{"id":92197,"date":"2022-10-12T19:11:26","date_gmt":"2022-10-13T00:11:26","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/vad-ar-express-js-och-varfor-ska-du-anvanda-det\/"},"modified":"2022-10-12T19:11:26","modified_gmt":"2022-10-13T00:11:26","slug":"vad-ar-express-js-och-varfor-ska-du-anvanda-det","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/vad-ar-express-js-och-varfor-ska-du-anvanda-det\/","title":{"rendered":"Vad \u00e4r Express.js och varf\u00f6r ska du anv\u00e4nda det?"},"content":{"rendered":"
\n

Express.js (eller \u201cExpress\u201d) \u00e4r ett NodeJS webbramverk som anv\u00e4nds p\u00e5 back-end (eller serversidan) av webbplatser och webbapplikationer. Express \u00e4r flexibelt och minimalistiskt, vilket inneb\u00e4r att det inte har en omfattande samling av on\u00f6diga bibliotek och paket, och det dikterar inte heller hur du ska bygga din applikation.<\/p>\n

Express-ramverket bygger API:er som underl\u00e4ttar kommunikation genom HTTP-f\u00f6rfr\u00e5gningar och svar. En av de anm\u00e4rkningsv\u00e4rda sakerna med Express \u00e4r att det ger utvecklare fullst\u00e4ndig kontroll \u00f6ver de f\u00f6rfr\u00e5gningar och svar som \u00e4r associerade med var och en av dess appmetoder.<\/p>\n

I den h\u00e4r handledningen f\u00e5r du l\u00e4ra dig hur och varf\u00f6r du b\u00f6r anv\u00e4nda Express i dina egna projekt.<\/p>\n

<\/span> Installera Express i ditt projekt<\/span><\/h2>\n

Innan du kan anv\u00e4nda Express-ramverket m\u00e5ste du installera det i din projektkatalog. Detta \u00e4r en enkel process som kr\u00e4ver NodeJS och npm.<\/p>\n

Det f\u00f6rsta du beh\u00f6ver g\u00f6ra \u00e4r att skapa en package.json<\/strong> fil (inom din projektkatalog\/mapp) med f\u00f6ljande kommando:<\/p>\n

npm init<\/pre>\n
Om du k\u00f6r kommandot ovan initieras en process som kommer att uppmana dig att g\u00f6ra f\u00f6ljande:<\/p>\n
  Paketnamn<\/strong>   Version<\/strong>   Beskrivning<\/strong>   Ink\u00f6rsport<\/strong>   Testkommando<\/strong>   Nyckelord<\/strong>   F\u00f6rfattare<\/strong>   Licens<\/strong>  <\/p>\n
F\u00e4lten f\u00f6r paketnamn, version, ing\u00e5ngspunkt och licens har alla standardv\u00e4rden som du enkelt kan \u00e5sidos\u00e4tta genom att ange dina v\u00e4rden.  Men om du vill beh\u00e5lla standardv\u00e4rdena kan du helt enkelt anv\u00e4nda f\u00f6ljande kommando ist\u00e4llet:<\/p>\n
npm init -y<\/pre>\n
Om du k\u00f6r kommandot ovan genereras f\u00f6ljande package.json<\/strong> fil i din projektkatalog:<\/p>\n
{\"name\": \"myapp\",\"version\": \"1.0.0\",\"description\": \"\",\"main\": \"index.js\",\"scripts\": {\"test\": \"echo \"Error: no test specified\" && exit 1\"},\"keywords\": [],\"author\": \"\",\"license\": \"ISC\",}<\/pre>\n
Nu kan du installera Express med f\u00f6ljande kommando:<\/p>\n
npm install express --save<\/pre>\n
N\u00e4r du installerar Express genereras en package-lock.json<\/strong> fil samt en node_modules<\/strong> mapp.<\/p>\n
<\/span>  F\u00f6rst\u00e5 filen package.json<\/span><\/h2>\n
Anledningen till att du beh\u00f6ver skapa en package.json<\/strong> filen innan du installerar Express \u00e4r att package.json<\/strong> filen fungerar som ett arkiv och lagrar viktig metadata om dina NodeJS-projekt. Beroenden<\/strong> \u00e4r namnet p\u00e5 ett av dessa metadataf\u00e4lt, och Express \u00e4r en beroende<\/strong>.<\/p>\n
Om du installerar Express i din projektkatalog uppdateras din package.json<\/strong> fil.<\/p>\n
<\/span>Den uppdaterade filen package.json<\/span><\/h3>\n
{\"name\": \"myapp\",\"version\": \"1.0.0\",\"description\": \"\",\"main\": \"index.js\",\"scripts\": {\"test\": \"echo \"Error: no test specified\" && exit 1\"},\"keywords\": [],\"author\": \"\",\"license\": \"ISC\",\"dependencies\": {\"express\": \"^4.17.1\"}}<\/pre>\n
Nu har du ett \u201cberoende\u201d-f\u00e4lt som har ett beroende \u2013 Express.  Och den beroenden<\/strong> objekt lagrar programvara som ditt projekt \u00e4r beroende av f\u00f6r att fungera korrekt, vilket i det h\u00e4r fallet \u00e4r Express-ramverket.<\/p>\n
<\/span>  Skapa en server med Express<\/span><\/h2>\n
Att ha ett API som hanterar lagring och r\u00f6relse av data \u00e4r ett krav f\u00f6r alla fullstackapplikationer, och Express g\u00f6r processen att skapa servern snabb och enkel.<\/p>\n
Titta tillbaka p\u00e5 package.json<\/strong> filen ovan och du kommer att se ett \u201chuvud\u201d-f\u00e4lt.  Det h\u00e4r f\u00e4ltet lagrar ing\u00e5ngspunkten till din applikation, som \u00e4r \u201cindex.js\u201d i exemplet ovan.  N\u00e4r du vill k\u00f6ra din applikation (eller i det h\u00e4r fallet servern som du ska bygga), m\u00e5ste du k\u00f6ra index.js<\/strong> fil med f\u00f6ljande kommando:<\/p>\n
node index.js<\/pre>\n
Men innan du kommer till exekveringsstadiet m\u00e5ste du skapa index.js<\/strong> (eller serverapp) fil i din projektkatalog.<\/p>\n
<\/span>Skapar filen index.js<\/span><\/h3>\n
const express = require('express');
const app = express();const port = 5000;<\/p>
app.get('\/', (req, res) => {res.send('Your server is operational')})<\/p>
app.listen(port, () => {console.log(`Server is running at: http:\/\/localhost:${port}`);})<\/p><\/pre>\n
Filen ovan importerar Express och anv\u00e4nder den sedan f\u00f6r att skapa en Express-applikation.  Express-applikationen ger sedan \u00e5tkomst till skaffa sig<\/strong> och lyssna<\/strong> metoder som \u00e4r en del av Express-modulen.  De app.listen() <\/strong>metoden \u00e4r den f\u00f6rsta du beh\u00f6ver st\u00e4lla in.  Dess syfte \u00e4r att lista f\u00f6r anslutningar p\u00e5 en specifik port p\u00e5 v\u00e4rddatorn, dvs port 5000<\/strong> i exemplet ovan.<\/p>\n
Syftet med app.get()<\/strong> Metoden \u00e4r att h\u00e4mta data fr\u00e5n en specifik resurs.  Denna metod har tv\u00e5 argument: en s\u00f6kv\u00e4g och en \u00e5teruppringningsfunktion.  S\u00f6kv\u00e4gsargumentet i exemplet ovan har ett snedstreck som representerar rotpositionen.  D\u00e4rf\u00f6r kommer att navigera till http:\/\/localhost:5000 URL (som \u00e4r roten till din applikation), medan din index.js-app ovan k\u00f6rs, att producera f\u00f6ljande utdata i din webbl\u00e4sare:<\/p>\n
\n<\/figure>\n
De app.get()<\/strong> metod callback-funktionen genererar utdata ovan.  Denna \u00e5teruppringningsfunktion har tv\u00e5 argument \u2013 \u200b\u200bbeg\u00e4ran och svar.  Svaret (som \u00e4r res<\/strong> i exemplet ovan) \u00e4r HTTP-objektet som en Express-app skickar efter en HTTP-f\u00f6rfr\u00e5gan (vilket \u00e4r vad du g\u00f6r genom att skriva webbadressen ovan i din webbl\u00e4sare).<\/p>\n
<\/span>  Servera en statisk webbplats med din expressserver<\/span><\/h2>\n
Servrar spelar en betydande roll i utvecklingen av API:er som hj\u00e4lper till att lagra och \u00f6verf\u00f6ra dynamisk data, och det \u00e4r d\u00e4r du med st\u00f6rsta sannolikhet kommer att anv\u00e4nda en Express-server i dina egna projekt.<\/p>\n
En Express-server kan dock \u00e4ven betj\u00e4na statiska filer.  Om du till exempel vill skapa en statisk webbplats (som en f\u00f6r en personlig tr\u00e4nare, en livscoach eller en stylist), kan du anv\u00e4nda din Express-server f\u00f6r att vara v\u00e4rd f\u00f6r webbplatsen.<\/p>\n
<\/span>Exempel p\u00e5 statisk HTML-webbplats<\/span><\/h3>\n
<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.15.4\/css\/all.css\" integrity=\"sha384-DyZ88mC6Up2uqS4h\/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm\" crossorigin=\"anonymous\"><link href=\"https:\/\/fonts.googleapis.com\/css?family=Lato|Staatliches\" rel=\"stylesheet\"><link rel=\"stylesheet\" href=\"https:\/\/ipotek.net\/vad-ar-express-js-och-varfor-ska-du-anvanda-det\/css\/style.css\"><title>Personal Stylist Website<\/title><\/head><body><nav id=\"navbar\"><div class=\"container\"><div><h1><i class=\"fas fa-vest\"><\/i> Personal Stylist<\/h1><\/div><div class=\"social\"><a href=\"http:\/\/facebook.com\" target=\"_blank\"><i class=\"fab fa-facebook\"><\/i><\/a><a href=\"http:\/\/twitter.com\" target=\"_blank\"><i class=\"fab fa-twitter\"><\/i><\/a><a href=\"http:\/\/instagram.com\" target=\"_blank\"><i class=\"fab fa-instagram\"><\/i><\/a><a href=\"http:\/\/youtube.com\" target=\"_blank\"><i class=\"fab fa-youtube\"><\/i><\/a><\/div><ul><li><a class=\"current\" href=\"#home\">Home<\/a><\/li><li><a href=\"#\">About<\/a><\/li><li><a href=\"#\">Services<\/a><\/li><li><a href=\"#\">Contact<\/a><\/li><\/ul><\/div><\/nav>
<!-- home --><header id=\"home\"><div class=\"container\"><div class=\"showcase-container\"><div class=\"showcase-content\"><h2>Welcome<\/h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, sequi distinctio!<\/p><a href=\"#articles\" class=\"btn \">View Services<\/a><\/div><\/div><\/div><\/header><\/p>
<\/body><\/html><\/p><\/pre>\n
HTML-koden ovan skapar en trevlig statisk hemsida f\u00f6r en personlig stylistwebbplats genom att l\u00e4nka till f\u00f6ljande style.css-fil:<\/p>\n
*{margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Lato', sans-serif;line-height: 1.5;}<\/p>
a {color: #333;text-decoration: none;}<\/p>
ul {list-style: none;}<\/p>
p {margin: .5rem 0;}h1{margin-left: 2rem;}<\/p>
\/* Utility *\/.container {max-width: 1100px;margin: auto;padding: 0 2rem;overflow: hidden;}<\/p>
.btn {display: inline-block;border: none;background: #910505;color: #fff;padding: 0.5rem 1rem;border-radius: 0.5rem;}<\/p>
.btn:hover {opacity: 0.9;}<\/p>
\/* Navbar *\/#navbar {background: #fff;position: sticky;top: 0;z-index: 2;}<\/p>
#navbar .container {display: grid;grid-template-columns: 6fr 3fr 2fr;padding: 1rem;align-items: center;}<\/p>
#navbar h1 {color: #b30707;}<\/p>
#navbar ul {justify-self: end;display: flex;margin-right: 3.5rem;}<\/p>
#navbar ul li a {padding: 0.5rem;font-weight: bold;}<\/p>
#navbar ul li a.current {background: #b30707;color: #fff;}<\/p>
#navbar ul li a:hover {background: #f3f3f3;color: #333;}<\/p>
#navbar .social {justify-self: center;}<\/p>
#navbar .social i {color: #777;margin-right: .5rem;}<\/p>
\/* home *\/#home {color: #fff;background: #333;padding: 2rem;position: relative;}<\/p>
#home:before {content: '';background: url(https:\/\/source.unsplash.com\/random) no-repeat center center\/cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.4;}<\/p>
#home .showcase-container {display: grid;grid-template-columns: repeat(2, 1fr);justify-content: center;align-items: center;height: 100vh;}<\/p>
#home .showcase-content {z-index: 1;}<\/p>
#home .showcase-content p {margin-bottom: 1rem;}<\/p><\/pre>\n
<\/span>Servera webbplatsen med Express-servern<\/span><\/h3>\n
const express = require('express');
const app = express();const port = 5000;<\/p>
app.use(express.static('public'));<\/p>
app.get('\/', (req, res) => {res.sendFile('index.html')})<\/p>
app.listen(port, () => {console.log(`Server is running at: http:\/\/localhost:${port}`);})<\/p><\/pre>\n
HTML- och CSS-filerna ovan finns i en offentlig mapp i projektkatalogen.  HTML-filens plats g\u00f6r den tillg\u00e4nglig f\u00f6r Express-servern och dess funktioner.<\/p>\n
En av de nya funktionerna i Express-servern ovan \u00e4r app.use() <\/strong>metod.  Den monterar express.static()<\/strong> middleware, som serverar statiska filer.  Detta g\u00f6r det m\u00f6jligt att anv\u00e4nda res.sendFile()<\/strong> funktion f\u00f6r att tj\u00e4na det statiska index.html<\/strong> filen ovan.<\/p>\n
Om du navigerar till http:\/\/localhost:5000-platsen i din webbl\u00e4sare visas n\u00e5got som liknar f\u00f6ljande utdata:<\/p>\n
\n<\/figure>\n
<\/span>  Utforska Backend-utveckling<\/span><\/h2>\n
Express-ramverket l\u00e5ter dig g\u00f6ra specifika HTTP-f\u00f6rfr\u00e5gningar och ta emot l\u00e4mpliga svar med hj\u00e4lp av en upps\u00e4ttning f\u00f6rdefinierade metoder.  Det \u00e4r ocks\u00e5 ett av de mest popul\u00e4ra backend-ramverken idag.<\/p>\n
Att l\u00e4ra sig anv\u00e4nda Express-ramverket \u00e4r ett bra drag.  Men om du verkligen vill bli en professionell backend-utvecklare finns det mycket mer du beh\u00f6ver l\u00e4ra dig.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n