尝试使用Angular构建一个基本的MEAN应用

2 年 ago
新, 韵
3 minutes

MEAN是什么意思？

LAMP（Linux、Apache、MySQL、MariaDB、Perl、PHP、Python）是一种类似软件捆绑包的技术组合。

    • M:MongoDB(jsonを扱うことができるドキュメント指向DB)

 

    • E:Express(Node.js上で動作するバックエンドフレームワーク)

 

    • A:AngularJS(フロントエンドjsフレームワーク)

 

    N:Node.js(サーバサイドjs環境)

我认为从各个要素来看，可以明白JavaScript是开发所需唯一的特征。但是，因为使用了Node.js，所以可能不太适合构建大规模系统。

今回やる事

    • MEANを構築

 

    • AはAngularJSではなく、Angular(4.x.x)を使う

 

    angular-cliを利用してAngularのプロジェクトを作成してから構築

MEAN中的N：Node.js

安装

“Node.js的版本管理可在以下文章中找到详细的安装方法。使用nodist。”

请确保在此时使用nodist版本为6.9.x，并且npm版本为3.x.x以上（这是在使用Angular时所需的版本）。

A的含义：Angular

创建项目

首先安装Angular CLI。

npm install -g @angular/cli

当您完成安装后，便可以创建项目。

ng new mean-test

由于mean-test是项目名，因此可以更改为任何名称都可以。
由于所需的软件包将自动在npm上安装，所以这可能需要一些时间。

ここまで完了したら、作成したプロジェクトのディレクトリ(mean-test)の中に移動して、以下のコマンドでとりあえずAngularの起動確認をしてみます。
※以降はカレントディレクトリがmean-testになっていることを前提に進めます。

ng serve --open

–添加“open”选项后，localhost:4200会自动在浏览器中打开。

如果以这样的方式显示，就可以了。

image.png

MEAN的E：表达

安装

作成したプロジェクトのディレクトリ(mean-test)の中に移動して、Expressをインストールします。

npm install --save express

起動設定

一旦安装完成后，创建一个server.js文件。

// 使用するライブラリの読み込み
const express = require('express');
const path = require('path');
const http = require('http');

// api.js(サーバサイドの処理スクリプト)の読み込み
const api = require('./server/routes/api');

// expressの初期化
const app = express();

// 静的ファイルパスの設定
// ビルド後のAngularのパスを設定する
app.use(express.static(path.join(__dirname, 'dist')));

// /apiでアクセスしたときはapi.jsを表示
app.use('/api', api);

// 任意のURLでアクセスしたときはdist/index.html(Angularのindex.html)を表示
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

/**
 * ポート設定
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * HTTPサーバの作成
 */
const server = http.createServer(app);

/**
 * ポート監視を開始する
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

另外，我也会创建server/routes/api.js文件。

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.header('Content-Type', 'text/plain;charset=utf-8');
  res.send('これはサーバサイドスクリプトだよ');
});

module.exports = router;

如果您已经完成到这一步，可以使用以下命令在node.js上运行server.js。

node server.js

若在本地3000端口启动HTTP服务器并显示“localhost:3000 上的服务器已启动”，则表示成功。
尝试从浏览器访问localhost:3000。
无论访问哪个路径，基本上都将显示dist/index.html，因此会显示类似Angular时所见的“app works!”字样。
但是，如果访问localhost:3000/api，则会执行api.js的动作。

image.png

MEAN的M：MongoDB

安装

首先，安装MongoDB。
从MongoDB Download Center下载安装程序。
启动安装程序，按照提示进行安装。
完成后，将安装文件夹内bin文件夹的路径添加到环境变量Path中，这样可以方便地从命令提示符中执行。
安装完成后，创建C：\data\db目录。
这是MongoDB数据存储路径（默认设置，可以通过配置更改）。

启动和数据创建

请使用以下命令启动MongoDB。

mongod

当MongoDB启动后，启动另一个命令提示符。
连接到MongoDB，并切换到名为test_db的数据库。

mongo
uset test_db

另外，我們創建一個集合（相當於關聯式數據庫中的表）名為users，並將數據添加到其中。
接下來，我們將使用名為mongoose的庫從Node.js調用MongoDB，但在這種情況下，命名規則將是模型名稱的小寫加上s。
因此，由於我們想將模型名稱設置為User，集合名稱將是users。
在創建集合後，我們將以json格式添加”satoh ichiro”和”suzuki jiro”作為數據。

db.createCollection('users');
db.users.insert( { last_name:'satoh', first_name:'ichiro' } );
db.users.insert( { last_name:'suzuki', first_name:'jiro' } );

可以通过以下命令确认数据是否已经注册。

db.users.find()

与Node.js的连接

首先，我們將從Node.js腳本中使用mongoose庫來連接MongoDB。首先，需要安裝mongoose。

npm install mongoose

然后，在 server/routes/api.js 文件中添加了使用 mongoose 的连接处理。本次将其显示在访问 api/user 时。

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');

// スキーマを定義
var Schema   = mongoose.Schema;
var UserSchema = new Schema({
  first_name:  String,
  last_name: String
});
mongoose.model('User', UserSchema);

// MongoDBに接続
mongoose.connect('mongodb://localhost/test_db');

var User = mongoose.model('User');

router.get('/', (req, res) => {
  res.header('Content-Type', 'text/plain;charset=utf-8');
  res.send('これはサーバサイドスクリプトだよ');
});

router.get('/user',(req, res) => {

  // MongoDBからデータを取得
  User.find({}, function(err, docs) {
    res.json(docs);
  });
});

module.exports = router;

最后确认

停止Node.js，然后重新启动server.js。
然后，在localhost:3000/api/user上连接，以显示刚刚注册的json数据。
（自动生成的_id也会显示）

image.png

这样一来，MEAN技术栈就基本完成了。
虽然这次只涉及到了对json的读取，但是使用mongoose，您也可以实现CRUD功能。
由于只涉及到javascript和json的处理，我想说只要了解javascript，就能编写服务器端的处理逻辑…但是我稍微接触了一下Node.js，感觉它和javascript还是有些不同，所以不能那么顺利。

请参阅

用Angular 2和Angular CLI开发MEAN App ― Scotch
轻松开发Node.js和MongoDB应用程序，使用Mongoose

✖
广告
将在 10 秒后关闭
bannerAds