wxy_little1025
wxy_little1025

React开发遇到的问题

1. 引入图片出现404

  1. 在jsx中引入图片时，直接相对路径引入浏览器中运行会报404错误：使用require方法引入

     

  2. 在css中使用背景图时，直接相对路径引入即可： 
    body{
    background-image: url('../../asstes/images/bg1.png')
}

     

2. 在使用ant组件中的input组件时，如果遇到传参则与vue中不同：

// vue中


// react中

在js中获取时：

// vue
change(argus) {
    const e = argus[0]
    const name = argus[1]
}

// react
changeValue (name, e) {
    console.log(name)
    console.log(e)
}

3. 使用路由时，获取不到this.props.history

// 在组件中引入
import { withRouter } from 'react-router-dom'

class Demo extends React.Components {
    ......
}

export default withRouter(Demo)

4. 使用redux的步骤

/*
    1. 首先在store文件夹中的module中划分模块，并在模块下建立一个js文件，如produxt.js
*/
import {createReducer} from 'redux-create-reducer'
import * as types from '../../../constants'

// 定义state
const state = {
	formData: {
        value1: '123'
    }
}

// 定义类型
const TYPES = {
	SAVE_FORM:`productOrder/${types.SAVE_FORM}`,
}

// Reducer
export const productOrder = createReducer(state, {
	[TYPES.SAVE_FORM]: (state,action) => {
        const {formData} = action.payload
        state.formData = formData
		return {
			...state
		}
	},
})

/*
    2. 在store下的index文件中引入，并注册
*/
import {combineReducers, applyMiddleware, compose, createStore} from 'redux'
import {connectRouter, routerMiddleware} from 'connected-react-router'
import {createBrowserHistory} from 'history'
import logger from 'redux-logger'
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import privateRoute from './private-router'

// 加载store
import {productOrder} from './module/pages/product/product-order'

export const history = createBrowserHistory()
const persistConfig = {
	key: 'root',
	storage,
}

const createRootReducer = (history) => combineReducers({
	router: connectRouter(history),
	productOrder
})

// 从localstorage获取保存的数据
const preData = localStorage.getItem('persist:root')

const preSate = preData ? JSON.parse(preData) : {}
for (let e in preSate) {
	preSate[e] = JSON.parse(preSate[e])
}

// 替换键名为对应的Reducer名
if (preSate.router) delete preSate.router

const store = createStore(
	persistReducer(persistConfig, createRootReducer(history)),
	preSate,
	compose(
		applyMiddleware(
			routerMiddleware(history), // for dispatching history actions
			privateRoute,
			logger
		)
	))
export default store
export const persistor = persistStore(store)

/*
    3. 在组件中使用时要注意connect，使用form表单时注意Form.create
*/
const ProductForm = Form.create({
    mapPropsToFields(props) {
        let {formData} = props
        const formKeys = Object.keys(formData)
        const fields = {}
        forEach(formKeys,item=>{
            fields[item] = Form.createFormField({
                value: formData[item],
            })
        })
        return fields
    },
    onFieldsChange(props, changedFields) {
        console.log(changedFields)
    },
    // 表单内输入框变化时
    onValuesChange(_, values) {
        console.log(values)
    }
})(ProductOrder)

function mapStateToProps(state) {
    const {formData} = state.productOrder
    return {formData}
}

function mapDispatchToProps(dispatch) {
    return {
        saveUser:(data) => dispatch({type:'user/INCREMENT', payload:data})
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProductForm))

5. 使用redux存储数据，页面刷新后数据丢失：采用redux-persist

// 在store的入口文件引入redux-persist
import { createStore, applyMiddleware, compose } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import reducers from './reducers/index';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const loggerMiddleware = createLogger();
const persistConfig = {
    key: 'root',
    storage: storage,
    // stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};

const myPersistReducer = persistReducer(persistConfig, reducers)
const store = createStore(myPersistReducer)
export const persistor = persistStore(store)
export default store;

// 在项目的入口文件index.js中做如下修改
import React from 'react';
import ReactDOM from 'react-dom';
import axios from '@/axios/$axios';
import App from './App';
import * as serviceWorker from './serviceWorker';

import {Provider} from 'react-redux'
import store from './redux/store'
import {persistor} from './redux/store'
import {PersistGate} from 'redux-persist/integration/react';

// ReactDOM.render(, document.getElementById('root'));
ReactDOM.render(
    
        
    
, document.getElementById('root'));

6. table中的分页配置

 record.id}
	bordered={true}
	loading={this.props.loading}
    size="small"
    pagination={{
        total: this.props.total,
        pageSizeOptions: [10, 20, 30, 40, 50],
        showSizeChanger: true,
        showTotal: () =>{
            return `共 ${this.props.total} 条`;
        },
        onChange: (page, pageSize) => {
            this.props.onSizeChange(page, pageSize)
        },
        onShowSizeChange: (current, size) => {
            this.props.onShowSizeChange(current, size)
        },
     }}/>
