基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

原文

这章的目的是为了把前面所学习的内容整合一下，这个示例完成一个简单图书管理模块，因为中间需要使用到Bootstrap这里先介绍Bootstrap。

示例名称：天狗书店

功能：完成前后端分离的图书管理功能，总结前端学习过的内容。

技术：NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域

效果：

一、Bootstrap

Bootstrap是一个UI框架，它支持响应式布局，在PC端与移动端都表现不错。

Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

在线可视布局：http://www.ibootstrap.cn/

演示： http://expo.bootcss.com/

中文网：http://www.bootcss.com/

官网：http://getbootstrap.com/

安装：npm install bootstrap@3

1.1、添加引用

也可使用包管理器也可以去官网下载后添加引用。

1.2、在页面中使用BootStrap

添加CSS引用：

<link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" />

添加JavaScript引用：

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

在页面中引用BootStrap定义好的样式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>bootstrap</title>
  <link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" />
 </head>
 <body>
  <div class="container-fluid">
   <div class="row">
    <div class="jumbotron">
     <h1>Hello, world!</h1>
     <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information</p>
     <p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
     </p>
    </div>
   </div>
   <div class="row">
    <div class="col-md-6">
     <button type="button" class="btn btn-default">默认</button>
     <button type="button" class="btn btn-primary">主要</button>
     <button type="button" class="btn btn-success">成功</button>
     <button type="button" class="btn btn-info">信息</button>
     <button type="button" class="btn btn-warning">警告</button>
     <button type="button" class="btn btn-danger">错误</button>
     <button type="button" class="btn btn-link">链接</button>
    </div>
    <div class="col-md-6">
     <button type="button" class="btn btn-default btn-lg">默认</button>
     <button type="button" class="btn btn-default">默认</button>
     <button type="button" class="btn btn-default btn-sm">默认</button>
     <button type="button" class="btn btn-default btn-xs">默认</button>
    </div>
   </div>
  </div>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

运行结果：

1.3、可视化布局

如果想快速高效的布局可以使用一些在线辅助工具，如：

http://www.ibootstrap.cn/

点击下载可以获得生成的HTML脚本。

二、使用MongoDB创建数据库

2.1、启动MongoDB数据库

数据库的具体安装、配置在前面的章节中已经讲解过，可以参考。

如果服务与配置都没有完成的话可以启动：C:\Program Files\MongoDB\Server\3.4\bin\mongod.exe

2.2、启动数据库GUI管理工具

2.3、创建数据库与集合

 在localhost上右键“create database”创建名称为BookStore的数据库。

创建一个用于存放图书的集合名称为books。

在集合中添加5本图书。

db.getCollection('books').insert({id:201701,title:"使用AlarJS开发下一代应用程序",picture:"b1.jpg",price:55.0,author:"brad green"});

三、创建一个Express项目

这里使用Eclipse（HBuilder）为开发工具，添加Nodeclipse插件，新增一个Express项目：

3.1、创建app.js

/**
 * Module dependencies.
 */
var express = require('express')
 , routes = require('./routes')
 , books = require('./routes/books')
 , http = require('http')
 , path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname   '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
 app.use(express.errorHandler());
}
app.get('/', books.list);
app.get('/books', books.list);
http.createServer(app).listen(app.get('port'), function(){
 console.log('Express server listening on port '   app.get('port'));
});

四、Monk访问MongoDB数据库

monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。

git仓库地址：https://github.com/Automattic/monk

文档：https://automattic.github.io/monk/

安装：npm install --save monk

4.1、创建连接

const monk = require('monk')
// Connection URL
const url = 'localhost:27017/myproject';
const db = monk(url);
db.then(() => {
 console.log('Connected correctly to server')
})

4.2、插入数据

const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
 .then((docs) => {
 // docs contains the documents inserted with added **_id** fields
 // Inserted 3 documents into the document collection
 }).catch((err) => {
 // An error happened while inserting
 }).then(() => db.close())
