高级程序设计

拼接
Object.assign(obj,{c:3})
var arr1 =[1,2,3,4]
var arr2 =[1,2,3,4]
var a=[…arr1,…arr2]
connect
es6数据类型 Symbol

暂时性
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称TDZ）。
if (true) {
tmp = ‘abc’; // ReferenceError
let tmp;

}

检测数据类型

reducer
reducer 和 action的关系
1、reducer 可以理解为一个action.type的监听器，监听各种类型的action，然后返回相应的state。
2、action 可以理解为reducer监听的各种type，然后由 dispatch 来进行触发。
3、dispatch某一个action以后，dispatch函数内部会轮流调用被combineReducers的所有reducer，如果匹配到给定的action.type,则返回相应的state.

作者：R_X
链接：https://www.jianshu.com/p/69c36de6dba7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
reducer(state,action)
switch(action.type){
return state {…state}
}

    变量解构赋值()
    基本数据类型:null string number boolean undefined symbol
    引用数据类型:object function array 参数

字符串解构
const [a,b,…c] = “JavaScript”
console.log(a,b,c)

对象解构 别名
const { x,y:z } = { x:1,y:2 }
console.log(x,z)

Math
Math.ceil Math.floor

let {log,sin,cos } = Math;

数组解构
变量交换 x = 1 ,y= 2 ===> x=2,y=1
var x = 1
var y = 2
var [x,y] = [y,x]
console.log(x,y)
消除魔法字符串 redux type const TYPE = Symbol(“TYPE”)
const shapeType = {
strain:Symbol(“demo”) //魔法字符串
}

数组去重
var arr = [2,2,2,2,2,3]
arr.forEach(item => {
s.add(item)
});
for(let i of s){
console.log(i)
}
var arr = [2,2,2,2,2,3]
for(let i of arr){
console.log(i)
}

拿每一项
const mapdemo = new Map([
[1,“a”],
[2,“b”],
[3,“c”]
])
for(let key of mapdemo.entries()){
console.log(key)
}

generator 函数
function* gen(){
yield “hello”
yield “world”
}
let g=gen()
console.log(g.next())

1-2
{value:“world”,done:false}
3
{value:“underfined”,done:true}

iterator 迭代器
let arr =[1,2,3]
let obj ={0:“zero”,1:“one”,
[symbol.iterator:function(){
const self =this
let index=0
return{
next:function(){}

}
}]
}
map set
for(let key of arr){
console.log(key)
}

生成器包括迭代器

调用生成器包括迭代器

数据流 文件流

why 宏队列 微队列 单进程 多线程

程序==qq

js 单线程

运行时间长的东西 出现异步
cpu同一时间 只能运行一个进程 python 携程是最小单位

js 脚本从上往下执行的时候，宏队列（线程池）

同步代码 =》微队列=》宏队列 js脚本执行完毕
同步队列 start end promise
微队列 promise.then
宏队列 settimeout

global(‘start’)
global(“end”)
zan settimeout =》堆

链表

单链表 双链表 循环链表
class node {
constructor(element){
this.element=element
this.next=null
}

class linklist{
consructor(){
this.head=null
this.count=0

}
}
}

object.keys() 查看原型的所有属性

栈

filq frist in last out 先进后出

队列

FIFQ first in first out 先进先出

买票 先进先出

栈 先进后出

进制转换

约瑟夫环

函数作用 参数 返回值 设么时候调用

叶节点

左右为none
就是在最下边的节点

eveal ""里边的语句用js执行
var arr=[]
arr.instanceof Array
true

typeof()

Object

str=“dsadsadsad”
let arrstr=Array.from(str)
log(arrstr)

正则
str.match（正则）

正则.test.（str）

