nodejs教程之制作一个简单的文章发布系统

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

① 新闻类型管理

② 新闻管理(具有图片上传功能)

③ 新闻浏览

功能虽然不多,但是也涵盖很多基本操作了,程序不过增删查改嘛,外加上传附件,够了。于是开始我们今天的学习吧

准备工作

根据昨天的折腾后,我们已经有了nodeJS与mongoDB环境了,现在直接新建工程文件与数据库文件即可

第一步,打开命令符切换到D盘后输入

复制代码 代码如下:

D:\>express -e news

于是系统会自动开开心心构建基本环境

nodejs教程之制作一个简单的文章发布系统

很明显,里面很多模块依赖没有,这个时候将昨天的package.json直接考过来:

复制代码 代码如下:


{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.8",
    "ejs": "*",
    "mongodb": "*"
  }
}

然后切换到项目目录下:

复制代码 代码如下:

nmp install

依赖文件全部搞下来了,然后我们输入

复制代码 代码如下:


D:\news>node app
Express server listening on port 3000


于是,我们的程序高高兴兴的运行起来了,打开网址一看,确实没问题

PS:这里有个问题需要注意,我们下载下来的文件不是UTF-8编码,所以中文可能有乱码,文件编码需要各位自己统一

程序跑起来了就需要数据库相关的配置了

① 首先在mongoDB目录中新建news文件夹

② 为项目新增配置文件settings.js

复制代码 代码如下:


module.exports = {
  cookieSecret: 'myNews',
  db: 'news',
  host: 'localhost'
};

③ 新建models目录,新建db.js

复制代码 代码如下:


var settings = require('../settings'),
    Db = require('mongodb').Db,
    Connection = require('mongodb').Connection,
    Server = require('mongodb').Server;
module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), { safe: true });

④ 在桌面新建news.bat程序

复制代码 代码如下:

d:\mongodb\bin\mongod.exe -dbpath d:\mongodb\news

以后要启动数据库,只需要运行他即可,如此,我们初步的准备工作基本结束

但是这里有两个比较烦的事情,一个是每次要启动news程序很烦,二个是修改任何东西都需要重启,于是我们这里先解决这两个问题

① 在桌面新建news_app.bat,以后运行他就可以启动程序了

复制代码 代码如下:

node d:\news\app

② supervisor为一进程保护程序,我们可以使用他帮我们重启程序,首先按照,然后调整我们的node_app.bat

复制代码 代码如下:

supervisor d:\news\app

当然之前需要安装:

复制代码 代码如下:

npm install -g supervisor

这个样子后,修改了文件就不需要手动重启了(需要将news_app放到项目目录下),于是准备工作到此为止

项目结构

第一步结束后,我们就需要思考下项目结构了

① 首页为index这里将列出所有新闻类型以及对于新闻条目

② 各个新闻条目拥有编辑/删除/查看 三个按钮

③ 首页具有增加新闻按钮(增加时候可上传图片)

基本功能如上

于是,我们去掉app里面的路由功能,将路由全部放到index里面

复制代码 代码如下:


//将路由功能放入index
//app.get('https://www.jb51.net/', routes.index);
//app.get('/users', user.list);
routes(app);

复制代码 代码如下:


module.exports = function (app) {
  //主页,现在也是首页
  app.get('https://www.jb51.net/', function (req, res) {
    res.render('index', { title: 'Express' });
  });
  app.get('/add', function (req, res) {
    res.send('增加新闻请求');
  });
  app.get('/delete', function (req, res) {
    res.send('删除新闻请求');
  });
  app.get('/view', function (req, res) {
    res.send('查看新闻请求');
  });
  app.get('/update', function (req, res) {
    res.send('修改新闻请求');
  });
};

第一步简单如此,因为增加新闻应该有单独的页面,而具体点击增加按钮又会有其他处理,所以内部还得细分各个请求,现在规定如下:

/ 默认页面,该页面显示所有类型以及新闻,并带有删除按钮

/add 进入添加新闻页面

/addNews 添加新闻具体post请求地址(点击按钮时候的响应)

/delete 删除新闻请求

/view 具体新闻查询

于是稍微修改下上述路由:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgswpf.html