users.insert({ woot: 'foo' })
users.insert([{ woot: 'bar' }, { woot: 'baz' }])

4.3、更新数据

const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
 .then((docs) => {
 // Inserted 3 documents into the document collection
 })
 .then(() => {
 return collection.update({ a: 2 }, { $set: { b: 1 } })
 })
 .then((result) => {
 // Updated the document with the field a equal to 2
 })
 .then(() => db.close())
users.update({name: 'foo'}, {name: 'bar'})

4.4、删除数据

const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
 .then((docs) => {
 // Inserted 3 documents into the document collection
 })
 .then(() => collection.update({ a: 2 }, { $set: { b: 1 } }))
 .then((result) => {
 // Updated the document with the field a equal to 2
 })
 .then(() => {
 return collection.remove({ a: 3})
 }).then((result) => {
 // Deleted the document with the field a equal to 3
 })
 .then(() => db.close())
users.remove({ woot: 'foo' })

4.5、查找数据

const url = 'localhost:27017/myproject'; // Connection URL
const db = require('monk')(url);
const collection = db.get('document')
collection.insert([{a: 1}, {a: 2}, {a: 3}])
 .then((docs) => {
 // Inserted 3 documents into the document collection
 })
 .then(() => collection.update({ a: 2 }, { $set: { b: 1 } }))
 .then((result) => {
 // Updated the document with the field a equal to 2
 })
 .then(() => collection.remove({ a: 3}))
 .then((result) => {
 // Deleted the document with the field a equal to 3
 })
 .then(() => {
 return collection.find()
 })
 .then((docs) => {
 // docs === [{ a: 1 }, { a: 2, b: 1 }]
 })
 .then(() => db.close())
users.find({}).then((docs) => {})
users.find({}, 'name').then((docs) => {
 // only the name field will be selected
})
users.find({}, { fields: { name: 1 } }) // equivalent
users.find({}, '-name').then((docs) => {
 // all the fields except the name field will be selected
})
users.find({}, { fields: { name: 0 } }) // equivalent
users.find({}, { rawCursor: true }).then((cursor) => {
 // raw mongo cursor
})
users.find({}).each((user, {close, pause, resume}) => {
 // the users are streaming here
 // call `close()` to stop the stream
}).then(() => {
 // stream is over
})
//创建的数据库
var monk = require('monk')
var db = monk('localhost:27017/bookstore')
//读取数据：
var monk = require('monk')
var db = monk('localhost:27017/monk-demo')
var books = db.get('books')
 books.find({}, function(err, docs) {
 console.log(docs)
})
//插入数据：
books.insert({"name":"orange book","description":"just so so"})
//查找数据：
books.find({"name":"apple book"}, function(err, docs) {
 console.log(docs)
})
复制代码
五、创建Rest后台服务
在routes目录下增加的books.js文件内容如下：
复制代码
/*
 * 使用monk访问mongodb
 * 以rest的方式向前台提供服务
 */
