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 |
| V0.2 |
brief introduction
- Node.js is the JavaScript running on the server side.
- VUE is a progressive framework for building user interfaces.
install
Please refer to this post for the whole installation process:
https://www.cnblogs.com/xifengxiaoma/p/9494068.html
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]);
}
Output:
hello: world node: js blahblah: bar
JS object
example:
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
server.on("request",function(request,response){
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:
fs.readFile('readme.txt',function(err,data){
if(err){
return console.log('file read err!')
}
console.log(data.toString)
})
Write operation:
fs.readFile('readme.txt',function(err,data){
if(err){
return console.log('file read err!')
}
console.log(data.toString)
})
Path module
This is the path module provided by Node.js. It is mainly to resolve the path.
path.parse('/home/user/dir/file.txt');
// Returns:
// { root: '/',
// dir: '/home/user/dir',
// base: 'file.txt',
// ext: '.txt',
// name: 'file' }
Project structure analysis
Preview structure:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#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;
}
</style>
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.
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#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.
VUE
Refer to rookie tutorial: https://www.runoob.com/vue3/vue3-tutorial.html , mainly from template syntax to event processing.
Reference link
- Build environment https://blog.csdn.net/xinpz/article/details/81871785
- Node.js rookie tutorial https://www.runoob.com/nodejs/nodejs-tutorial.html
- Vue3 rookie tutorial https://www.runoob.com/vue3/vue3-tutorial.html
- node.js basic syntax https://www.cnblogs.com/blackgan/p/6005868.html
- Node.js basic syntax https://www.jianshu.com/p/fa2f8bd1a40f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
- Mall interface example https://blog.csdn.net/ssdwawa/article/details/78153905?spm=1001.2014.3001.5501
- Project structure analysis https://segmentfault.com/a/1190000022484789