前端基础进阶：Node.js + ES6 + Axios + Vue 全面入门指南

从服务端到客户端，一套代码全搞定

适合初学者的全栈入门路线

一、Node.js 入门

1.1 什么是 Node.js？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它让 JavaScript 可以脱离浏览器运行，直接操作文件、网络、进程等系统资源。

Node.js 与浏览器环境的区别：

❌ 没有 document、window 等浏览器 API
✅ 增加文件系统（fs）、HTTP、进程等模块

📌 应用场景

开发后端服务（RESTful API）
作为 BFF（Backend For Frontend）层，聚合多个微服务数据
前端工程化工具（Webpack、Vite 等）

1.2 安装与环境配置

官网下载 LTS 版本：https://nodejs.org/

bash 复制代码

# 验证安装
node -v
npm -v

配置国内镜像（推荐）

bash 复制代码

# 安装 nrm 管理镜像源
npm install -g nrm
# 查看可用源
nrm ls
# 切换到淘宝源
nrm use taobao

安装 cnpm（可选）

bash 复制代码

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm -v

1.3 第一个 Node 程序

javascript 复制代码

// hello.js
console.log('Hello 奥利给');

运行：

bash 复制代码

node hello.js

1.4 文件读取（异步）

javascript 复制代码

const fs = require('fs');
fs.readFile('./test.txt', function(err, data) {
  if (err) throw err;
  console.log(data.toString());
});
console.log('读取文件...');  // 先输出

1.5 创建 HTTP 服务器

javascript 复制代码

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  res.end('<h1>Hello Node.js Server</h1>');
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888');

1.6 Node.js 在架构中的位置：BFF 层

浏览器/移动端
BFF层 Node.js
微服务A
微服务B
数据库

BFF 优势：聚合多服务数据，前端只需一次请求，降低前端复杂度。

二、ES6 核心新特性

2.1 let 和 const

关键字	作用域	可修改	特点
`var`	函数级	✅	存在变量提升，易成全局
`let`	块级	✅	暂时性死区
`const`	块级	❌	声明时必须赋值，不可改

javascript 复制代码

for (let i = 0; i < 5; i++) { }
// console.log(i);  // 报错，i仅在块内有效

const PI = 3.14;
// PI = 3.1415;  // 报错

2.2 解构表达式

数组解构

javascript 复制代码

let arr = [1, 2, 3];
const [x, y, z] = arr;
console.log(x, y, z); // 1 2 3

对象解构

javascript 复制代码

const person = { name: '张三', age: 20 };
const { name, age } = person;
console.log(name, age);

2.3 函数增强

默认参数值

javascript 复制代码

function add(a, b = 1) {
  return a + b;
}
console.log(add(10)); // 11

箭头函数

javascript 复制代码

// 一个参数
let print = msg => console.log(msg);
// 多个参数
let sum = (a, b) => a + b;
// 多行代码
let multiply = (a, b) => {
  let result = a * b;
  return result;
};

2.4 数组的 map 和 reduce

map：转换每个元素

javascript 复制代码

let arr = ['1.6', '20.3', '-5.2'];
arr = arr.map(s => parseInt(s));
console.log(arr); // [1, 20, -5]

reduce：累积计算

javascript 复制代码

const arr = [1, 20, -5, 3];
let sum = arr.reduce((a, b) => a + b);
console.log(sum); // 19

// 指定初始值
let sum2 = arr.reduce((a, b) => a + b, 10);
console.log(sum2); // 29

2.5 Set 和 Map

Set：自动去重

javascript 复制代码

let set = new Set([1, 2, 2, 3]);
set.add(4);
console.log(set); // Set {1,2,3,4}

Map：键可为任意对象

javascript 复制代码

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
map.set({name: 'obj'}, '对象键');
console.log(map.get('key1'));

2.6 Promise 异步处理

javascript 复制代码

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = Math.random();
    if (num < 0.5) resolve('成功：' + num);
    else reject('失败：' + num);
  }, 300);
});
p.then(msg => console.log(msg))
 .catch(err => console.error(err));

执行流程
异步任务 Promise 调用者异步任务 Promise 调用者新建Promise 执行异步操作成功/失败 then / catch

2.7 模块化（export / import）

导出模块 (hello.js)

javascript 复制代码

// 方式一
export let star = '奥利给';
export function sing() { console.log('唱歌'); }

// 方式二
let star = '奥利给';
function sing() { console.log('唱歌'); }
export { star, sing };

导入模块

javascript 复制代码

import { star, sing } from './hello.js';
console.log(star);
sing();

三、Axios ------ 基于 Promise 的 HTTP 客户端

3.1 特性

浏览器端和 Node.js 端通用
支持 Promise API
请求/响应拦截器
自动转换 JSON 数据