数据属性
访问器属性
Object.defineProperty//访问器属性
(

mvvm

将view的状态和行为抽象化

可以将 ui和业务逻辑分开

model的数据同时帮忙处理view中由于需要展示而涉及的业务逻辑

MVVM的优势

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，
Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，
而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的
同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,
不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

ue.js 可以说是MVVM 架构的最佳实践，vue的数据响应原理是前端面试高频问题，学会mvvm
薪资更上一层 v-model v-bind v-text v-html

MVVM的数据劫持：
Observer 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用Object.defineProperty的[[get]]和[[set]]来实现。vue 4 Proxy

数据属性 ES
数据属性包含一个数据值的位置。在这个位置可以读取和写入值，数据属性有
四个描述其行为的特性[[Configurable]]、[[Enumerable]]、[[Writable]]、[[value]]

访问器属性 if(a=1&&a=2&&a===3){}
1、访问器属性不包含[[Writable]]和[[value]],取而代之的是[[set]]和[[get]]两个方法，
2、访问器属性在我们想要设置或者修改某个值得时候是非常有用的，并且可以通过它监听某个属性值是否发生了变化

npm i -g typescript ts
运行

tsc --init
60 42 15

自动监事

tsc a.ts

终端 运行任务 监视

面向对象的3大特征

封装 继承堕胎、、

实例属性 类属性 实例方法 类方法

集成关键字 extends

js react vue typeerror ts不仅帮你避免掉typeerror 还具备自动识别数据类型的功能，提示你应该是设么类型

1.数据类型 基本数据类型 引用数据类型
number string underfined null boolean symbol

Array object function

2.方法和类

3.抽象

4.接口

5.装饰器

let arr:[string,number]=[‘z’,1]//元组

函数4要素

参数 返回值 函数的作用 在哪调用

ts js 不同

enum 名{}
never 不常用

void 无返回类型

any 任意类型
[string,number]元组类型

Array number[]

-方法

重载 实例属性 类属性

实例方法 类方法

-类

继承，抽象类
继承 extend， 抽象类 abstract

接口

interface

装饰器

@方法名
commander

let program =require(‘commander’)
program
.version(‘1.0.0’,’-v,–version’,)
.parse(process.argv)

运行 npm init -y
node index -v
查看版本号

---

发包
注：1）一定要切回到国外的镜像源

    2）包名不能和现有的包名冲突

发包的流程：

    1)npm init 生成package.json 

    2)编写包的功能

    3)npm login  

    4)npm publish 发布    

---

sh https 加密传输的协议

ssh和https的区别：

ssh :需要配置公钥和秘钥 —> 只配置一次 v

https :需要输入用户名和密码 —> 每次提交都需要输入

如何配置公钥和秘钥

ssh-keygen 生成公钥和秘钥

git相关的命令

分支

git clone <仓库地址> 克隆仓库

git checkout -b <分支名> 创建并切换分支
git status 查看当前代码变动

git add . 把修改从工作区提交到暂存区

git commit -m “对本次提交的描述” 把修改从暂存区提交到本地版本库

git push origin <分支名> 把修改从本地版本库提交到远程

git branch 查看分支

---

node

模块: 1个js文件就是一个模块

nodejs遵循的是commonjs规范。

commonjs规范：module.exports 来抛出模块 require() 引入模块

exports 抛出 其实就是module.exports的别名

module.exports 后者会覆盖前者，若要抛出多个方法，需要以对象的形式抛出，

exports 不能直接赋值，必须以属性的形式抛出模块

require(模块标识) 默认找的是module.exports指向的对象

模块标识：1.路径 绝对路径 / 磁盘根目录去找 相对路径 ./ …/

     2.包名  lixd-test

---

本地 -l 全局 -g

执行命令

引入
npm i xxxx -S
let program =require(‘commander’)
const inquirer = require(‘inquirer’);
const superagent = require(‘superagent’);

