2021/12/15

认证模块

首先要知道一些基础的知识，写一个空组件要做到以下两步。

第一步，

如果需要页面显示，在router.js对组件进行配置路由。

关于js的知识：
import { defineComponent } from ‘vue’
代表： data(){} ,methods:{}
export default {} 变成 export default defineComponent ({ data(), methods:{})
（后面用setup()就不必data(){},methods了，不过有ref,reactive(这个用于对象））

由于涉及到setup知识，需要学习一下：https://v3.cn.vuejs.org/guide/composition-api-setup.html

关于ref响应式变量：ref 接收参数并将其包裹在一个带有 value property 的对象中返回
举个例子：const counter = ref(0).
那么，想取到值的话，需要 counter.value
因为counter 长这样： { value :0}

关于正则表达式：
str.match(pattern)
还有 pattern.test(str)

一个一定要记住的点。
arr=[2,1,4,8]
那么
arr.join()—‘2,1,4,8’
arr.join("")—‘2148’

str = ‘hello,Anderson lu’
str.split()—[ ‘hello,Anderson lu’ ]
str.split("")—[
‘h’, ‘e’, ‘l’, ‘l’, ‘o’,
‘,’, ‘A’, ‘n’, ‘d’, ‘e’,
‘r’, ‘s’, ‘o’, ‘n’, ’ ',
‘l’, ‘u’
]

链式编程字符串.split(’’).reverse().join(’’)

实例对象的__proto__和构造函数中的prototype相等

绕了一圈后需要回到最初的起点：setup

setup ：是一个新的组件选项，作为在组件中使用composition api的入口点。
return 的值会暴露给模板（也就是在模板中 ref会自动解开，无需写.value)
当然，在js,setup()中要获取ref的值就要.value了。
（也就是说，setup()和return是一体的捏）
也是因为setup(）所以需要用到响应式ref。不过知道，ref就是把变量变成对象形式滴。

大致地看了一下这个：https://v3.cn.vuejs.org/guide/composition-api-introduction.html#%E7%8B%AC%E7%AB%8B%E7%9A%84-computed-%E5%B1%9E%E6%80%A7
我觉得想要了解setup就需要先了解composition api 是什么，然后在我的理解下就是传统的vue2是
data()，methods:{},watch:computed这样的，逻辑被分出来了，但是引入composition api这个概念后呢，
用的就是setup()还有ref，onMounted生命周期钩子，把同一逻辑的分在一块，这样就好处理很多啦。
（看原先vue2标记的1，2，3，1被分成很多个部分，再看后来，1的部分都合在一块了）

setup的话我觉得重点就是它接收两个参数，props和context,还有return，以及ref。这些点。
setup()是vue3的内容。

下午：

scss和css不一样，scss样式支持嵌套的用法：
如：
.auth {
.title-info{
}
}

关于样式的复习：
盒子左右居中：margin : 0 auto
文本左右居中：text-align:center
多个不同样式的同一行：给父盒子：display:flex justify-content:center align-items:center
给背景图片的设置：(代表铺满）
.bg{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
（上面达到铺满效果）
background-image:url(“xx”)
background-repeat:no-repeat;
background-size: cover;
background-position: center center;
}

vue3设置全局变量的方法：利用app.config.globalProperties代替prototype:
https://blog.csdn.net/block_xu/article/details/111150883

placeholder:占位符。

服务端知识：{{{{{{{{{{{{{{{{{{

服务端koa-router: 如果是router.get(注意这里是get),那么就代表可以直接通过浏览器进行访问。
对于浏览器的url地址，默认是使用get方法去发送的。

这里讲一个关于koa-router的业务方面知识，当设置了prefix后，可以知道该router是负责哪个方面的
router：
const Router = require(’@koa/router’)
const router = new Router({prefix:’/auth’})
那么，这个router实例就是用来处理auth方面的业务逻辑的，即处理认证相关模块。

在服务端，模块的导出是：module.exports = { }

koa-router 之所以 router.get(’/xx’,async(ctx)=>{})，之所以有async和ctx就是因为是被koa处理过的。
原话是说：函数在经过koa-router处理后会作为中间件进行注册，所以可以拿到ctx。ctx是在路由处理完
之后，匹配到路由，调用的时候传递给我们的。
我记得回调函数拿到的参数的定义就是经外包函数处理后的参数。（这个回调理解以后好多东西都好容易
理解哦），所以ctx就是经过匹配路由处理后的ctx。（我的理解就是ctx肯定是前端请求的url的ctx）

module.exports:https://blog.csdn.net/xqnode/article/details/60610885
https://blog.csdn.net/weixin_30706507/article/details/95254643?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-9.highlightwordscore&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-9.highlightwordscore

知道module.exports可能export是一个构造函数就好理解很多了，当然也可能是一个箭头函数。
理解router的index.js为什么
module.exports = (app)=>{
app.use(auth.routes)
…}了。
以前老在想，app是啥，app在这里就是一个参数。真正赋值是发生在be/src/index.js 里面：
registerRoutes(app); 把这里的app作为参数传到router/index.js里了。（这个app就是new koa)

这里也应该清楚一件事，导出模块，模块可以是对象，也可以是函数。（理解了就知道不一样滴）

知道了模块导出，以及koa-router是个什么东西，大致的作用和用法，基本上关于服务端router这些代码都
能看懂啦。(路由相关框架已经搭好~）

接下来就是自动重启服务的相关知识：（这里的服务就是指服务端）：
前景：因为每次修改服务端代码都需要人工重新启动很麻烦（需要在修改完代码后输出 node index.js)，
为了让服务端能够自动监听，需要自动重启服务：在src下 npm i nodemon -D
然后再在package.json里的scripts里面添加一条：
“dev”: “nodemon src/index.js”.
之后就可以在终端通过npm run dev 跑起命令。
跑一次就行了，后面就能够自动重启服务了。

小知识：
后端package.json里的dependencies里面装的是业务底层方面有关的依赖，比如koa-router，koa，
mongoose等。而devDependencies里面装的就是跟开发有关的依赖，比如nodemon。

接下来就是设计schema。当设计完schema后才可以写路由方面的相关逻辑。

第一步：
在db下新建一个文件夹schemas，创建User.js。

schema定义好并注册成model后，就拥有了操作mongodb的能力。

第二步：
这个schema代码被执行完后，才能说完成了注册。

第三步：
完成注册后，就可以回到路由文件，引进mongoose，通过model方法拿到注册的model。
（比如说，回到router/auth/index.js中，require mongoose，通过
const User = mongoose.model(‘User’) 就可以拿到User了。

现在回去讲一下第二步，关于如何执行Schema代码这个方面：比如说db/Schema/user.js ，怎么执行这个
代码呢？
到db/index.js中，（前提是已经完成了数据库的连接），输入require(’./schema/user’)即可。
这里src/index.js注意要先require(’./db’) 再 require(’./router’) 这样执行完db后执行router。db里完成
了schema的注册也就是第二步，第三步就可以在路由文件完成相关的逻辑了。

关于为什么是connect().then()而不是connect()：
举个例子，如果连接数据库需要10s的时间，单纯connect()的话，在这10s内如果发生了请求，那么
这些请求就会被忽略了，这样是不行的。所以connect需要异步，也就是说connect函数需要return
promise。（不知道为啥现在感觉更懂异步是什么了，只可意味不可言传啊）

端口监听是在数据库连接成功后才开启的~
}}}}}}}}}}}}}}}}}}}}}}}}}

