glxy_04

node.js

类似于java需要安装jdk环境
模拟服务器，不需要浏览器，直接使用node.js运行js代码

安装：
直接下一步下一步即可
验证：
在vscode上写一个js代码，打开文件目录，用cmd打开，最后在dos窗口输入node 文件名.js

模拟服务器效果：

const http = require('http');
http.createServer(function(reuest,response){
    response.writeHead(200,{'Content-Type':'text/plain'});
    response.end('Hello Server')
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/')

npm

在后端开发中，使用maven构建项目，管理jar依赖，联网下载依赖
npm类似于maven 用在前端中，管理前端js依赖，联网下载js依赖，比如jQuery

这中间会出现很多报错，比如需要管理员什么打开命令窗，比如某个文件夹需要删除一个文件等

babel转码器

babel是转码器，把es6转换成es5代码
因为我们写的es6，但是es6代码浏览器兼容性很差，如果使用es5代码浏览器兼容性很好
这里执行babel --version会报错
需进行一下操作：

1. 安装babel工具，使用命令
   npm install --globel babel-cli
2. 创建js文件，辨析es6代码
   

//转码前
//定义数据
let input = [1,2,3]
//将数组的每个元素+1
input = input.map(item => item+1)
console.log(input)

3. 在根目录创建.babelrc文件

{
    "presets":["es2015"],
    "plugins": []
}

4. 安装es2015转码器

npm install --save-dev babel-preset-es2015

5. 使用命令转码
   根据命令转码：将es6中的文件转换后得到es5格式到dist文件夹中

 babel es6/01.js -o dist/001.js

		根据文件夹转码

 babel es6 -d dist

模块化概念说明

在后端中，类与类之间的互相调用可称之为后端的模块化操作
前端模块化，在前段中，js与js之间调用成为前端模块化操作

案例：es5模块化 02.js调用01.js的方法

1. 创建文件夹moduledemo，并初始化npm init -y
2. 在moduledemo文件夹下创建子文件夹es5moddule,并在里面创建01.js/02.js
3. 在01.js中编写代码如下，用来被02.js调用

	//创建方法
// 定义两个方法
const add = function(a, b){
    return a + b;
}

const sub = function(a, b) {
    return a - b;
}

// es5 使用 module.exports = {} 来导出方法
module.exports = {
    add,
    sub
}

02.js编写

// es5 使用 require 来引入其他 js 
const m = require('./01.js')

// 通过  m
console.log(m.add(1, 2));
console.log(m.sub(5, 1))

执行结果：

es6模块化
注意：如果使用es6写法是实现模块化操作，在nodejs环境中不能直接运行的
需要，babel将es6转化es5
01.js

// 定义两个方法
// ES6 可以在方法前直接使用
export function print(str) {
    console.log(str);
}

export function say() {
    console.log('Hello Moto');
}

02.js

// ES6 使用 import 来引入其他 js 
import {print,say} from './01.js';

print('Hello World!'); // 调用方法

say();

终端执行报错

做转换 es6 ----》es5
创个文件夹es611
输入转换语句

进入es611终端，输出结果

Webpadk

是前端资源加载、打包工具========》可以把多个静态资源文件打包成一个文件，减少页面的请求次数
固定步骤

1. 创建文件夹webpackdemo,并进行初始化

2. 下载webpack： npm install -g webpack-cli

3. 查看下载是否成功：
   

4. 创建js文件

   点击链接，查看详细步骤

   …………
   

搭建项目前端页面环境

B2C模式
管理员------------------------------------------->普通用户
后台管理系统
后端接口、前端页面
搭建项目前端页面

1. 选区模板（框架）进行环境搭建（选取 vue-admin-template）
2. 放在工作区所在的文件夹中
3. 在vscode中的 vue-admin-template文件打开终端执行npm install命令
4. 执行成功就会跳出页面
   
   解释vue-admin-template中主要组成部分
   
   build：类似java中.class 文件，一些编译的文件，放项目构建的脚本文件
   config：项目中一些最基本的设置东西（如：index.js中有定义端口，地址之类信息）
   

src目录：