//操作后台与前台信息记录
const promptList = [
{
type: ‘list’,
message: ‘请选择一种水果:’,
name: ‘fruit’,
choices: [
“Apple”,
“Pear”,
“Banana”
],
filter: function (val) { // 使用filter将回答变为小写
return val.toLowerCase();
}
}
,
// 具体交互内容
{
type: ‘input’,
message: ‘设置一个用户名:’,//提示文字
name: ‘name’,//后面的name是输入的文字
default: “test_user” // 默认值
},
{
type: “password”, // 密码为密文输入
message: “请输入密码：”,
name: “pwd”
},
{
type: “input”, // 密码为密文输入
message: “请输入邮箱：”,
name: “email”
},
{
type: “input”, // 密码为密文输入
message: “请输入翻译文字：”,
name: “key”
}
];

//userlist 为比对值
let userlist=[{
user:“mfy”,
password:‘123’,
email:“2215140960@qq.com”
}]

登陆与翻译后台代码

program
// .version(‘1.0.0’,’-v,–version’,)
// .parse(process.argv)
.command(‘login’)//需要执行的命令
.action(function(){//定义命令的回调函数
// console.log(‘登录npm官网’)
//-------------------
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
superagent.get(‘http://fanyi.youdao.com/openapi.do?keyfrom=toaijf&key=868480929&type=data&doctype=json&version=1.1’) .query({ q:answers.key }) .end((err, res) => {
// Do something
console.log(res.body.translation);

          });
      let flag=  userlist.some(item=>item.user===answers.name&&item.password===answers.pwd&&item.email===answers.email)
      if(flag){
          console.log('登录成功');
          
      }else{
          console.log('登录失败');
          
      }
    })

//用户名 密码 邮箱
})
program.parse(process.argv)

---

module.exports 抛出模块
require来引入模块
exports 不能直接赋值，必须以属性形式抛出模块
require（）默认找的是module.exports指向的对象

require（模块标识）
1.路径 绝对路径 相对路径 ./ …/

2.包名 mengfnayue

相对路径 没， 路径文件
有. 绝对路径

从磁盘根目录找 放到 cpan 或 d盘 最外层
包的查找规则

1.先在当前目录下找node——modules文件夹

2.包名文件夹

3. 入口文件 pack.json中main.js中找

4. zhaobudao main制定的文件 找 index.js

---

nodemodules 的查找跪着

1.先在当前文件夹找nodu——modules

2. 一级一级往上找
3. 没找到 qu环境变量的nodepath中找，全局路径中去找
   npm root -g 查看全局包的位置

不是内部和外部命令

npm uninstall xx -g 卸载

cnpm i @vue/cli 全局中没找到vue的命令

---

cli

手搭命令行(bw-cli)的步骤：

1.新建package.json文件

2.新建index.js文件，必须在文件顶部声明执行环境，添加 #! /usr/bin/env node

功能是：告诉系统该文件需要使用node解析

3.在package.json文件内添加bin字段
{ "bin":{ "bw-cli":"./index.js" } }
4.在package.json目录下，执行npm link，在全局生成cmd执行文件

5.在命令行内输入bw-cli

获取命令行参数：process是nodejs一个全局变量

process.argv获取命令行参数，从下标为2的开始

http-server 起服务

http-server 8080

http-server -p xxxx 指定端口号

---

koa 是一个web框架

中间件 async 处理异步操作 ----洋葱圈模型 123开始 321 结束
app.use(async(ctx,next)=>{
ctx.body=‘hello word’
})

req 请求体 ctx.request.path ctx.path --不携带参数 ctx.reponse.url —携带参数请求的路径

res 响应体 ctx.reponse.body ctx.body 响应前台的相应方法
ctx.request.method 请求方法

nodemon 监听 js 文件 ，重启服务
npm i nodemon -g
nodemon xx.js

中间件代码

写入文件
覆盖式写入
fs.appendFileSync(’./a.js’,本次请求花费${time}s)
ctx.path /favicon.ico
ctx.method get
ctx.status 200

---

请求数据
get 服务器
post 向服务提交数据 会增加数据
put 更新服务器数据 不会增加数据
delete 从数据库删除数据

---

接口 koa-router
中间件 -----koa-router koa static

---

__dirname 和 process.cwd()区别

