我的编程空间,编程开发者的网络收藏夹
学习永远不晚

自己构建mean framework

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

自己构建mean framework


    由于项目的原因,项目的前端架构要从单纯的angularjs转到nodejs+angular+express的架构,这样的架构对大家来说可能比较眼熟,没错,就是大名鼎鼎的MEAN (mongodb,express,angularjs,node) framework。随着nodejs技术的日益成熟(当然io.js也逐渐崛起,并且和node重归于好),和其关联技术必将炙手可热,顺利成章地将全栈的概念更加普及。

    国内node社区很是活跃,比如说前端乱炖(http://www.html-js.com/),nodejs中文社区(https://cnodejs.org/,github上可以下载到源码),你当然也可以通过nodejs官方网站的企业登记页查询有哪些公司和项目在使用nodejs(https://github.com/joyent/node/wiki/Projects,-Applications,-and-Companies-Using-Node),包括我们熟知的公司有LinkedIn, Yahoo, Paypal, eBay, Walmart,Groupon 还有很多的中小型公司,国内的公司如雪球、淘宝、网易、百度等也都有很多项目运行在Node.js之上,并且很多项目都在向node迁移。node包和npm是捆绑在一起的,从npm包的数量就可以看到node的火热程度,截止此刻已经达到150355,一个月的download量甚至能达到亿的数量级。

      回到项目中来,从纯的angularjs项目迁移到MEAN,我以为是个不怎么复杂的任务,无非就是加入node的支持,Express框架的引入和页面继续沿用以前项目的结果就完事儿了,现在看来,真是很傻很天真,一个个问题并且没有思路解决的时候就开始怀疑自己这么做的可行性。后来我考虑使用generator来生成MEAN工程(我使用的是meanjs,meanstack),由于网络原因也均作罢(根据错误信息提示可能是bower引起的,后面再研究下),还是自己捯饬吧。

    下面记录下我捯饬的过程, 仅供参考。

    第一部分,我们建立node环境。

    首先,在某个目录下建立一个package.json文件,键入如下内容:

 {
      "name": "starter-mean",
      "main": "server.js",
      "dependencies": {
        "express" : "~4.5.1",
        "mongoose" : "~3.8.0",
        "body-parser" : "~1.4.2",
        "method-override" : "~2.0.2"        
      }
}

Express为4.5.1及其以上版本(Node的一个MVC框架,当然还有其他的mvc框架,如express-io,koa,Geddy,Total,Partial,Locomotive,Sails),mongoose为3.8.0及其以上版本,body-parser 和method-override为Express的内置模块。

    接下来我们使用npm install 装下node modules,安装成功后,在package.json同级目录下生成一个node_modules目录,该目录下是项目依赖的目录,即在package.json的dependencies中定义的模块。

    这时候该工程还不能启动,因为还没有定义node的入口,就像java的main方法。接下来在package.json的同级目录下定义一个server.js文件,即package.jso中的main字段,键入如下内容:

var express        = require('express');
var app            = express();
var mongoose       = require('mongoose');
var bodyParser     = require('body-parser');
var methodOverride = require('method-override');
	
// config files
var db = require('./config/db');

var port = process.env.PORT || 8080; 
// get all data/stuff of the body (POST) parameters
// mongoose.connect(db.url); // connect to our mongoDB database 
app.use(bodyParser.json()); // parse application/json 
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded

app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(express.static(__dirname + '/public')); // set the static files location /public/img will be /img for users

require('./app/routes')(app); // pass our application into our routes

app.listen(port);	
console.log('Magic happens on port ' + port); 			
exports = module.exports = app; 						

 如果想让你的工程链接mongodb,可以建立一个config目录,并建一个db.js,键入以下内容:

module.exports = {
	url : 'mongodb://<user>:<pass>@mongo.onmodulus.net:27017/uw45mypu'
}

我们在这里建一个数据模型,为支持操作mongodb,建立app/models/XXX.js, 可以键入如下内容,

// grab the mongoose module
var mongoose = require('mongoose');

// define our nerd model
// module.exports allows us to pass this to other files when it is called
module.exports = mongoose.model('demo', {
	name : {type : String, default: ''}
});

我不打算在demo中支持mongodb,只是示例而已。不过多解释。

我们还需要一个router,以便链接到我们的主页面,在app文件夹下建立一个router.js,键入:

module.exports = function(app) {

	// route to handle all angular requests
	app.get('*', function(req, res) {
		res.sendfile('./public/index.html');
	});

};

node的基本结构就是这样了,那么js文件,css文件,controller,server该怎么存放呢,Express要求建一个public文件夹用来存放这些文件。


为了保持同步,我们先看下现在的目录结构:

 自己构建mean framework


第二部分:建立WEB部分

我们先建立一个index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Starter MEAN Single Page Application</title>
</head>
<body>
      Mean framework!
</body>
</html>

下面我们启动下node服务,在server.js同级目录下启动命令行,执行

node server.js

在浏览器输入http://localhost:8080,如果看到“Mean framework ”,证明你的基本服务是ok的。


我们的demo还需要做如下几件事情:

 (1)css文件和js文件需要加载到页面

 (2)angularjs结构(controller,service,directive)

 (3)创建3个页面

 (4)使用ngRoute创建页面路由

 (5)使用bootstrap构建页面

 静态文件管理

 既然是新的架构,我们将采用新的管理文件工具bower。如果你还在用传统的手工方法搜索、下载js/css文件,那你就out的不行了。首先,确保你的机器已经安装bower,如果没有安装,可以通过如下命令安装:

npm install -g bower

之后,我们需要另外两个文件(.bowerrc和bower.json)文件才能让bower为我们工作,在工程根目录建立这两个文件,在 .bowerrc文件中键入文件目录,以后通过bower安装的文件都可以在这个目录下找到。

{
	"directory": "public/libs"
}


在bower.json中,输入中如下内容:

{
	"name": "angular",
	"version": "1.0.0",
	"dependencies": {
		"bootstrap": "latest",
		"angular": "latest",
		"angular-route": "latest"	
	}
}

dependencies字段中指明我们需要的第三方库,以后我们需要引入别的库,只需要在该文件中配置即可,然后执行:

bower insall

下载依赖库并把依赖库赋值到相应的目录下(注意:如果执行bower install报错时,错误的信息为无法链接到github.com,可以在执行该命令前执行

git config --global url."https://".insteadOf git://

将git://协议替换为https协议)。

是不是发现public/lib目录下多了些文件,现在你可以随意使用了。

我们最后看下新的文件结构:

自己构建mean framework

这里不在贴各个文件的代码,有需要的请查看附件,但是由于附件大小的限制,不再提供node_modules,请自行执行npm install && bower insall .

最后附上效果图:

自己构建mean framework

如果有问题请联系我。谢谢!

附件:http://down.51cto.com/data/2365706

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

自己构建mean framework

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么构建自己的react hooks

这篇文章主要介绍怎么构建自己的react hooks,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 常用的一个 hooks官方中提供了几个内置的钩子,我们简单了解下他们的用法。1.1 useState: 状态钩子
2023-06-15

Linux中怎么构建自己的Wiki

这篇文章主要为大家展示了“Linux中怎么构建自己的Wiki”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Linux中怎么构建自己的Wiki”这篇文章吧。Wiki是一种在网络上开放且可供多人协同
2023-06-28

怎么构建一个自己的Laravel包

这篇“怎么构建一个自己的Laravel包”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么构建一个自己的Laravel包”文
2023-07-04

使用 WAL 构建你自己的 KV 存储

用户写入数据,实际就是先写入到 wal 中,写到 wal 之后,你会得到一个位置信息 ChunkPosition,然后把 Key+ChunkPosition 存储到内存数据结构中即可。

利用 Vely 在 Linux 构建你自己的 SaaS

Vely 可让你在网络应用程序中利用 C 语言的强大功能。
VelyLinuxSaaS2024-11-30

怎么构建自己的docker容器镜像

本文小编为大家详细介绍“怎么构建自己的docker容器镜像”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么构建自己的docker容器镜像”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一. 设置docker构建
2023-07-05

十分钟学会构建自己的镜像

制作Docker镜像一般有2种方法:使用hub仓库中已有的环境,安装自己使用的软件环境后完成image创建;通过Dockerfile,完成镜像image的创建

为什么建议你构建自己的知识体系?

在电影《教父》中,有一句台词:“在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人,自然是不一样的命运。”

使用python构建一个自己的聊天室

这篇文章主要介绍了使用python构建一个自己的聊天室,有助于帮助小伙伴们理解掌握Python的socket编程,需要的朋友可以参考下
2023-05-14

Ollama如何构建自己的Llama3中文模型

Ollama 设计为一个框架,旨在简化在 Docker 容器中部署和管理大型语言模型的过程,使得这一过程变得简单快捷。用户可以通过简单的命令行操作,快速在本地运行如 Llama 3 这样的开源大型语言模型。

如何构建自己的脸部模糊工具

去身份是指将数据匿名化的过程。随着欧洲联盟的GDPR和其他国家的类似措施的实施,保护PII(个人身份信息)成为准备数据集或任何个人信息处理的必要步骤。

如何构建自己的可引导 Linux Live CD

使用 Linux,创建 DIY 可引导的 live CD 非常容易。了解如何构建您自己的可引导 Linux live CD,从软件到创建光盘和查找 ISO。
LinuxLiveCD2024-12-13

教你学会构建自己的迷你版ChatGPT

构建自己的迷你版ChatGPT可以通过以下步骤实现:1. 数据收集:收集足够的对话数据作为模型的训练集。可以从公开的对话数据集中获取,或者自己创建一个。确保数据集包含各种对话主题和语境。2. 数据预处理:对收集到的数据进行预处理。首先,将对
2023-10-11

不要将自己锁定在自己的架构中

早在2006年,事务处理的开山鼻祖,数据库领域图领奖得主Jim Gray与Werner Vogels 进行了“第一次”对话。对话的主题是“向亚马逊技术平台学习”,而吊诡之处在于,Jim Gray所开创的事务处理是亚马逊电子商务的技术基础。

手动构建自己的docker容器镜像实战

这篇文章主要介绍了如何手动构建自己的镜像并上传到镜像仓库中,文中有详细的代码实例,需要的朋友可以参考阅读
2023-05-15

使用 Java 构建你自己的文本编辑器

有时候,除你自己外,没有人能制作你所梦想的工具。以下是如何开始构建你自己的文本编辑器。

编程热搜

目录