的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
内容:
附件:
> >删除
后记
好了,文章发布系统的生产首先来到这里,然后我们将逐步增加功能,慢慢去做美化。