2021/12/23

关于moment.js:一个很好的处理时间的js库。
moment.js 是js的一个时间库，它有很多作用，比如格式化时间，通过 npm i moment 之后，在node.js中可以通过
var moment = require(‘moment’)使用。
在前端js文件中，可以通过：import moment from ‘moment’ 使用。
具体用法在：https://www.jianshu.com/p/9c10543420de

举例：获取具体某个时间/格式化日期

moment().minutes()
58
moment().get(‘hours’)
8
moment().format(‘YYYY年MM月DD日’)
‘2021年12月23日’
moment().format(‘YYYY-MM-DD’)
‘2021-12-23’
moment().format(‘YYYY/MM/DD’)
‘2021/12/23’
moment().format(‘hh时mm分ss秒’)
‘09时01分48秒’

moment可以接收一个时间戳，number类型：

moment(1640221809652).format(‘YYYY-MM-DD’)
‘2021-12-23’

获取当前时间戳的方法：

new Date().valueOf()
1640221943692
Date.parse(new Date())
1640221956000

以前发现要格式化日期还要写一大段代码，通过getXX和padStart啥的，很麻烦，现在
引入moment时间戳的话，突然就很快解决了欸！
看代码：

moment(1640221809652).format(‘YYYY-MM-DD hh:mm:ss’)
‘2021-12-23 09:10:09’
只要获取时间戳就可以转换了。好简单~

关于数组的find和filter：都是实现对数组符合匹配的查找，不同的是find返回的是第一个符合的元素，
而filter返回的是所有符合的元素，在写法上是一样的。
例子：

const array1 = [5,12,8,130,44]
const f = array1.find(function(element){
… return element>10;}
… );
f
12
const ar = array1.filter(function(element){
… return element>10;
… }
… );
ar
[ 12, 130, 44 ]
看found 和 ar 的结果就知道了。

findIndex在写法上也是跟find,filter趋于一致，但最后返回的结果的依旧只是第一个符合条件的结果。
例子：

const ar = array1.filter(function(element){
… return element>10;
… }
… );
undefined
ar
[ 12, 130, 44 ]
const findi=array1.findIndex(function(element){
… return element>10;
… }
… );
undefined
findi
1

发现在学项目的时候，首先一定要搞清楚业务是怎么样的，然后看代码是如何一步步去实现业务的，
这样就会记住代码了。以后碰到相似的业务也能够派上用场。

这个！！！！！！！
发现ref，reactive的好处了，因为是引用类型嘛，所以同个文件的所有函数都享用着所有ref声明的变量，
这样就不用管传参的事情了。所以函数接收的参数一般就是从vue页面拿来的~比如那个record，或者
也可以是自定义的变量。
别看这是个小细节，但是理解它之后就能更熟悉代码了啊。

比如：在vue.js有一个：