process.cwd 指的是当前工程的工作目录 外成小黑板 node执行的文件目录

__dirname 当前js文件的绝对路径 所以当你在 /d1/d2/myscript.js 文件中写了 __dirname， 它的值就是 /d1/d2 。

postman phpstudy navicate

mysql数据库：是一个关系型数据库

sql

曾 insert into mengfanyue (username,password) values (“list”,1234)
查看 select * from mengfanyue

select * from mengfanyue 查询
delete from mengfanyue where id=10 删除
insert into mengfanyue (username,password) values (“list”,1234) 增加
update mengfanyue set password=12345 where id=10 修改

id 要能查询得到就可以操作

---

promise

为了解决回调地狱

reject 失败

resolve 成功
connection.end() 关闭链接

app.js中
let data=await query(‘select * from mengfanyue’)
mengfanyue 表名

query.js database: “mfymfy”
mfymfy 数据库名字

3种状态
进行中 已成功 已失败
进行中=》 已成功 resolve（）
进行中=》 已失败 reject（）

---

koa获取参数
怎么获取前端post的参数？—
插件----koa-bodyparser 中间件

功能 接受前端post传递的参数，并且放到ctx.request.body
app.use(bodyParser()) 必须放在路由上边app.use(router.routes());

app.use(router.allowedMethods());

koa-bodyparser 必须放在路由中间件的上面

koa的错误处理机制
try{
尝试着执行代码
}catch（e）{

}
commition.end（）

await 等待

---

put 跟新 get 获取 post 提交 delete 删除

try语句
try{
//尝试走
await query(‘insert into list (username,age,sex,phone,address,id_card) values (?,?,?,?,?,?)’,[username,age,sex,phone,address,id_card]);
ctx.body = {
code:1,
msg:“添加成功”
}
}catch(e){
//为什么没走成功输出代码
ctx.body = {
code:0,
msg:e
}
}

添加逻辑
router.post(’/api/add’,async(ctx,next)=>{
console.log(ctx.request.body);
let {username,age,sex,phone,address,id_card} = ctx.request.body;
if(username && age && sex && address && id_card){
try{
await query(‘insert into list (username,age,sex,phone,address,id_card) values (?,?,?,?,?,?)’,[username,age,sex,phone,address,id_card]);
ctx.body = {
code:1,
msg:“添加成功”
}
}catch(e){
ctx.body = {
code:0,
msg:e
}
}
}else{
ctx.body={
code:2,
msg:“参数有误”
}
}
app.use(async ctx => {
// the parsed body will store in ctx.request.body
// if nothing was parsed, body will be an empty object {}
ctx.body = ctx.request.body;
console.log(ctx.request.body);

  });
//如何接受前端post接收的数据

})

let和【】里面的一致
await query 和表里面的字段名一样

let 和 前端的postman一样

---

sql语句

查询
selectfrom 表名 ---- 把表里所有的数据都查出来
selectfrom 表名 limit 起始下标，每页的条数 -------截取
selectfrom 表明 where username like %${key}% ----模糊搜索
selectfrom 表名 字段1，字段2…）values（？，？，…） —增
selectfrom 表名 wehere 字段1=？ 精准匹配----删
selectfrom 表名 set 字段1=？，字段2=？…where 字段1=？ ------改

---

写后台模板—app.js

const Koa = require(‘koa’);

const app = new Koa();

const path = require(‘path’);

const bodyParser = require(‘koa-bodyparser’);
// /1.处理静态资源

const static = require(‘koa-static’);

app.use(static(path.join(__dirname,’./public/’)));

//2.安装路由功能
const Router = require(‘koa-router’);

const router = new Router();

const query = require(’./db/query’);//2.路由
app.use(bodyParser());

app.use(router.routes());

app.use(router.allowedMethods());

app.listen(3000,()=>{
console.log(‘服务启动成功’);

})

npm i @vue/cli -g vue
vue create demo
vue -V

---

前端访问后台的数据
代理
vue.config.js
后台3000
前台8080

