关于js和vue以及项目搭建的相关问题

前端跨域

//0. 为什么出现跨域
	1. 浏览器默认的一种'同源策略'
	2. 协议-域名-端口不统一造成的跨域

//1. 跨域资源共享,在后端设置cors	(nodejs的express服务下)
	1. 后端安装: yarn add cors -S
	2. 引入: const cors = require('cors')
    3. 直接挂载: App.use(cors())

//2. 后台处理CORS,加入一句话  (加载设置响应头部分)
	header("Access-Control-Allow-Origin: * ") //* 代表所有网站,可设置指定网站,逗号隔开

//3. JSONP,一种非官方的跨域解决方案,只能是get请求(因为只能是src)
	1. 原理: 利用一些带有src属性的标签(script)能够不受限制并切合callback回调函数,得到结果
	2. 直接在script的src标签上加入访问端口地址,然后执行一个fn函数打印形参
			<script src='端口'><script>
            function fn(obj){
    console.log(obj) }
	3. 封装一个JSONP,跟ajax差不多原理
		function JSONP(setting = {
    } ){
   
            var fnName = 'Show'+parseInt(Math.random() * 100) //随机生成一个变量
            window[fnName] = setting.success  //全局动态生成一个函数, 在window上
            var oScript = document.createElement('script')	//创建一个script
            //设置标签的src
            let url= setting.url+'?'+Params(setting.data)+setting.Callback+'='+fnName
            oScript.setAttribute('src',url)	
            document.body.appendChild(oScript)
            //标签加载完成了,获取到数据了,就删除掉
            oScript.onload = function(){
   	//每个带有src的标签都带有一个onload事件
                this.remove()
            }
        }
		
		提示: setting就是ajax,里面要填的一些请求值
		封装好了后,就可以用类似ajax的方式调用访问端口拿到数据
				JSONP({
   
                    url:'访问的端口',
                    data:{
   		//要传的值,query
                        wd:'你好'
                    },
                    Callback:'cb',	//回调的函数
                    success:function(data){
   
                        console.log(data)
                    }
                })

一,ES6新增

1,语法变化

1. let   const  定义一个变量
	// 两个都没有变量提升
	// let具有块级作用域{}, 也就是局部使用才有效
	// const 是一个常量, 无法被修改

2,解构赋值

一, 解构对象赋值
    var obj={
   
        name:"fly",
        age:18
    }
    //解构语法: var {}=obj     //把obj对象赋值给另外一个对象
    var {
   name,age}=obj        //对象里面的值互相对应

二, 解构数组赋值
	var arr=[1,2,3,4]
    //解构语法: var []=arr     //把arr数组赋值给另外一个数组
    var [a,b,c,d]=arr         //数组里面的值互相对应
    var [,,c,d]=arr           //留空代表不赋值,但是一定要有位置
    var [,...Arr]=arr         //把后面三个值赋值给Arr
    console.log(Arr)          //[2,3,4]
	console.log(...Arr)       //2,3,4

3,字符串扩展

str.includes("a")      //查找一个字符串里面是否有该值,找到返回true
str.startsWith("a")    //查找一个字符串是否已该值开头,返回true或者false
str.endsWith("z")      //查找一个字符串是否已该值结尾,返回true或者false
//上面三个方法都可以添加第二个参数,为从第几个开始

//字符串的补全( 第一个参数:最低长度  第二个参数:补全的内容 )
'x'.padStart(5, 'ab')    //x只有一个,所以会利用ab在开头补全至  ababx
'x'.padEnd(5, 'ab')      //x只有一个,所以会利用ab在结尾补全至  xabab

//字符串模板 `${}`
var str="fly"
var str1=`<div>${
     str}</div>`

4,数组的扩展

arr.indexOf()  //在一个数组/字符串里面查找一个内容的下标,如果没找到下标就是-1
arr.forEach()  //遍历数组,里面需要加函数来执行,没有返回值,对原数组没影响
	语法: arr.forEach((el,index,arr)=>{
   执行})
			el: 数组里面的每一个数值
			index: 数值里面每一个数值的下标
			arr: 数组本身
            
