【react】---react项目中如何使用iconfont
一、路由配置export const TabBarRouter = [ { path:"/home", icon:"\ue628", name:"首页", meta:{ flag:true }, component:Home }, { path:"/find", icon:"\ue663", name:"发现", meta:{ ...
2024-01-10
在React中使用react-router-dom路由
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，使用npm安装react-router-dom：npm install react-router-dom --save-dev //这里可以使用cnpm代...
2024-01-10
vue-router-h5-history
vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...]})当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id， 就是长这样的！不过这种模式要玩好，还需要后台配置支持。因为我们的...
2024-01-10
详解Angular路由 ng-route和ui-router的区别
什么是路由？路由是AngularJS构建单页面应用的基础。路由，就是网络数据或者请求进行分发的一个网络组件。路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。ng路由ng 路由是 AngularJS 官方提供的一种简单的路由操作。 ng 路由主要...
2024-01-10
Why I Ditched Angular for React
本文转载自：https://www.webpagefx.com/blog/web-design/why-i-ditched-angular-for-react/A few years ago, when my code started to get cluttered with jQuery selectors and callbacks, AngularJS came to my rescue.Angular helped me with the maintainability of my dev pro...
2024-01-10
react-native-vector-icons添加自定义字体
首先我们得保证自己已经添加了react-native-vector-icons这个库，至于怎么添加请自行查看官方文档 react-native-vector-icons文档链接react-native-vector-icons官方添加自定义字体一共有三种方法 我们现在已第三种方法作为示范（android为例） 1. 首先我们可以到阿里的图标库下载自己要用到的图标（记得是要以svg的...
2024-01-10
react-draft-wysiwyg富文本
import { EditorState, convertToRaw } from 'draft-js';import { Editor } from 'react-draft-wysiwyg';import draftToHtml from 'draftjs-to-html';import dr...
2024-01-10从React Native发布一个x-www-form-urlencoded请求
我有一些要以表单编码形式发布到服务器的参数：{ 'userName': 'test@gmail.com', 'password': 'Password!', 'grant_type': 'password'}我正在这样发送我的请求（当前没有参数）var obj = { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', },};fetch('...
2024-01-10react-router-dom：从内部获取props.location 零件
我有一个简单的应用程序，它BrowserRouter从“ react-router-dom”v4使用。我试图location.pathname从<BrowserRouter/>组件内部访问属性，但无济于事：class App extends Component{ render(){ return ( <BrowserRouter> // How do I access this.props.location? <div className={(this.prop...
2024-01-10![[转] react-router4 + webpack Code Splitting](/wp-content/uploads/thumbs/534330_thumbnail.jpg)
[转] react-router4 + webpack Code Splitting
项目升级为react-router4后，就尝试着根据官方文档进行代码分割。https://reacttraining.com/react-router/web/guides/code-splitting在实际项目中，js,css文件默认通过webpack打包的话会很大，动不动就好几兆。在实际场景中，我们需要缩短首屏的时间展现时间，需要将 首屏没有 涉及到 其他页面的 业务和组件 进行代码...
2024-01-10
【react】---redux-actions的基本使用---【巷子】
一、安装cnpm install --save redux-actions二、为什么使用 redux-actionsreducer使用switch case语句进行action类型判断，当action很多时候，reducer内容就不那么直观了。redux-actions简化了reducer和action的联系三、基本使用1、创建action/actionCreator.jsimport { createAction } from 'redux-actions';export const addnum = c...
2024-01-10
React---Redux（三）actionType拆分
为何要将action.type拆分出来呢 首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType，并且一模一样当你操作时type如果差一个字符是不会执行Reducer的action的 且控制台不会报错。所以要把actionType拆分出来 当做变量引入时，当你输入错误，控制台会报错。这时查找原因会非常容易。...
2024-01-10
react-smooth-dnd 拖拽实例
import React, { useState } from 'react'import { Container, Draggable } from 'react-smooth-dnd'import { v4 as uuidv4 } from 'uuid'export default function CardPlus() { const [toolList, setToolList] = useState([ { id: 't0', name: '1', }, {...
2024-01-10
React-wangyiyun-shop React仿网易云商城
云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料 ...
2024-01-10
React富文本编辑框react-draft-wysiwyg使用
使用的库react-draft-wysiwyg（还要引入’react-draft-wysiwyg/dist/react-draft-wysiwyg.css’）html-to-draftjsdraftjs-to-html（坑：用了draft-js将html转为draftjs结果样式没有转换过来，这两个库应该是匹配的）代码参考https://blog.csdn.net/qq_40524880/article/details/85272926（这篇文章里上传的图片是有压缩过的，改成了不压缩直接...
2024-01-10
react+redux+ant+ykit+mock项目总结
历时十天，从0基础，现学现用总算把项目开发完了，今日已经开始联调。整个项目结构如下：接手的是一个旧项目，所以环境搭建相对要容易很多（Windows环境搭建）： 1. 下载node.js 2. 安装必要环境：npm install –global –production windows-build-tools（如果没有成功，也可以手动一步一步下载：https://github.c...
2024-01-10
Vue.config.optionMergeStrategies 用法分析
举个例子，假设有个对象，他叫objA, 技能是说hello，他喜欢的女生叫小花，但是他是一个花心的人！objA = { name: 'objA ', sayHello_ () { console.log('hello') }, love: '小花', personality: '花心'}然后，又有一个对象，她叫objB, 技能是说worldobjB = { name: 'objB', sayWorld () { console.log('...
2024-01-10
关于router.beforeEach 调用 axios 的问题
现在我有一个需求在所有页面，显示前需要做一个远程的授权验证我用router + axios 来做的，这个代码在执行的过程中:check() 第一次没有执行axios代码所有代码都走完，才会走axios的代码难到是执行顺序不吗？但我加了await 正常不是应该 check()一次性全走完的嘛不知道哪里写错了router/index.jsimport Router from 'vue-router'...
2024-02-07
解决Vue-Router升级导致的Uncaught (in promise)问题
在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题这是什么原因呢？看vue-router的版本更新日志V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常解决方法一：在调用方法的时候用catch捕获异常this.$router.replace({ na...
2024-01-10
vue.config.js 前端跨域设置和www-authenticate
vue 前端跨域设置https://cli.vuejs.org/zh/conf...跨域问题一直都是后端是设置，如果后端不设置，前端按照如下设置，并没有任何效果，网上都说是这样设置，为什么我的不能成功，请问有知道的吗？module.exports = { devServer: { proxy: { '/api': { target: '<url>', ...
2024-03-08
vue项目中企业微信使用js-sdk时config和agentconfig配置
1.如果只使用config配置的相关js接口 可采用如下方式引入执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上，然后全局调用 import wx from "weixin-sdk-js";Vue.prototype.$wx = wx;2.如果要使用agentConfig配置的相关接口 一定不要执行np...
2024-01-10
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）。。
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）。如上图所示，创建了4个路由跳转选项。当我切换“首页” “啦啦” “发现”“我的”四个路由选项时，文字和icon由黑色变成红色。下图为布局（html）：router-link: 其中tag='div’表示router-link为div标签CSS：router-link-active是vue自...
2024-01-10
常见主流框架（vue,react,react-native,angular）生命周期总结
由于接触的框架多了总是会将多个框架的生命周期搞混淆，所以放在一起总结一下一、vue 生命周期先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html以上钩子详细：（只解释了几个主要的）1.beforeCreate在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化...
2024-01-10
【Docker】docker服务无法获取SpringCloud-config配置中心配置
情况是这样子的，我本地启动一切正常，服务也能拿到配置文件。而部署到docker上config服务启动顺利，通过浏览器访问也能看到目标配置（听说服务也是通过http获取配置文件的）但是服务A就是拿不到这个配置，报错占位符解析失败ps：我这里docker网络模式是默认的bridge，ip写的是宿主机的ip，而服...
2024-01-10
react中引入富文本编辑器wangeditor，react打包项目直接运行文件
1、安装yarn add wangeditor --save-dev2、引入并使用代码：import E from 'wangeditor'<div className="text-area" > <div ref="editorElemMenu" className="editorElem-menu"></div> <div ref="editorElemBody" className="editorElem-bo...
2024-01-10