2021/12/15相关推荐

假设检验_ t 检验的例子 2021/12/15
参考文档:百度文库里面一些医学实验例子,以及最近外场测试脱网例子一单个正态总体均值u的 t 检验 1.1 单边解: # -*- coding: utf-8 -*- ""&q ...
2021.12.15
开普勒望远镜制作镜筒长度等于物镜焦距与目镜焦距之和.为便于调焦,可以把镜筒分成两节,即物镜镜筒.目镜镜筒.物镜镜筒长度等于物镜焦距,目镜镜筒的长度等于目镜焦距加50-80mm.
每日总结（2021/12/15）
今天真的饱受折磨,不过最后感谢lzl学长和我的同学,我终于解决了那几道让我几度想拆电脑的题. 第一道:这道题的格式让我头疼,同时一点思路也没有,还好我同学点拨了一下. 现在有n个元素分别是1,2,3, ...
2021.12.15.梦开始的地方.
21岁.重庆高考581分,现在大四,非985,非211. 数学与应用数学专业,大学就学过c语言. 我的目标是outstanding 程序员.高薪offer.迎娶白富美. 如何学习编程? 学好c语言. ...
2021/12/15 RCE代码和命令执行
小迪 https://www.bilibili.com/video/BV1JZ4y1c7ro?p=29 https://www.cnblogs.com/ermei/p/6689005.html htt ...
『金融帝国实验室』（CapLab）官方正版销售指引（2021.12.15）
数据挖掘复习资料2021.12.15
数据挖掘绪论四种主要技术激发了人们对数据挖掘研究的兴趣: 超大规模数据库的出现,先进的计算机技术.对海量数据的快速访问.统计方法在数据处理领域应用的不断深入数据挖掘定义: 技术层面:数据挖掘就是 ...
《安富莱嵌入式周报》第245期：2021.12.20--2021.12.26
往期周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - P ...
Python 最近两条好消息：①TIOBE排名超过C和Java②新版本发布3.10.0，还有今天刚发布的《What’s New in Python(2021.10.15)》
来自TIOBE的最新10月份统计数据显示,Python首次超越Java.JavaScript.C语言等,成为最受欢迎的编程语言.TIOBE过去20年一直在追踪编程语言的受欢迎程度,其数据来自于对25个 ...

2021/12/15

2021/12/15相关推荐

最新文章

热门文章