//依赖monk模块
var monk = require('monk');
//连接并打开数据库
var db = monk('localhost:27017/BookStore');
//从数据库中获得books集合，类似表，并非所有数据， key
var books = db.get('books');
//列出所有的图书json
exports.list = function(req, res) {
 //无条件查找所有的图书，then是当查找完成时回调的异步方法
 books.find({}).then((docs) => {
  //返回json给客户端
  res.json(docs);
 }).then(() => db.close()); //关闭数据库
};
//获得最大id
exports.getMax=function(req,res){
 //找一个，根据id降序排序，
 books.findOne({}, {sort: {id: -1}}).then((bookObj)=>{
  res.json(bookObj);
 }).then(() => db.close());;
}
//添加图书
exports.add = function(req, res) {
 //先找到最大的图书编号
 books.findOne({}, {sort: {id: -1}}).then((obj)=>{
  //从客户端发送到服务器的图书对象
  var book=req.body;
  //设置图书编号为最大的图书编号 1
  book.id=(parseInt(obj.id) 1) "";
  //执行添加
  books.insert(book).then((docs) => {
  //返回添加成功的对象
   res.json(docs);
  }).then(() => db.close());
 });
};
//删除图书
exports.del = function(req, res) {
 //从路径中取参数id,/:id
 var id=req.params.id;
 //移除编号为id的图书
 books.remove({"id":id}).then((obj)=>{
  //返回移除结果
  res.json(obj);
 }).then(() => db.close());
};
//更新
exports.update = function(req, res) {
 //获得提交给服务器的json对象
 var book=req.body;
 //执行更新,第1个参数是要更新的图书查找条件，第2个参数是要更新的对象
 books.update({"id":book.id}, book).then((obj)=>{
  //返回更新完成后的对象
  res.json(obj);
  }).then(() => db.close());
};

为了完成跨域请求，修改http头部信息及路径映射，app.js文件如下：

var express = require('express'),
 routes = require('./routes'),
 books = require('./routes/books'),
 http = require('http'),
 path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname   '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header("Access-Control-Allow-Headers", "content-type");
 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
 res.header("X-Powered-By", ' 3.2.1')
 res.header("Content-Type", "application/json;charset=utf-8");
 if(req.method == "OPTIONS") {
  res.send("200");
 } else {
  next();
 }
});
// development only
if('development' == app.get('env')) {
 app.use(express.errorHandler());
}
app.get('/', books.list);
//获得所有的图书列表
app.get('/books', books.list);
//最大的编号
app.get('/books/maxid', books.getMax);
//添加
app.post('/books/book', books.add);
//删除
app.delete('/books/id/:id', books.del);
//更新
app.put('/books/book', books.update);
http.createServer(app).listen(app.get('port'), function() {
 console.log('Express server listening on port '   app.get('port'));
});

查询所有：

其它服务的测试可以使用Fiddler完成。

六、使用AngularJS调用后台服务

这里的UI使用BootStrap完成，前端使用AngularJS调用NodeJS发布的服务，将数据存放在MongoDB中。

