Coder Social home page Coder Social logo

nodejs's Introduction

nodejs 入坑指南

创建一个最简单的项目

安装nodejs mkdir express 接下来安装 Express npm install -g express-generator@4

创建一个工程 express helloworld 现在在express文件夹下就出现了helloworld项目

安装依赖 cd helloworld npm install

备注:执行npm install命令会将package.json文件中 dependencies 依赖列表中, 即可自动安装依赖列表中所列出的所有模块。

开启服务 执行npm start命令

这样就可以在浏览器访问 http://localhost:3000/

此时框架是找到views文件夹下的index.jade文件渲染到前台页面

index.jade extends layout

block content h1= title p Welcome to #{title}

改修改index.js文件的内容,将title改为Hello world. var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Hello world.' }); }); module.exports = router; 在命令行中,按ctrl+c关闭服务,重新执行npm start,看界面中的结果

访问静态的html呢?很简单,下面一步步说来:

首先,我们看app.js中有没有这句话 app.use(express.static(path.join(__dirname, 'public'))); 有的话,则直接看下一步,没有就在app.js中添加这句话,记得添加后重启服务 接着,我们在项目的public文件夹下,新建一个html文件下(便于后期管理所有的静态页面),然后新建index.html,内容如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> \Hello world. </body> </html>

这样在浏览器中输入下面的地址,就可以访问了。 http://localhost:3000/html/index.html

读取json文件中的内容,提前绑定页面呢?(不依赖后端接口写好)

为了方便项目管理,我们新建几个文件夹和对应的文件 json文件夹及其对应的index.json文件

  • 在javascripts文件夹下新建index.js

index.json { "code":"200", "msg":"success" } index.js fetch("../json/index.json").then(function(res) { if (res.ok) { res.json().then(function(data) { console.log(data); }); } else { console.log("Looks like the response wasn't perfect, got status", res.status); } }, function(e) { console.log("Fetch failed!", e); });

*在index.html中引入对应的文件

<title>demo</title> Hello world. <script src="../javascripts/index.js"></script>

最后再打开访问http://localhost:3000/html/index.html F12 打开控制台,我们可以看到打印出了我们想要的内容

nodejs's People

Contributors

guider avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.