【軟體工程】Node.js&VUE學習路徑調研
阿新 • • 發佈：2021-11-25
文件編號 O.T.5.01-1
| 專案名稱 | P2P線上交易平臺 | ||
|---|---|---|---|
| 文件名稱 | Node.js&VUE學習路徑調研 | ||
| 作者 | 鹽析 | ||
| 最後更新時間 | 2021-11-22 | ||
| 版本更新概要 | |||
| 版本號 | 時間 | 更新人 | 更新摘要 |
| V0.1 | 2021-11-22 | 鹽析 | 學習路徑調研初版 |
| V0.2 |
簡介
- Node.js 就是執行在服務端的 JavaScript。
- VUE是一套構建使用者介面的漸進式框架。
安裝
安裝全流程請參考此篇帖子：
https://www.cnblogs.com/xifengxiaoma/p/9494068.html
基本語法
變數宣告
JS中，用var定義（宣告）變數：
function foo() {}
var a = 0;
var b = 'a';
var c = 1.0;
var d = foo;
迴圈語句
一種是類似C++的型別：
for(var i = 0; i < foo; i++) {
//...
}
一種是for...in迴圈遍歷
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物件
例項：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
參考連結：https://www.w3school.com.cn/js/js_objects.asp
核心模組
http模組
載入http核心模組：
var http = require("http")
建立一個web伺服器，返回一個server例項：
var http = require("http")
服務端接收到來自客戶端的請求時"request"執行回撥函式
- request：客戶端向服務端傳送的請求物件
- response：服務端向客戶端傳送的響應物件
server.on("request",function(request,response){
console.log("接受到請求了！url："+request.url)
console.log("請求的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("登入")
}else if(str == "/haha"){
response.end("哈哈")
}
// 響應內容只能是二進位制資料或字串
if(str == "/product"){
var product=[
{
name: "apple",
price: 3500
},
{
name: "banana",
price: 5330
},
{
name: "banana",
price: 5330
}
]
response.end(JSON.stringify(product))
}
})
fs模組
載入檔案系統模組：
var fs=require('fs')//載入fs核心模組
讀操作：
fs.readFile('readme.txt',function(err,data){
if(err){
return console.log('file read err!')
}
console.log(data.toString)
})
寫操作：
fs.readFile('readme.txt',function(err,data){
if(err){
return console.log('file read err!')
}
console.log(data.toString)
})
Path模組
這是Node.js提供的路徑模組。主要是為了解析路徑。
path.parse('/home/user/dir/file.txt');
// Returns:
// { root: '/',
// dir: '/home/user/dir',
// base: 'file.txt',
// ext: '.txt',
// name: 'file' }
專案結構分析
預覽結構：
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>
把這個檔案稱為“根元件”，因為其它的元件又都包含在這個元件中。
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')
import 的幾個模組來源於App.vue中寫的元件，其中 vue 模組在 node_modules 中，App 即 App.vue 裡定義的元件，router 即 router 資料夾裡定義的路由。
VUE
參考菜鳥教程：https://www.runoob.com/vue3/vue3-tutorial.html，主要學習模板語法到事件處理的部分。
參考連結
- 搭建環境 https://blog.csdn.net/xinpz/article/details/81871785
- Node.js菜鳥教程 https://www.runoob.com/nodejs/nodejs-tutorial.html
- Vue3菜鳥教程 https://www.runoob.com/vue3/vue3-tutorial.html
- node.js基本語法 https://www.cnblogs.com/blackgan/p/6005868.html
- Node.js基本語法 https://www.jianshu.com/p/fa2f8bd1a40f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
- 商城介面例項 https://blog.csdn.net/ssdwawa/article/details/78153905?spm=1001.2014.3001.5501
- 專案結構分析 https://segmentfault.com/a/1190000022484789