Create a simple article publishing system _ node. js

This article mainly describes how to use nodejs to create a simple article publishing system. Using mongodb databases, the time is relatively tight, and the function is relatively simple. It only involves addition, deletion, modification, and query, and nearby uploads, if you have the same requirements, refer Preface

We are going to create a simple news publishing system today. The first stage of the system does not need to be too difficult. It mainly has the following functions:

① News Type Management

② News management (with image upload function)

③ News browsing

Although there are not many functions, it also involves many basic operations. It is enough for programs to add, query, modify, and upload attachments. So let's start learning today.

Preparations

After yesterday's tossing, we already have the node. js and mongoDB environments. Now we can directly create project files and database files.

Step 1: Open the command string, switch to disk D, and enter

The Code is as follows:

D: \> express-e news

As a result, the system will automatically be happy to build the Basic Environment

Obviously, many modules are not dependent on each other. At this time, we will take the package. json from yesterday as an example:

The Code is as follows:

{
"Name": "application-name ",
"Version": "0.0.1 ",
"Private": true,
"Scripts ":{
"Start": "node app. js? 1.1.9"
},
"Dependencies ":{
"Express": "3.4.8 ",
"Ejs ":"*",
"Mongodb ":"*"
}
}

Switch to the project directory:

The Code is as follows:

Nmp install

All the dependent files are involved, and then we enter

The Code is as follows:

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

As a result, our program is very happy to run, open the web site to see, it is indeed no problem

PS: Here is a problem need to pay attention, we downloaded the file is not UTF-8 encoding, so Chinese may have garbled, file encoding needs to be unified by yourself

When the program runs, database-related configuration is required.

① Create a news folder in the mongoDB directory

② Add the configuration file settings. js for the project

The Code is as follows:

Module. exports = {
CookieSecret: 'mynew ',
Db: 'News ',
Host: 'localhost'
};

③ Create the models directory and db. js

The Code is as follows:

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 });

④ Create a news. bat program on the desktop

The Code is as follows:

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

To start the database in the future, you only need to run it. In this way, our preliminary preparation work is basically over.

However, there are two annoying things here: one is that it is annoying to start the news program every time, and the other is that everything needs to be modified and restarted. So we will solve these two problems first.

① Create news_app.bat on the desktop and run it to start the program.

The Code is as follows:

Node d: \ news \ app

② Supervisor is a process protection program. We can use it to help us restart the program. First, follow and adjust our node_app.bat.

The Code is as follows:

Supervisor d: \ news \ app

Of course, you need to install:

The Code is as follows:

Npm install-g supervisor

After modifying the file, you do not need to manually restart it (you need to put news_app under the project directory). So the preparation ends.

Project Structure

After the first step, we need to think about the project structure.

① The homepage is index. All news types and news entries are listed here.

② Each news entry has three buttons: Edit, delete, and view.

③ The homepage has a button for adding News (images can be uploaded when adding News)

The basic functions are as follows:

So we removed the routing function in the app and put all the routes in the index.

The Code is as follows:

// Add the routing function to the index
// App. get ('/', routes. index );
// App. get ('/users', user. list );
Routes (app );

The Code is as follows:

Module. exports = function (app ){
// Home page, which is now the home page
App. get ('/', function (req, res ){
Res. render ('index', {title: 'express '});
});
App. get ('/add', function (req, res ){
Res. send ('add news requests ');
});
App. get ('/delete', function (req, res ){
Res. send ('delete a news request ');
});
App. get ('/view', function (req, res ){
Res. send ('view news requests ');
});
App. get ('/Update', function (req, res ){
Res. send ('modify news requests ');
});
};

The first step is as simple as this. Because there should be a separate page for adding news, and there will be additional processing for clicking the Add button, you have to subscribe each request internally. The rules are as follows:

/Default page. All types and news are displayed, with the delete button.

/Add To Go To The add news page

/AddNews Add the specific post request address of the News (response when the button is clicked)

/Delete: delete a news request

/View specific news Query

Then modify the preceding route slightly:

The Code is as follows:

Module. exports = function (app ){
// Home page, which is now the home page
App. get ('/', function (req, res ){
Res. render ('index', {title: 'express '});
});
App. get ('/add', function (req, res ){
Res. send ('add news page ');
});
App. post ('/addnew', function (req, res ){
Res. send ('process and add news requests ');
});
App. get ('/delete', function (req, res ){
Res. send ('delete a news request ');
});
App. get ('/view', function (req, res ){
Res. send ('view news requests ');
});
};

Therefore, we need to create several templates to organize our webpage. Here we will not separate the header and tail as long as the simplest page.

Add and view template files are added, which are consistent with index. ejs and are related to modifying navigation.

The Code is as follows:

Module. exports = function (app ){
// Home page, which is now the home page
App. get ('/', function (req, res ){
Res. render ('index', {title: 'express '});
});
App. get ('/add', function (req, res ){
Res. render ('add', {title: 'add news page '});
});
App. post ('/addnew', function (req, res ){
Res. send ('process and add news requests ');
});
App. get ('/delete', function (req, res ){
Res. send ('delete a news request ');
});
App. get ('/view', function (req, res ){
Res. render ('view', {title: 'view news requests '});
});
};

Now the project structure is complete

Data Operations

After the overall structure comes out, we need to perform data operations:

① Add data (Add news)

② Display data (display News)

③ Delete data (delete News)

It still involves type operations, but it is easy to get confused because it is easy to do it for the first time.

Add news

Here, we will not use form submission. We will use ajax ...... here zepto library is introduced by the way, so our page becomes like this

The Code is as follows:

<Br/> <% = title %>