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

前言

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

① 新闻类型管理

② 新闻管理（具有图片上传功能）

③ 新闻浏览

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

准备工作

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

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

代码如下:

D:\>express -e news

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

很明显，里面很多模块依赖没有，这个时候将昨天的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('/', routes.index);
//app.get('/users', user.list);
routes(app);

代码如下:

module.exports = function (app) {
  //主页，现在也是首页
  app.get('/', 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 具体新闻查询

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

代码如下:

module.exports = function (app) {
  //主页，现在也是首页
  app.get('/', function (req, res) {
    res.render('index', { title: 'Express' });
  });
  app.get('/add', function (req, res) {
    res.send('添加新闻页面');
  });
  app.post('/addNews', function (req, res) {
    res.send('处理添加新闻请求');
  });
  app.get('/delete', function (req, res) {
    res.send('删除新闻请求');
  });
  app.get('/view', function (req, res) {
    res.send('查看新闻请求');
  });
};

于是我们需要新建几个模板组织我们的网页，这里我们先不分离头尾只要最简单的页面即可

新增add与view两个模板文件，暂时表现与index.ejs一致，并且修改导航相关

代码如下:

module.exports = function (app) {
  //主页，现在也是首页
  app.get('/', function (req, res) {
    res.render('index', { title: 'Express' });
  });
  app.get('/add', function (req, res) {
    res.render('add', { title: '添加新闻页面' });
  });
  app.post('/addNews', function (req, res) {
    res.send('处理添加新闻请求');
  });
  app.get('/delete', function (req, res) {
    res.send('删除新闻请求');
  });
  app.get('/view', function (req, res) {
    res.render('view', { title: '查看新闻请求' });
  });
};

至此项目结构结束

数据操作

整体结构出来后，我们就需要进行数据操作了：

① 增加数据（增加新闻）

② 展示数据（展示新闻）

③ 删除数据（删除新闻）

本来还涉及到类型操作的，但是做着做着给搞没了，暂时不管他吧，因为首次做容易迷糊

增加新闻

这里，我们就不使用表单提交了，我们用ajax......这里顺便引入zepto库，于是我们的页面成了这样

代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>
        <%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="javascripts/zepto.js" type="text/javascript"></script>
</head>
<body>
    <h1>
        <%= title %></h1>
    <div>
        标题：<input type="text" id="title" />
    </div>
    <div>
        内容：<textarea id="content"></textarea>
    </div>
    <div>
        <input type="button" type="button" id="ok" value="添加新闻" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ok').click(function () {
                var param = {};
                param.title = $('#title').val();
                param.content = $('#content').val();
                $.post('/addNews', param, function () {
                    console.log('添加成功');
                });
            });
        });
    </script>
</body>
</html>

虽然现在还没有请求响应程序，所以数据并不会被处理，另外我们这里的附件也没有（现在附件只允许一个好了），于是再修改下代码，加入图片：

PS：比较麻烦的是图片经过ajax处理有点麻烦，所以我们这里乖乖的换回form操作算了，不然又要搞多久......

代码如下:

<html>
<head>
    <title>
        <%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
    <h1>
        <%= title %></h1>
    <form enctype="multipart/form-data" method="post"  action="/addNews">
    <div>
        标题：<input type="text" id="title" name="title" />
    </div>
    <div>
        图片：<input type="file" id="pic" name="pic" />
    </div>
    <div>
        内容：<textarea id="content" name="content"></textarea>
    </div>
    <div>
        <input  type="submit" id="ok" value="添加新闻" />
    </div>
    </form>
</body>
</html>

这个样子就不需要过多的考虑附件问题，先暂时如此吧，现在先处理请求程序，这里先在public里面新建news文件夹用于存储其图片

model

在models文件夹新增news.js文件，为其构建实体，并赋予新增查询相关操作:

代码如下:

var mongodb = require('./db');

function News(title, content, pic) {
  this.title = title;
  this.content = content;
  this.pic = pic;//保存存储路径
};
module.exports = News;
//存储数据
News.prototype = {
  save: function (callback) {
    var date = new Date();
    var time = {
      date: date,
      year: date.getFullYear(),
      month: date.getFullYear() + "-" + (date.getMonth() + 1),
      day: date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(),
      minute: date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +
      date.getHours() + ":" + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
    }
    //数据存储对象
    var news = {
      title: this.title,
      content: this.content,
      pic: this.pic, //图片处理最后来说，现在先乱存
      time: time
    };
    //打开数据连接，打开就是一个回调......
    mongodb.open(function (err, db) {
      //错误就退出
      if (err) {
        return callback(err);
      }
      //打开news集合
      db.collection('news', function (err, collection) {
        if (err) {
          mongodb.close();
          return callback(err);
        }
        //写入集合（写入数据库）
        collection.insert(news, { safe: true }, function (err) {
          return callback(err);
        });
        callback(null);//err为null
      });
    });
  }
};