module.exports={
devServer:{
proxy:{
“/api”:{只代理/api开头的接口 /list 不会帮忙代理
target:“http://localhost:3000”
}
}
}

--------------------------------------0
axios传递参数
post put axios.post(url,{参数})

---

Vue.prototype.$http=axios;下载axioscore-js关联main.jsVue.prototype.$http = axios;

react :
package.json
{
proxy:“路径”

}

import
export default es6模块

crypto 加密

ctx.request.rul 简写 ctx.url
ctx.request.body 不能写 ctx.body
ctx.reponse.body 简写 ctx.body

moment
格式化时间插件

---

egg

是什么
有什么好处
学习

是一个企业级的框架
framework 框架

egg是一个mvc框架
egg是koa开发的，koa的中间件模式
约定大于配置

m model 数据称

v view 视图层

c controller 控制器

创建项目 npm init egg --type-simple

执行 npm run dev
npm i
npm run dev

egg 所有的文件夹以及文件的名字都不能修改

post
关掉csrf 可以使用post
在 config.default.js中
代码

mysql:{
// 单数据库信息配置
client: {
// host
host: ‘localhost’,
// 端口号
port: ‘3306’,
// 用户名
user: ‘root’,
// 密码
password: ‘root’,
// 数据库名
database: ‘08b-blog’,
},
// 是否加载到 app 上，默认开启
app: true,
// 是否加载到 agent 上，默认关闭
agent: false,
},
security : {
csrf: false
}

const userConfig = {
// myAppName: ‘egg’,
csrf:false
};

链接数据库
1.下载egg-mysql

安装对应的插件 egg-mysql
$ npm i --save egg-mysql
2.开启

开启插件：

// config/plugin.js
exports.mysql = {
enable: true,
package: ‘egg-mysql’,
};

配置
在config.default.js中
const userConfig = {
// myAppName: ‘egg’,
csrf:false,
mysql:{
client: {
// host
host: ‘localhost’,
// 端口号
port: ‘3306’,
// 用户名
user: ‘root’,
// 密码
password: ‘root’,
// 数据库名
database: ‘zk2’,
},
// 是否加载到 app 上，默认开启
app: true,
// 是否加载到 agent 上，默认关闭
agent: false,
}
};

---

写接口
第一步：app/router.js 接口和controller的对应关系

    router.get('/api/list',controller.home.list);

第二步：app/controller/home.js 写对应的动作

    class HomeController extends Controller {
        async list(){
            const {ctx,service} = this;
            //进行数据的查询
            let list = await service.blog.blogList()
        
            ctx.body = {
                code:1,
                data:list
            }
        }
    }
第三步：app/service/blog.js  写对应的数据库交互

    class BlogService extends Service{
        async blogList(){
            const bloglist = await this.app.mysql.query('select * from bloglist');
            //数据库的交互
            return bloglist
        }
    }

---

框架扩展 helper帮助
app/extend/help.js

module.exports={
xx(){
}
ctx.helper.xx

restful分格
官网 路由中
router.resources(‘routerName’, ‘pathMatch’, controller)
crud
定义一组接口
/api/1

ctx.params.id

get/delete ctx.query

put/post ctx.request.body

npm i jsonwebtoken
login逻辑中
let token=jwt.sign({…user[0]},“lixd”,{exprisIn:60*60})
jsonwebtoken token 令牌

权力进出

jwt.sign（{签进的内容}，“密码”，exprisIn:{过期时间}）
jwt.verify(token,secretOrPublicKey,[options,callback])检验是否有效

获取header传过来的token
ctx.get(“token”)

config.default.js 配置
config.middleware = [
// “author”
];

*******header中传token

401 用户没有访问权限，需要身份验证

momentjs
正则 /^\w{4,6}$/.test(password)
带魔法字符串的查找sql语句
格式化插件

路由传参

react

push({pathname:’/home’,state:ca参数})
this.props.history.location.state

中间件-------
引入高阶
抛出 lslogin（组件）

---

rbac

基于角色的权限访问控制

rbac组成
role：角色
permission 权限
user 用户
user 角色

密码加密

app下创建extend文件夹创建helper.js
module.exports = {
hmc(pwd){
const crypto = require(‘crypto’);

    const secret = 'lixd';
    const hash = crypto.createHmac('sha256', secret)
                    .update(pwd)
                    .digest('hex');
    console.log(hash);
    return hash
}

}

post put传参
let {username,skill,theory}=ctx.request.body

delete add

let {pagenum=1,limit=5,key} = ctx.query;

eg: 删除语法上
//删除 delete
async destroy(){
let {ctx,service} = this;
let {id} = ctx.params;
if(id){
try{
await service.score.del(id);
ctx.body = {
code:1,
msg:‘删除成功’
}
}catch(e){
ctx.body = {
code:0,
msg:e
}
}
}else{
ctx.body = {
code:1,
msg:‘参数有误’
}
}
}

删除 语法 下

async del(id){
await this.app.mysql.query(‘delete from score where id=?’,[id])
}

await service.score.del(id); 等待 文件夹 文件 的 del

增
await this.app.mysql.query(‘insert into score (username,skill,theory,create_time) values (?,?,?,?)’,[username,skill,theory,time]);

删
await this.app.mysql.query(‘delete from score where id=?’,[id])

改
await this.app.mysql.query(‘update score set username=?,skill=?,theory=? where id=?’,[username,skill,theory,id])

查 用户名是否重复
async selectUser(username){
return this.app.mysql.query(‘select * from biao where username=?’,[username])
}
查 账号密码是否匹配

async login(username,password){
return this.app.mysql.query(‘select * from biao where username=? and password=?’,[username,password])
}

模糊搜索
async index(pagenum,limit,key){
let startIndex = (pagenum-1)*limit;

    //有条件 key  //没有条件  where

    //模糊搜索加分页  先要进行模糊搜索再进行分页

    let sql = `select * from score`;

    if(key){
        sql += ` where username like '%${key}%'`;
    }

    sql += ` limit ${startIndex},${limit}`;

    return await this.app.mysql.query(sql)
}

分页
async index(pagenum,limit,key){
let startIndex = (pagenum-1)*limit;

    //有条件 key  //没有条件  where

    //模糊搜索加分页  先要进行模糊搜索再进行分页

    let sql = `select * from score`;

    if(key){
        sql += ` where username like '%${key}%'`;
    }

    sql += ` limit ${startIndex},${limit}`;

    return await this.app.mysql.query(sql)
}

---

echarts 图标
一、 react中
npm i echarts-for-react echarts

import ReactEcharts from ‘echarts-for-react’;

render(){
let option={数据}
}

return(

)

import ReactEcharts from ‘echarts-for-react’;
this.state={
data:{
数据
}

}

二、 html中

《script》中

var myChart = echarts.init(document.getElementById(‘main’));
let option =数据

    myChart.setOption(option);

---

中间件 app 下 middleware中power.js
代码

module.exports = () => {
return async (ctx, next) => {
let writepath = [’/api/add’]
if (writepath.includes(ctx.path)) {
await next()
} else {
let identity = ctx.request.header.identity
console.log(identity);

        try {
            if (identity && identity === 'admin') {
                await next()
            } else {
                ctx.body = 404
                ctx.body = {
                    code: 2,
                    msg: "权限失败"
                }
            }
        } catch (e) {
            ctx.body = {
                code: 0,
                msg: e
            }
        }
    }
}

}

-------------------配置》 config.default.js中
config.middleware = [‘power’];
链接--------------------------------
https://docs.qq.com/doc/DZHNJUVRPQ3B4b2Ns?pub=1&dver=2.1.0&tdsourcetag=s_pctim_aiomsg&ADUIN=2215140960&ADSESSION=1589721005&ADTAG=CLIENT.QQ.5615_.0&ADPUBNO=27006&jumpuin=2215140960