Javascript

【软件工程】Node.js&VUE学习路径调研

本文主要是介绍【软件工程】Node.js&VUE学习路径调研，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文档编号 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>

，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

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>

把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。
 ，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 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')

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
这篇关于【软件工程】Node.js&VUE学习路径调研的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航