3.2 GET 请求

javascript 复制代码

// 无参数
axios.get('http://localhost:8080/api/users')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// 带 query 参数
axios.get('/api/user', { params: { id: 100 } })
  .then(res => console.log(res.data));

3.3 POST 请求

发送 JSON

javascript 复制代码

axios.post('/api/user', {
  name: '张三',
  age: 25
}).then(res => console.log(res.data));

发送 URL-encoded

javascript 复制代码

axios.post('/api/user', 'name=张三&age=25', {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

3.4 创建自定义实例

javascript 复制代码

const request = axios.create({
  baseURL: 'http://localhost:8080/api',
  timeout: 5000,
  headers: { 'Authorization': 'Bearer token...' }
});
request.get('/users').then(...);

3.5 拦截器

请求拦截器（添加 Token）

javascript 复制代码

axios.interceptors.request.use(config => {
  config.headers.token = 'your-token';
  return config;
});

响应拦截器（简化数据）

javascript 复制代码

axios.interceptors.response.use(response => {
  return response.data;  // 直接返回业务数据
});

请求
请求拦截器
发送请求
响应拦截器
处理成功

四、Vue.js 入门

4.1 什么是 Vue？

Vue 是一套渐进式 前端框架，核心库只关注视图层，采用 MVVM 模式，让开发者专注于数据而非 DOM 操作。
用户交互
数据绑定
Model 数据模型
ViewModel Vue实例
View 视图模板

4.2 快速开始

html 复制代码

<div id="app">
  <h2>{{ message }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: { message: 'Hello Vue!' }
  });
</script>

4.3 双向绑定 v-model

html 复制代码

<input v-model="name">
<p>Hello {{ name }}</p>

4.4 事件处理 v-on

html 复制代码

<button @click="count++">点击 {{ count }}</button>
<button @click="sayHi">打招呼</button>

javascript 复制代码

methods: {
  sayHi() { alert(this.name); }
}

4.5 Vue 实例的生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

常用钩子：created（已可访问 data）、mounted（DOM 已渲染）

4.6 常用指令

指令	作用	示例
`v-text`	纯文本	`<span v-text="msg"></span>`
`v-html`	解析 HTML	`<div v-html="htmlCode"></div>`
`v-for`	遍历数组/对象	<li v-for="(user, i) in users">{``{i+1}}.{``{user.name}}</li>
`v-if`	条件渲染（移除/添加 DOM）	`<p v-if="ok">显示</p>`
`v-show`	条件显示（切换 display）	`<p v-show="ok">显示</p>`
`v-bind`	动态绑定属性	`<img :src="imgUrl">`

4.7 计算属性 computed

javascript 复制代码

computed: {
  birth() {
    const d = new Date(this.birthday);
    return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;
  }
}

计算属性有缓存，依赖不变时不会重新计算。

4.8 侦听器 watch

javascript 复制代码

watch: {
  message(newVal, oldVal) {
    console.log(`从 ${oldVal} 变为 ${newVal}`);
  }
}

4.9 组件化

全局组件

javascript 复制代码

Vue.component('my-btn', {
  template: '<button @click="count++">点击 {{ count }} 次</button>',
  data() {
    return { count: 0 };
  }
});

局部组件

javascript 复制代码

const Counter = { ... };  // 同上
new Vue({
  components: { Counter }
});

⚠️ 组件的 data 必须是一个函数，否则多个实例会共享数据。

父子组件通信

父 → 子：props

javascript 复制代码

// 子组件
Vue.component('child', {
  props: ['parentMsg'],
  template: '<p>{{ parentMsg }}</p>'
});
// 父组件模板
<child parent-msg="Hello"></child>

子 → 父：$emit

javascript 复制代码

// 子组件
this.$emit('change', newValue);
// 父组件模板
<child @change="handleChange"></child>

props
$emit 事件
父组件
子组件

4.10 路由 vue-router

安装

bash 复制代码

npm install vue-router@2.0.0

配置路由

javascript 复制代码

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './login.js';
import Register from './register.js';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/register', component: Register }
  ]
});

new Vue({
  el: '#app',
  router
});

模板中使用

html 复制代码

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>

路由切换实际改变的是 URL 的 hash 值（#/login），页面不会重新加载。

总结

通过本文，你已经学完了前端开发中的重要基础模块：

✅ Node.js：用 JS 写后端，搭建 BFF 层
✅ ES6：现代 JS 的核心特性，写代码更简洁
✅ Axios：优雅处理 HTTP 请求，拦截器让代码复用
✅ Vue.js：MVVM 框架，组件化开发，路由管理

接下来你可以继续学习：

Vue CLI 脚手架
Vuex 状态管理
Element UI / Ant Design Vue 组件库