Nodejs全Javascript的Web开发架构：MEAN和Yeoman

Nodejs全Javascript的Web开发架构：MEAN和Yeoman

最近在Angular社区的原型开发者间，一种全Javascript的开发架构MEAN正突然流行起来。其首字母分别代表的是：(M)ongoDB——NoSQL的文档数据库，使用JSON风格来存储数据，甚至也是使用JS来进行sql查询；(E)xpress——基于Node的Web开发框架；(A)agular——JS的前端开发框架，提供了声明式的双向数据绑定；(N)ode——基于V8的运行时环境（JS语言开发），可以构建快速响应、可扩展的网络应用。

alt 文字

原文链接： Addy Osmani 翻译： 伯乐在线 - 华铭 译文链接： http://blog.jobbole.com/59689/ 点此查看全文


4 回复

Node.js 全JavaScript的Web开发架构：MEAN和Yeoman

最近在Angular社区中，一种全JavaScript的开发架构MEAN开始受到广泛关注。这种架构不仅简化了Web应用的开发流程，还使得前后端的技术栈统一为JavaScript，大大提高了开发效率。

MEAN 架构简介

MEAN架构的四个组成部分分别是：

  • MongoDB：一个NoSQL文档数据库，它使用JSON风格来存储数据，并且可以使用JavaScript进行查询。
  • Express：一个基于Node.js的Web开发框架，用于构建服务器端的应用逻辑。
  • Angular：一个JavaScript的前端框架，提供了声明式的双向数据绑定。
  • Node.js：一个基于V8引擎的运行时环境，可以用来构建快速响应、可扩展的网络应用。

示例代码

下面是一个简单的MEAN架构应用示例，展示如何使用这些技术栈来构建一个基本的Web应用。

1. MongoDB 示例

首先，我们需要安装MongoDB并启动它。然后，我们可以使用mongoose库来连接数据库并进行数据操作。

// 安装mongoose
const mongoose = require('mongoose');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义一个Schema
const userSchema = new mongoose.Schema({
    name: String,
    email: String
});

// 创建模型
const User = mongoose.model('User', userSchema);

// 插入一条数据
const newUser = new User({ name: 'John Doe', email: 'john@example.com' });
newUser.save().then(() => console.log('User saved'));
2. Express 示例

接下来，我们使用Express来创建一个简单的HTTP服务器。

// 安装express
const express = require('express');
const app = express();

// 设置静态文件目录
app.use(express.static('public'));

// 路由处理
app.get('/', (req, res) => {
    res.send('Hello World!');
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
3. Angular 示例

最后，我们使用Angular来创建一个前端页面。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>{{ message }}</h1>
    </div>

    <script>
        // 定义Angular模块
        var app = angular.module('myApp', []);

        // 定义控制器
        app.controller('myCtrl', function($scope) {
            $scope.message = "Hello from Angular!";
        });
    </script>
</body>
</html>

Yeoman

为了进一步简化开发流程，我们可以使用Yeoman这个工具来生成项目模板。Yeoman提供了一系列的脚手架工具，可以帮助我们快速搭建项目结构。

# 安装Yeoman
npm install -g yo

# 安装MEAN.js的Yeoman插件
npm install -g generator-meanjs

# 生成一个新的MEAN.js项目
yo meanjs

通过上述步骤，你可以轻松地搭建一个完整的MEAN架构的Web应用。希望这个示例能够帮助你更好地理解MEAN架构的工作原理。


mean.io，模板项目，看上去不错。比起自己构建整套环境，能标准化。

但是服务端render模板，js和css没有concat，会有很多js和css请求，如果像rails一样有assets pipeline就好多了。

MEAN架构是基于JavaScript的一整套Web开发方案，涵盖了后端到前端的所有技术栈。下面是具体的介绍和示例代码。

MEAN架构简介

  • MongoDB: NoSQL数据库，支持JSON格式的数据存储。
  • Express: 基于Node.js的Web应用程序框架。
  • Angular: JavaScript前端框架，提供双向数据绑定。
  • Node.js: V8引擎上的JavaScript运行时环境。

示例代码

MongoDB操作示例

// 引入mongodb模块
const MongoClient = require('mongodb').MongoClient;

// 连接到MongoDB服务器
MongoClient.connect("mongodb://localhost:27017/mydatabase", (err, db) => {
    if (err) throw err;
    console.log("Database created!");
    // 关闭数据库连接
    db.close();
});

Express后端API示例

// 引入express模块
const express = require('express');
const app = express();

// 定义一个简单的GET请求处理
app.get('/api/data', (req, res) => {
    res.send({ message: 'Hello from the server!' });
});

// 监听端口
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Angular前端示例

创建一个简单的Angular组件，显示从后端获取的数据：

<!-- app.component.html -->
<div>
  <h1>{{ message }}</h1>
</div>

// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  message: string;

  constructor(private http: HttpClient) {
    this.http.get<{message: string}>('/api/data')
      .subscribe(data => {
        this.message = data.message;
      });
  }
}

以上就是MEAN架构的基本概念及示例代码。希望这些示例能帮助你更好地理解和使用MEAN架构进行全JavaScript Web开发。

回到顶部