2. Nodejs+vue基础

Node.js是一个基于Chrome V8引擎的JavaScript运行环境.从开发者角度来说，原本运行在Web浏览器中的JavaScript代码，现在可以运行在任何装有Node.js的环境中。

简单一句话：让原本只会前端的人，也能使用javascripts来写后端服务了

Node.js分为两个不同的版本：LTS和Current。

注意：

LTS版本是长期支持的稳定版本，即该版本内容稳定。

Current版本是根据当前项目的开发进度实时更新的可发布版本，包含最新的性能优化和代码优化，但版本中会有一些Bug。

2.1. 1.安装Node.js

2.1.1. 1.1 windows中安装nodejs

1、首先我们上node.js官网(https://nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境啦。

下载–点击安装—配置环境变量

C:\Users\18793>node -v
v14.15.0

C:\Users\18793>npm -v
6.14.12

npm配置(node_global和node_cache)

打开cmd
# 安装淘宝npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# vue-cli 安装依赖包
$ cnpm install --g vue-cli


# 执行
$ npm config set prefix "D:\nodejs\node_global"
$ npm config set cache "D:\nodejs\node_cache"

如果这种方法无法修改还可以：

在nodejs的安装目录中找到node_modules\npm\npmrc文件

修改如下即可

prefix = D:\nodejs\node_global
cache = D:\nodejs\node_cache

yarn安装及配置

npm install -g yarn

安装完后使用yarn -v可查看版本号

新建两个文件夹 yarn_global和yarn_cache

yarn config set global-folder "D:\nodejs\yarn_global"
yarn config set cache-folder "D:\nodejs\yarn_cache"

2.1.2. 1.2 Linux中安装nodejs

wget https://nodejs.org/dist/v10.16.3/node-v10.16.3-linux-x64.tar.xz
tar -Jxf node-v10.16.3-linux-x64.tar.xz

[root@localhost app]# cd node-v10.16.3-linux-x64/bin/
[root@localhost bin]# ./node -v
v10.16.3

# 环境变量
echo "export PATH=$PATH:/app/node-v10.16.3-linux-x64/bin" >> /etc/profile.d/node.sh
source /etc/profile

# 或者软连接
ln /app/node-v10.16.3-linux-x64/bin/node /usr/local/bin/
ln /app/node-v10.16.3-linux-x64/bin/npm /usr/local/bin/

2.2. 2.第一个Node.js示例—Hello World

编写Hello World示例。

Hello World.js

const http = require('http')

http.createServer(function (request,response) {
    response.writeHead(200,{'Content-Type':'text/html'});
    response.end('<h1>Hello World</h1>');
}).listen(3000);

console.log("Server running at http://127.0.0.1:3000/")

这样就完成了第一个最简单的Node.js项目。

2.3. 3.Node.js后端框架Express

简单来说，Express框架本身是对Node.js中的HTTP模块进行的一层抽象，就是这层抽象使得开发者可以无须注意细节，直接上手进行页面和业务逻辑的开发。

Express的主要功能包括：

  • 设置中间件来响应HTTP请求；

  • 定义路由表执行不同的HTTP请求动作；

  • 通过向模板传递参数动态渲染HTML页面。

2.3.1. 3.1 Express的安装

（1）新建项目文件夹，并且通过命令提示行进入该文件夹

（2）使用npm命令初始化Node.js项目，命令如下：

npm init

（3）执行Express的安装命令如下：

npm install express

（4）安装成功后，package.json文件会自动添加Express为依赖项，更改后的内容如下：

{
  "name": "express2020",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

3.1.1 Express项目示例—Hello World

（1）新建一个入口文件app.js，完整的代码如下：

// 引入Express模块和实例化
const express = require('express')
const app = express()

// 设定根路由显示Hello World
app.get('/', (req, res) => res.send('Hello World!'))

// 监听3000端口为http服务
app.listen(3000, () => console.log(`Example app listening on port 3000!`))

（2）使用如下命令运行程序，然后在浏览器中输入http://127.0.0.1:3000，即可访问该页面

node app.js

2.4. 4.RESTful API规范

RESTful是目前最流行的API设计规范，其核心思想就是对客户端发起的请求进行5种划分，不同的操作对应5种不同的HTTP请求方法，这是以逻辑操作功能为基础进行划分的，而不是传统的API设计以路径方式进行划分。

  • GET：从服务器端取出资源（一项或多项）。

  • POST：在服务器端新建一个资源。

  • PUT：在服务器端更新资源（客户端提供改变后的完整资源）。

  • PATCH：在服务器端更新资源（客户端提供改变的属性）。

  • DELETE：从服务器端删除资源。

  • HEAD：获取资源的元数据。

  • OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。

符合RESTful的API设计就是所有的API路由符合上述划分。也就是说，相同的请求路径，由于请求方式不同，可能获取的数据结果不同，或执行不同的数据操作。

注意：如300系列的重定向、400系列的客户端错误和500系列的服务器错误等。通过HTTP查看具体的状态码并且了解其含义，可以方便地定位问题所在。

2.5. 5.页面显示框架Vue.js

Vue.js被设计为自底向上逐层应用。Vue.js的核心库只关注视图层，方便与第三方库或既有项目整合，非常容易学习。Vue.js的官方主页为https://cn.vuejs.org/

Vue.js项目在GitHub上获得了近15万颗星的成绩。

注意：Vue.js不支持IE 8及以下版本，因为它使用了IE 8无法模拟的ECMAScript 5特性，但它支持所有兼容ECMAScript 5的浏览器。

2.5.1. 5.1 Vue.js的安装

安装Vue.js有三种方法：

1.本地文件
2.CND引入
3.npm install vue

（1）类似于Bootstrap或jQuery，直接通过HTML文件中的<script></script>标签引用。

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

（2）npm安装方式。新建项目文件夹，使用npm init命令初始化项目，然后使用如下命令安装Vue.js，与Express的安装步骤一样。

npm install vue

package.json文件会自动添加Vue.js的依赖项，代码如下：

{
  "name": "vue202105-books",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

2.5.2. 5.2 用Vue.js编写Hello World—CDN方式

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!-- 目的: 将数据渲染到页面上 -->
<div id="app">
    <!-- 将数据填充到HTML标签中, 插值表达式支持基本的计算操作 -->
    {{ text }}
</div>

<script>
    var vm = new Vue({
        // Vue实例选项
        /*
            el  作用:
                1. 指定/设置 当前Vue实例所管理的视图
                2. 值也可以为其他选择器,class或者DOM元素,/.,吗但发生作用的只有第一个
                3. 值也可以为DOM元素

                注意: 不能让el直接管理html或者body 报错! mount ->挂载
        */
        el: '#app',

        // 模拟ajax返回的数据
        data: {
            /*
                data作用:  指定/设置 当前vue实例所管理视图中要使用的数据

                1 . data的值可以是一个对象
                2 . data中的数据 可以通过Vue实例对象,属性名(vm.msg),去访问数据
                3 . 访问数据  可以通过vm.$data.msg访问数据

                特点:  响应式数据(当数据发生变化时,视图中用数据的位置会自动发生变化)
            */
            text: 'hello world!!!!!',
        },


    })
</script>

</body>
</html>

2.5.3. 5.3 用Vue.js编写Hello World—Webpack方式

Webpack暂时没使用，跳过，用的时候在学习一下

参考下面文献

注意：Webpack还存在很多不同的用法，读者可以参考官方文档https://webpack.js.org/。

2.6. 6. 其他页面显示框架

Vue.js的API参考了AngularJS、KnockoutJS、Ractive.js和Rivets.js，因此作为一个后来者，Vue.js是对上述框架的总结和优化，不仅如此，它还增加了很多新的特性，所以非常流行。

除了Vue.js框架之外，值得一提的还有React.js框架。

Vue.js框架的优点如下：

- 生态丰富，学习成本低；
- 简单易用；·官方库较多，程序开发风格统一且文档全面；
- 轻量、高效；·依赖其他开源模块较少，可以简单地实现功能重构。

Vue.js框架的缺点如下：

- 使用者和贡献者较为单一，GitHub中的使用者大部分是中文使用者；
- 非官方的小众库不一定支持Vue.js。

React.js的优点如下：

- 灵活和优秀的响应性；
- 虚拟DOM使性能得到极大提升；
- 丰富的JavaScript库，面对全世界的贡献者；
- 丰富、强大的扩展性；
- 有Facebook等专业开发人员的支持；
- 多平台的优势，并且React Native等技术已广泛使用。

React.js的缺点如下：

- 功能复杂，体积庞大；
- 学习难度比较高。

2.7. 7.JavaScript开发利器—WebStorm

JavaScript拥有大量的IDE，甚至一些并非专门为JavaScript准备的开发工具都支持它（如Eclipse、NetBeans等）。

还有一些常见的IDE，如VSCode或Notepad++也提供了大量的扩展和自定义选项来实现JavaScript专用IDE的效果。

JetBrains系列的WebStorm，官方网址为https://www.jetbrains.com/webstorm/，用户可以免费试用30天。

2.8. 8.小结

介绍了工程网站需要的两个关键技术：Node.js和Vue.js。

其中，Node.js分为两部分来介绍：纯Node.js和Node.js框架（Express）