const updateCount = (type, record) => { //起点
let word = ‘增加’;
if (type === ‘OUT_COUNT’) {
word = ‘减少’;
}
Modal.confirm({
title: 要${word}多少库存,
…省略代码不计
};//终点
这里可以看出，传入了type和record参数，很显然，不是js声明的ref变量，是从vue页面拿来的。

在vue页面中的代码如下：

<template #count=“data”>
<a href=“javascript:;” @click=“updateCount(‘IN_COUNT’, data.record)”>入库
{{ data.record.count }}
<a href=“javascript:;” @click=“updateCount(‘OUT_COUNT’, data.record)”>出库

这个明白后这些代码是不是很好记了哇。

function() {} === 箭头函数 ()=>{} 只不过箭头函数没有this也没有arguments罢了。

关于js数组对象：
js数组对象是我自己命名的，就是[ { } ,{ } ] 这样的，js数组的find方法拿到了符合条件的item,
当对item的值进行修改的时候，这个js数组对象也会随之发生变化！
一切源于item是对象。

举例：（看最后的list值就知道了，修改one以后，list也会发生变化） --这里案例应用在于库存数量的显示
的业务：

const list1=[
… {name:“小明”,age:22},
… {name:“xiao”,age:21}
… ]
undefined
const one = list1.find((item)=>{
… return item.name==“xiao”});
undefined
one.name=“lulu”
‘lulu’
one
{ name: ‘lulu’, age: 21 }
list1
[ { name: ‘小明’, age: 22 }, { name: ‘lulu’, age: 21 } ]
（代码在5-16,同时也是src/views/Goods/index,jsx const one = list.value.find((item)=>{})
之所以修改list是因为< a-table >显示什么取决于dataSource,而dataSource的值又刚好就是list
这种单个修改就不需要去getList()操作了，减少了请求，也就减少了开销。

后端：倒序排序的代码：
sort
.sort({_id:-1,}) —这样最新时间就会排在最上面。

关于之前 find(query)

const query = {};
if ( keyword ) {
query.name = keyword ;
}

const list = await Book.find(query).skip(…)
比如keyword的值是 ‘123’，if进去后 那query就变成了 { name: ‘123’ }，
然后就相当于 find({ name: ‘123’ })
所以直接find(query)即可。

什么.find .skip .sort 都是mongodb的方法，详情看文档，（关键词：mongoose,mongo,document,modal,schema)
这里是sort文档：https://www.runoob.com/mongodb/mongodb-sort.html

进入 6-1 用户管理页面前端结构
新建< flex - end > 组件，使 元素 从右边开始对齐 justify-content : flex -end;
(这里和< space -between > 一样，涉及插槽知识，但插槽现在也懂什么意思啦~

插槽：（想一下自己做过的）
组件创建时写好插槽位置，当组件被引用的时候，写在组件内的所有元素都会显示在当时组件创建
时写< slot />的位置上。

6-2 获取用户列表接口

用get方法，通过ctx.query获取 page,size。 从ctx.quey拿到的是字符串，还需要转换成数字。
即： Number (page)
依旧是 router.get(‘xxx’,async(ctx)=>{
let { page,size } = ctx.query;//注意这里要用let方法，因为page,size可能改变滴。
…
const list = await User.find().skip(…).limit(size).exec();
const total = await User.countDocuments().exec() //model方法。
ctx.body={
msg:‘xx’,
data:{
list,page,size
},
code:1
})

用ctx.query的好处：
后端接口设置ctx.query获取路径？参数部分的好处：（哪怕没有参数，请求也成立）
发现了一件事，假如通过axios发送请求（发送请求的两种方式，一种是axios.post,另一种就是浏览器
页面发起请求，这两种请求都会去后端找接口），在本例，访问user/list用户列表接口的时候，
发送请求如果没有带上page和size的话，那么ctx.query没有值，但是依旧可以访问到user/list。
也就是说ctx.query没有值也可以发起请求访问user/list，也可以获取到ctx.body的信息。

6-3 用户列表接口联调与前端实现

传参的重命名 :xx 比如说给list重命名为l 那么就 { list : l }

像这种显示列表的，知道业务就好理解了，每次前端都是跟后端要list和total,list是当前页的信息，
total是全部的。
熟悉了业务就知道要传page和size，而page又是从< a - pagination > 拿来的，是实时变化的，
也就是curPage.
onMounted(){
getUser();
}

我感觉如果对前端页面业务不清楚的话可以看setup()的return部分以及vue的绑定事件+属性。

实现删除功能：（我觉得这个是目前最简单的了）

6-4 删除接口的实现 （ 好像没有涉及组件之间的信息交流的都挺简单的，不过等我熟悉组件之间
信息交流，组件也会简单哒！这部分需要加强呢= =）

router.delete(’:/id’,async(ctx)=>{
const { id } = ctx.params;
const delMsg = await User.deleteOne({_id:id})
ctx.body= {…} //这个不写了
});

6-5 删除接口前端联调

expost const delete = ( id ) = >{
return axios.delete(.......${id}};
}

6-6 添加用户前端弹框实现

用子组件哦！注意啦！重点学（因为对这部分不熟所以更加要认真学）

父组件.vue:
< add -one v-model:show = “showAddModal”>

父组件.js:
const showAddModal = ref(false);

父组件.vue
< a - button @click = “showAddModal”> 添加用户

当设置showAddModal = " true " 的时候， 组件就会显示了。

6-8 添加用户接口联调和前端实现，实现分页

单纯地添加接口其实很容易，不说了。

后端： const user = new User({
account,
password:password||‘123123’})

前端：
父组件传递方法给子组件：//知道业务就懂这句话什么意思了。归根结底就是因为子组件想用，
父组件才会给它。
比如getUser方法，可以更新用户列表。
当子组件点击关闭后，想让子组件使用getUser方法去更新父组件。（突然有些明白了，方法属于谁
就还是属于谁，a事件与b事件相等，a事件属于子件，b事件属于父件，通过触发a，就可以达到触发
b的结果。也就是在子件 context.emit(‘a’) ===父件 b();）

！！！！！！记住这个
父件 里 @a = b
子件 里 context.emit(‘a’) ===父件 b()

代码：
< add - one v-model:show = “showAddModal” @getList = " getUser" > ( getUser是父件方法）

在子组件里，根据业务描述，事件发生在子组件点击关闭后，所以代码写在close()之后。
因为@getList = " getUser " 所以 通过调用getList就可以触发getUser事件

关于v-指令（得去看看）
v-for 的优先级 > v-if 如果记不清就想下"f"字母谁先出现吧！

始终觉得javascript是很重要的，这里附上重新学习javascript的链接，找个时间再认真地学一遍吧！

关于我关心的数据联动：
1.在同一文件中，对js数据修改就是会引起页面数据的变化，而且是及时更新的。
2.像v-model这种是用来监听表单数据变化并响应页面更新的，也就是说跟js文件，也就是说跟1毫无
关系啊，v-model看的是表单数据，表单数据变了，页面写了这个数据的地方都会变。
（要理解好概念呀）

关于分页需要的：

< a - pagination v-model:current = “curPage” //因为涉及页面显示才用v-model的。
:total = “total”
:page-size = “10” //表示一页几条
@change = “setPage” />

其它都是获取就行啦，通过setPage就可以修改curPage。

const setPage = (page)=>{
curPage.value = page;
getUser();
}
其实(page)，这个page参数从哪里来的很好理解，把< a - pagination > 相当于一个子组件，
按照context.emit(‘change’,page) 来看，这个page大概就是@change传给父组件的，而我猜
这个page的值就通过setPage赋值给了curPage。（跟父子组件传值一样的思路）
至于第一条 v- model:current = “curPage” ，看到v-model就知道它只是单纯地跟页面显示有关罢了，
靠这个来绑定显示curPage.

6-9 重置密码接口的实现
后端： project.config.js 把需要的配置项的写在这里。
（根据业务，可以写，当前项目跑的端口，jwt的secret(加密的密钥),重置的密码）
在这个文件写：
module.exports = {
DEFAULT_PASSWORD : ‘123123’
};

然后在需要这个配置项的文件下引入：（这里是routers/user/index.js)

const config = require(’…/…/project.config’)
…
user.password = config.DEFAULT_PASSWORD