arr.map()  //遍历数组,里面需要加函数来执行,没有返回值,对原数组没影响
	语法: 跟forEach()语法一样
    
for..of  //es6提供的一种新的遍历方式
	语法: for(var el of arr.keys(arr)){
    console.log(el) }
		keys: el得到下标       values: el得到值         entries: el得到实例( 下标和值 )

arr.filter() //获取数组中你想要的元素,不改变原数组,需要return来接收
	语法: Arr=arr.filter(el){
    return el>3 }

arr.some()  //查找数组中的内容,找到了,就返回true,后面的不找了,需要return来接收
	语法: arr.some((el)=>{
    if( el==20 ){
    return el } })

obj.findIndex()  //查找一个对象,符合就返回该内容
	语法: obj.findIndex((el)=>{
    if(el.id == 0){
    return true } })   //得到这个对象id的值

obj.find()  //查找一个对象,符合就返回该内容
	语法: obj.find((el)=>{
    if(el.id == 0){
    return true } })   //得到这个对象

5,对象的扩展

一. 对象的简写
	语法: var obj={
    name,age:18 }      //键和值相等,只需要写一个
    
二,对象的拷贝( 浅拷贝↓  深拷贝:用JSON转字符串再转对象 )
	obj.assign()  //对象的浅拷贝和合并( 只拷贝第一层的内容,第二层,第三层的内容两个对象共享 )
		语法: obj1 = obj.assign({
   }, obj)    //把obj拷贝给空元素,赋于给obj1

6,函数的扩展

一, 设置默认参数
	function show(str="fly"){
   }     //如果str没有传值进来,则默认为fly

二, 默认参数解构赋值
	function show({
    x,y=2}){
   } show({
   x:1}) //y默认为2   x没传参数为undefined

三, reset和扩展运算符
	function show(...rest){
   }   //在函数调用的时候使用的 ...obj 叫做如est参数
	... 扩展运算符  //...arr 可以把一个数组转成纯数字 1,2,3,4

四, 箭头函数
	()=>{
   }   //只执行一行的时候,不需要return和(){}    里面的this,默认指向外面一层

7,class类

继承: 子类拥有父类的属性和方法,子类可以重写父类的方法,子类可以新增自己的属性和方法

//父类
	class Person{
   
        //私有属性写在构造函数中
        constructor(name,age){
           //接收参数
            this.name=name
            this.age=age
        }
        say(){
                            //也会被子类继承
            console.log(this.name)
        }
    }
	var P=new Person('大佬','18')        //传入两个参数
    
//子类
    class Abc extends Person{
               //通过extends让Abc继承Person
        construstonr(name,age,upw){
         //接收参数
            super(name,age)              //继承父类的属性
            this.upw=upw                 //获取自身新增的值
        }
        mysay(){
                            //除了继承父类的,还便携自己新增的
            console.log(this.upw)
        }
    }
	var A=new Abc('小炮','19','258')

二,NodeJs

Nodejs是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Ndoejs使用了一个事件驱动,非阻塞式I/O的模型,使其轻量又高效,Nodejs的包管理器 npm  ,是全球最大的开源库生态环境
下载地址: http://nodejs.cn/
卸载: 删除C:\Program Files\nodejs      C:\users\用户名\appData\Roaming\npm  然后重装

0,express

1. express项目生成器
	//创建跟目录文件夹
	//文件夹初始 npm init   然后安装express包
	//安装: npm install express-generator -g
	//创建项目 express 名字  然后安装依赖包和运行项目

2. 安装express框架 
     第一步:  npm init -y     //初始化一个环境
     第二步:  在项目目录下安装   cnpm i express --save-dev

1,fs模块

简介: 主要用来文件的读取,写入,修改,追加,重命名,新建
引入: const fs=require("fs")       //该模块系统自带

