前端笔记（每天学习一点点！）

一、表单<form>的enctype属性（是设置表单的MIME编码）

（1）applicaiton/x-www-form-urlencoded(默认值)

（2）multipart/form-data

（3）text/plain

其中①application/x-www-form-urlencoded是默认值，大家可能在AJAX里见过这个xmlHttp.setRequestHeader("Content-Type","application/x-www-form- urlencoded"); 这两个要做的是同一件事情，就是设置表单传输的编码。在AJAX里不写有可能会报错，但是在HTML的form表单里是可以不写 enctype="application/x-www-form-urlencoded"的，因为默认HTML表单就是这种传输编码类型。而 ②multipart-form-data是用来指定传输数据的特殊类型的，主要就是我们上传的非文本的内容，比如图片或者mp3等等。 ③text/plain是纯文本传输的意思，在发送邮件时要设置这种编码类型，否则会出现接收时编码混乱的问题，网络上经常拿text/plain和 text/html做比较，其实这两个很好区分，前者用来传输纯文本文件，后者则是传递html代码的编码类型，在发送头文件时才用得上。①和③都不能用 于上传文件，只有multipart/form-data才能完整的传递文件数据。

常见的MIME类型（就是设定某种扩展名的文件用一种应用程序来打开的方式类型）

超文本标记语言文本 .html,.html text/html

　　　　普通文本 .txt text/plain

　　　　RTF文本 .rtf application/rtf

　　　　GIF图形 .gif image/gif

　　　　JPEG图形 .jpeg,.jpg image/jpeg

　　　　au声音文件 .au audio/basic

　　　　MIDI音乐文件 mid,.midi audio/midi,audio/x-midi

　　　　RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

　　　　MPEG文件 .mpg,.mpeg video/mpeg

　　　　AVI文件 .avi video/x-msvideo

　　　　GZIP文件 .gz application/x-gzip

　　　　TAR文件 .tar application/x-tar

multipart/form-data 上传文件步骤：

enctype="multipart/form-data"是上传二进制数据; form里面的input的值以2进制的方式传过去。
form里面的input的值以2进制的方式传过去，
所以request就得不到值了。也就是说加了这段代码,用request就会传递不成功,取表单值加入数据库时，用到下面的：
SmartUpload su = new SmartUpload();//新建一个SmartUpload对象

su.getRequest().getParameterValues();取数组值

su.getRequest().getParameter( );取单个参数单个值

二、好用的插件库

1、fontawesome  官网：图标库v5 - FontAwesome 字体图标中文Icon

 三、模拟数据

1.RAP接口管理平台

2. JSONPlaceholder - Free Fake REST API

3.apifox

4.postman

5.crudapi 增删改查接口

post请求：（传参在body中）:传参实在body中，

 

四、数据接入 

1.get请求

（1）首先npm i axios

（2）在main.js挂载到原型，全局使用

（3）不传参

this.axios.get('https://jsonplaceholder.typicode.com/posts')
.then(res=>{console.log(res)})
.catch(err=> console.error(err))

（4）传参

this.axios.get('https://jsonplaceholder.typicode.com/comments',{
                        params:{
                            postId:1
                        }
                    }).then(res=>{
                        console.log(res);
                    }).catch(err=> console.error(err))

2.封装axios

3.解决跨域问题

（1）原因：协议、域名、端口号不一致会引起跨域

devServer:{
    proxy:{
      '/api':{
        target:'https://demo.crudapi.cn/api/business',
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        },
        headers:{
          'Access-Control-Allow-Origin':"*"
        }

      }
    }
  }