7. ant-design中表达如何赋值：
componentDidMount() {
	// 表单赋值
	let {form} = this.props
	Object.keys(form.getFieldsValue()).forEach(key => {
		const obj = {};
		obj[key] = 1;
		form.setFieldsValue(obj);
	});
}
8. getFieldDecorator` will override `value`, so please don't set `value` directly and use `setFieldsValue` to set it.:不要直接给组件绑定value值了。
9. 在react项目中引入动画组件react-transition-group后，组件挂载执行两次，在componentDidMount中的请求接口连续两次。
================================================================================================
10. 配置按需加载时，运行npm run eject 报错This git repository has untracked files or uncommitted changes解决方案，按需加载配置过程参考：https://www.jianshu.com/p/46b099c1107a
1.初始化仓库
git init
 
2.添加并提交
git add .
git commit -m 'init project'
 
3.重新执行 npm run eject

 * 函数柯里化： 在一个函数中首先填充几个函数  在返回一个新的函数的的技术叫做函数柯里化
* 闭包: 可以访问自身作用域 父级作用域 父级函数参数作用域 直至找到全局作用域的函数叫做闭包
* 高阶函数：将函数作为参数或返回值的函数
* es6： 箭头函数 类 promise 生成器 块级作用域 set 对象解构 rest set 模板字符串
* redux: 全局唯一的数据源 store  可以通过 getState 拿到state 一个view对应一个state，state 的变化会导致view更新   但是用户拿不到state  只能通过view触发action来改变state
 * action 是一个对象  必选包含 tpye 属性   store。dispatch（） 是view触发action的唯一方法   store 接收到action事件后， 必须给一个新的state 然后view根据state发生变化 这种计算过程叫 reducer  reducer 是一个纯函数  接收action和state作为参数  返回一个新的state
 >* react 生命周期  挂载  渲染  卸载
 * constructor 接收两个函数 props 和 context 使用 constructor 必须使用 super（） this 指向
 * componentWillMonut 一般用于服务端渲染
 * componentDidMount 初次渲染 ajax 请求
 * componentWillUnmount  组件卸载  清楚定时器  事件绑定
 * componentWillReceiveProps 接收父组件改变后的props需要重新渲染组件的时候使用
 * shouldComponentUpdate 用于优化控制组件重新渲染的生命周期 return false 可以阻止渲染
 * componentDidUpdate 组件更新完毕
 * render 插入 jsx 生成的虚拟dom  根据 diff 算法比对后进行渲染
 * key 的作用 性能优化 diff算法会根据key进行比对 没有重新插入  有的话不会重新创建
> setState 异步  保持 state props refs 一致性   批量处理 多次合并成一次 优化性能
> react 组件传值
 >* 父传子 props  
 >* 子传父 子调用父的方法传参
 >* 兄弟传值  发布订阅模式
> http 和 https 的区别
 >- http 使用80端口 https 使用 443 端口
 >- https 比 http 要慢，因为HTTPS除了TCP握手的三个包，还要加上SSL握手的九个包
 >- HTTP是超文本传输协议，是明文传输；HTTPS是经过SSL加密的协议，传输更安全
 >- HTTPS需要申请证书
> HTTP2 四个新特性：
 >- 多路复用，无需多个TCP连接，因为其允许在单一的HTTP2连接上发起多重请求，因此可以不用依赖建立多个TCP连接。
 >- 二进制分帧，将所有要传输的消息采用二进制编码，并且会将信息分割为更小的消息块。
 >- 头部压缩，用HPACK技术压缩头部，减小报文大小
 >- 服务端推送，服务端可以在客户端发起请求前发送数据，换句话说，服务端可以对客户端的一个请求发送多个相应，并且资源可以正常缓存。
> 资源预加载
 >* preload 页面加载过程中，在浏览器开始主体渲染之前加载
 >* prefetch 页面加载后， 利用空余时间提前加载
> 浏览器渲染过程
 >* 将获取到的html解析成 dom tree
 >* 处理css  生成 cssom tree
 >* 将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
>* 缓存
 >   缓存机制 强缓存优先于协商缓存 若强缓存生效则直接使用强缓存 否则使用协商缓存 协商缓存由服务器决定是否使用缓存 若协商缓存失效则返回 200 重新返回资源和缓存标识 在存入浏览器缓存中 生效则返回 304  继续使用缓存
 >  Service Worker  必须是 https  然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。
 >  强缓存 200 不会请求数据  直接从缓存中获取 header 中的Expires 和 Cache-Control 设置
 >   协商缓存 304 查看本地缓存是否失效 携带缓存标示向服务器发起请求 由服务器根据缓存标识决定是否使用缓存 HTTP Header 实现：Last-Modified 和 ETag 。

                    
                

        
你可能感兴趣的:(react)

        

            

                
    
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • react-intl——react国际化使用方案
                        苹果酱0567
面试题汇总与解析java开发语言中间件springboot后端
                        
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • 前端使用react-intl-universal进行国际化
                        Stephy_Yy
#调研reactjsjavascriptcss
                        
    一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的
    
                    
    • 
                    
  • VUE实现大小缩放轮播图
                        书边事.
vue.js前端javascript
                        
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
    
                    
    • 
                    
  • react里的index.js是怎么跟index.html结合起来的?
                        SherrinfordL

                        
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
    
                    
    • 
                    
  • Taro实现微信小程序自定义拍照截图识别
                        书边事.
taro微信小程序小程序
                        
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
    
                    
    • 
                    
  • （小白入门）Windows环境下搭建React Native Android开发环境
                        码农老黑
前端ReactNative移动开发Androidstudio
                        
    ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc
    
                    
    • 
                    
  • react中如何获取并使用usestate声明的变量的值
                        小华0000
react.jsjavascript前端
                        
    1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s
    
                    
    • 
                    
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现
                        ZhaiMou
vue.jsjavascript前端数据结构前端框架开发语言
                        
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
    
                    
    • 
                    
  • React 前端应用结合 Nginx 部署指南及常见错误排查
                        蜗牛去旅行吧
前端react.jsnginx
                        
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
    
                    
    • 
                    
  • vue3 响应性API
                        weixin_44747590
vue3vuejs
                        
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
    
                    
    • 
                    
  • 手撸vue3核心源码——响应式原理(isRef和unRef)
                        前端不是渣男
前端vue.js
                        
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
    
                    
    • 
                    
  • vue3 | isRef、unref、toRef、toRefs
                        杨贵妃会飞飞飞
Vuevue.js前端
                        
    isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则
    
                    
    • 
                    
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。
                        chen_sir_sh
vue学习笔记javascript前端vue
                        
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
    
                    
    • 
                    
  • React项目的开发前准备 以及 JSX 的基本使用
                        渡鸦七
Reactreact.js前端前端框架
                        
    React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React
    
                    
    • 
                    
  • react 函数组件useState异步变同步
                        MIKE-zi
react入门setstate异步问题函数组件实现分页函数组件上拉加载
                        
    需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page
    
                    
    • 
                    
  • Netty权威指南：Netty总结-高性能与可靠性
                        Ty_1106
Nettyjava网络rpc
                        
    第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor
    
                    
    • 
                    
  • Vue 和 React 的对比
                        淘淘是只狗
vueReactvue.jsreact.jsjavascript
                        
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
    
                    
    • 
                    
  • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！
                        tabzzz
react.jsjavascriptecmascript
                        
    文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
    
                    
    • 
                    
  • react 更新元素状态
                        叶绿素yls

                        
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
    
                    
    • 
                    
  • Reactive 编程-Vert.x
                        Flying_Fish_Xuan
python开发语言
                        
    Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性
    
                    
    • 
                    
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念
                        NewmanEdwarda2
前端ui数据库
                        
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
    
                    
    • 
                    
  • react native ScrollView实现滑动锚定，滑动到指定位置
                        君君yui
前端reactnativereact.jsjavascript
                        
    实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na
    
                    
    • 
                    
  • reactnative 获取定位_React-native实现定位的功能
                        weixin_39644915
reactnative获取定位
                        
    1、在React-native中实现定位的功能的几种方式。(1).使用rn中的自带的Geolocation实现定位。(2).用第三放库react-native-location实现定位。2.用rn中自带的Geolocation实现定位的详细步骤：(1).如果是android进行定位手下是需要权限的通过以下代码设置权限：(2).直接通过navigator.geolocation来进行定位，示例代码如
    
                    
    • 
                    
  • React Native动画的锚点anchorPoint
                        沉默的依恋
ReactNative
                        
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
    
                    
    • 
                    
  • 基于react native的锚点
                        miao_zz
Reactreact-nativereactnativeandroidreact.js
                        
    基于reactnative的锚点效果示例图示例代码效果示例图示例代码/*eslint-disablereact-native/no-inline-styles*/importReact,{useEffect,useRef,useState}from'react';import{Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpa
    
                    
    • 
                    
  • vue2与vue3的区别
                        longfan_
vue
                        
    1.vue2和vue3响应式原理发生了改变vue2的响应式原理是利⽤es5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了es6的proxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是引相⽐于vue2版本，使⽤proxy的优势如下1.
    
                    
    • 
                    
  • 前后端分离，Asp.net core webapi 如何配置跨域
                        代码掌控者
C#asp.netcore.netcore经验分享c#
                        
    前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
    
                    
    • 
                                
  • 多线程编程之卫生间
                                    周凡杨
java并发卫生间线程厕所
                                    
    如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
    
                                
    • 
                                
  • How to Install GUI to Centos Minimal
                                    sunjing
linuxInstallDesktopGUI
                                    
    http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html 
  
I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
    
                                
    • 
                                
  • Shell 函数
                                    daizj
shell函数
                                    
    Shell 函数 
linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 
shell中函数的定义格式如下： 
[function] funname [()]{

    action;
  
     [return int;]

} 
说明： 
 
 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 
 2、参数返回
    
                                
    • 
                                
  • Linux服务器新手操作之一
                                    周凡杨
Linux 简单 操作
                                    
    1.whoami 
     当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。 
     此时可以使用whoami命令。 
     [ecuser@HA5-DZ05 ~]$ whoami 
      e
    
                                
    • 
                                
  • 浅谈Socket通信（一）
                                    朱辉辉33
socket
                                    
    在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。 
   首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包 
   ServerSock
    
                                
    • 
                                
  • 关于框架的简单认识
                                    西蜀石兰
框架
                                    
    入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。 
前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。 
后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。 
 
都说学前端的要知道三大框架，目前node.
    
                                
    • 
                                
  • You have an error in your SQL syntax; check the manual that corresponds to your
                                    林鹤霄

                                    
    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids  ) values('0ac91f167f754c8cbac00e9e3dc372
    
                                
    • 
                                
  • MySQL5.6的my.ini配置
                                    aigo
mysql
                                    
    注意：以下配置的服务器硬件是：8核16G内存  
  
[client] 
  
port=3306 
  
[mysql] 
  
default-character-set=utf8 
  
  
[mysqld] 
  
port=3306 
  
basedir=D:/mysql-5.6.21-win
    
                                
    • 
                                
  • mysql 全文模糊查找 便捷解决方案
                                    alxw4616
mysql
                                    
    mysql 全文模糊查找 便捷解决方案 
2013/6/14 by 半仙 [email protected] 
 
目的: 项目需求实现模糊查找. 
原则: 查询不能超过 1秒. 
 
问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 
解决方案: 使用mysql全文索引. 
 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
    
                                
    • 
                                
  • 自定义数据结构 链表(单项 ,双向,环形)
                                    百合不是茶
单项链表双向链表
                                    
      
   链表与动态数组的实现方式差不多,    数组适合快速删除某个元素    链表则可以快速的保存数组并且可以是不连续的 
  
    
单项链表;数据从第一个指向最后一个 
  
实现代码: 
  
     
//定义动态链表
clas
    
                                
    • 
                                
  • threadLocal实例
                                    bijian1013
javathreadjava多线程threadLocal
                                    
    实例1： 
package com.bijian.thread;

public class MyThread extends Thread {

	private static ThreadLocal tl = new ThreadLocal() {
		protected synchronized Object initialValue() {
			return new Inte
    
                                
    • 
                                
  • activemq安全设置—设置admin的用户名和密码
                                    bijian1013
javaactivemq
                                    
            ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 
<bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint">
        <p
    
                                
    • 
                                
  • 【Java范型一】Java范型详解之范型集合和自定义范型类
                                    bit1129
java
                                    
    本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。 
  范型内容 
 
 范型集合类 
 范型类 
 
    
                                
    • 
                                
  • 【HBase十二】HFile存储的是一个列族的数据
                                    bit1129
hbase
                                    
    在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证 
  
1. 建立一个有两个列族的表 
  
create 'members','colfam1','colfam2' 
  
2. 在members表中的colfam1中插入50*5
    
                                
    • 
                                
  • Nginx 官方一个配置实例
                                    ronin47
nginx 配置实例
                                    
    user       www www;
worker_processes  5;
error_log  logs/error.log;
pid        logs/nginx.pid;
worker_rlimit_nofile 8192;

events {
  worker_connections  4096;}

http {
  include    conf/mim
    
                                
    • 
                                
  • java-15.输入一颗二元查找树，将该树转换为它的镜像， 即在转换后的二元查找树中，左子树的结点都大于右子树的结点。 用递归和循环
                                    bylijinnan
java
                                    
    
//use recursion
	public static void mirrorHelp1(Node node){
		if(node==null)return;
		swapChild(node);
		mirrorHelp1(node.getLeft());
		mirrorHelp1(node.getRight());
	}
	//use no recursion bu
    
                                
    • 
                                
  • 返回null还是empty
                                    bylijinnan
javaapachespring编程
                                    
    第一个问题，函数是应当返回null还是长度为0的数组（或集合）？ 
第二个问题，函数输入参数不当时，是异常还是返回null？ 
 
先看第一个问题 
 
有两个约定我觉得应当遵守： 
 
1.返回零长度的数组或集合而不是null（详见《Effective Java》） 
 
理由就是，如果返回empty，就可以少了很多not-null判断： 
 

List<Person> list
    
                                
    • 
                                
  • [科技与项目]工作流厂商的战略机遇期
                                    comsci
工作流
                                    
     
 
      在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。 
 
 
        在微软，甲骨文，谷歌，IBM,SONY
    
                                
    • 
                                
  • 过度设计-举例
                                    cuityang
过度设计
                                    
    过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。 
未来的事情，比如 访问量，比如数据库的容量，比如是否需要改成分布式  都是无法预料的 
 
再举一个例子，对闰年的判断逻辑： 
　　1、 if($Year%4==0) return True; else return Fasle; 
　　2、if (   ($Year%4==0  &am
    
                                
    • 
                                
  • java进阶，《Java性能优化权威指南》试读
                                    darkblue086
java性能优化
                                    
    记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
    
                                
    • 
                                
  • 网络学习笔记初识OSI七层模型与TCP协议
                                    dcj3sjt126com
学习笔记
                                    
       协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定   　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。   　　两类服务：   　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。   　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
    
                                
    • 
                                
  • mac中用命令行运行mysql
                                    dcj3sjt126com
mysqllinuxmac
                                    
    参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html  感觉workbench不好用（有点先入为主了）。 
1，安装mysql 
在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
    
                                
    • 
                                
  • MongDB查询（1）——基本查询[五]
                                    eksliang
mongodbmongodb 查询mongodb find
                                    
    MongDB查询 
转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 
MongoDB中使用find来进行查询。 
API:如下 
function ( query , fields , limit , skip, batchSize, options ){.....} 
 参数含义： 
 
 query:查询参数 
 fie
    
                                
    • 
                                
  • base64，加密解密 经融加密，对接
                                    y806839048
经融加密对接
                                    
    String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); 
 String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); 
 
// 注意编码格式，注意用于加密，解密的要是同
    
                                
    • 
                                
  • JavaWeb之JSP概述
                                    ihuning
javaweb
                                    
      
什么是JSP？为什么使用JSP？ 
JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。 
  
JSP起源  
  
在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。  
如果使用Servl
    
                                
    • 
                                
  • apple watch 指南
                                    啸笑天
apple
                                    
    1. 文档 
 
  WatchKit Programming Guide（中译在线版 By @CocoaChina）    译文 译者 原文   概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch   概览 - 配置 Xcode 项目 - Overview - Configuring Yo
    
                                
    • 
                                
  • java经典的基础题目
                                    macroli
java编程
                                    
    1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
    
                                
    • 
                                
  • 你所不知道神奇的js replace正则表达式
                                    qiaolevip
每天进步一点点学习永无止境纵观千象regex
                                    
    var v = 'C9CFBAA3CAD0';
console.log(v);
var arr = v.split('');
for (var i = 0; i < arr.length; i ++) {
  if (i % 2 == 0) arr[i] = '%' + arr[i];
}
console.log(arr.join(''));

console.log(v.r
    
                                
    • 
                                
  • [一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics)
                                    superlxw1234
hivehive分析表hive统计信息hive Statistics
                                    
    关键字：Hive统计信息、分析Hive表、Hive Statistics 
  
类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。 
  
表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等； 
  14.1 新表的统计信息 
对于一个新创建
    
                                
    • 
                                
  • Spring Boot 1.2.5 发布
                                    wiselyman
spring boot
                                    
      
  
Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。 
  
这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。 
  
官方建议所有的Spring Boot用户升级这个版本。 
  
项目首页 | 源
    
                                
    •