Node.js & Express 项目基本搭建

726 阅读2分钟

第一节:

初始化项目

mkdir my-project

cd my-project

npm init // entry point:(index.js) 改成app.js

编辑package.json,添加一条脚本命令 "start": "node app"

2.安装

npm i express --save-dev

3.根目录下创建app.js(入口文件),编辑下面的代码后, 执行 npm start


访问 http://localhost:3000/


第二节:

1.使用模板引擎,项目中使用pug(模板引擎之一)

npm i pug --save-dev


2.app.js文件添加两行代码,设置模板引擎

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'pug');

3.创建view文件夹里边创建index.pug 编辑


第三节:连接mongodb

1.安装:
npm i mongoose --save-dev

2.创建mongo.js

const mongoose = require('mongoose')

const DB_URL = 'mongodb://localhost:27017/test'

mongoose.connect(DB_URL)

mongoose.connection.on('connected', () => console.log('已启动mongo'))

3.启动mongodb(进入mongodb的bin目录)

mongod --dbpath c:\Mongodb-data\db // mongod --dbpath [window下存放数据的路径]

4.使用cmd操作mongodb(进入mongodb的bin目录)

mongo // 进入

show dbs // 查看数据库

show collections // 查看数据库的表

第四节:

1.post请求要引入body-parser,通过req.body获取参数

npm i body-parser

app.use(bodyParser.urlencoded({ extended: false })); application/jsonapp.use(bodyParser.json()); 

2.设置静态文件

app.use(express.static(path.join(__dirname, "public")));

3.通过bower引入第三方包

npm i -g bower

创建.bowerrc文件,写入下面的代码

{ "directory": "public/bower_components", "registry": "https://registry.bower.io"}

bower install bootstrap

第五节(monodb增删改查):

//  删除

 Article.findById(req.params.id, function(err, article){ 

  Article.remove(req.params.id, function(err){ 

   if(err){

     console.log(err);

   } else {

       res.send('Success');

       res.redirect('/')

     }

  }); 

});

// 修改

const article = {}

article.title = req.body.title

article.author= req.body.author

article.content= req.body.content


Article.update({_id: req.params.id),article,(err)=>{

  if(err) {

    cosnole.log(err)

  } else{
       res.send({res_code: 1})

   }

}

增加

app.post('/articles/add', function (req, res) {  

  const { title, author, content } = req.body 

  const article = new Article() 

  article.title = title 

  article.author = author 

  article.content = content 

  article.save((err)=>{ 

    if(err){ 

      console.log(err) 

       return 

    } else{ 

        res.redirect('/')

    } 

  })

});


第五节 前端代码规范EditorConfig与ESLint:

npm i eslint -g

eslint --init 

初始化 eslint 配置,依次选择:

-> Use a popular style guide
-> Standard
-> JSON

在根目录下新建 .editorconfig 的文件

在 myblog 目录下新建 .eslintignore 的文件

自动修复 package.json : {"lint": "eslint --ext .js app.js node-study-demo src --fix"}

vscode下载eslint后才会有报错信息