//读取一个文件的内容
fs.radFile("./node.txt",'utf8',(err,data)=>{
      //err错误先行,data读取的内容 utf8解析二进制
    if(err) return console.log(err.message)
    console.log(data)    //打印读取到的内容
})

//写入内容到文件
fs.writeFile('./node.txt','你们好',(err)=>{
        //写入的内容会覆盖以前的
    if(err) return console.log(ree.message)
    console.log("写入成功")
})

//追加写入文件内容
fs.appendFile('./node.txt','你们好',(err)=>{
        //追加写入内容
    if(err) return console.log(ree.message)
    console.log("写入成功")
})

//文件内容的拷贝
fs.copyFile('./node.txt','npm.txt',(err)=>{
   
    if(err) return console.log(err.message)
    console.log('拷贝成功')
})

2,path路径

path 模块提供用于处理文件路径和目录路径的实用工具。

引入: const path=require("path")     //系统自带模块

//路径的拼接
path.join(__dirname,'./res','/123.txt')      //__dirname是获取该目录下的文件

//获取文件扩展名

3,http静态服务器

引入: const http=require("http")     //系统自带模块

//创建服务
const server=http.createServer()

server.on('request',(req,res)=>{
   })

//监听窗口
server.listen(3000,()=>{
    console.log("服务器启动中") })

三,npm模块

一,中间件的特性
	1.中间件就是一个普通函数,有三个参数,req,res,next 
	2.中间件需要用use执行,先安装,后执行,后续执行一定要加next()

二,npm切换淘宝镜像
	//1.直接设置淘宝镜像
    	npm config set registry https://registry.npm.taobao.org
		npm config get registry
        
    //2.安装yarn 是最快的
    	npm install yarn -g   //设置淘宝镜像,跟上面一样,把npm改成yarn
		
	//3.cnpm 中国版的npm,镜像包只有淘宝有
		npm install -g cnpm --registry=https://registry.npm.taobao.org
        
三,npm/cnpm/yarn一些常用命令
	//1.npm
		npm init -y     //初始化 package.json
		npm install     //根据 package.json文件下载所有包
        npm i 包名(express) -save-dev
			-g          //全局包
			--save      //生产需要  可缩写成 -S
            --save-dev  //开发需要  可缩写成 -D
		npm uninstall 包名(express) -save-dev    //卸载一个包

	//2.cnpm
		操作跟npm一摸一样,只是npm变成了cnpm

	//3.yarn
		操作跟npm一摸一样,只是npm变成了yarn
		

1,自定义模块

安装: npm init -y   //初始化文件夹
设置: 文件夹内默认访问的主文件路径 package.json
暴露: module.exports={
   }
//自定义模块也就是自己写一个函数,进行封装,然后暴露出去,让外部可以引用

2,querystring模块

解析: 查询字符串模块,一般是对http请求所带的数据进行解析,对应四个方法
引入: const querystring=require("querystring")    //系统自带模块

//1.方法一 querystring.parse()   将一个字符串反序列化转为一个对象   键不带引号
	语法: querystring.parse(name=ygy&age=18)    转化后 {
   name:'ygy',age:18}

//2.方法二 querystring.stringify()   将一个对象序列化转为一个字符串
	语法: querystring.stringify({
   name:'ygy',age:18})    转化后 name=ygy&age=18

//3.方法三 querystring.escape()    对字符串进行编码
	语法: querystring.escape(str)          转化后 %E5%AD%97%E7%AC%A6%E4%B8%B2

//4.方法四 querystring.unescape()   对编码进行解析
	语法: querystring.unescape(%E5%AD%97)       转化后 '字符串'

3.mysql

安装: cnpm i mysql --save-dev( 可以缩写成 -D )
引入: const mysql=require("mysql")

//1.创建连接对象
var connection=mysql.createConnection({
   
    host:"localhost",        //sql主机名
    user:"root",             //用户名
    password:"root",         //密码(一般不设置就填空)
    database:"users"         //数据库的名字