返璞归真第一篇——从0开始搭建node

2018-02-10 本文已影响36人行走的巨象

一、node环境的简单搭建

作为前端工程师，学好node的重要性我就不多说了，为了让自己对node更加了解，也为了刚入门的萌新们可以更快的入门，所以我将从0开始，一步一步的搭建node环境。

此次我搭建的只是纯后端，项目采用前后端分离的模式，前端页面我已经写好了，传送门

有需要的同学可以下载并运行看看，我也会一直更新这个项目，觉得不错的可以点个星哦！

好了，闲话少说，开始今天的正题。

1、创建文件夹

额。。。。我觉得这部分我就不说啥了

2、进入文件夹内部，执行 npm init

我试用的编辑器是vs code，所以创建文件夹后按 ctrl + ~ 调出终端就可以输入了  
如果你用的不是这个，还可以进入文件夹内部后在地址栏输入cmd后回车即可继续编辑输入npm init

如果有不知道npm是什么的同学传送门建议先学会并安装好了再来看本篇教程。

执行npm init后会问你很多问题，例如

图片
个人建议，不用管它，一路回车即可

3、创建index.js

跟目录下创建index.js，作为整个后台项目的入口文件

4、安装express及重要插件

我在编写后台的过程中还是主要用express这个框架，所以我这里也是给大家介绍的这种方式  
终端分别输入  
npm install express --save   (注：--save是保存到项目中的意思)
npm install body-parser --save   (注：express必要的中间件)

5、编写index.js

//将一下内容拷进index.js中
const path = require('path')    //引入当前路径
const express = require('express')  //引入express
const bodyParser = require('body-parser')//引入body-parser

const app = express();

app.use(bodyParser.urlencoded({extended:true}));

let _static = path.join('webapp');  //定义静态文件的目录，此处只为确认node环境运行了
app.use(express.static(_static));

app.listen(4000);               //监听端口
console.log('服务器启动，端口：4000');

6、创建webapp文件夹，并在文件夹内创建index.html

//index.html内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    恭喜你成功了！
</body>
</html>

由此我们的node环境就算搭建完成了

终端运行 node index.js看看什么样子吧！

成功界面

如果你看到了这个界面，那么恭喜你成功的搭建了一个node环境。

敲代码两分钟，写博客20分钟不止，盆友们，写博客不易，且行且珍惜啊！

欢迎广大网友批评指正，有问题也可以随时问我哦！

后续我会不定期更新的。。。。。