index.js页面如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>天狗书店</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="bookmark" href="favicon.ico" />
  <link rel="stylesheet" type="text/css" href="js/bootstrap/dist/css/bootstrap.min.css" />
  <style type="text/css">
   .cover {
    height: 40px;
    width: auto;
   }
   .addBook {
    padding-top: 10px;
   }
   .w100 {
    width: 50px
   }
   .w200 {
    width: 200px;
   }
   .w300 {
    width: 300px
   }
  </style>
 </head>
 <body ng-app="bookApp">
  <div class="container" ng-controller="BookController">
   <div class="row clearfix">
    <div class="col-md-12 column">
     <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
       <a class="navbar-brand" href="#">天狗书店</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
        <li class="active">
         <a href="#">前端</a>
        </li>
        <li>
         <a href="#">Java</a>
        </li>
        <li>
         <a href="#">.Net</a>
        </li>
        <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多类型<strong class="caret"></strong></a>
         <ul class="dropdown-menu">
          <li>
           <a href="#">Action</a>
          </li>
          <li>
           <a href="#">Another action</a>
          </li>
          <li>
           <a href="#">Something else here</a>
          </li>
          <li class="divider">
          </li>
          <li>
           <a href="#">Separated link</a>
          </li>
          <li class="divider">
          </li>
          <li>
           <a href="#">One more separated link</a>
          </li>
         </ul>
        </li>
       </ul>
       <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
         <input type="text" class="form-control" />
        </div> <button type="submit" class="btn btn-default">搜索</button>
       </form>
      </div>
     </nav>
     <div class="row clearfix">
      <div class="col-md-12 column">
       <div class="carousel slide" id="carousel-519027">
        <ol class="carousel-indicators">
         <li class="active" data-slide-to="0" data-target="#carousel-519027">
         </li>
         <li data-slide-to="1" data-target="#carousel-519027">
         </li>
         <li data-slide-to="2" data-target="#carousel-519027">
         </li>
        </ol>
        <div class="carousel-inner">
         <div class="item active">
          <img alt="" src="img/adv3.jpg" />
          <div class="carousel-caption">
          </div>
         </div>
         <div class="item">
          <img alt="" src="img/adv2.jpg" />
          <div class="carousel-caption">
          </div>
         </div>
         <div class="item">
          <img alt="" src="img/adv1.jpg" />
          <div class="carousel-caption">
           <h4>
          Third Thumbnail label
         </h4>
           <p>
            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
           </p>
          </div>
         </div>
        </div>
        <a class="left carousel-control" href="#carousel-519027" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel-519027" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
       </div>
      </div>
     </div>
    </div>
   </div>
   <div class="row clearfix">
    <div class="col-md-12 column">
     <div class="addBook">
      <a id="modal-234446" href="#modal-container-234446" role="button" class="btn btn-sm btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> 新书上架</a>
      <div class="modal fade" id="modal-container-234446" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">
        添加/编辑图书
       </h4>
         </div>
         <div class="modal-body">
          <form class="form-horizontal" role="form">
           <div class="form-group">
            <label for="id" class="col-sm-2 control-label">编号</label>
            <div class="col-sm-10">
             <input type="text" class="form-control w100" id="id" ng-model="book.id" ng-readonly="true" />
            </div>
           </div>
           <div class="form-group">
            <label for="title" class="col-sm-2 control-label">书名</label>
            <div class="col-sm-10">
             <input type="text" class="form-control w300" id="title" ng-model="book.title" />
            </div>
           </div>
           <div class="form-group">
            <label for="picture" class="col-sm-2 control-label">图片</label>
            <div class="col-sm-10">
             <input type="text" class="form-control w200" id="picture" ng-model="book.picture" />
            </div>
           </div>
           <div class="form-group">
            <label for="price" class="col-sm-2 control-label">价格</label>
            <div class="col-sm-10">
             <input type="text" class="form-control w200" id="price" ng-model="book.price" />
            </div>
           </div>
           <div class="form-group">
            <label for="author" class="col-sm-2 control-label">作者</label>
            <div class="col-sm-10">
             <input type="text" class="form-control w200" id="author" ng-model="book.author" />
            </div>
           </div>
          </form>
         </div>
         <div class="modal-footer">
          <button type="button" ng-click="save()" class="btn btn-primary">
          <span class="glyphicon glyphicon-floppy-disk"></span> 
           保存</button>
          <button type="button" class="btn btn-success" ng-click="clear()" data-dismiss="modal">
           <span class="glyphicon glyphicon-refresh"></span> 
           清空</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">
           <span class="glyphicon glyphicon-remove"></span> 
           关闭</button>
         </div>
        </div>
       </div>
      </div>
     </div>
     <table class="table">
      <thead>
       <tr>
        <th>
         序号
        </th>
        <th>
         编号
        </th>
        <th>
         书名
        </th>
        <th>
         图片
        </th>
        <th>
         价格
        </th>
        <th>
         作者
        </th>
        <th>
         操作
        </th>
       </tr>
      </thead>
      <tbody>
       <tr ng-repeat="b in books" ng-class="{'info':$odd}">
        <td>
         {{$index 1}}
        </td>
        <td>
         {{b.id}}
        </td>
        <td>
         {{b.title}}
        </td>
        <td>
         <img ng-src="img/{{b.picture}}" class="cover" />
        </td>
        <td>
         {{b.price | number:1}}
        </td>
        <td>
         {{b.author}}
        </td>
        <td>
         <button type="button" class="btn btn-danger btn-xs" ng-click="del(b.id,$index)">删除</button>
         <button href="#modal-container-234446" role="button" class="btn btn-xs btn-primary" data-toggle="modal" ng-click="edit(b)">编辑</button>
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
  </div>
  <!--引入angularjs框架-->
  <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jQuery1.11.3/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   //定义模块，指定依赖项为空
   var bookApp = angular.module("bookApp", []);
   //定义控制器，指定控制器的名称，$scope是全局对象
   bookApp.controller("BookController", ['$scope', '$http', function($scope, $http) {
    $scope.books = [];
    $scope.save = function() {
     $http({
       url: "http://127.0.0.1:3000/books/book",
       data: $scope.book,
       method: $scope.book.id ? "PUT" : "POST"
      })
      .success(function(data, status, headers, config) {
       if($scope.book.id) {
        alert("修改成功");
       } else {
        $scope.books.push(data);
       }
      })
      .error(function(data, status, headers, config) {
       alert(status);
      });
    }
    $scope.edit = function(b) {
     $scope.book = b;
    }
    $scope.clear = function() {
     $scope.book = {};
    }
    //初始化加载
    $http.get("http://127.0.0.1:3000/")
     .success(function(data, status, headers, config) {
      $scope.books = data;
     })
     .error(function(data, status, headers, config) {
      alert(status);
     });
    $scope.del = function(id, index) {
     $http.delete("http://127.0.0.1:3000/books/id/"   id)
      .success(function(data, status, headers, config) {
       $scope.books.splice(index, 1);
      })
      .error(function(data, status, headers, config) {
       alert(status);
      });
    }
   }]);
  </script>
 </body>
