2021年03月_chen__cheng

原创解决eslint报错“Parsing error: ‘import‘ and ‘export‘ may only appear at the top level”

报错详情：“Parsing error: ‘import’ and ‘export’ may only appear at the top level”报错代码document.querySelector('#btn').onclick = function () { import(/* webpackChunkName: 'test' */'./print') .then(({ print }) => { console.log(print(2, 3));

2021-03-31 09:59:34 14461 5

原创开发环境webpack.config.js性能优化配置

webpack开发环境性能优化1.优化打包构建速度2.优化代码调试1.优化打包构建速度现象：每次修改一个模块中的内容的时候，都会将其他模块一同再次打包处理。如果一个项目中的模块很多时，每次修改都去打包所有的模块，这必然会影响打包构建速度。解决：HMR：hot module replacement热模块替换/模块热替换作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大提升构建速度开启HMR：devServer: { contentBase: resolve(__di

2021-03-29 10:14:50 133

原创生产环境webapck.config.js配置详解

生产环境webapck.config.js配置详解1.处理css文件1.提取出css为单独文件2.css兼容性处理3.压缩css4.完整css处理代码2.js处理1.js语法检查eslint2.js兼容性处理3.js压缩处理3.html处理生产环境不同于开发环境在于，生产环境需要优化代码，保证在上线之后运行更快且兼容各大浏览器。以开发环境中css资源打包为例：先把css资源构建一个commmjs模块，形成一个字符串，接着在js文件中创建style标签将构建的字符串插入到style标签中，而如果样式资源很多

2021-03-28 12:14:59 306

原创 webpack配置devServer

由于每次打包之后修改源文件都需要再次打包，无疑这种对于开发者来说是有点不方便的，所以webpack可以通过配置devServer（开发服务器）来进行自动化操作（自动编译，自动打开浏览器，自动刷新浏览器）特点：只会在内存中编译打包，不会有任何输出，也即不会显示输出构建之后的目录，而运行结束自动清除内存使用：下载webpack-dev-servernpm i -s webpack-dev-server启动：npx webpack-dev-server不同于webpack全局安装可以直

2021-03-27 14:43:52 420

原创 Error: Cannot find module ‘webpack‘

出现场景：配置完成webpack-dev-server之后，开始兴高采烈使用npx web-dev-server运行的时候，出现了以下的错误：E:\前端\nodejs\实践\js\webpack_01>npx webpack-dev-serverinternal/modules/cjs/loader.js:883 throw err; ^Error: Cannot find module 'webpack'Require stack:- E:\前端\nodejs\实践\js\no

2021-03-27 14:33:57 3058

原创开发环境webapck.config.js配置详解

1.打包样式资源webpack只能处理js/json资源，因此对于样式资源的打包需要通过loader，而loader需要在webpack.config.js（webpack配置文件）中进行定义其中webpack.config.js配置文件用于指示webpack需要做哪些操作，当运行webpack指令的时候，会加载里面的配置项，且此配置文件语法采用commonjs，原因是：所有构建工具都是基于nodejs平台运行的，而基于nodejs模块化默认采用commonjs，而这个不同于项目中js源文件.js采用的

2021-03-25 09:27:21 375

原创 ERROR in ./src/webpack_01.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/

在webpack进行打包的时候，出现以下错误：ERROR in ./src/webpack_01.less (…/node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/webpack_01.less)Module build failed (from …/node_modules/less-loader/dist/cjs.js):Error: Cannot find module ‘less

2021-03-25 09:23:09 1987

原创 webpack基本使用-打包js/json

项目目录：build #打包之后的文件存储 index.js index.htmlsrc # 源文件 index.js index.html假设设定：/src/index.js为webpack入口起点文件运行命令开发环境webpack ./src/index.js -o ./build --mode=developmentwebpack会以 ./src/index.js作为入口文件开始打包，打包后输出到 ./build目录下，整体打包环境是开发环境结果：[w

2021-03-24 09:55:20 329

原创什么是webpack

webpack是一种前端资源构建工具先来看以下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpackStudy</title> <link rel="stylesheet" href="./webpack_01.less"></head><body> &..

2021-03-24 08:40:25 182

原创 express中间件原理（app.use()）

app.use1.什么是中间件2.express中的中间件3.总结1.什么是中间件中间件就是一个请求处理方法，用其把用户从请求到响应的整个过程分发到多个中间件去处理，这样做的目的是提高代码的灵活性，动态可扩展的。简单的理解就是：将收到的请求进行逐层过滤。2.express中的中间件请求处理的过程是：当服务器接收到请求之后，如果服务器写了多个中间件，则按照顺序依次匹配，直到匹配到符合要求的中间件，然后进行处理。需要注意的是：同一个请求所经过的中间件都是同一个请求对象和响应对象中间件分类：应用程

2021-03-22 12:13:19 781

原创 express中使用session和cookie

cookie和session的工作机制：由于cookie保存在客户端，不能存放敏感信息，而session保存于服务器端，可用于存放敏感信息。比如对用户登录状态的保存。但是http是无状态的，session如何保存用户登录状态呢，当用户登录成功之后，服务器端会将用户信息对应于一个session数据，并将获取这个session数据的钥匙发送给客户端，而这个钥匙在客户端的保存形式是保存在cookie中，用户再次访问当前网站的其他网页的时候，将cookie信息一起发送给服务器，当服务器收到cookie中保存的钥匙

2021-03-22 09:29:24 330

原创 chrome查看cookie插件(EditThisCookie)

下载地址：https://www.gugeapps.net/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg#download打开chrome点击右上角的三个点->点击设置->扩展程序，将下载的插件拖入到chrome中，然后在各个浏览器的右上角便可以看到Cookie管理器...

2021-03-22 09:02:17 2624

原创 window上安装Mysql

官网下载地址https://dev.mysql.com/downloads/点击MySQL Installer for Windows，这里下载的社区版下载完成之后点击安装文件出现以下页面点击第二个add/Modify Products and Feature点击next，再点击exe excute，完成之后点击next设置服务器配置类型以及连接端口Config Type: 选择Development Machine，用于小型以及学习所用足以Port number: 输入330.

2021-03-21 20:39:10 219 1

原创 artTemplate模板继承和子模板

子模板语法：{{ include './header.html' }};// 其中'./header.html'是相对于当前文件位置的文件应用：# layout.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>{{ inclu..

2021-03-21 16:56:07 587

原创浅谈nodejs文件操作中的相对路径问题

1.文件操作中的./xx相对路径问题查看以下场景：# /js/foo/a.txthello World# /js/foo/index.jsconst fs = require('fs');fs.readFile('./a.txt',(err,data) => { if (err) { console.log('error'); } else { console.log(data.toString()); }})在/js目录下执行node foo/inde

2021-03-20 18:03:18 1866

原创 promise封装ajax

// 采用promise封装ajax function pGet (url) { return new Promise(function (resolve, reject) { let oReq = new XMLHttpRequest() oReq.onload = function () { resolve(JSON.parse(oReq.responseText));

2021-03-18 16:28:49 70

原创 http-server基本使用

1.什么是http-serverhttp-server是一个简单的零配置的命令行http服务器（基于nodejs），它足够强大便于生产和使用，用于本地测试和开发。一般我们打开一个网页都是通过files协议本地打开的方式，当前端项目打包之后想在本地查看发布效果的时候，这时需要在本地开启一个服务，此时http-server开始起作用。总结：采用http-server本地运行前端项目2.基本使用安装npm install -g http-server启动：http-server # 默认是

2021-03-18 15:30:04 17086 1

原创 json-server基本使用

1.什么是json-serverJSON-Server是一个Node模块，运行Express服务器，作为一个mock工具，通过在本地搭建一个json服务器，产生测试数据，来模拟服务器端接口数据。用于前端开发人员，在进行前后端分离开发时，后端还没有搭建好时，可以使用json-server模拟 REST API。总结：json-server是一个存储json数据的服务器。官网地址：https://github.com/typicode/json-server2.基本使用安装json-server（

2021-03-18 14:47:07 978

原创输入json-server没有任何输出响应

具体场景：安装好json-server之后，在项目目录下输入json-server -v以及json-server -h json-server --watch db.json回车之后控制台没有任何的输出信息，既没有报错也没有其他有希望的信息存在。以为是安装包安装错误，于是先后uninstall以及install了好几次，都还是一样的情况。于是我重新建立一个目录test，在该目录下执行json-server -v居然有版本的输出信息了，接着我将db.json文件拉入该目录下，输入json-server --

2021-03-18 14:29:51 478

原创 promise基本使用

1.回调地狱callback hell由于异步操作是不能保证顺序的，但是有些异步操作之间是具有一定的关联性的，因此采用不断嵌套的方式保证顺序，但是嵌套越多代码可维护性越差，可读性越差。解决方法：promise（es6新增的API）2.promise语法promise是一个容器，里面存放的是异步操作，当执行异步操作的时候，promise状态为pending(未完成、正在执行)，当异步操作完成之后，改变状态为resolve,reject其中一种，其中resolve为成功，reject为失败，状态不可逆。切

2021-03-18 09:21:34 225

原创 Error: No default engine was specified and no extension was provided.

Error: No default engine was specified and no extension was provided.当在express中使用art-template时出现以上出错，出错代码如下：//引入expressconst express = require('express');// 数据存储const mongoose = require('mongoose');// 创建服务const app = express();// 配置模板引擎app.engin

2021-03-17 18:53:59 5775

原创在nodejs中使用mongodb

使用官方的mongodb包来操作https://github.com/mongodb/node-mongodb-native使用第三方包mongoose基于官方mongodb包进行的封装地址https://mongoosejs.com/使用：安装mongoosenpm install --save mongoose使用const mongoose = require('mongoose');// 引入Schemaconst schema = mon..

2021-03-17 11:52:52 302

原创 mongodb基本命令

show dbs查看显示所有数据库db查看当前操作的数据库use 数据库名称切换到指定的数据库如果没有该数据库，当向该数据库插入数据之后，会默认创建该数据库插入数据db.Students.insertOne(JOSN数据)Students为自定义集合（mongodb数据库中集合对应于关系型数据库中的表结构）insertOne表示插入一条数据show collections显示当前数据库所创建的集合db.集合名称.find()查看当前集合中的.

2021-03-17 09:35:21 47

原创启动mongodb服务

创建数据库目录在想要存放数据的地方，新建一个文件夹，比如：db，推荐的数据库目录是data/ db --> 数据库目录其中：data所在的目录为mongodb的安装目录，我的安装目录是：D:\mongodb，则db文件夹创建后的目录是：D:\mongodb\db\data启动数据库当前本地是win10环境打开dos环境，选择mongodb安装路径的bin目录，我的是D:\mongodb\bin接着输入以下命令：mongod --dbpath d:\mongodb\..

2021-03-17 08:15:00 2714

原创 npm中package.json与package-lock.json的区别

package.json在npm中实际用途参考：npm基本使用这篇文章，接下来主要讲解package-lock.json用途以及与package.json的不同npm 5以前没有package-lock.json这个文件，需要保存依赖信息，每次安装时都要加上--save参数；npm5以后版本加入了package-lock.json文件。当安装包的时候，不需要加上--save参数，它会自动保存依赖信息，且会生成或更新package-lock.json这个文件。而package-lock.json出现有啥用

2021-03-15 15:03:40 673

原创浏览器端模块加载器AMD和CMD

AMD和CMD1.AMD 异步模块定义2.CMD 通用模块定义3.AMD和CMD区别1.AMD 异步模块定义AMD：浏览器端模块化开发的规范。使用AMD规范快发需要用到对应的库函数RequireJs，也即AMD是RequireJs在推广过程中对模块定义的规范化的产出。RequireJs主要解决两个问题：多个js文件依赖性，也即多个有依赖性的js文件，会出现被依赖的文件需要早于依赖它的文件加载到浏览器中，但是如果当依赖关系比较复杂的时候，代码的编写和维护就变得很复杂了。js加载的时候，浏览器会停止

2021-03-15 11:19:38 975

原创 express提取出路由模块创建http服务

如果仅仅是在一个文件中进行服务创建，相对于维护性不高，同时当路由增加的时候，会造成结构不清晰的情况的产生，因此可以通过将路由模块单独抽取出来，单独进行维护操作。但是此时就会出现一个问题，如何建立服务入口模块app.js与路由模块router.js建立连接？最开始一般会想到通过模块内置对象module.exports导出，app.js进行导入： // router.js module.exports = function(app) { app.get('/',(req,res) => { r

2021-03-14 15:10:18 158 1

原创解决nodejs频繁修改代码需要频繁重启服务器问题

nodemon可以帮助我们频繁修改代码重启服务器问题。nodemon是一个基于Node.js开发的第三方命令行工具，使用时需要独立安装npm install --global nodemon使用# 使用方式和node一样nodemon practice.js# 等价于node practice.jsnodemon会自动监察当前项目的代码是否修改，并自动重启服务...

2021-03-14 13:10:28 624

原创在express中获取表单post请求体数据

express中没有提供API来获取post请求体数据，因此需要插件(body-parser)来进行获取安装npm install --save body-parser配置以及使用let express = require('express');// 引入包let bodyParser = require('body-parser');let app = express();//配置body-parser// 只要加上这个配置，则在req请求对象上会多出来一个属性：body//

2021-03-13 15:38:13 649 5

原创 express中使用art-template

下载模块npm install --save art-templatenpm install --save express-art-template

2021-03-13 14:56:50 353

原创 CDN工作机制

先简单了解一下电商和物流公司的仓储配送机制是怎样的，在电商刚开始发展的时候，买一件物品，商家发货只能从其所在点的工厂进行发货，因此一件商品送达一般3-10天不等。最后全国各地开始建立仓储中心，卖家的商品被放置在了各个仓储中心，因此发货点变成了离买家最近的仓储中心，一件商品的送达一般1-3天。而最近两年，前置仓开始兴起，什么是前置仓呢，即仓储中心建立在小区附近，使得一件商品的送达能在一天只能甚至于半个小时就能完成。1.什么是CDNcontent delivery network内容分发网络。随着互联网用户

2021-03-13 11:08:09 726

原创 DNS查询机制

先了解一下域名层级：以百度为例子：www.baidu.com。依次是com(顶级域名)、baidu(一级域名)、www(二级域名)。但是实质上还有一个唯一的根域名root：www.baidu.com.root，但由于root是唯一的，因此是否写root根域名不是特别必要。1.什么是DNSDNS：Domain Name System，也即域名系统，主要用于管理和查询域名对应的IP地址。在实际的生活中，在网页上输入某个网址：www.baidu.com时，浏览器并不是仅通过www.baidu.com这个域名就

2021-03-13 09:29:58 351

feedback-express.zip

feedback.zip

空空如也