大前端进阶

大前端进阶

目录

1. 前端开发和前端开发工具
2. Nodejs安装及快速入门
3. Es6的新语法糖
4. Npm包管理器
5. Babel的安装作用
6. 模块化管理
7. Webpack打包和编译
8. 如何快速构建一个nodejs项目vue-element-admin

---

1.前端和前端的开发工具

1.1 Nodejs介绍

官网:http://nodejs.cn/

1. Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、

2. Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

3. 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js

4. Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

5. 安装完成之后可以在cmd窗口中使用node -v来确定是否安装成功

---

小结:Nodejs是一门计算机语言,运行在jvm中,文件的后缀是js,运行的命令是node xxx

1.2 Nodejs入门

快速入门:

1. 创建文件件nodejs
2. 在文件夹中创建helloworld.js
   写入console.log('hello world!!!')
   类似于Sout
   结果是输出hello world!!!
   注意,打开命令行终端的指令是:Ctrl+shift+y
   Nodejs是基于v8引擎的JavaScript程序,是脱离浏览器环境运行的

---

1.3 Node实现请求响应

1. 创建httpservice.js;

// 导入模块是require 就类似于import java.io 
const http = require('http');
// 1: 创建一个httpserver服务
http.createServer(function(request,response){
    // 浏览器怎么认识hello server!!! 
    response.writeHead(200,{'Content-type':'text/plain'}); //这句话的含义是：告诉浏览器将
    // 以text-plain去解析hello server 这段数据。
    // 给浏览器输出内容
    response.end("hello server!!!");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888

2. 运行服务器程序

node httpservice.js

3. 服务器启动成功后,在浏览区查看本地的8888端口即可
4. ctrl+c 停止服务

1.4 Node操作数据库

1. 安装依赖在项目地址下的cmd运行窗口中

npm install mysql

2.定义db.js进行操作

//1: 导入mysql依赖包,  mysql属于第三方的模块就类似于 java.sql一样的道理
var mysql = require("mysql");
// 1: 创建一个mysql的Connection对象
// 2: 配置数据连接的信息 
var connection =mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"mkxiaoer",
    database:"testdb"
});
// 3：开辟连接
connection.connect();
// 4: 执行curd
connection.query("select * from kss_user",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results = ",results);
});
// 5: 关闭连接
connection.end();
// 最后一步：运行node db.js 查看效果

3. 新建数据库db_test和表kss_user

/*
 Navicat MySQL Data Transfer
 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 60011
 Source Host           : localhost:3306
 Source Schema         : testdb
 Target Server Type    : MySQL
 Target Server Version : 60011
 File Encoding         : 65001
 Date: 20/01/2021 21:38:55
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for kss_user
-- ----------------------------
DROP TABLE IF EXISTS `kss_user`;
CREATE TABLE `kss_user`  (
  `id` int(11) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of kss_user
-- ----------------------------
INSERT INTO `kss_user` VALUES (1, '学相伴');
INSERT INTO `kss_user` VALUES (2, '广东');
SET FOREIGN_KEY_CHECKS = 1;