HTTP **** Usage Guide
1. Submit forms **** : coonforms and uploading files
An html
can be sent in four ways:
- using the POST method and setting the enctype attribute to application/x-www-form-urlencoded (default);
- using the POST method and setting the enctype attribute to text/plain;
- using the POST method and setting the enctype attribute to multipart/form-data;
- using the GET method (in this case the enctype attribute will be ignored).
* * * * \
The encType attribute specifies how form data should be encoded before being sent to the server. If a POST request is used, the content-Type specified value in the request header is encType.
Content-type for Post requests (encoding Type)
| value | describe |
| application/x-www-form-urlencoded | Encodes all characters before sending (default). (Spaces converted to “+” plus, special symbols converted to ASCII HEX values) |
| multipart/form-data | No character encoding. You must use this value when using forms that contain file upload controls. |
| text/plain | Spaces are converted to “+” plus signs, but no special character encoding. |
In contrast, there is only one data submission mode (coding mode) in get mode, namely Application/X-www-form-urlencoding; Charset = utf-8.
* * * * \
When the browser submits the form (triggering the form Submit event), it performs the following steps:
1. Identify valid entries of form elements in the form as submitted entries
2. Build a form dataset (FormData?)
3. Encode data as content-Type according to the value of the encType attribute in the form
4. Send data to the specified address based on the Action and method properties in the form
2. Ajax submission
Ajax submission file:
1. Initially, Ajax couldn’t manipulate files for security reasons, so you couldn’t do file uploads with Ajax, but you can do this with hidden form submissions, so this is the main use for hidden form submissions.
2. Later, XMLHttpRequest introduces the FormData type, which provides for serializing tables and creating data in the same format as the form. Make it possible to upload files through Ajax. Almost all major browsers now support this object.
Code:
let formData = new FormData();
Or based on let formData = new formData (document.querySelector(” #form_id “))
FormData. Append (” file “, the document querySelector (” input [type = file] “));
utils .ajax({
url: url,
method: “post”,
data: formData,
headers: { “Content-Type”: “multipart/form-data” }
})
Ajax **** facilitates coding:
application/json
Application /json is a content-type response header. In fact, it is increasingly used as a request header to tell the server that the message body is a serialized JSON string. Due to the popularity of the JSON specification, json.stringify is natively supported in every major browser except for earlier versions of IE, and all server-side languages have functions that handle JSON without any trouble.
Content-type: application/json ; charset=utf-8 designates the content to be in JSON format , encoded in the UTF-8 character encoding.
In Google’s AngularJS Ajax function, the content-type default is to submit a JSON string. Content-type: application/json; When, the default encoding is UTF-8, which does not need to be specified.
JQuery and QWrap Ajax, content-type default is “Application/X-www-form-urlencoded;charset= UTF-8”
Data submission differences: The Form does not support application/ JSON submission, but we can intercept the Form Submit submission and submit the serialized JSON data of the form instead.
$(‘:submit’).on(‘click’,function(){
$.ajax({
url:”buy”,
type:”POST”,
data:JSON.stringify($(‘form’).serializeObject()),
ContentType :”application/json”, // Missing URL encoding, cannot be converted to JSON object
success:function(){
Alert (” success “);
}
});
});
3. Http**** protocol behavior
As we know, HTTP protocol is an application layer specification based on THE ASCII code transmission and TCP/IP protocol. The specification breaks an HTTP request into three parts:
- The status line
- Headers request header
- Entity-body Message body
The protocol states that the data submitted by a POST must be placed in the entity-body of the message, but it does not specify how the data must be encoded. In fact, it is entirely up to the developer to format the body of the message, as long as the final HTTP request that is sent meets the above format.
However, when the data is sent, it does not make sense until the server has successfully parsed it. Common server-side languages such as PHP and Python, as well as their frameworks, have built-in capabilities to automatically parse common data formats. The server usually uses the Content-Type field in the headers to determine how the body of the message in the request is encoded and then parses the body.
So when it comes to POST submission data scheme, there are two parts: Content-Type and message body encoding.
Content-type:
4, Form VS Ajax, $HTTP (www.cnblogs.com/lidgblogs/p)…
1. Submission method
Form forms are usually submitted using action, method, and Submit defined in HTML. Alternatively, forms can be submitted by calling the Submit function in JS.
There are many ways to commit, such as by encapsulating an XMLHttpRequest object, but I won’t go into all of them here.
The other two requests (Ajax, $HTTP) are based on XMLHttpRequest.
2. Page refresh
Form submission. After updating data, it is necessary to turn to a blank page and submit the original page for post-processing. Even the page submitted to itself needs to be refreshed, so it is very limited.
Ajax, $HTTP can implement a partial page refresh, the entire page does not refresh.
3. Who submits the request
Form submission is done by the browser, and the Form can be submitted regardless of whether the browser has JS enabled.
Ajax, $HTTP is to submit the request through JS, request and response are processed by the JS engine, so the browser does not enable JS, cannot complete the operation.
4. Whether files can be uploaded
Originally, Ajax couldn’t manipulate files for security reasons, so you couldn’t do file uploads with Ajax, but you can do this with hidden form submissions, so this is the main use for hidden form submissions.
Later, XMLHttpRequest introduced the FormData type, making it possible to upload files through Ajax, as I’ll explain later.
5, MIME
“Multipurpose Internet Mail Extensions” is a Multipurpose Internet Mail Extensions protocol.
1. The role
The servers tell the browser what type of multimedia data they send, and by specifying the MIME type of the multimedia, the browser knows which messages are MP3s, which are Shockwave files, and so on.
The server places the MIME identifier in the transmitted data to tell the browser which plug-in to use to read the relevant file
For text file types without a specific subtype, text/plain is used. Similarly, binaries have no specific or known subtype, that is, application/ OCtet-stream is used.
6. Ajax requests fail to download files
Methods to implement the download
- Hide the form and submit the form (blog.csdn.net/qq_42864616…)
- Use window.open() or window.location.href= “download address”
- Create an iframe. The SRC of the iframe can be the file address URL to download the file directly
1. Using Ajax, ajax return value types are JSON,text, HTML and XML, or ajax sending and receiving can only be string string, not stream type, so file download cannot be realized, and response conflicts will occur when it is used forcefully.
If you have to use Ajax, you can only do so by returning the generated file-related url. The file is then downloaded without a page refresh by creating an iframe in the callback function and setting its SRC value to the file URL, or a processing URL for the file generation stream.
2. Do not use Ajax, through dom dynamic operation or creation of IFrame and form to realize the page is not refreshed while downloading the file, where the SRC of iframe can be the file address URL to directly download the file, or stream processing URL can be downloaded through response stream output. Form is a stream processing URL that can be output and downloaded through response stream. The file can be downloaded during dom dynamic operation without page refresh.
To implement a progress bar at the same time as the download, you can create a scheduled task that sends requests to the background at regular intervals to obtain the progress of the file download through a common object, such as session.
Linux command
What do @ \* and $# mean in Linux shell scripts? #! / bin/bash and #! What is the difference between /bin/sh?
$@ indicates all parameters
$# indicates the number of all parameters
∗ takes all parameters of the current shell and treats all command lines as a single string, equivalent to “* Takes all parameters of the current shell and treats all command lines as a single string, equivalent to” * Takes all parameters of the current shell and treats all command lines as a single string, equivalent to “1$2”
@ takes all the parameters of the current shell and reserves the whitespace in the parameters, which is equivalent to “1”, “$2”, which is the best way to pass the parameters to other programs.
$1 takes the first argument.
#! Is a special identifier followed by the path of the shell that interprets the script.
#! /bin/sh means that the script is interpreted using /bin/sh. #! / bin/bash in the same way.
#! / bin/sh and #! /bin/bash is basically the same, but there are still different standards, and sh is arguably a shortened version of bash.
\
2, Linux alias**** how to pass parameters?
Alias will only be expanded sequentially, and arguments will not take effect. The best way to do this is to use function. If you want to use alias, you can combine it with function like this:
alias zhouchun=’function __zhouchun() { echo “scp $* j”; unset -f __zhouchun; }; __zhouchun’
This function unsets itself after it is used, leaving nothing extra, and only your alias is used.
~/.bash_profile: Each user can use this file to enter shell information dedicated to their own use, and this file is read when logging in and each time a new shell is opened.
~/.bashrc: This file contains bash information specific to your bash shell, one for each user, in the user directory.
The Linux unset command is used to delete a variable or function.
Unset is a shell – built instruction that can delete variables or functions.
Unset [-fv][variable or function name]
Parameters:
- -f Deletes only functions.
- -v Deletes only variables.
3. Run uname -a to check whether my Linux system is 64-bit (note: x86_64 indicates 64-bit system, i686 indicates 32-bit system).
4, background start program: followed by & symbol, such as: Redis-server &
Want to exit after not background start program: exit
/configure — prefix=/usr/local/xx when compiling and installing software on Linux.
The installation of Linux source code consists of three steps: configure, make, and make install.
Configure is an executable script that has a number of options. Use the command./ Configure -help to print a detailed list of options in the source directory to be installed. The -prefix option configures the installation path.
If this option is not configured, the executable file is stored in /usr/local/bin, the library file is stored in /usr/local/lib, the configuration file is stored in /usr/local/etc, and other resource files are stored in /usr/local/share. It’s scattered.
To centrally manage various files of a certain software, you can configure -prefix, for example:
. / configure — prefix = / usr/local/mongo
/usr/local/mongodb can be stored in /usr/local/mongodb.
Another benefit of using the -prefix option is to uninstall or port software. When an installed software is no longer needed, simply delete the installation directory to uninstall the software cleanly. Porting software simply copies the entire directory to another machine (the same operating system).
To uninstall the program, you can use make uninstall once in the original make directory, but only if the make file has been specified for uninstall.
6. Today, I installed the Supervisor on Ubuntu server, and tried to uninstall it again after the deployment failed. After sudo apt-get Remove Supervisor found that the configuration file was still there, I manually deleted the configuration file.
Have you ever had an apt-get purge program?
Apt-get remove deletes software packages while preserving configuration files
Apt-get Purge will purge the configuration files of both software packages and software. apt-get purge -y python.*
7. View all users and user groups in Linux
Groups Gliethttp groups gliethttp whoami The name of the current login user the /etc/group file contains all groups /etc/shadow and /etc/passwd All user names that exist in the system
Sh file “Permission denied”
1. Add the execute permission chmod +x xx.sh. 2
9, [: too many arguments]
If [1==”reids”− A1 ==”reids” -a 1==”reids”− A2 ==” port”
If [[1 == “reids” &&2 == “port”]]
Node_modules.bin \ webpack-dev-server node_modules.bin\ webpack-dev-server node_modules.bin\ webpack-dev-server node-max-old-space-size =10240
Webpack 4
1. Webpack is essentially a static Module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.
Understand four core concepts:
- The entrance (entry)
- Output (output)
- loader
- The plug-in (plugins)
The entry point indicates which module WebPack should use as a starting point for building its internal dependency diagram. The default value is./ SRC.
The Output attribute tells WebPack where to export the bundles it creates and how to name these files, with the default being./dist.
You may find that the term emitted by generation (or emit) permeates our entire documentation and plug-in API. It is a special term for “produced” or “employer”.
* * * * * * \
Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). In essence, WebPack Loader converts all types of files into modules that the application’s dependency diagram (and ultimately its bundle) can reference directly.
Loader has two goals in the webpack configuration:
- The test property identifies the files or files that should be converted by the corresponding loader.
- The use attribute indicates which loader should be used for conversion.
e.g.
module: {
rules: [
{ test: /.txt$/, use: ‘raw-loader’ }
]
}
“Hey Webpack compiler, when you encounter a” path that is resolved to ‘.txt’ in require()/import statement “, use raw-loader to convert it before you package it.
2. Plugins
Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment. Plug-in interfaces are extremely powerful and can be used to handle a wide variety of tasks.
To use a plug-in, you simply require() it, then use the new operator to create an instance of it and add it to the plugins array. You can also use the same plug-in multiple times in a configuration file for different purposes.
e.g.
const HtmlWebpackPlugin = require(‘html-webpack-plugin’); // Install via NPM
plugins: [
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]
3, patterns,
By selecting either Development or Production to set the mode parameter, you can enable the optimization built into WebPack for that mode
module.exports = {
mode: ‘production’
};
4. Common plug-ins
1, CommonsChunkPlugin
By splitting the common modules of multiple entry chunks, the resultant file can be loaded once at the beginning and stored in the cache for later use. This leads to an increase in page speed because browsers quickly remove common code from the cache, rather than loading a larger file every time a new page is visited.
You must load the generated public chunk before the import chunk.
The extract-text-webpack-plugin is designed to extract CSS styles and prevent them from being wrapped in JS and causing page style loading errors.
This plugin will by default extract all CSS directly or indirectly introduced (require or import) in an entry file into a single CSS file. Modules loaded on demand (require.ensure() and import()) functions will not be extracted. AllChunks: True is required.
Do not use the extract-text-webpack-plugin when using web-dev-server, it is not currently supported.
3. CommonsChunkPlugin is mainly used to extract third-party libraries and public modules to avoid large bundles loaded on the first screen or on demand, which may lead to long loading time. It is really a powerful tool for optimization.
In this case, vendor.js is pure white and contains only third-party library files, common.js is the custom public module and Runtime.js is the running file of webPack.
Output. filename and output.chunkFilename
Output. filename: This option determines the name of the bundle output from the entry entry file. Note that this option does not affect output files that load Chunk on demand. For these files, use the output.chunkfilename option to control the output.
Output.chunkfilename: This option determines the name of a non-entry chunk file. The default is to use [id].js or a value inferred from output.filename ([name] is pre-replaced with [id] or [id].
-Chuck: The bundle is a chunk
6. Misuse of hash, chunkhash, contenthash:
Chunkhash is the hash value calculated based on the content of a specific chunk.
Chunkhash is different from hash. It parses dependent files based on different Entry files, constructs corresponding chunks, and generates corresponding hash values.
Hash is generated during compilation. Each compilation generates a unique hash, but all resources are created using the same hash, which cannot fulfill the requirements of persistent caching.
Extract-text-webpack-plugin provides another hash value: contenthash. As the name implies, contenthash represents the hash value of the content of the text file, that is, the hash value of the style file only.
Do not use ****[chunkhash] / [hash] / [contenthash] in the development environment, as there is no need for persistent caching in the development environment, and this increases compile time. ****[name] **** in the development environment is fine.
webpackIn the file name generated by packaging,hash,chunkhash,contenthashThe difference between
| hashtype | The difference between |
| hash | Each packaging generates a unique hash |
| chunkhash | Based on the contents of each chunk; For output.filename and output.chunkFilename, chunkhash is recommended. |
| contenthash | Hash generated from the contents of the extracted file; When using the ExtractTextWebpackPlugin (webpack 3.x) or MiniCssExtractPlugin (webpack 4.x), use contenthash to extract CSS parts into separate CSS files (e.g. Note: Contenthash placeholder configuration is supported only if the content of the extract plug-in is extracted using the content above. |
* * \
* * * * \
7, import and require****
The most important idea in Node programming is modularity. Both import and require are used by modularity.
Follow the specifications
- Require is an introduction to the AMD specification
- Import is an ES6 syntax standard that must be converted to ES5 syntax for browser compatibility
Call time
- Require is a run-time call, so require can theoretically be used anywhere in the code
- Import is called at compile time, so it must be placed at the top of the file
nature
- Require is an assignment process. The result of require is an object, a number, a string, a function, etc., and the result of require is assigned to a variable. New require.ensure() dynamic loading.
- Import is a deconstruction process, but none of the engines currently implement import. We use Babel in Node to support ES6, which is simply transcoding ES6 to ES5 and then executing it. The import syntax is transcoding to require
- The two on-demand loading functions import() function, require.ensure() function, are re-loaded to complete dynamic loading.
Beyond that, essentially:
Either CommonJS or ES6 Module output can be thought of as an object with multiple properties or methods
Properties or methods of imported modules in ES6 Modules are strongly bound, including base types; CommonJS is just plain value passing or reference passing.
8, webpack * * * * plugin list in detail the official document address: www.webpackjs.com/plugins/com…