Mean Stack新手導(dǎo)航?

omgdog 發(fā)布于2019-08-22 10:45 / 1271人閱讀

摘要：而成熟的框架如又不太適合新手。中每一個(gè)模塊所包含的知識都非常龐大，這只是一個(gè)非常簡單的新手教程，我們體驗(yàn)了一把，串聯(lián)前端后端，設(shè)計(jì)簡單的，鏈接數(shù)據(jù)庫，操作數(shù)據(jù)，顯示模板。希望這個(gè)教程對你進(jìn)擊有幫助部分學(xué)習(xí)資料

我是如何用MEAN棧來搭建一個(gè)簡單的App的

最近在學(xué)習(xí)MEAN棧開發(fā)，但google來的教程又太分散，有講express的， restful接口的，angular-resource設(shè)計(jì)的，就是沒有一整套mean下來的。而成熟的框架如meteor、meanio、meanjs又不太適合新手?。

最后經(jīng)過自己的實(shí)踐綜合各個(gè)教程搭建了這個(gè)簡單的mean應(yīng)用，實(shí)現(xiàn)了基本的CRUD操作?。從后端nodejs到前端angularjs都只用到了其中最簡單最方便的模塊。如果你也對MEAN開發(fā)有興趣卻摸不著頭腦，可以看看我是怎么連接mean各個(gè)模塊的?。

live demo
源代碼倉庫
后端概覽Mongoose Restful Mlab Express Nodejs
前端概覽 Angularjs Angular-ui-router angular-resource Bootstrap
Mongodb + Express + Angularjs + Nodejs == MEAN
背景知識請點(diǎn)擊

目錄結(jié)構(gòu)如下圖

后端搭建

后端數(shù)據(jù)模型構(gòu)建 model > movies.js

后端路由 routes > movies.js

數(shù)據(jù)庫連接及服務(wù)器啟動(dòng) app.js

前端搭建

restful Api設(shè)計(jì) public > js > service.js

前端路由 public > js > app.js

數(shù)據(jù)顯示模板 public > * .html

如果你想跟著我寫一遍,下載 Nodejs ?并在項(xiàng)目中安裝如下package.json

package.json如下，不保證其他版本能正常運(yùn)行

    "angular": "^1.5.9",
    "angular-resource": "^1.5.9",
    "angular-ui-router": "^0.3.2",
    "body-parser": "^1.13.3",
    "bootstrap": "^3.3.7",
    "express": "^4.13.3",
    "mongoose": "^4.0.1"

構(gòu)建后端Api

1.在model > movies.js 下我們先構(gòu)建數(shù)據(jù)模型，我們的模型只包含title(電影名字)，director(導(dǎo)演)，其他的不關(guān)心?。
關(guān)于數(shù)據(jù)模型mongoose.Schema更多設(shè)置

var mongoose = require("mongoose");
var Schema = mongoose.Schema;

var movieSchema = new  Schema({
  title: String,
  director: String
});

module.exports = mongoose.model("Movie", movieSchema);

2.在routes > movies.js 中設(shè)計(jì)路由Api, 用到express, 還有上一步中的數(shù)據(jù)模型Movie。

var Movie = require("../model/movie");
var express = require("express");
//導(dǎo)入模塊，賦值給router
var router = express.Router();

//設(shè)計(jì)路由
router.route("/movies")
// 取得所有 movies
  .get(function(req, res) {
    Movie.find(function(err, movies){
      if (err) {
        res.send(err);
      }
      res.json(movies);
    });
  })

// 開始熟悉的CRUD?
  .post(function(req, res) {
// 創(chuàng)建一個(gè) movie
    var movie = new Movie(req.body);
    movie.save(function(err) {
      if (err) {
        res.send(err);
      }
    })
  });

router.route("/movies/:id")
// 讀取一個(gè) movie
  .get(function(req, res) {
    Movie.findOne({_id: req.params.id}, function(err, movie) {
      if (err) {
        res.send(err);
      }
      res.json(movie);
    });
  })

