umi官方推荐结合dva使用更配哦,其实他们都是同一位开发者开发的,属于阿里内部开源框架。
1 修改.umirc.js
,开启dva支持
// ref: https://umijs.org/config/
export default {
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
['umi-plugin-react', {
antd: true,
dva: true,
dva: {
immer: true
},
dynamicImport: false,
title: 'umis',
dll: false,
hardSource: false,
routes: {
exclude: [
/components\//,
],
},
}],
],
}
2 修改layouts
先搞一个后台的布局,可以参考ANT DESIGN PRO
https://pro.ant.design/ layouts\index.js
import styles from './index.less';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { Component } from 'react';
import Link from 'umi/link';
import logo from '../assets/logo.svg';
const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
};
}
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render(){
return (
Ant Design Pro
Users
Team }
>
Team 1
Team 2
{/*此处可加面包屑*/}
{ this.props.children }
Ant Design ©2018 Created by Ant UED
);
}
}
export default BasicLayout;
layouts\index.less
.logo {
height: 64px;
position: relative;
line-height: 64px;
transition: all 0.3s;
background: #002140;
overflow: hidden;
img {
display: inline-block;
vertical-align: middle;
height: 32px;
}
h1 {
color: white;
display: inline-block;
vertical-align: middle;
font-size: 20px;
margin: 0 0 0 12px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
}
}
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
.logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
}
.sider {
min-height: 100vh;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
&.ligth {
background-color: white;
.logo {
background: white;
h1 {
color: #002140;
}
}
}
}
浏览器访问你会看到如下效果:
3 改造users页面,完成dva整个流程。
在pages下创建users目录
创建index.js 会生成默认路由http://localhost:8000/users
import { connect } from 'dva';
import { Table, Pagination, Popconfirm } from 'antd';
import styles from './users.css';
const PAGE_SIZE = 5;
function Users({ list: dataSource, total, page: current }) {
function deleteHandler(id) {
console.warn(`TODO: ${id}`);
}
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => {text} ,
},
{
title: 'Email',
dataIndex: 'email',
key: 'email',
},
{
title: 'Website',
dataIndex: 'website',
key: 'website',
},
{
title: 'Operation',
key: 'operation',
render: (text, { id }) => (
Edit
Delete
),
},
];
return (
record.id}
pagination={false}
/>
);
}
function mapStateToProps(state) {
const { list, total, page } = state.users;
console.log(state.test);
return {
list,
total,
page,
};
}
export default connect(mapStateToProps)(Users);
创建对应的model.js,因为只有一个model所以不需要创建models目录。但是名字必须为model.js,不然不能自动注册。
//只有一个model的话,可以不用建models目录。但名字必须为model。js
import * as usersService from './service';
export default {
namespace: 'users',
state: {
list: [],
total: null,
},
reducers: {
save(state, { payload: { data: list, total } }) {
return { ...state, list, total };
},
},
effects: {
*fetch({ payload: { page } }, { call, put }) {
const { data} = yield call(usersService.fetch, { page });
yield put({ type: 'save', payload: { data, total: data.length } });
},
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {
if (pathname === '/users') {
dispatch({ type: 'fetch', payload: query });
}
});
},
},
};
创建service.js 这个不需要约定名称,你随便起名字
import request from '../../utils/request';
export function fetch({ page = 1 }) {
return request(`/api/users?_page=${page}&_limit=5`);
}
创建utils目录,封装统一请求api utils\request.js
import fetch from 'dva/fetch';
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default async function request(url, options) {
const response = await fetch(url, options);
checkStatus(response);
const data = await response.json();
const ret = {
data
};
return ret;
}
export default {
'/api/users': [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected] ",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "[email protected] ",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "[email protected] ",
"address": {
"street": "Douglas Extension",
"suite": "Suite 847",
"city": "McKenziehaven",
"zipcode": "59590-4157",
"geo": {
"lat": "-68.6102",
"lng": "-47.0653"
}
},
"phone": "1-463-123-4447",
"website": "ramiro.info",
"company": {
"name": "Romaguera-Jacobson",
"catchPhrase": "Face to face bifurcated interface",
"bs": "e-enable strategic applications"
}
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "[email protected] ",
"address": {
"street": "Hoeger Mall",
"suite": "Apt. 692",
"city": "South Elvis",
"zipcode": "53919-4257",
"geo": {
"lat": "29.4572",
"lng": "-164.2990"
}
},
"phone": "493-170-9623 x156",
"website": "kale.biz",
"company": {
"name": "Robel-Corkery",
"catchPhrase": "Multi-tiered zero tolerance productivity",
"bs": "transition cutting-edge web services"
}
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "[email protected] ",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"geo": {
"lat": "-31.8129",
"lng": "62.5342"
}
},
"phone": "(254)954-1289",
"website": "demarco.info",
"company": {
"name": "Keebler LLC",
"catchPhrase": "User-centric fault-tolerant solution",
"bs": "revolutionize end-to-end systems"
}
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "[email protected] ",
"address": {
"street": "Norberto Crossing",
"suite": "Apt. 950",
"city": "South Christy",
"zipcode": "23505-1337",
"geo": {
"lat": "-71.4197",
"lng": "71.7478"
}
},
"phone": "1-477-935-8478 x6430",
"website": "ola.org",
"company": {
"name": "Considine-Lockman",
"catchPhrase": "Synchronised bottom-line interface",
"bs": "e-enable innovative applications"
}
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "[email protected] ",
"address": {
"street": "Rex Trail",
"suite": "Suite 280",
"city": "Howemouth",
"zipcode": "58804-1099",
"geo": {
"lat": "24.8918",
"lng": "21.8984"
}
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
"name": "Johns Group",
"catchPhrase": "Configurable multimedia task-force",
"bs": "generate enterprise e-tailers"
}
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "[email protected] ",
"address": {
"street": "Ellsworth Summit",
"suite": "Suite 729",
"city": "Aliyaview",
"zipcode": "45169",
"geo": {
"lat": "-14.3990",
"lng": "-120.7677"
}
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Implemented secondary concept",
"bs": "e-enable extensible e-tailers"
}
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "[email protected] ",
"address": {
"street": "Dayna Park",
"suite": "Suite 449",
"city": "Bartholomebury",
"zipcode": "76495-3109",
"geo": {
"lat": "24.6463",
"lng": "-168.8889"
}
},
"phone": "(775)976-6794 x41206",
"website": "conrad.com",
"company": {
"name": "Yost and Sons",
"catchPhrase": "Switchable contextually-based project",
"bs": "aggregate real-time technologies"
}
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "[email protected] ",
"address": {
"street": "Kattie Turnpike",
"suite": "Suite 198",
"city": "Lebsackbury",
"zipcode": "31428-2261",
"geo": {
"lat": "-38.2386",
"lng": "57.2232"
}
},
"phone": "024-648-3804",
"website": "ambrose.net",
"company": {
"name": "Hoeger LLC",
"catchPhrase": "Centralized empowering task-force",
"bs": "target end-to-end models"
}
}
],
}
访问http://localhost:8000/users
4 总结
按umi推荐的方式去创建目录
注意约定名 pages目录下的所有js都回被默认生成路由,可通过配置排出
省略了model的手动注册,至于忽略namespace
,我试了不行
各个page的model不能相互引用?不是很明白什么意思,我试了每个page都能获取所有的state,并不是只能获取属于自己的。可能是我理解有误。
没有看出来umi的好处,只是目录的区别吗? 这个 issues 下有关于umi按page分的讨论。https://github.com/sorrycc/blog/issues/66 希望知道umi核心优势的小伙伴留言解释下,前端菜鸟不是很懂。
别忘了关注我 mike啥都想搞
还有其他后端技术分享在我的公众号。
你可能感兴趣的:(umi,umi,react,node,antd,后台管理)
helm 部署 Kube-Prometheus + Grafana + 钉钉告警部署 Kube-Prometheus
zxj19880502
grafana prometheus
背景角色IPK8S版本容器运行时k8s-master-1172.16.16.108v1.24.1containerd://1.6.8k8s-node-1172.16.16.109v1.24.1containerd://1.6.8k8s-node-2172.16.16.110v1.24.1containerd://1.6.8安装kube-prometheusmkdir-p/data/yaml/kub
npm 搭建 Vite 项目
渺小的虫子
viter 前端 javascript 开发语言
兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue2、配置路由:npminstallvue-
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
OpenCV 如何使用 XML 和 YAML 文件的文件输入和输出
愚梦者
深度学习 人工智能 计算机视觉 c++ opencv
返回:OpenCV系列文章目录(持续更新中......)上一篇:如何利用OpenCV4.9离散傅里叶变换下一篇:目标本文内容主要介绍:如何使用YAML或XML文件打印和读取文件和OpenCV的文本条目?如何对OpenCV数据结构做同样的事情?如何为您的数据结构执行此操作?使用OpenCV数据结构,例如cv::FileStorage,cv::FileNodeorcv::FileNodeIterato
Jenkins安装
lettger
1.第一步sudowget-O/etc/yum.repos.d/jenkins.repohttps://pkg.jenkins.io/redhat/jenkins.reposudorpm--importhttps://pkg.jenkins.io/redhat/jenkins.io.key2.第二步sudoyuminstalljenkins3.第三步servicejenkinsstatus|sta
linux安装docker及docker-compose 部署spring boot项目
时而有事儿
docker linux docker linux spring boot
linux系统环境:centos5.14本篇描述的是在centos系统版本下安装docker,如果是ubuntu版本,请看这篇文章:linuxubuntu20安装docker和docker-compose-CSDN博客正文:安装docker和docker-compose安装docker---------运行命名等待安装完成遇到选择直接输入yyuminstall-yyum-utilsdevice-m
react native 总结
一切顺势而行
react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
ReactNative应用打包后无网络解决方案
程序猿也会飞
最佳实践 react native android react.js
ReactNative打包应用后,应用没有网络解决方案:在android\app\src\main\res下创建xml文件夹在xml文件夹中创建network_security_config.xml文件network_security_config.xml内容:在android\app\src\main文件夹AndroidManifest.xml文件内的Application标签中添加属性andr
深入理解 React 中的 children props 和 render props
JudithHuang
React 从入门到放弃 react.js javascript 前端
深入理解React中的childrenprops和renderprops在React中,childrenprops和renderprops是两种常见的组件复用模式,它们都可以帮助我们更好地组织和复用组件代码。虽然它们的实现方式有所不同,但都能够有效地实现组件之间的数据传递和功能共享。childrenpropschildrenprops是React中最常见的一种组件复用模式。通过childrenpr
reactive和ref的异同、toRef和toRefs的使用
Niucode
vue3 vue.js 前端 javascript
一、reactive和ref有了reactive为什么还要ref?ref处理起基本数据类型来更加的方便快捷,性能要更好。ref内部值的变化只会触发订阅它的副作用函数(effect)更新,而reactive(Proxy)内部对象的任何属性变化都会触发整个对象的重新渲染。相同点:都是Vue3提供的用于创建响应式数据的函数;在组件中都能够触发视图更新,实现数据的双向绑定。不同点:数据类型:reactiv
二叉树|617.合并二叉树
亦小河
算法
力扣题目链接classSolution{public:TreeNode*mergeTrees(TreeNode*t1,TreeNode*t2){if(t1==NULL)returnt2;if(t2==NULL)returnt1;//重新定义新的节点,不修改原有两个树的结构TreeNode*root=newTreeNode(0);root->val=t1->val+t2->val;root->lef
html版本号 webpack_html-webpack-plugin详解
weixin_39994949
html版本号 webpack
引言最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口有了这种插件,那么在项目中遇到类似上面
npm 常用命令详解
马卫斌 前端工程师
npm
npm(NodePackageManager)是Node.js的包管理器,它允许用户方便地安装、共享和管理Node.js项目中的依赖。以下是一些npm常用命令的详解:1.查看npm版本npm-v这个命令用于查看本地已安装的npm版本。2.初始化项目npminit运行这个命令会引导你创建一个package.json文件,该文件包含了项目的元数据,如名称、版本、描述、作者等信息以及项目的依赖配置。若要
11 React 组件通信 父传子
a457636876
React react.js javascript 前端
在React中实现组件通信是非常常见的需求,其中包括父子组件通信。以下是几种常见的父子组件通信的例子,以及需要注意的知识:Props传递:这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。//ParentComponent.jsimportReactfrom'react';importChildComponentfrom'./ChildComponent';functionPa
elasticsearch同步mysql数据库神器之go-mysql-elasticsearch
强哥的博客
数据库
go-mysql-elasticsearch是国内作者开发的一款插件。测试表明:该插件优点:能实现同步增、删、改、查操作。不足之处(待完善的地方):1、日志不是很详细,但是能满足基本需求;2、初始化时,无法自动同步mysql中存在的以前的数据,需要自行解决初始导入(如重建索引批量导入)go-mysql-elasticsearch安装步骤1:安装goyuminstallgo步骤2:安装godepgo
React 中 setState 更新状态的两种写法
JudithHuang
React 从入门到放弃 react.js 前端 前端框架
React中setState更新状态的两种写法在React中,我们经常需要更新组件的状态(state)。使用setState方法是一种常见的方式来实现状态的更新,而在使用setState方法时,有两种不同的写法,即对象式和函数式。本文将介绍这两种写法的区别和使用场景。1.对象式写法对象式写法是最常见的setState方法的调用方式之一。在这种写法中,我们直接传入一个对象来更新状态。//对象式写法t
[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package
清羽_ls
前端&&沉淀 javascript react.js 前端
修复vite构建时错误vite打包,第三方包引用的react版本不一致问题修复(不是最优解)//vite.config.jsimport{defineConfig}from'vite';importreactfrom'@vitejs/plugin-react';importpathfrom'path';exportdefaultdefineConfig({plugins:[react(),//如果
基于nodejs+vue智慧农业小程序python-flask-django-php
QQ_1963288475
python vue.js 小程序 flask django php node.js
根据此问题,研发一套智慧农业小程序,既能够大大提高信息的检索、变更与维护的工作效率,也能够方便微信小程序的管理运用,从而减少信息管理成本,提高效率。该微信小程序主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、知识科普、土壤信息、水质信息、购物商城等功能。该微信小程序操作简便,界面设计简洁,不但可以基本满足本行业的日常管理工作,同时又可以有效减少人员成本和时间成本,为智慧农业管理工
nodejs+vue的街道办管理系统python-flask-django-php
QQ_1963288475
python vue.js flask django php node.js
在此基础上,结合现有街道办管理体系的特点,运用新技术,构建了以nodejs为基础的街道办管理信息化管理体系。首先,以需求为依据,根据需求分析结果进行了系统的设计,并将其划分为管理员和用户二种角色和多个主要模块:用户、住户信息、流动人口、住户居住、住户迁出、缴费信息、投诉维修理、处理信息、评价评分、核酸采样、预约信息等。使用目前市场主流的技术express框架进行项目构建,基于MVC开发模式,使用n
【CentOS7】【Nginx】CentOS7源码编译并安装nginx
小丛的知识窝
nginx 运维 服务器
更新yumsudoyumupdate-y安装必要的编译工具和依赖项sudoyuminstall-ygccpcre-developenssl-develzlib-devel下载Nginx源代码wgethttp://nginx.org/download/nginx-1.20.1.tar.gz解压源代码包tar-zxvfnginx-1.20.1.tar.gz进入解压后的目录cdnginx-1.20.1配
0.数据库表设计三范式
_简_单_点_
数据库三范式idnamemobilezipprovincecitydistrictdeptNodeptName101张三1391000000113910000002100001北京北京海淀区D1部门1101张三1391000000113910000002100001北京北京海淀区D2部门2102李四13910000003200001上海上海静安区D3部门3103王五1391000000451000
npm 包管理工具:常用命令详解与使用指南
LXHYouth
node.js npm node.js
npm常用命令的更详细解释和使用场景:npminit详细说明:此命令用于初始化一个新的Node.js项目。它会创建一个package.json文件,其中包含项目的基本信息,如名称、版本、描述、入口点(mainfile)、测试命令、git仓库地址等。这个文件是项目的心脏,记录了项目的元数据和依赖关系。使用示例:在命令行中输入npminit,然后根据提示填写项目信息。如果你想要快速生成一个默认的pac
【编程】二叉树的遍历汇总
笃℃
搜广推等—算法面经 编程题 python 开发语言
【编程】二叉树的遍历汇总文章目录【编程】二叉树的遍历汇总1.前序遍历2.中序遍历3.后序遍历4.层次遍历1.前序遍历递归:#Definitionforabinarytreenode.#classTreeNode:#def__init__(self,val=0,left=None,right=None):#self.val=val#self.left=left#self.right=rightcla
k8s kubectl 常用命令
_Johnny_
kubernetes kubernetes linux 容器
查询节点nodekubectlgetnode查询节点标签kubectlgetnode--show-labels查询所有podkubectlgetpod-A查询指定命名空间下的podkubectlgetpod-nproject-3428查询pod详细kubectl-nproject-3428getpodxxxxxxxxxxxx-owidePOD打标签kubectllabelpodmypodapp=w
React—— props校验(非typescript校验类型)
水煮庄周鱼鱼
React react.js typescript javascript
非typescript环境下,当我们在封装组件的时候,接受props时传入的内容,需要做类型检测,那我们可以用props校验进行类型的检查。props校验允许在创建组件的时候,就约定props的格式、类型等实现步骤:导入prop-types包使用组件名.propTypes={}来给组件的props添加校验规则校验规则通过PropTypes对象来指定如果props想设置默认值,可以通过default
vue3 + Element + nodejs 大文件上传、断点续传
ZL随心
vue.js 前端 javascript
前言大文件上传,一般时间都比较长,这么长的时间内,可能会出现各种各样的问题,比如断网,一旦出错,我们的文件就需要重新上传,这样造成资源浪费,如果我们使用了断点续传继续就不会造成资源浪费了,因为当出现错误的时候,我们再重新上传文件,就会从我们出现错误的地方开始上传了,对于出错前上传的内容就不用再上传了,对于已经上传过的文件,就可以实现秒传的效果了。完整仓库地址流程1、上传方法constonUploa
如何快速上手Vue框架?
山间漫步人生路
vue.js 前端框架 vue.js
要快速上手Vue框架,可以按照以下步骤进行:一、准备工作了解Vue:Vue是一个构建用户界面的渐进式框架,核心库只关注视图层。环境准备:安装Node.js和npm,这是Vue开发的基础环境。二、安装Vue全局安装VueCLI:使用npm全局安装VueCLI,它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目:vuec
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs
QQ511008285
python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术,前端以小程序页面呈现给用户,结合后台java语言使页面更加完善,后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能,从而实现智能化的管理方式,提高工作效率。关键字:高校毕业生离校管理系统;django框架;MySQL数据库语言:
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
百思不得小李
JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境:2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
使用 Redux 管理 React 应用状态
JudithHuang
React 从入门到放弃 react.js javascript 前端
使用Redux管理React应用状态在复杂的React应用中,管理组件状态变得越来越复杂,这时候引入Redux可以帮助我们更好地管理状态。Redux是一个可预测状态容器,它可以帮助我们统一管理应用的状态,使得状态变化更加可控。本文将介绍如何在React应用中使用Redux。Redux简介Redux是一个状态管理库,它提供了一种可预测的状态管理方案。Redux的核心思想是将应用的状态存储在一个单一的
jvm调优总结(从基本概念 到 深度优化)
oloz
java jvm jdk 虚拟机 应用服务器
JVM参数详解:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html
Java虚拟机中,数据类型可以分为两类:基本类型和引用类型。基本类型的变量保存原始值,即:他代表的值就是数值本身;而引用类型的变量保存引用值。“引用值”代表了某个对象的引用,而不是对象本身,对象本身存放在这个引用值所表示的地址的位置。
【Scala十六】Scala核心十:柯里化函数
bit1129
scala
本篇文章重点说明什么是函数柯里化,这个语法现象的背后动机是什么,有什么样的应用场景,以及与部分应用函数(Partial Applied Function)之间的联系 1. 什么是柯里化函数
A way to write functions with multiple parameter lists. For instance
def f(x: Int)(y: Int) is a
HashMap
dalan_123
java
HashMap在java中对很多人来说都是熟的;基于hash表的map接口的非同步实现。允许使用null和null键;同时不能保证元素的顺序;也就是从来都不保证其中的元素的顺序恒久不变。
1、数据结构
在java中,最基本的数据结构无外乎:数组 和 引用(指针),所有的数据结构都可以用这两个来构造,HashMap也不例外,归根到底HashMap就是一个链表散列的数据
Java Swing如何实时刷新JTextArea,以显示刚才加append的内容
周凡杨
java 更新 swing JTextArea
在代码中执行完textArea.append("message")后,如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新,我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。
问题是这个方法并不能有任何效果,textArea的内容没有任何变化,这或许是swing的一个bug,有一个笨拙的办法可以实现
servlet或struts的Action处理ajax请求
g21121
servlet
其实处理ajax的请求非常简单,直接看代码就行了:
//如果用的是struts
//HttpServletResponse response = ServletActionContext.getResponse();
// 设置输出为文字流
response.setContentType("text/plain");
// 设置字符集
res
FineReport的公式编辑框的语法简介
老A不折腾
finereport 公式 总结
FINEREPORT用到公式的地方非常多,单元格(以=开头的便被解析为公式),条件显示,数据字典,报表填报属性值定义,图表标题,轴定义,页眉页脚,甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。
简单的说下自己感觉的公式要注意的几个地方:
1.if语句语法刚接触感觉比较奇怪,if(条件式子,值1,值2),if可以嵌套,if(条件式子1,值1,if(条件式子2,值2,值3)
linux mysql 数据库乱码的解决办法
墙头上一根草
linux mysql 数据库乱码
linux 上mysql数据库区分大小写的配置
lower_case_table_names=1 1-不区分大小写 0-区分大小写
修改/etc/my.cnf 具体的修改内容如下:
[client]
default-character-set=utf8
[mysqld]
datadir=/var/lib/mysql
socket=/va
我的spring学习笔记6-ApplicationContext实例化的参数兼容思想
aijuans
Spring 3
ApplicationContext能读取多个Bean定义文件,方法是:
ApplicationContext appContext = new ClassPathXmlApplicationContext(
new String[]{“bean-config1.xml”,“bean-config2.xml”,“bean-config3.xml”,“bean-config4.xml
mysql 基准测试之sysbench
annan211
基准测试 mysql基准测试 MySQL测试 sysbench
1 执行如下命令,安装sysbench-0.5:
tar xzvf sysbench-0.5.tar.gz
cd sysbench-0.5
chmod +x autogen.sh
./autogen.sh
./configure --with-mysql --with-mysql-includes=/usr/local/mysql
sql的复杂查询使用案列与技巧
百合不是茶
oracle sql 函数 数据分页 合并查询
本片博客使用的数据库表是oracle中的scott用户表;
------------------- 自然连接查询
查询 smith 的上司(两种方法)
&
深入学习Thread类
bijian1013
java thread 多线程 java多线程
一. 线程的名字
下面来看一下Thread类的name属性,它的类型是String。它其实就是线程的名字。在Thread类中,有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。
同时,Thr
JSON串转换成Map以及如何转换到对应的数据类型
bijian1013
java fastjson net.sf.json
在实际开发中,难免会碰到JSON串转换成Map的情况,下面来看看这方面的实例。另外,由于fastjson只支持JDK1.5及以上版本,因此在JDK1.4的项目中可以采用net.sf.json来处理。
一.fastjson实例
JsonUtil.java
package com.study;
impor
【RPC框架HttpInvoker一】HttpInvoker:Spring自带RPC框架
bit1129
spring
HttpInvoker是Spring原生的RPC调用框架,HttpInvoker同Burlap和Hessian一样,提供了一致的服务Exporter以及客户端的服务代理工厂Bean,这篇文章主要是复制粘贴了Hessian与Spring集成一文,【RPC框架Hessian四】Hessian与Spring集成
在
【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析
bit1129
Mahout
#!/bin/bash
#
# Licensed to the Apache Software Foundation (ASF) under one or more
# contributor license agreements. See the NOTICE file distributed with
# this work for additional information re
nginx三种获取用户真实ip的方法
ronin47
随着nginx的迅速崛起,越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速,但是随之也遇到一个问题:nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>,如果是后端真实服务器是nginx,那么继续往下看。
实例环境: 用户IP 120.22.11.11
java-判断二叉树是不是平衡
bylijinnan
java
参考了
http://zhedahht.blog.163.com/blog/static/25411174201142733927831/
但是用java来实现有一个问题。
由于Java无法像C那样“传递参数的地址,函数返回时能得到参数的值”,唯有新建一个辅助类:AuxClass
import ljn.help.*;
public class BalancedBTree {
BeanUtils.copyProperties VS PropertyUtils.copyProperties
诸葛不亮
PropertyUtils BeanUtils
BeanUtils.copyProperties VS PropertyUtils.copyProperties
作为两个bean属性copy的工具类,他们被广泛使用,同时也很容易误用,给人造成困然;比如:昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时,没有考虑到会将null转换为0,而后面的业
[金融与信息安全]最简单的数据结构最安全
comsci
数据结构
现在最流行的数据库的数据存储文件都具有复杂的文件头格式,用操作系统的记事本软件是无法正常浏览的,这样的情况会有什么问题呢?
从信息安全的角度来看,如果我们数据库系统仅仅把这种格式的数据文件做异地备份,如果相同版本的所有数据库管理系统都同时被攻击,那么
vi区段删除
Cwind
linux vi 区段删除
区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。
vi概述
引文中并未将末行模式单独列为一种模式。单不单列并不重要,能区分命令模式与末行模式即可。
vi区段删除步骤:
1. 在末行模式下使用:set nu显示行号
非必须,随光标移动vi右下角也会显示行号,能够正确找到并记录删除开始行
清除tomcat缓存的方法总结
dashuaifu
tomcat 缓存
用tomcat容器,大家可能会发现这样的问题,修改jsp文件后,但用IE打开 依然是以前的Jsp的页面。
出现这种现象的原因主要是tomcat缓存的原因。
解决办法如下:
在jsp文件头加上
<meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
不要盲目的在项目中使用LESS CSS
dcj3sjt126com
Web less
如果你还不知道LESS CSS是什么东西,可以看一下这篇文章,是我一朋友写给新人看的《CSS——LESS》
不可否认,LESS CSS是个强大的工具,它弥补了css没有变量、无法运算等一些“先天缺陷”,但它似乎给我一种错觉,就是为了功能而实现功能。
比如它的引用功能
?
.rounded_corners{
[入门]更上一层楼
dcj3sjt126com
PHP yii2
更上一层楼
通篇阅读完整个“入门”部分,你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能,例如通过 HTML 表单从用户那获取数据,从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。
本章将介绍一些有助于更好使用 Yii 的资源:
Apache HttpClient使用详解
eksliang
httpclient http协议
Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而且也方便了开发人员测试接口(基于Http协议的),即提高了开发的效率,也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容,掌握HttpClient后,相信对于Http协议的了解会
zxing二维码扫描功能
gundumw100
android zxing
经常要用到二维码扫描功能
现给出示例代码
import com.google.zxing.WriterException;
import com.zxing.activity.CaptureActivity;
import com.zxing.encoding.EncodingHandler;
import android.app.Activity;
import an
纯HTML+CSS带说明的黄色导航菜单
ini
html Web html5 css hovertree
HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航
在线体验效果:http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果:
<!DOCTYPE html >
<html >
<head>
<title>HoverTree
fastjson初始化对性能的影响
kane_xie
fastjson 序列化
之前在项目中序列化是用thrift,性能一般,而且需要用编译器生成新的类,在序列化和反序列化的时候感觉很繁琐,因此想转到json阵营。对比了jackson,gson等框架之后,决定用fastjson,为什么呢,因为看名字感觉很快。。。
网上的说法:
fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发。
基于Mybatis封装的增删改查实现通用自动化sql
mengqingyu
DAO
1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml,有效的提高开发速度。
2.支持自定义注解包括主键生成、列重复验证、列名、表名等
3.支持批量插入、批量更新、批量删除
<bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
js控制input输入框的方法封装(数字,中文,字母,浮点数等)
qifeifei
javascript js
在项目开发的时候,经常有一些输入框,控制输入的格式,而不是等输入好了再去检查格式,格式错了就报错,体验不好。 /** 数字,中文,字母,浮点数(+/-/.) 类型输入限制,只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注:floating属性只能单独用*/
funct
java 计时器应用
tangqi609567707
java timer
mport java.util.TimerTask; import java.util.Calendar; public class MyTask extends TimerTask { private static final int
erlang输出调用栈信息
wudixiaotie
erlang
在erlang otp的开发中,如果调用第三方的应用,会有有些错误会不打印栈信息,因为有可能第三方应用会catch然后输出自己的错误信息,所以对排查bug有很大的阻碍,这样就要求我们自己打印调用的栈信息。用这个函数:erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。
也可以用这个函数:erlang:get_s