于是，写入数据库的程序就有了，这里我们来试试能不能插入数据库，当然需要修改路由处的程序

PS：路由处当然不能写过多逻辑代码，这个文件以后还得分离

这个时候/addNews里面的逻辑需要改变

代码如下:

app.post('/addNews', function (req, res) {
  var title = req.body.title;
  var content = req.body.content;
  var pic = req.body.pic;
  var news = new News(title, content, pic)
  news.save(function (err, data) {
    res.send(data);
  })
});

查询下，问题不大，现在要解决的就是附件问题了

上传图片

上传图片功能express本身就支持了，express通过bodyParser解析请求体，然后便可通过他上传文件了，其内部使用了formidable

这里将app.js里面的app.use(express.bodyParser())改为：

代码如下:

app.use(express.bodyParser({ keepExtensions: true, uploadDir: './public/news' }));

打开index.js，在前面加一行代码：

代码如下:

fs = require('fs'),

修改一下index文件：

代码如下:

app.post('/addNews', function (req, res) {
  for (var i in req.files) {
    if (req.files[i] == 0) {
      //同步方式删除一个文件
      fs.unlinkSync(req.files[i].path);
      console.log('success removed an empty file');
    } else {
      var path = './public/news/' + req.files[i].name;
      // 使用同步方式重命名一个文件
      fs.renameSync(req.files[i].path, path);
      console.log('sunccess renamed a file');
    }
  }
//    var title = req.body.title;
//    var content = req.body.content;
//    var pic = req.body.pic;
//    var news = new News(title, content, pic)
//    news.save(function (err, data) {
//      res.send(data);
//    })
});

这个时候选取文件后点击添加新闻，我们的文件就上传上去了

这个时候，我只需要将文件名记录在数据库即可，文件目录里面就有图片了

代码如下:

app.post('/addNews', function (req, res) {
  var pic = null;
  for (var i in req.files) {
    if (req.files[i] == 0) {
      //同步方式删除一个文件
      fs.unlinkSync(req.files[i].path);
      console.log('success removed an empty file');
    } else {
      var path = './public/news/' + req.files[i].name;
      // 使用同步方式重命名一个文件
      fs.renameSync(req.files[i].path, path);
      console.log('sunccess renamed a file');
    }
    pic = req.files[i].name;
  }
  var title = req.body.title;
  var content = req.body.content;
  var news = new News(title, content, pic)
  news.save(function (err, data) {
    res.send(data);
  })
  res.send('<a href="./">请求成功，返回首页</a>');
});

数据库中有数据了，我们目录也有文件了，现在只需要将数据读出来了

PS：放假兄弟们催的凶，要出去喝酒了

读取数据

第二步当然是读取数据，首先是首页的数据读取：

代码如下:

var mongodb = require('./db');
function News(title, content, pic) {
  this.title = title;
  this.content = content;
  this.pic = pic;//保存存储路径
};
module.exports = News;
//存储数据
News.prototype = {
  save: function (callback) {
    var date = new Date();
    //数据存储对象
    var news = {
      title: this.title,
      content: this.content,
      pic: this.pic, //图片处理最后来说，现在先乱存
      date: date
    };
    //打开数据连接，打开就是一个回调......
    mongodb.open(function (err, db) {
      //错误就退出
      if (err) {
        return callback(err);
      }
      //打开news集合
      db.collection('news', function (err, collection) {
        if (err) {
          mongodb.close();
          return callback(err);
        }
        //写入集合（写入数据库）
        collection.insert(news, { safe: true }, function (err) {
          return callback(err);
        });
        callback(null); //err为null
      });
    });
  }
};
//读取文章及其相关信息
News.get = function (id, callback) {
  //打开数据库
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    db.collection('news', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      var query = {};
      if (id) {
        query.id = id;
      }
      //根据 query 对象查询文章
      collection.find(query).sort({
        date: -1
      }).toArray(function (err, data) {
        mongodb.close();
        if (err) {
          return callback(err); //失败！返回 err
        }
        callback(null, data); //成功！以数组形式返回查询的结果
      });
    });
  });
};
news.js

