600字范文 > 个人博客-后台管理系统前台系统 api系统开发记录未完时刻更新中

个人博客-后台管理系统前台系统 api系统开发记录未完时刻更新中

时间：2022-01-03 12:45:11

1 登录2 css变量的处理3 数据接口处理4一个逗号引发的血案～5再看父子组件的传值(这一条之前理解稍微有误，可以跳过)前台博客记录如何找到其他网站的源码实现如何找到其他网站的源码实现2后台 node api 系统1如何使用es6语法2继承使用问题 this问题3通过 vscode 进行断点调试4给 mongoose find 命令返回的数据添加额外属性的两种方式5 循环+异步引起的大坑5 开发过程中调试解决跨域问题的两种方式

喜大普奔，开源地址，请猛戳我

1 登录

登录常见验证方式是token验证，目前打算暂时用session验证以后有时间研究token登录，并添加第三方登录

2 css变量的处理

//TODO: 一键换肤，白天黑夜模式先占坑颜色变量不要写死在单独某一个组件里面，方便以后统一换风格，可以参考element 等ui库

3 数据接口处理

a 首先所有的接口地址写在一个文件中，，切url接口地址最好不要写死，这样有两个好处第一方便查找我们所有用到的接口第二后台接口便于修改，比如初期阶段后台接口可能较少，访问直接以 '/login' '/entry' 这样的形式访问，等以后台想把某一部分用户登录相关的接口访问时统一在前面加上’/v1' 如果我们接口调用散落在各个文件里那就非常难以修改

b 利用 NODE_ENV 区分当前的 baseUrl当前前端webpackdevserver地址为 127.0.0.1:8080例如开发环境时我的 baseUrl 为 ‘’，所有接口的访问的为当前ip当前接口，模拟数据可以用 axios-mock-adapter （与axios配合简单方便） --- 这是模拟数据方式一这种数据访问地址为 127.0.0.1:8080 -> 127.0.0.1:8080

例如我想用json-server，或者express 自己起一个server 做模拟数据服务器，地址为127.0.0.1:3005 开发环境时我的 baseUrl 则就改为 ‘127.0.0.1:3005 ’，

这种数据访问地址为 127.0.0.1:8080 -> 127.0.0.1:3005 存在跨域

所以需要在webpack-dev-config.js中加入

proxyTable: {'/': {target: 'http://127.0.0.1:3005',}}

也就是将所以8080的访问代理到3005上

小总结

so~ axios-mock-adapter 优点使用简单不存在跨域缺点不能动态根据前端传递参数不同返回不同结果，自己起的模拟服务器当然你自己想怎么干就怎么干了，上天都没人管你～

c 利用axios的全局配置功能，添加baseurl, -- 可以方便修改根路径添加请求、响应拦截器首先这是符合统一入口思想的，very good～～～如此以来我们可以对所有的请求统一处理比如打印请求日志，过滤关键key，等等对统一返回也可以根据某些错误码进行全局warn处理

4一个逗号引发的血案～

错误很清楚的写明了在setAttribute 时候 key 填入的是逗号，经过纠结的一一对比最终发现这个问题是在元素的属性上有逗号忘记了删除

你一眼就能看到吗？如果能看到恭喜你，不用(像我一样)再走弯路～引发原因是当初参照的其他template模板用的是 pug语法，其中每个属性是用逗号隔开的而我们这里是html语法都好一定要删除，否则 vue会当做属性填充，切记切记

5再看父子组件的传值(这一条之前理解稍微有误，可以跳过)

我们都知道通过props可以由父组件给子组件传递值

<div><input v-model="parentMsg"><br><child v-bind:my-message="parentMsg"></child></div>

以下理解有误，留作历史吧，大家可以不看

~~需要注意的是以上只适合传输字符串而不能传输对象!~~

~~如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：~~

todo: {text: 'Learn Vue',isComplete: false}

~~然后：~~

<todo-item v-bind="todo"></todo-item>

~~将等价于：~~

<todo-itemv-bind:text="todo.text"v-bind:is-complete="todo.isComplete"></todo-item>>

~~子类接受属性时：~~

props: ['text', 'is-complete']

~~阔是！如果父组件data里面有一个目录属性是数组结构~~

data () {return {cagalogs: [{},{},{}]}}

~~此时，我们将无法通过父组件传递数据过去，~~

出现这种情况的场景是，管理系统博客展示页面展示了有多少个目录，已经获取了一遍目录数据，在新增文章时候还会弹出编辑组件，此时让需要目录数据

这种情况下的解决方案：

通过 props -----------> 走不通通过 vuex --------------> 不推荐，因为只是两个组件使用，不想都放到全局,避免常驻内存存放到 localstorage + mixin --------> 暂时采用此方案

mixin.js

import urls from '@/config/urlsimport {storageKey, setStorage, getStorage} from '@/utils/storage'export default {data () {return {catalogs: []}},methods: {async getCatalogs () {let catalogs = getStorage(storageKey.CATALOGS)if (catalogs) {this.catalogs = catalogsreturn}const res = await this.axios.get(urls.catalogList)if (res.data.status === 0) {setStorage(storageKey.CATALOGS, res.data.data)this.catalogs = res.data.data}}}}

~~虽然最终数据都是取的 localstorage 下的数据，但两个组件实际上是自己维护了自己的 catalogs 这个属性。~~

前台博客记录

如何找到其他网站的源码实现

主界面封面部分参考了搜车大无线团队博客，其中有一个功能封面有一个下箭头，点击一下实现滚屏到博客正文

直观发现此处是通过href锚点实现滚动，然而自己实现时发现这样并没有滚动动画，但是他们是怎么做到的呢，开始我一直以为肯定是用了某个css3动画实现，但是根本找不到任何css相关的样式

如何确定是不是用js实现的呢？

如图点击js便可跳转到相应js文件，并发现了用animate的地方，由此我们得出了原来此处是用js，根本和css没有半毛线关系~

如何找到其他网站的源码实现2

不巧的是博主还算是一个发(没)散(头)思(没)维(闹)的人，又去了饿了么研究一下回到顶部功能是如何实现的。

这次我们轻车熟路的就找到了源码，只是不幸这次点进去是vue的源码，所以并没有什么卵用，我们发现这个div 的类名为page-component-up嗯,我们有理由相信源码是通过给这个类名添加点击事件实现的，（谁给你的自信？）

so~ ,我们从github 下载element 源码， vscode 打开，全文搜索（ctrl shift f），这个类名，在 component.tpl 文件下找到了源码欧耶~

后台 node api 系统

1如何使用es6语法

1 入口文件引入bable-core

2 在.babelrc 如下配置，经本人测试，stage-3 如果不配置则【扩展运算符】使用会报错

3 安装相关依赖

2继承使用问题 this问题

在类中如果有需要用到内部this 的方法中需要在 constructor 中通过bind 应绑定 this,因为这些类的方法的调用形式为如下图二调用，因此若想用this，需要在constructure中进行硬绑定

图一，control对象声明

图二路由调用相应的control对象的方法的引用

3通过 vscode 进行断点调试

网上最常见的三种查询方法

1 node-inspector 之前尝试过好像最终可以chrome 进行断点，但是还是偶尔失败，且麻烦所以舍弃

2 好像还可以通过 --xxx 加类似什么参数来着，但是也没成功所以舍弃

3 webstorm 还是算了吧……

4 我们说一下用vscode 调试

默认情况下直接按f5就会呼出调试界面，直接选择node 即可，也可通过配置，默认情况下入口是 app.js

我们根据需要修改即可。

4给 mongoose find 命令返回的数据添加额外属性的两种方式

mongoose find 命令返回的数据结构如图

如果我们想在find命令后返回的对象里面添加其定义属性，

比如动态的给每一个对象添加一个 uid属性，我们直接给对象添加是无效的，

即使当时你手动添加上打印出来可以看到，但是返回到客户端却没有这个属性

因为mongoose内部会检查你要添加的这个属性是否是在scheme上，

一说可以通过 strict: false 让查询出的结果可修改，不过测试发现没有什么卵用

愿意是 mongoose 返回的对象其实实在当前对象的_doc属性下面

方式一粗暴添加

所以我们可以通过给对对象的_doc属性下的对象添加自定义属性即可

方式二温柔添加

mongoose 提供啦 toObject()方法也可以添加

最终的代码类似于：

var model = obj.toObject();model.isBorrow = false;cb(null, model);

5 循环+异步引起的大坑

场景描述

查询文章列表接口

需要返回的数据格式如下

{"id": "0920892e-1512-401a-994e-5406a14aca0b","title": "Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏","summary": "使用 websocket + vue2 即可完成一个很有意思的在线游戏作品。你画我猜，相信大家对这个游戏都很熟悉。我用Vue2 + mint-ui + nodejs + websocket 实现了你画我猜这个游戏。建议移动端打开效果更佳(可扫下方二维码)，PC端需要使用谷歌开发者模式，然后使用移动调试工具，才可以正常使用（主要是一些touch事件，pc不支持）。大家可以拉上一两个人，来开个房间试试看，体验体验效果。主要实现了以下这些功能大厅功能个人信息显示顶部显示个人昵称，可以修改暂时不支持上传头像，头像用昵称第一个","createTime": 1487680940000,"updateTime": 1487686388000,"catalogId": "1d16334c-3231-4232-9adc-e57e5d74552e","banner": "","tagNames": "你画我猜手机游戏","catalogName": "技术分享","tags": [{"id": "a0997aea-2a58-431c-8dad-f88843515587","name": "你画我猜手机游戏"}

这里面的大部分字段都在aritcle这个表中，我们通过__db.article.find()__ 即可查出来所有文章

其中catalogName这个字段在__catalog__表中并没有在__article__表中，因此我们需要通过第一次查询__article__表出来的结果遍历得到catalogId,然后再去查询 __catalog__表，

async _addCatalogName (articleArr) {let arr = []articleArr.forEach ( async (article,idx) => {let catalog_id = article.catalog_idlet ret = await ArticleModel.getCatalogNameById(catalog_id)let name = ret[0].namelet ob = article.toObject()ob.catalog_name = namearr.push(ob)})console.log(arr)return arr}

我们观察打印出来的结果就会发现灵异现象，明明有10个数据，但是最外层竟然显示的零个，

更诡异的是当我们再一次调用arr.push(1)

length是11,但是只能看到一个，意不意外？

解决办法：

伟大的阮老师早就为我们想好啦解决办法

so~ 我们最终的解决办法

for (let article of articleArr) {let query_ret = await ArticleModel.getCatalogNameById(article.catalog_id)// console.log(obj)let name = query_ret[0].namelet article_copy = article.toObject()article_copy.catalog_name = namearr.push(article_copy)}console.log(arr)return arr

完美～

补充一下，一下这种方式再此处不合适我们，因为我们不能保证异步执行的顺序，也就无法正确的添加catalogname 到对应的对象上

let promises = articleArr.map((arrticle) => ArticleModel.getCatalogNameById(arrticle.catalog_id));let results = await Promise.all(promises);console.log(results);

5 开发过程中调试解决跨域问题的两种方式

方式一

1 开发过程中以相对路径访问，如 this.get('/v1/userinfo')2 通过 webpack-dev-server 配置代理![](/blog/821507/02/821507-003959734-763359013.png)3 上线时通过nginx 反向代理即可

方式二

1 开发过程中以相对路径访问，如 this.get('http://host:port/v1/userinfo')2 服务端配置相应的跨域配置即可![](/blog/821507/02/821507-004319765-1304935666.png)3 此时请求资源头部可以看到服务端的设置![](/blog/821507/02/821507-004446296-1641890297.png)

补充

前端通过axios访问时页面访问路径都以相对路径方式写如 this.get('/v1/userinfo')

通过动态配置 baseurl 来决定我们是相对路径访问还是绝对路径访问

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。