[Software Engineering] Node.js&VUE learning path research

Document No.: O.T.5.01-1

entry name P2P online trading platform
Document name Research on node.js & Vue learning path
author Salting out
Last update time 2021-11-22
Version update summary
Version number time Updater Update summary
V0.1 2021-11-22 Salting out First edition of research on learning path

brief introduction

  • Node.js is the JavaScript running on the server side.
  • VUE is a progressive framework for building user interfaces.


Please refer to this post for the whole installation process:


Basic grammar

Variable declaration

In JS, var is used to define (declare) variables:

function foo() {}
var a = 0;
var b = 'a';
var c = 1.0;
var d = foo;

Circular statement

One is similar to C + +:

for(var i = 0; i < foo; i++) {

One is for...in loop traversal

var foo = {
    "hello"     : "world",
    "node"      : "js",
    "blahblah"  : "bar"
for(var key in foo) {
    console.log(key + ": " + foo[key]);


hello: world
node: js
blahblah: bar

JS object


var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;

Reference link: https://www.w3school.com.cn/js/js_objects.asp

Core module

http module

Load http core module:

var http = require("http")

Create a web server and return a server instance:

var http = require("http")

When the server receives a request from the client, "request" executes the callback function

  • Request: the request object sent by the client to the server
  • Response: the response object sent by the server to the client
​    console.log("Received the request! url: "+request.url)
​    console.log("Requested Ip"+response.socket.remoteAddress+":"+response.socket.remotePort)
​    var str=request.url
​    var mes
​    if(str === "/"){
​        response.end("Index page")
​    }else if(str == "/login"){
​        response.end("Sign in")
​    }else if(str == "/haha"){   
​        response.end("ha-ha")
​    }
​   // The response content can only be binary data or string
​    if(str == "/product"){
​        var product=[
​            {
​                name: "apple",
​                price: 3500
​            },
​            {
​                name: "banana",
​                price: 5330
​            },
​            {
​                name: "banana",
​                price: 5330
​            }
​        ]
​        response.end(JSON.stringify(product))
​    }

fs module

Load file system module:

var fs=require('fs')//Load fs core module

Read operation:

        return console.log('file read err!')

Write operation:

        return console.log('file read err!')

Path module

This is the path module provided by Node.js. It is mainly to resolve the path.

// Returns:
// { root: '/',
//   dir: '/home/user/dir',
//   base: 'file.txt',
//   ext: '.txt',
//   name: 'file' }

Project structure analysis

Preview structure:


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    <div id="app"></div>
    <!-- built files will be auto injected -->

, there is a line of comments below. The built file will be automatically injected, that is, other contents we write will be displayed in this div.


  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

This file is called the "root component" because other components are included in this component.
 , Is a container called "route view", which means that the content pointed to by the current route (URL) will be displayed in this container. In other words, even if other components have their own routes (URLs, which need to be defined in the index.js file in the router folder), they are only a separate page on the surface, but in fact they are only in the root component App.vue.


import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)

Several modules of import come from the components written in App.vue, of which Vue module is on node_ In modules, App is the component defined in App.vue, and router is the route defined in the router folder.


Refer to rookie tutorial: https://www.runoob.com/vue3/vue3-tutorial.html , mainly from template syntax to event processing.

Reference link

Posted by jordz on Wed, 24 Nov 2021 19:13:16 -0800