代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>
        <%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
    <h1>
        <%= title %></h1>
    <ul>
        <%for(var k in data) { %>
        <li>
            <div>
               标题： <%=data[k].title %></div>
            <div>
              内容：  <%=data[k].content%></div>
              <div>
              附件：<img src="news/<%= data[k].pic%>" /></div>
              </div>
              <div>
              <a href="/delete?id=<%=data[k] %>">删除</a>
              </div>
              <hr/>
        </li>
        <%} %>
    </ul>
</body>
</html>

结语

好了，文章发布系统的制作就先到这里了，以后我们再慢慢增加功能，慢慢做美化。

赞 (0)

相关推荐

  • nodejs教程之入门

    前言 再不学nodeJs,我们就老了......在HTML5大浪袭来的时候,很多先辈就开始了NodeJs之旅,而那时我还在做服务器端的程序 后来转成前端,和梯队的距离已经很大了,因为我会服务器端语言,还干了很久,所以至今才开始学习NodeJs,向完整的前端前进 这次学习NodeJs的计划是: ① 1-2周学习基础知识 ② 1周左右开发一个简单项目 ③ 利用NodeJs开发一套用于移动端调试的工具 ④ 打包相关(这个可能比较远了) NodeJs特点 ① 异步 从文件读取到网络请求,NodeJs皆以

  • nodejs教程之异步I/O

    前言 在我映像中,异步最早出现与ajax,当时我还在搞.net,然后.net居然出了一个异步的控件...... 虽然我最后知道了他不是异步的......然后,前端异步用得特别多,如果不是异步的程序,你都不好意思说是自己写的NodeJs是机遇javascript做出来的, 异步编程模型这一特点也被带了过来,异步有很多优点,但是对设计而言却是一个噩梦,异步会打乱时序,所以加大了设计困难, 但是异步对性能提升.对用户体验有了革命性的提高,所以NodeJS的 异步特性相当明显,今天我们就来简单学习 异步

  • nodejs教程之环境安装及运行

    nodejs教程之环境安装及运行

    让nodeJS跑起来 第一步当然是安装nodeJS环境了,现在windows安装nodeJS比较快了,直接下载即可: http://www.nodejs.org/download/ 这里根据需要下载,下载完成后直接下一步下一步即可,完了我们就具有nodeJS环境了 第二步,为了方便我们后面操作,我们直接在D盘见了一个文件夹blog 然后打开windows命令行工具,进入d盘,输入: 复制代码 代码如下: express -e blog 然后里面可能有依赖包,我们需要进入blog目录安装(安装的配

  • Windows系统中安装nodejs图文教程

    Windows系统中安装nodejs图文教程

    第一步:下载安装文件 官网下载地址:http://www.nodejs.org/download/ 第二步: 安装步骤 第三步: 检测是否安装完成

  • Nodejs的express使用教程

    Express 是一个简洁.灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用. 1.express组织结构 app demo |---node_modules------用于安装本地模块.     |---public------------用于存放用户可以下载到的文件,比如图片.脚本.样式表等.     |---routes------------用于存放路由文件.     |---views-------------用于存放网页的

  • Nodejs爬虫进阶教程之异步并发控制

    Nodejs爬虫进阶教程之异步并发控制

    之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回答才会再加载一部分,所以说如果直接发送一个问题的请求链接,取得的页面是不完整的.还有就是我们通过发送链接下载图片的时候,是一张一张来下的,如果图片数量太多的话,真的是下到你睡完觉它还在下,而且我们用nodejs写的爬虫,却竟然没有用到nodejs最牛逼的异步并发的特性,太浪费了啊. 思路 这次的的爬虫是上次那个的升级版,不过呢,上次那个虽

  • Nodejs从有门道无门菜鸟起飞必看教程

    这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不是只能运行在浏览器中,你千万别说,唉,是啊. 记得刚开始学HTML,CSS,JS的时候第一印象就是下载各种浏览器,因为兼容问题T_T,不过现在有个好消息学Nodejs它并没有兼容问题. 如果你想知道为什么Nodejs没有兼容问题,那你的先清楚前端为什么会有兼容问题,这里我提到前端是想说Nodejs它

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

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

    前言 我们今天就来做一个简单的新闻发布系统,系统第一阶段不需要太难,主要有以下功能 ① 新闻类型管理 ② 新闻管理(具有图片上传功能) ③ 新闻浏览 功能虽然不多,但是也涵盖很多基本操作了,程序不过增删查改嘛,外加上传附件,够了.于是开始我们今天的学习吧 准备工作 根据昨天的折腾后,我们已经有了nodeJS与mongoDB环境了,现在直接新建工程文件与数据库文件即可 第一步,打开命令符切换到D盘后输入 复制代码 代码如下: D:\>express -e news 于是系统会自动开开心心构建基本环

  • 利用Python制作一个简单的天气播报系统

    利用Python制作一个简单的天气播报系统

    目录 前言 工具 天气数据来源 代码实现 总结 前言 大家好,我是辣条 相信大家都能感觉到最近天气的多变,好几次出门半路天气转变.辣条也深受其扰,直接给我整感冒,就差被隔离起来了,既然天气我没法做主,那不如用python整个天气爬虫来获取天气情况.这样也好可以进行一个提前预防 工具 python3.7 pycharm pyttsx3:语音播报库 天气数据来源 找寻一个天气网站 比如说我们要查询某地的天气,在输入地名后就能看到结果. 我们可以看到网站的url会有变化: 每个城市的天气信息url就是

  • python制作一个简单的gui 数据库查询界面

    一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: import sys import tkinter as tk import mysql.connector as sql #--------------------查询函数--------------------------- def sql_connect(): listbox_show.del

  • 用React Native制作一个简单的游戏引擎

    简介 今天我们将学习如何使用React Native制作一个游戏.因为我们使用的是React Native,这个游戏将是跨平台的,这意味着你可以在Android.iOS和网络上玩同一个游戏.然而,今天我们将只关注移动设备.所以我们开始吧. 开始吧 要制作任何游戏,我们需要一个循环,在我们玩的时候更新我们的游戏.这个循环被优化以顺利运行游戏,为此我们将使用 React Native游戏引擎 . 首先让我们用以下命令创建一个新的React Native应用. npx react-native ini

  • PHP开发制作一个简单的活动日程表Calendar

    PHP开发制作一个简单的活动日程表Calendar

    材料取之深入PHP与JQuery开发,这本书实际上就是讲述一个活动日程表. 此文章适合从其它语言(如java,C++,python等)转到php,没有系统学习php,或者是php初学者,已经对程序有较深理解的朋友 以上为文件目录结构,public为程序根目录,目的是为了安全方面的考虑,把核心程序放在外界访问不到的地方. 本地的演示地址为:http://localhost/index.php 首先是数据库的脚本: /* Navicat MySQL Data Transfer Source Serv

  • MyBatis入门实例教程之创建一个简单的程序

    MyBatis入门实例教程之创建一个简单的程序

    准备: (1) IDEA 2021 (2)Java 1.8 (3)数据库 MySQL 5.7 (SQLyog 或 Navicat) 在 MySQL 中创建数据库 mybatisdemo,编码为 utf8 新建表: USE mybatisdemo CREATE TABLE users( uid INT PRIMARY KEY AUTO_INCREMENT, uname VARCHAR(20) NOT NULL, uage INT NOT NULL ); INSERT INTO users(uid,

  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管

  • 如何利用PyQt5制作一个简单的登录界面

    如何利用PyQt5制作一个简单的登录界面

    目录 环境配置 额外工具配置 生成UI界面 总结 环境配置 新建python虚拟环境并激活 conda create -n pyqt python=3.8 conda activate py36 安装pyqt5 pip install pyqt5 安装pyqt5-tools pip install pyqt5-tools 在PyCharm中新建一个qtdemo工程,并使用这个新建的python虚拟环境作为工程环境 额外工具配置 依次点击File---Settings---Tools---Exte

  • 探索Emberjs制作一个简单的Todo应用

    目标 使用Emberjs制作一个简单的Todo应用,实现这样一个效果:通过在文本框输入文本,创建一条代办事项,代办事项可以选择优先级,完成的事项可以删除. 准备 完成这个应用,需要做点准备: 1.创建一个html页面,暂时不管样式: 2.脚本:emberjs,handlebars.jQuery.这三个脚本可以从网上获得,我们将把他们加入到head标签里去. 制作 创建页面,加入脚本,就可以开始制作应用.html代码如下: 复制代码 代码如下: <!doctype html> <html&

  • 实现一个简单得数据响应系统

    目录 1.Dep 2.了解 obverser 3.了解 watch 和 observer 4.触发依赖 5.总结一下流程 1.Dep 其实,这就是一个依赖收集的容器, depend 收集依赖, notify 触发依赖 class Dep{ constructor() { this._subs = []; } depend () { this._subs.push(Dep.target) } notify() { this._subs.forEach(item => { item.fn(); })

随机推荐