的Nodejs教程作了一个简单的文章发布系统

前言

今天我们要做一个简单的新闻发布系统。系统的第一阶段不需要太困难,主要有以下功能

新闻类型管理

新闻管理(附图片上传功能)

新闻浏览

虽然功能不多,但也涵盖了很多基本操作,但是程序是添加、删除、检查和更改,并添加附件,足够了,所以今天就开始学习吧。

死的工作

昨天的折腾后,我们有Nodejs和MongoDB环境,现在直接新的工程文件和数据库文件

首先,打开命令切换到D盘并输入。

复制代码代码如下:

这样系统就会自动打开基本的环境。



很明显,许多的模块,它不依赖于它,这一次package.json测试直接从昨天:

复制代码代码如下所示:

{

:应用程序名称

版本:0.0.1

私有:正确,

脚本:{

开始:节点应用程序

},

依赖项:{

表达:3.4.8

EJS: *

MongoDB :*

}

}



然后切换到项目目录:

复制代码代码如下:NMP安装

所有依赖项都完成了,然后我们进入

复制代码代码如下所示:

D:EWS >节点的应用程序

Express服务器监听端口3000





所以,我们的程序运行起来很开心,打开网站看看,真的没问题。

这里有个问题。我们需要注意我们不是UTF-8编码的文件下载,所以中国会有乱码,和文件编码需要自己的统一。

程序运行完毕,需要与数据库相关的配置。

首先,在MongoDB目录建立一个新的消息的文件夹

额外的配置文件settings.js为项目

复制代码代码如下所示:

module.exports = { {

CookieSecret:'mynews,

DB:新闻,

主持人:'localhost

};



(3)新模型和新的db.js目录

复制代码代码如下所示:

var设置=需要(设置),

DB =需要('mongodbDb),

连接=需要('mongodb连接),

服务器要求('mongodb服务器);

module.exports =新的DB(settings.db,新的服务器(settings.host,连接。default_port),{安全:真});



在桌面上创建一个新的news.bat程序

复制代码代码如下:D: mongod.exe MongoDB仓-独立D: MongoDB EWS

以后再启动数据库,只需要运行他,所以我们的前期准备工作基本完成了。

但是有两件烦人的事。一个是每次启动新闻节目都很烦人,21个是修改所有的东西,所以我们需要重新启动它,所以我们首先要解决这两个问题。

(1)在桌面上的新news_app.bat,然后他可以启动程序

复制代码代码如下:节点d:EWS 程序

管理是一个过程,保护程序,我们可以用他来帮助我们启动程序,第一,然后调整我们的node_app.bat

复制代码代码如下:EWS 程序

当然,您需要先安装它:

复制代码如下:NPM安装- G主管

在那之后,你不需要手动重新启动文件(你需要把news_app在项目目录中),所以你可以在这里工作。

项目结构

在第一步之后,我们需要考虑项目的结构。

第一页是索引,其中所有的新闻类型和新闻项目将被列出。

每个新闻项目有三个按钮可编辑/删除/查看

(3)头版有增加的按钮(当增加可以上传到图片)

基本功能,如

因此,我们删除了应用程序内部的路由函数,并将所有路由放入索引中。

复制代码代码如下所示:

索引中的路由函数

/ / app.get(路线。指数);

/ / app.get( /用户,用户列表);

路线(APP);



复制代码代码如下所示:

module.exports =功能(APP){

/家,现在是家

app.get(/功能(REQ,RES){

res.render('index,{标题:'express});

});

app.get( /添加功能(REQ,RES){

res.send('increase消息请求);

});

app.get( /删除功能(REQ,RES){

res.send('delete消息请求);

});

app.get( /查看功能(REQ,RES){

res.send('消息的请求);

});

app.get( /更新功能(REQ,RES){

res.send('modify消息请求);

});

};



第一步很简单。因为应该有单独的页面来增加新闻,并且在单击Add按钮时还有其他的处理方法,所以我们必须在内部划分请求。

默认页面,它显示所有类型和新闻,并有一个删除按钮。

添加进入添加新闻页面

/ addnews添加新闻的具体地址(POST请求响应单击按钮时)

删除删除新闻请求

查看特定新闻查询

所以上面提到的路由改变了一点:

复制代码代码如下所示:

module.exports =功能(APP){

/家,现在是家

App.get ('/', function (req, RES) {

res.render('index,{标题:'express});

});

app.get( /添加功能(REQ,RES){

res.send('add新闻页面);

});

app.post( / addnews功能(REQ,RES){

res.send('加工添加新闻的请求);

});

app.get( /删除功能(REQ,RES){

res.send('delete消息请求);

});

app.get( /查看功能(REQ,RES){

res.send('消息的请求);

});

};



因此,我们需要建立几个新的模板来组织我们的网页,只要没有最简单的页面,我们就不会把我们的头和尾巴分开。

新的添加和查看两模板文件,临时index.ejs性能一致,并修改导航相关

复制代码代码如下所示:

module.exports =功能(APP){

/家,现在是家

app.get(/功能(REQ,RES){

res.render('index,{标题:'express});

});

app.get( /添加功能(REQ,RES){

res.render('add,{标题:添加新闻页面});

});

app.post( / addnews功能(REQ,RES){

res.send('加工添加新闻的请求);

});

app.get( /删除功能(REQ,RES){

res.send('delete消息请求);

});

app.get( /查看功能(REQ,RES){

res.render(',{标题:看新闻的要求' });

});

};



项目结构的结束

数据操作

当整个结构出来时,我们需要做数据操作。

增加数据(增加新闻)

显示数据(显示新闻)

删除数据(删除新闻)

它也参与了操作的类型,但它是这样做的,无论他做了什么,因为它很容易被混淆为第一次。

加大新闻

在这里,我们不使用表单提交,我们使用ajax…Here the zepto library by the way, so our page is like this

复制代码代码如下所示:

























标题:uff1a





内容:











$(文档)Ready(函数(){)

$(# OK)。Click(function(){)

var参数= { };

param.title = $(#标题)瓦迩();

param.content = $(#内容)。瓦迩();

美元。后( / addnews参数,函数()){

console.log('add成功);

});

});

});











虽然还没有请求响应程序,但数据不会被处理。此外,这里没有附件。

ps:比较麻烦的是ajax处理后的图片有点麻烦,所以我们这里有个不错的变化,回到窗体操作中,或者是多长时间…

复制代码代码如下所示:























标题:uff1a





图片:





内容:

















你不需要用这种方式去多想附件。首先,让我们从请求过程开始。在这里,我们首先在公共中创建一个新的新闻文件夹来存储它的图片。

模型

添加在模型文件夹的news.js文件,为它建立一个实体,并提供额外的查询相关的操作:

复制代码代码如下所示:

VaR MongoDB =需要('。 / DB);

功能新闻(标题,内容,图片){

this.title =标题;

this.content =内容;

this.pic = / /保存照片;存储路径

};

module.exports =新闻;

数据存储

news.prototype = { {

保存:函数(回调){

日期=新日期();

var时间= {

日期:日期,

年:date.getfullyear(),

月:date.getfullyear()+-+(date.getmonth()+ 1),

天:date.getfullyear()+-+(date.getmonth()+ 1)+-+ date.getdate(),

分钟:date.getfullyear()+-+(date.getmonth()+ 1)+-+ date.getdate()+++

date.gethours()+:+(date.getminutes()<10 '0' + date.getminutes()):date.getminutes())

}

数据存储对象

var新闻{ {

标题:this.title,

内容:this.content,

图:this.pic / /图像处理最后,现在第一个随机存

时间:时间

};

打开数据连接,打开是回调……

mongodb.open(功能(呃,DB){

错误出口

如果(错误){

返回回调(错误);

}

打开新闻集

db.collection(新闻功能(呃,收藏){

如果(错误){

Mongodb.close();

返回回调(错误);

}

写集(对数据库)

Collection.insert(新闻,{安全:true},功能(ERR){)

返回回调(错误);

});

回调(NULL)

});

});

}

};



因此,写入数据库的程序是可用的。在这里,我们将尝试插入数据库,当然,您需要在路由点修改程序。

西蒙兹:当然,路由办公室不能编写很多逻辑代码,而这个文件必须在以后分开。

在这个时候,里面/ addnews需要逻辑被改变

复制代码代码如下所示:

app.post( / addnews功能(REQ,RES){

var title= req.body.title;

无功量= req.body.content;

var pic = req.body.pic;

新新闻(标题,内容,图片)

news.save(功能(呃,数据){

res.send(数据);

})

});





询盘,问题不大,现在解决附录问题。

上传图片

上传图片的功能是以表达本身为支撑的。表达解析请求体通过bodyparser,然后上传文件通过他。其内部强大的使用。

这里的app.use(express.bodyparser())在app.js改变:

复制代码代码如下:app.use(express.bodyparser({ keepextensions:真的,uploaddir:'。 /公众/新闻})));

打开index.js并添加一行代码前面:

复制代码如下:FS =需要('fs),

修改索引文件:

复制代码代码如下所示:

app.post( / addnews功能(REQ,RES){

对于(VAR我请求文件){

如果(REQ。文件{我} = = 0){

删除文件同步

Fs.unlinkSync(REQ。文件{我}。路径);

console.log(''成功删除一个空文件);

{人}

VaR路径= '。 / / /公共新闻R9+REQ。文件名{我};

使用同步/重命名文件

Fs.renameSync(REQ。文件{我}。路径,路径);

console.log('sunccess更名文件);

}

}

标题= req.body.title /无功;

内容= req.body.content /无功;

PIC = req.body.pic /无功;

新闻新消息(标题,内容,图片)

/ / news.save(功能(呃,数据){

/ / res.send(数据);

}

});



此时选择文件时,单击添加消息,并将文件上传。



此时,我只需要在数据库中记录文件的名称。文件目录中有图片。

复制代码代码如下所示:

app.post( / addnews功能(REQ,RES){

var = null;

对于(VAR我请求文件){

如果(REQ。文件{我} = = 0){

删除文件同步

Fs.unlinkSync(REQ。文件{我}。路径);

console.log(''成功删除一个空文件);

{人}

VaR路径= '。 / / /公共新闻R9+REQ。文件名{我};

使用同步/重命名文件

Fs.renameSync(REQ。文件{我}。路径,路径);

console.log('sunccess更名文件);

}

PIC =请求文件{我的名字};

}

var title= req.body.title;

无功量= req.body.content;

新新闻(标题,内容,图片)

news.save(功能(呃,数据){

res.send(数据);

})

res.send(请求成功,返回首页);

});





数据库中有数据,我们有目录中的文件。现在我们只需要读取数据。

西蒙兹:假期的兄弟们准备出去喝一杯。

读取数据

第二步,当然是读取数据,第一个是读取首页上的数据:

复制代码代码如下所示:

VaR MongoDB =需要('。 / DB);

功能新闻(标题,内容,图片){

this.title =标题;

this.content =内容;

this.pic = / /保存照片;存储路径

};

module.exports =新闻;

数据存储

news.prototype = { {

保存:函数(回调){

日期=新日期();

数据存储对象

var新闻{ {

标题:this.title,

内容:this.content,

图:this.pic / /图像处理最后,现在第一个随机存

日期:日期

};

打开数据连接,打开是回调……

mongodb.open(功能(呃,DB){

错误出口

如果(错误){

返回回调(错误);

}

打开新闻集

db.collection(新闻功能(呃,收藏){

如果(错误){

Mongodb.close();

返回回调(错误);

}

写集(对数据库)

Collection.insert(新闻,{安全:true},功能(ERR){)

返回回调(错误);

});

回调(NULL)

});

});

}

};

阅读本文及相关信息

news.get =功能(ID,回调){

打开数据库

mongodb.open(功能(呃,DB){

如果(错误){

返回回调(错误);

}

db.collection(新闻功能(呃,收藏){

如果(错误){

Mongodb.close();

返回回调(错误);

}

var查询{ };

如果(id){

query.id = ID;

}

根据查询对象查询

Collection.find(查询)。排序({

日期:1

})。ToArray(功能(呃,数据){ }

Mongodb.close();

如果(错误){

返回回调(错误);失败!返回错误

}

回调(空、数据)!以数组的形式返回数组的结果。

});

});

});

};

news.js



复制代码代码如下所示:





























标题:uff1a



内容:



附件:





> >删除



















后记

好了,文章发布系统的生产首先来到这里,然后我们将逐步增加功能,慢慢去做美化。