// 修改一個(gè) movie
  .put(function(req, res) {
    Movie.findOne({_id: req.params.id}, function(err, movie) {
      if (err) {
        res.send(err);
      }
      for(prop in req.body){
        movie[prop] = req.body[prop];
      }
      movie.save(function(err) {
        if (err) {
          res.send(err);
        }
      });
    });
  })

.delete(function(req, res) {
// 刪除一個(gè) movie
    Movie.remove({
      _id: req.params.id
    }, function(err, movie) {
      if (err) {
        res.send(err);
      }
    });
  });

//最后導(dǎo)出路由
 module.exports = router;

3.在app.js下連接數(shù)據(jù)庫，建立服務(wù)器。數(shù)據(jù)庫用mlab,畢竟免費(fèi)500MB?

var express = require("express");
var bodyParser = require("body-parser");
var movies = require("./routes/movies");
var mongoose = require("mongoose");

var app = express();

app.use(express.static(__dirname + ""));

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

//data api path
app.use(movies);

//這個(gè)是我的mlab數(shù)據(jù)庫地址，其中mean是賬號密碼
var connectionString = "mongodb://mean:[email protected]:13668/mean";

//連接數(shù)據(jù)庫
mongoose.connect(connectionString);
var conn = mongoose.connection;

//測試數(shù)據(jù)庫連接是否正常
// conn.on("error", console.error.bind(console, "connection error"))
// conn.once("open", function() {
//   console.log("database ready");
// });

//啟動(dòng)服務(wù)器在localhost:8000運(yùn)行
app.set("port", process.env.PORT || 8000);
app.listen(app.get("port"), function() {
  console.log("your app is running on port 8000");
})

構(gòu)建前端Api

1.在public > js > movies.js用$resource構(gòu)建api

angular.module("App.service", [])
.factory("Movie", function($resource) {
  var $url = "/movies/:id";
  return $resource($url, {id: "@_id"}, {
//因?yàn)?resource沒有update方法，我們要自己構(gòu)建一個(gè)
    update: {
      method: "PUT"
    }
  });
})
//window全局模態(tài)框，在刪除數(shù)據(jù)時(shí)會(huì)用到
.service("popupService", function($window) {
    this.showPopup = function(message) {
      return $window.confirm(message);
    }
  });

2.在public > js > app.js中開啟前端路由，我們使用angular-ui-router這個(gè)模塊

//主模塊App,依賴有ui.router，ngResource和我們在上一步定義的App.service服務(wù)
angular.module("App", ["ui.router", "ngResource", "App.service"])

//開始配置路由和熟悉的CRUD?
  .config(function ($stateProvider) {
    $stateProvider.state("movies", {
      url: "/movies",
      templateUrl: "public/movies.html",
      controller: function( $scope, $state, popupService, $window, Movie) {
      
      //取得所有 movies
        $scope.movies = Movie.query();
        $scope.deleteMovie = function(movie) {
          if (popupService.showPopup("刪除？")) {
          
          //刪除一個(gè) movie
            movie.$delete();
            $window.location.href = "";
          }
        };
      }
    })
    
    .state("newMovie", {
      url: "/movies/new",
      templateUrl: "public/movie-add.html",
      controller: function($scope, $state, $stateParams, Movie) {
        $scope.movie = new Movie();
        $scope.addMovie = function () {
        
        //創(chuàng)建一個(gè) movie
          $scope.movie.$save();
          $state.go("movies");
        }
      }
    })
    
    .state("viewMovie", {
      url: "/movies/:id/view",
      templateUrl: "public/movie-view.html",
      controller: function($scope, $stateParams, Movie) {
      
      //讀取 一個(gè)movie
        $scope.movie = Movie.get({id: $stateParams.id});
      }
    })
    
    .state("editMovie", {
      url: "/movies/:id/edit",
      templateUrl: "public/movie-edit.html",
      controller: function($scope, $state, $stateParams, Movie) {
        $scope.updateMovie = function() {
        
        //更新一個(gè) movie
          $scope.movie.$update();
          $state.go("movies")
        };
        $scope.loadMovie = function() {
          $scope.movie = Movie.get({id: $stateParams.id});
        };
        $scope.loadMovie();
      }
    });
  })

