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
会报错
需进行一下操作:
- 安装babel工具,使用命令
npm install --globel babel-cli - 创建js文件,辨析es6代码
//转码前
//定义数据
let input = [1,2,3]
//将数组的每个元素+1
input = input.map(item => item+1)
console.log(input)
- 在根目录创建.babelrc文件
{
"presets":["es2015"],
"plugins": []
}
- 安装es2015转码器
npm install --save-dev babel-preset-es2015
- 使用命令转码
根据命令转码:将es6中的文件转换后得到es5格式到dist文件夹中
babel es6/01.js -o dist/001.js
根据文件夹转码
babel es6 -d dist
模块化概念说明
在后端中,类与类之间的互相调用可称之为后端的模块化操作
前端模块化,在前段中,js与js之间调用成为前端模块化操作
案例:es5模块化 02.js调用01.js的方法
- 创建文件夹moduledemo,并初始化
npm init -y
- 在moduledemo文件夹下创建子文件夹es5moddule,并在里面创建01.js/02.js
- 在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
是前端资源加载、打包工具========》可以把多个静态资源文件打包成一个文件,减少页面的请求次数
固定步骤
-
创建文件夹webpackdemo,并进行初始化
-
下载webpack: npm install -g webpack-cli
-
查看下载是否成功:
-
创建js文件
…………
搭建项目前端页面环境
B2C模式
管理员------------------------------------------->普通用户
后台管理系统
后端接口、前端页面
搭建项目前端页面
- 选区模板(框架)进行环境搭建(选取 vue-admin-template)
- 放在工作区所在的文件夹中
- 在vscode中的 vue-admin-template文件打开终端执行
npm install
命令 - 执行成功就会跳出页面
解释vue-admin-template中主要组成部分
build:类似java中.class 文件,一些编译的文件,放项目构建的脚本文件
config:项目中一些最基本的设置东西(如:index.js中有定义端口,地址之类信息)
src目录: