来自分类 Vue2020-11-23 14:17:36
@[toc] ### 需求 页面中接口, 需要带上用户信息或者是某个鉴权字段, 这个用户信息或者鉴权字段由某个接口返回 ### 原生 Vue 中的处理方法 #### 1.vuex 配置 ```javascript import api from '@/api' const state = { userInfo: null, // 需要的用户数据 globalLoading: true // 一个全局loading, 根据这个字段觉得是否显示一个全局的loading小狗 } const actions = { // 读取用户信息 async ['getUserInfo'](store) { const { commit } = store const { data, code } = await api('/api/user/user_info') if (code === 200) { commit('receiveUserInfo', data) } ...
来自分类 Vue2020-11-23 14:13:27
@[toc] # 1. 首先你得有台服务器 # 2. 推荐安装 linux 系统 本文以 CentOS 7.2 为例 # 3. 更换 yum 为国内镜像 1. 备份你的原镜像文件,以免出错后可以恢复。 ```bash # mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup ``` 2. 下载新的CentOS-Base.repo 到/etc/yum.repos.d/ ```bash // CentOS 5 # wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-5.repo // CentOS 6 # wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-6.repo // CentOS 7 # wget -O /etc/yum.repos.d/CentOS-B...
来自分类 前端2020-11-23 14:10:37
@[toc] # react React 相关 ===实例=== https://github.com/jesseskinner/react-webpack-demo ===UI组件库=== https://github.com/amazeui/amazeui-react `React UI组件库` https://github.com/ant-design/ant-design `React 企业级的UI库` https://github.com/callemall/material-ui `React UI组件库` https://github.com/icecreamliker/uskin `React UI组件库` https://github.com/grommet/grommet `最先进用户体验的企业应用程序框架` https://github.com/Lobos/react-ui `React UI组件库` https://github.com/mlaursen/react-md `这是另一个基于谷歌 Material Design 设计规范的库` https://g...
来自分类 JavaScript2020-10-27 11:07:16
相当于 $(el).before('html' | element) ```javascript el.insertAdjacentHTML('beforeBegin', 'html'); el.insertAdjacentElement('beforebegin', element) ``` 相当于 $(el).prepend('html' | element) ```javascript el.insertAdjacentHTML('afterBegin', 'html'); el.insertBefore(element, el.firstChild) ``` 相当于 $(el).append('html' | element) ```javascript el.insertAdjacentHTML('beforeEnd', 'html'); el.appendChild(element) ``` 相当于 $(el).after('html' | element) ```javascript el.insertAdjacentHTML('afterEnd', 'html')...
来自分类 前端2020-10-21 13:07:32
#### 代码入下: ```javascript function addGlobalStyle(css) { var head, style head = document.getElementsByTagName('head')[0] if (!head) { return } style = document.createElement('style') style.innerHTML = css head.appendChild(style) } function removeNodeInsertedListener(bindedFunc) { var eventTypeList = ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'] eventTypeList.forEach(function (eventType) { document.removeEven...
来自分类 前端2020-08-27 13:22:48
#### 问题 很多网站都有类似「点击加载更多」的功能, 点击按钮后请求 ajax,然后在原列表后追加相关内容, 之前一直滚动条位置不变, 追加元素后, 页面还是列表原来的位置 ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/nupohneh7nupehpqnulog/img/loadmore_common.gif) 但是今天发现, 追加元素后, 滚动条位置会自动滚动到「点击加载更多」按钮的位置, 这会造成浏览时很大的麻烦, 加载分页后, 还要往上滚动去找加载分页前的位置, 实在不方便 ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/nupohneh7nupehpqnulog/img/loadmore.gif) 具体例子可以参考百度百科中的角色介绍的展开全部功能, 相关链接: https://baike.baidu.com/item/%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96/10719298#4 一系列的排查之后, 最终发现是浏览器的问题, 受...
来自分类 前端2020-06-24 10:35:08
``` { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "types": ["uni-app", "html5plus"] }, "include": ["./src/**/*"], "files": ["main.ts"] } ``` 只需要在项目根目录随便创建一个空白的`.ts`文件, 然后在`tsconfig.json`添加`files`键即可, 如上面配置...
来自分类 前端2019-12-28 19:30:34
一年多过去了, `Optional Chaining`终于到`Stage 3`了, vscode 之类编辑器也有办法支持该语法了, 现在想用, 可以用`babel`来实现了 #### 安装插件 ```bash # yarn add @babel/plugin-proposal-optional-chaining --dev // 可选链 # yan add @babel/plugin-proposal-nullish-coalescing-operator --dev // 空值合并 ``` #### 在 babel 配置文件里添加插件 ```javascript plugins: [ // 其他插件 '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator' ] ``` 这样就可以在 js, jsx, vue 里面用了 ##### 在 .jsx 中使用: ```javascript render() { c...
来自分类 React2019-12-28 19:16:01
需求: 1、需要路由切换动画, 2、从详情页返回列表页时, 需要滚动到历史位置 咋一看, 这不挺简单的吗? 使用`redux`做数据的临时存储, 在`componentWillUnmount`钩子里, 读取滚动条位置, 然后保存到本地存储 当从详情页或者其他页面返回列表页时, 判断`redux`里是否有数据, 如果有数据直接读取, 不再发起请求, 在`componentDidMount`钩子里读取本地存储的滚动条位置, 然后滚动到相应位置不就行了吗 上面的思路在没有路由动画时, 是可行的, 但是有路由动画的话, 就不行了, 你会发现在`componentWillUnmount`钩子里取到的滚动条位置, 总是不对的 主要原因是, 为了用户体验, 在详情页需要`componentDidMount`钩子里将滚动条设置为0, 不然在进入详情页时, 滚动条位置会不在顶部 再加上, 添加了路由动画后, 从列表页进入详情页, 有一小段时间, 列表页和详情页这两个组件会同时存在, 而且两个页面钩子的执行顺序为: 详情页的`componentDidMount` => 列表页的`compone...
来自分类 Vue2019-11-13 10:42:25
假设在根组件用 dispatch 触发一个异步的 Action ```javascript async created() { await this.$store.dispatch(`base/info/get`) }, ``` 在路由组件里 watch 数据 ```javascript computed: { ...mapGetters({ $$info: 'base/info/get' }) }, watch: { $$info(val) { console.log(val) } } ``` 刷新页面, 这时候会出现有时候能触发 watch, 有时候又不触发, 这到底是什么原因呢? 看 vue 的源代码: https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62 ```javascript export function initState (vm: Component) { vm._watchers = []...