</html>

运行结果：

新书上架：

编辑图书

添加成功后：

七、示例下载

前端：https://github.com/zhangguo5/AngularJS04.git

后台：https://github.com/zhangguo5/AngularJS04_BookStore.git

以上所述是小编给大家介绍的基于NodeJS MongoDB AngularJS Bootstrap开发书店案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持！

基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析的更多相关文章

  1. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧

  2. Swift 如何访问 MongoDB

    Perfect开源项目参与Perfect开发Slack在线协同MongoDBMongoDB库函数是在mongo-c语言库的基础上封装而成，能够为Swift轻松访问MongoDB服务器提供便利。请确保安装并激活了最新版本的Swift3.0toolchain。注意每次向项目追加依存关系时，必须要打开Swift软件包管理器重新创建一个新的Xcode项目文件。在您的项目中声明MongoDB请在您的Perfect项目源程序开头声明并导入MongoDB函数库：创建一个MongoDB数据库连接创建到MongoDB服务器

  3. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  4. AngularJS中下拉框的高级用法示例

    这篇文章主要介绍了AngularJS中下拉框的高级用法,结合实例形式分析了AngularJS下拉框的遍历、选择、绑定、显示等功能实现方法,需要的朋友可以参考下

  5. AngularJS数据源的多种获取方式汇总

    在AngularJS中获取数据源的方式有很多种，本文给大家整理几种获取数据源的方式，对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧

  6. 浅析Nodejs npm常用命令

    这篇文章主要介绍了浅析Nodejs npm常用命令的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

  7. nodejs 使用nodejs-websocket模块实现点对点实时通讯

    这篇文章主要介绍了nodejs 使用nodejs-websocket模块实现点对点实时通讯的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

  8. nodeJs链接Mysql做增删改查的简单操作

    本篇文章主要介绍了nodeJs链接Mysql做增删改查的简单操作，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  9. Nodejs中使用captchapng模块生成图片验证码

    本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码，非常具有实用价值，需要的朋友可以参考下

  10. nodejs 图片预览和上传的示例代码

    本篇文章主要介绍了nodejs 图片预览和上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点：速度超快。Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全。在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高，导致的node-sass不兼容问题，我的node是v16.14.0的版本，项目中用了"node-sass": "^4.7.2"版本，无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用，文章通过新建一个文件展开全文内容，具有一定的参考价值，需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部