//默認(rèn)路由
  .run(function($state) {
    $state.go("movies");
  });

3.路由設(shè)計(jì)完畢就可以寫模板了，在index.html引入各類模塊及樣式表

//index.html 部分內(nèi)容
  
      
        
        
        //ui-view是ui-router的顯示區(qū)域。我們上一步定義的state里的templateUrl都顯示在這里

在public下還有另外5個(gè)模板，_form.html主要負(fù)責(zé)CRUD中的C(movie-add.html)和U(movie-edit.html)。CU兩個(gè)模板都引用_form.html

//這個(gè)是U模板 movie-edit.html

//這個(gè)是C模板 movie-add.html

R模板(movie-view.html)用于展示單個(gè)movie數(shù)據(jù)
剩下的D操作和movies列表共用一個(gè)模板movies.html

Add New Movie

    
        All Movies
        
    
    
        {{movie.title}}
        
            View
            Delete

至此，這個(gè)App的所有構(gòu)建工作已經(jīng)完成。MEAN中每一個(gè)模塊所包含的知識都非常龐大，這只是一個(gè)非常簡單的新手教程，我們體驗(yàn)了一把Javascript Stack，串聯(lián)前端后端，設(shè)計(jì)簡單的Api，鏈接數(shù)據(jù)庫，操作數(shù)據(jù)，顯示模板。  
希望這個(gè)教程對你進(jìn)擊Javascript Stack 有幫助?

部分學(xué)習(xí)資料
MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS
Build a blog with the MEAN stack
Creating RESTful APIs with Express 4
Creating a CRUD App in Minutes with Angular’s $resource

云服務(wù)器 GPU云服務(wù)器 MEAN Stack Error.stack full-stack

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91184.html

發(fā)表評論

登陸后可評論

0條評論

omgdog

男|高級講師

我要關(guān)注我要私信

TA的文章

舍利云：美國CERA 2區(qū)大寬帶，月付30元起，可先試后買，簡單測評

閱讀 3056·2021-09-08 10:43
為什么還要寫一個(gè)PHP框架？

閱讀 1041·2019-08-30 15:53
解決chrome滾動(dòng)條背景的問題

閱讀 993·2019-08-30 13:51
JS實(shí)現(xiàn)簡單的MVC模式開發(fā)小游戲

閱讀 850·2019-08-29 14:03
借助URLOS快速安裝nodejs環(huán)境

閱讀 812·2019-08-26 18:35
前端文章集合

閱讀 1245·2019-08-26 13:38
打造你的Laravel即時(shí)應(yīng)用(二)-消息推送與監(jiān)聽

閱讀 1594·2019-08-26 10:34
Vue實(shí)戰(zhàn)—商品分類菜單數(shù)量提示（10）

閱讀 3510·2019-08-26 10:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Mean Stack新手導(dǎo)航?

All Movies

相關(guān)文章

MEAN.js 文檔

全棧工程師的武器——MEAN

MEAN實(shí)踐——LAMP的新時(shí)代替代方案（上）

發(fā)表評論

0條評論

omgdog

男|高級講師

TA的文章

舍利云：美國CERA 2區(qū)大寬帶，月付30元起，可先試后買，簡單測評

為什么還要寫一個(gè)PHP框架？

解決chrome滾動(dòng)條背景的問題

JS實(shí)現(xiàn)簡單的MVC模式開發(fā)小游戲

借助URLOS快速安裝nodejs環(huán)境

前端文章集合

打造你的Laravel即時(shí)應(yīng)用(二)-消息推送與監(jiān)聽

Vue實(shí)戰(zhàn)—商品分類菜單數(shù)量提示（10）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Mean Stack新手導(dǎo)航?

All Movies

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！