Server: Node + Express + mongodb Front-end: Vue2.0 + Vuex + AXIos Location: m.dayread. Top

Although it is a small project for training, it also provides a complete interaction process. For those who want to get started with NodeJs and VueJs, this article is also a summary of their own learning process. I hope you can point out some mistakes or inadequacies.

Server-side code implementation

First, MongoDB needs to be installed. Comments can be saved, liked or clicked, and deleted in the database. MongoDB can be added, deleted, and checked and modified in the database. Add, delete, check and change MongoDB based on Mongoose in Node, OK, after understanding these, we began to write the code of the server side.

Connect to the database and start the service

const mongoose = require('mongoose'), express = require('express'), app = express(), pathName = __dirname, The db = mongoose. Connect (' mongo: / / 127.0.0.1:27017 / data '); mongoose.Promise = global.Promise; const port = process.env.PORT || 8886; app.use(express.static(pathName)); app.listen(port); console.log(`server is start on port:${port}`); Db.connection. on('error', function () {console.log(' Database connection failed! ')}); Db.connection. on('open', function () {console.log(' Database connected! ')});Copy the code

Define pattern

comment = mongoose.model('comment', {
    content: String,
    time: String,
    acc: Number,
    ref: Number
  });Copy the code

Adding a Data Interface

app.get('/add', function (req, res) {

  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  let data = {
    content: '',
    time: '',
    acc: 0,
    ref: 0
  };

  console.log(req.query)
  data.content = req.query.content;
  data.time = new Date().getTime();

  addData(data, function (v) {
    if (v.code === 0) {
      res.send(v)
    } else {

      res.send(v)
    }

  });
});Copy the code

AddData is a function I encapsulated to save data to the database. The specific implementation of addData will not be posted. If you read the above article carefully, it is very simple. Add data, add an instance, call its save method, update update, remove remove, query find, and speaking of find, I should mention the implementation of paging logic,

let query = comment.find({});
  query.skip((page - 1) * rows);
  query.limit(rows);
  query.sort({'time': -1});Copy the code

Where limit() reads the specified amount of data, skip() skips the specified amount of data, sort() specifies the sorted fields by parameter, and uses 1 and -1 to specify the sorting method, where 1 is ascending, -1 is descending, and rows is the total data of a page. If the front end wants to fetch the data of page 2, each page has 5 data, The logic is to skip 5 data, then take 5 data, and then arrange them in descending order by time. This is just to achieve the function, without considering the performance, which big god has a better method, welcome to give advice.

Server side logic said so much, relatively simple, source point here, specific implementation of their own research yo, feel helpful, give Star about yo.

Front-end code implementation





image.png

The layout is very simple, if there is the same, pure coincidence, nonsense not to say, open masturbation. Start by initializing a project with vue-CLI. If you haven’t used it before, click on the previous link to explore it yourself.





image.png

Where takecomment. vue is the comment box component, CommentList. Vue is the CommentList component, Paging.

Start looking like this





image.png

It looks like this in the middle





image.png

You end up looking like this





image.png

The implementation logic is in Pages () of getters in store.js.

Store. Js is used to manage all the states of the project. There are not many states to manage in the project, mainly for learning purposes.

const state = {
    current:1,
    commentList:[],
    pageNo:1,
    backClipped: true,
    preClipped: false,
};Copy the code

As for the specific usage of Vuex, we still look at the official documentation, which is very clear.

OK, thing is such a thing, the example is such an example, compared with some gods high imitation of such and such a website or platform, I this is a novice entry of the small actual combat, simple and easy to learn, before and after all, project source code, feel a bit interesting, learn it!