React爬坑之路三：Dva

前两篇写了react各种基本操作和主要概念
但其实没必要那么复杂直接用框架就好啦
这年头前端框架真是一睁眼就多出好几个
傻瓜级教程写的不合理的地方请批评指正

React官网：https://reactjs.org/
菜鸟教程：http://www.runoob.com/react/react-tutorial.html
ES6入门: http://es6.ruanyifeng.com/
Ant Design：https://ant.design/index-cn
Redux: https://www.redux.org.cn/
Dva：https://github.com/dvajs/dva

先附上上上篇的链接。React爬坑之路一：React+Antd+Axios
和上篇的链接。React爬坑之路二：Router+Redux
第一篇其实说过了，之所以在简书记录了一下React是因为工作培训时小哥给的Dva工程ST发现一行都看不懂 = =
原本想在研究Dva之前先简写下React的基本概念，没想到写太多直接更新了两篇博客。
那么现在终于可以来研究Dva啦。

Dva是守望先锋中一个热门英雄，拥有一部强大的机甲，同时具有两台全自动的近距离聚变机炮……
诶，不是这个Dva吗Σ(⊙▽⊙"）

七. 创建Dva工程
我们前两篇都是用create-react-app创建工程的，但是它只能创建一个最基本的空程序。在前两篇中，我们自己用npm装上了router，redux等依赖包，并自己手动写了很多操作。
Dva将上述一切进行了简化，它是一个封装好很多模块的框架，并且拥有自己的脚手架。用Dva创建的工程，从目录结构起就非常清晰。（虽然框架这种东西可以简化很多操作，但在使用框架前还是不能忘记本源，所以建议前两篇也粗略的看一看。）

npm install dva-cli -g
用dva -v可以查看版本号。
dva版本.png

跟create-react-app一样，用dva在命令行创建app。
dva new dva-app
其后进入工程文件并启动工程。

cd dva-app
npm start
Dva工程.png
（Yay！…为什么是一个小丑啊눈_눈，这让有恐怖片小丑恐惧症的人情何以堪）

Dva工程的目录结构如下：

Dva目录结构.png
可以看出，比create-react是多了很多东西的。
除了index.js的入口文件，和router.js的初始路由，上面那些文件夹里大致意义如下：

asserts 用于存放静态资源，跟以往正常的java工程一样，里面扔图片视频之类的。
components 用于存放公共组件，比如页面头尾导航条。
routes 用于存放路由组件，可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来。
models 用于存放模型文件，（个人认为model才是react-redux体系里最重要的部分），我们之前说的state以及reducer都会写在里面，同时，通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据，model也能通过connect接收到组件中dispatch的action。
services 用于存放跟后台交互的服务文件，一般都需要调用后台的接口。
utils 用于存放工具类库。
其他的配置文件暂时不管啦。

整体的流程大致（数据流向）是：
从index入口进入 => 通过url匹配routes里的组件（顺便看看components里有没有啥公共组件要加载过来） => routes里的组件dispatch action => model通过action改变state（中途可能会通过services跟后台交互） => 通过connect重新渲染routes中的组件
画的不对不要怪我.png
八. 实践出真知
理论不如实践，那么，我们用Dva搞一个前两篇中的例子试一试，路由切换并且做个表格。（其实具体各个函数的写法跟前两篇中基本一样，只是写的位置不一样。下面详解。）

路由aaa.png
路由bbb.png
首页.png
入口文件：
首先，在入口文件index.js中，能看到已经给我们留了model模型和router路由的位置。在开发中，所有的model模型文件都需要在这里注册，这样才能用connect跟组件联系起来。

// 1. Initialize
const app = dva();

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require(’./models/example’).default);

// 4. Router
app.router(require(’./router’).default);

// 5. Start
app.start(’#root’);

先不管Model，Router告诉我们引用了router.js，打开看一眼。

import IndexPage from ‘./routes/IndexPage’;
……





只有一个，通俗易懂，在路径为/的时候匹配到IndexPage。（不用我们自己装Router自己建立router.js自己配置了是不是很方便~）注意这里加了exact，表示精确匹配，如果不加则/aaa, /bbb, /whatever都会匹配到IndexPage，精确匹配的话只有输入/的时候才会匹配。
IndexPage里能看到欢迎信息，那个小丑图片和提示文字，这里就不贴过来了。

路由切换：
下面我们自己做个路由切换的效果。
Step1: 装Antd！虽然Dva很贴心的封装了很多工具包但是并没有封装样式库，所以Antd还是需要自己装的。

npm install antd
npm install babel-plugin-import
并编辑.webpackrc文件。

{
“extraBabelPlugins”: [
[“import”, {
“libraryName”: “antd”,
“libraryDirectory”: “es”,
“style”: true
}]
]
}
这样就可以使用Antd了。

Step2: 新增组件
下一步我们需要新建一些组件：

新建一些组件.png
我们在routes里面新建aaa.js和bbb.js两个组件。内容随便写点啥，反正只是为了切换用。

// aaa.js
import React, { Component } from ‘react’
import { connect } from ‘dva’

class AAA extends Component { //BBB同理
render() {
return (

AAA

)
}
}

AAA.propsTypes = {}
export default connect()(AAA)
Step3: 定义导航栏
然后，在components里建立两个公共组件header.js和layout.js。
header.js用作页面上方的导航栏，理想效果如下，通过点击不同导航切换地址栏url。

header.png
header.js需要引入antd的Menu模块，以及dva封装好的Link。Link的作用即匹配相应的路径，在爬坑之路二里我们也用到过。

// header.js
……
import { Menu } from ‘antd’;
import { Link } from ‘dva/router’

class Header extends Component {
render() {
return (
theme=“dark”
mode=“horizontal”
defaultSelectedKeys={[‘1’]}
style={{ lineHeight: ‘64px’ }}
>

Index


AAA


BBB


)
}
}
……
Step4: 定义布局
layout.js用来当整体页面布局，我们想把页面分成两部分，上面放导航条下面放子内容。头部需要引入刚刚的header组件，然后以

的方式插入到节点中。props是该组件的属性，用于传递数据，每个组件都有自己的props。props.children表示该组件的所有子节点。

// layout.js
import React, { Component } from ‘react’
import { connect } from ‘dva’;
import Header from ‘…/components/header’

class Layout extends Component {
render() {
const { children } = this.props
return (

{children}

)
}
}

export default Layout;
Step5: 连接路由
此时还差最后一步，就是把路由跟刚刚的这些组件联系起来。我们回到router.js，修改如下。

// router.js
import React from ‘react’;
import { Router, Route, Switch } from ‘dva/router’;
import Layout from ‘./components/layout’
import IndexPage from ‘./routes/IndexPage’;
import AAA from ‘./routes/aaa’;
import BBB from ‘./routes/bbb’;

function RouterConfig({ history }) {
return (









);
}

export default RouterConfig;
看到return中的子节点了没有，这些就是会放到layout.js的props.children中的内容。

以上操作的流程是，在header.js中，我们通过点击不同导航栏，更换地址栏的url；接下来在router.js中，通过匹配地址栏的url，选择加载的子组件呈现到页面上。
最终的效果应如下所示：

点击AAA.png
点击BBB.png
路由到此结束，接下来加上列表。

列表操作：
Step1：创建routes页面组件
在routes/IndexPage.js页面组件里，我们把爬坑之路二的那个列表拿过来。
列表.png

修改数据

Table标签有两个属性，columns是表头，dataSource是数据，均绑定到state。只是这一次，state和action都不是直接写在页面组件下的了，而是定义到对应的模型文件中。

Step2：创建models模型
我们新建models/indexpage.js作为模型文件。可以参考项目自带的example.js，里面已经给出了state，effects和reducers的地方。

//models/indexpage.js
export default {
namespace: ‘indexpage’,
state: {
columns: [{
title: ‘姓名’,
dataIndex: ‘name’,
}, {
title: ‘性别’,
dataIndex: ‘gender’,
}],
data: [{
“key”: “1”,
“name”: “王大斌”,
“gender”: “男”
},{
“key”: “2”,
“name”: “刘小洋”,
“gender”: “男”
}]
},

subscriptions: {
……
},

effects: {
……
},

reducers: {
……
},
};
namespace是该模型文件的命名空间，也是在全局state上的属性，在routes组件中，我们可以用this.props.某命名空间获取state（根节点）中某命名空间的数据。

Step3：通过connect关联数据
回到routes/IndexPage.js页面组件，如果我们在routes中想要用model里面的数据的话，我们需要通过connect工具来传递，其基本用法是connect(从model中获取数据)(绑定到routes组件)。

//routes/IndexPage.js
import { connect } from ‘dva’;

class IndexPage extends Component{
changeData = () => {
console.log(“Change Data”);
};

render() {
    const { columns, data } = this.props.indexpage; //获取indexpage中的state
    console.log(this.props);
    return (
        

            修改数据
            

                
    )
}
}
export default connect(({ indexpage }) => ({
 indexpage,
 }))(IndexPage);
注意最后的写法，这样，models/indexpage.js的state数据就被绑定到routes/IndexPage.js的table节点上啦，列表被赋予了两行值。
Step4：创建services获取数据
 假设我们有个json数据是这样的，放在8080端口，我们想把它当做一行添加到上面的列表里。
json数据.png
 在services中我们同后台进行交互，新建services/user.js文件。
//services/user.js
 import request from ‘…/utils/request’;
export function getUser() {
 return request(‘http://localhost:8080/data’);
 }
utils/request.js里面已经贴心的自带了request方法用于请求url，直接拿来用就可以。
 这样，在我们调用getUser()方法时，就会请求数据啦。
 友情提示，以往我们一直习惯直接在model里调用getUser()然后用setstate改变state的值，但这是不符合Dva的规则的，Dva规定我们必须通过触发action才可以改变state，也就是下一步。
Step5：触发action
 对于这个列表，我们希望点击按钮添加一行。根据前面的讲述我们知道了，改变state的值需要dispatch(action)，再调用reducer改变state，进而重新渲染，这是Dva规定的数据流传输方式。
 这里的action有两种走向，对于同步行为（比如我就改变个按钮颜色），可以直接调用model中的reducer。而对于异步行为（比如从服务器请求数据），需要先触发effects然后调用reducer。
 下面我们在routes/IndexPage.js里，通过onClick={this.changeData}按钮事件，触发一个action给模型文件。
//点击按钮触发
changeData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'indexpage/addUser',
      payload: {},
    });
};
这表示我们要调用models/indexpage.js的addUser方法。
 在models/indexpage.js里，我们需要在effects中定义好这个方法。
 effects 属性的语法可以参考Redux-saga 中文文档，它可以获取全局state，也可以触发action。effects内部使用 yield 关键字标识每一步的操作，call表示调用异步函数，put表示dispatch(action)。
effects: {
 *addUser({ payload }, { call, put }) { // eslint-disable-line
 const myuser = yield call(userService.getUser, {});
 yield put({
 type: ‘ADD_USER’,
 payload: {
 myuser:myuser.data
 },
 });
 },
 },
 这表明，我们先读取service中的getUser()方法，将它放到payload里，然后调用了reducer里面名为ADD_USER的action，告诉它要改变state。
Step5：调用reducer
 我们说过，reducer是纯函数，当输入相同时输出也必然相同，其输入参数是当前的state和收到的action，他会返回一个新的 state。
 …三点运算符在爬坑二种说过了哦，作用是把数组打开进行操作，我们把payload中的信息加在state的原有data之后。
reducers: {
 ADD_USER(state, action) {
 return { …state,
 data:state.data.concat(action.payload.myuser) };
 },
 },
 点击一下按钮，是不是已经添加成功了~ 还记得在爬坑之路二种，我们需要手动去创建监听重新渲染页面才能看到更新效果，而在Dva中，由于使用了connect，会在内部自动更新，并不用手动刷新了呢。
最终的成果如下所示：
最终效果.png
 这样，就完成了一个简单的页面切换和修改state的例子。
九. 总结
 现在应该可以去看工作培训时小哥给的Dva工程了嗷，应该不至于一行都看不懂了。。。用三篇整理了一下React和Dva的基本知识及操作，现在觉得Dva还是挺方便的，um…虽然我好像还是更喜欢vue (´･ω･｀)？
 顺便Vue马上要出3.0了！为尤雨溪大大打call！
 之前看了看springboot吓得我回来继续研究react，还是前端大陆好，反正全栈是不可能全栈的，这辈子都不可能全栈。
作者：saint37
 链接：https://www.jianshu.com/p/513c5eab17c1
 来源：简书
 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                

        
你可能感兴趣的:(java,前端,react.js)
        

            

                

                    
Long类型前后端数据不一致
                        igotyback
前端
                        
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
                    
                    
LocalDateTime 转 String
                        igotyback
java开发语言
                        
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
                    
                    
Linux下QT开发的动态库界面弹出操作（SDL2）
                        13jjyao
QT类qt开发语言sdl2linux
                        
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
                    
                    
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
                    
                    
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
                    
                    
【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
                    
                    
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
                    
                    
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
                    
                    
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的运行
                    
                    
Java 重写(Override)与重载(Overload)
                        叨唧唧的

                        
Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
                    
                    
简单了解 JVM
                        记得开心一点啊
jvm
                        
目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
                    
                    
1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven
                        Energet!c
开发语言
                        
1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
                    
                    
Java企业面试题3
                        马龙强_
java
                        
1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
                    
                    
JVM、JRE和 JDK：理解Java开发的三大核心组件
                        Y雨何时停T
Javajava
                        
Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
                    
                    
Java面试题精选：消息队列(二)
                        芒果不是芒
Java面试题精选javakafka
                        
一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
                    
                    
白骑士的Java教学基础篇 2.5 控制流语句
                        白骑士所长
Java教学java开发语言
                        
欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
                    
                    
python语法——三目运算符
                        HappyRocking
pythonpython三目运算符
                        
在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
                    
                    
ArrayList 源码解析
                        程序猿进阶
Java基础ArrayListListjava面试性能优化架构设计idea
                        
ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
                    
                    
Java爬虫框架（一）--架构设计
                        狼图腾-狼之传说
java框架java任务html解析器存储电子商务
                        
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
                    
                    
Java：爬虫框架
                        dingcho
Javajava爬虫
                        
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
                    
                    
python怎么将png转为tif_png转tif
                        weixin_39977276

                        
发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
                    
                    
springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
                    
                    
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
                    
                    
JAVA·一个简单的登录窗口
                        MortalTom
java开发语言学习
                        
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
                    
                    
WebMagic：强大的Java爬虫框架解析与实战
                        Aaron_945
Javajava爬虫开发语言
                        
文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
                    
                    
博客网站制作教程
                        2401_85194651
javamaven
                        
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
                    
                    
00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
                    
                    
JAVA学习笔记之23种设计模式学习
                        victorfreedom
Java技术设计模式androidjava常用设计模式
                        
博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
                    
                    
JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
                    
                    
最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
                    
                                
ztree异步加载
                                    3213213333332132
JavaScriptAjaxjsonWebztree
                                    
相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。 
我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。 
 
设置setting，这里只关注async属性的配置 
 

            var setting = {
            	//异步加载配置	
      
                                
                                
thirft rpc 具体调用流程
                                    BlueSkator
中间件rpcthrift
                                    
Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作： 
        （1）     将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
                                
                                
异或运算推导, 交换数据
                                    dcj3sjt126com
PHP异或^
                                    
/*
 * 5 0101
 * 9 1010
 *
 * 5 ^ 5
 * 0101
 * 0101
 * -----
 * 0000
 * 得出第一个规律: 相同的数进行异或, 结果是0
 *
 * 9 ^ 5 ^ 6
 * 1010
 * 0101
 * ----
 * 1111
 *
 * 1111
 * 0110
 * ----
 * 1001
 
                                
                                
事件源对象
                                    周华华
JavaScript
                                    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml&q
                                
                                
MySql配置及相关命令
                                    g21121
mysql
                                    
        MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。 
  
        一 修改MySQL密码及用户 
     
                                
                                
[简单]poi删除excel 2007超链接
                                    53873039oycg
Excel
                                    
      采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下: 
     
public void removeExcel2007AllHyperLink(String filePath) throws Exception {
		OPCPackage ocPkg = OPCPac
                                
                                
Struts2添加 open flash chart
                                    云端月影

                                    
准备以下开源项目： 
1. Struts 2.1.6 
2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 
3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 
4. log4j 
 
用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
                                
                                
spring包详解
                                    aijuans
spring
                                    
  
下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
                                
                                
网站推广之seo概念
                                    antonyup_2006
算法Web应用服务器搜索引擎Google
                                    
   持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。 
    所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。 
    网站推广策略有很多，seo，email，adv
                                
                                
单例模式,sql注入,序列
                                    百合不是茶
单例模式序列sql注入预编译
                                    
  
序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面 
  
 1,序列是一个保存数据连续的增长的一种方式; 
序列的创建; 
 CREATE SEQUENCE seq_pro
  2  INCREMENT BY 1 -- 每次加几个
  3 
                                
                                
Mockito单元测试实例
                                    bijian1013
单元测试mockito
                                    
Mockito单元测试实例： 
public class SettingServiceTest {
    
    private List<PersonDTO> personList = new ArrayList<PersonDTO>();
    
    @InjectMocks
    private SettingPojoService settin
                                
                                
精通Oracle10编程SQL(9)使用游标
                                    bijian1013
oracle数据库plsql
                                    
/*
 *使用游标
 */
--显示游标
--在显式游标中使用FETCH...INTO语句
DECLARE
   CURSOR emp_cursor is 
      select ename,sal from emp where deptno=1;
   v_ename emp.ename%TYPE;
   v_sal emp.sal%TYPE;
begin
   ope
                                
                                
【Java语言】动态代理
                                    bit1129
java语言
                                    
  JDK接口动态代理 
JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联 
  
package com.tom;

import com.tom.model.User;
import com.tom.service.IUserService;

                                
                                
Java通信之URL通信基础
                                    白糖_
javajdkwebservice网络协议ITeye
                                    
java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。 
在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。 
学习准备：建议首先学习java的IO基础知识 
  
URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
                                
                                
博弈Java讲义 - Java线程同步 (1)
                                    boyitech
java多线程同步锁
                                    
  
在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。 
   同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
                                
                                
java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。
                                    bylijinnan
java
                                    


public class DeleteExtraSpace {

	/**
	 * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。
	 * 方法1.用已有的String类的trim和replaceAll方法
	 * 方法2.全部用正则表达式，这个我不熟
	 * 方法3.“重新发明轮子”，从头遍历一次
	 */
	public static v
                                
                                
An error has occurred.See the log file错误解决！
                                    Kai_Ge
MyEclipse
                                    
今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！ 
很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！ 
打开日志文件！找到当日错误文件内容： 
--------------------------------------------------------------------------
                                
                                
[矿业与工业]修建一个空间矿床开采站要多少钱?
                                    comsci

                                    
 
       地球上的钛金属矿藏已经接近枯竭........... 
 
       我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床..... 
 
       那么,现在要编制一个预算,提交给财政部门..
                                
                                
解析Google Map Routes
                                    dai_lm
google api
                                    
为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 
[url] 
http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false 
[/url] 
从返回的结果上，大致可以了解应该怎么走，但
                                
                                
SQL还有多少“理所应当”？
                                    datamachine
sql
                                    
转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ 
 
------------------------------------华丽的分割线-------------------------------- 

                                
                                
Yii使用Ajax验证时，如何设置某些字段不需要验证
                                    dcj3sjt126com
Ajaxyii
                                    
经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: 
$form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&
                                
                                
使用git同步网站代码
                                    dcj3sjt126com
crontabgit
                                    
转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com 
  
管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
                                
                                
sql基本操作
                                    蕃薯耀
sqlsql基本操作sql常用操作
                                    
sql基本操作 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 2015年6月1日 17:30:33 星期一 
  
  
&
                                
                                
Spring4+Hibernate4+Atomikos3.3多数据源事务管理
                                    hanqunfeng
Hibernate4
                                    
Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/   一.pom.xml 
<dependency>
			<
                                
                                
jquery中两个值得注意的方法one()和trigger()方法
                                    jackyrong
trigger
                                    
  在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 
 
 
1） one方法 
    one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为 
   one(type,${data},fn) 
&nb
                                
                                
拿工资不仅仅是让你写代码的
                                    lampcy
工作面试咨询
                                    
这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 
这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。 
话粗理不粗。 
付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
                                
                                
架构师之对象操作----------对象的效率复制和判断是否全为空
                                    nannan408
架构师
                                    
1.前言。 
  如题。 
2.代码。 
 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier 
 

Src src=new Src();
BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
      
                                
                                
ajax 被缓存的解决方案
                                    Rainbow702
JavaScriptjqueryAjaxcache缓存
                                    
使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。 
今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。 
解决方法如下： 
① 直接使用 JQuery提供的 “cache”参数，
                                
                                
修改date.toLocaleString()的警告
                                    tntxia
String
                                    
  
我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下： 
  
package com.tntxia.htmlmaker.util;

import java.text.SimpleDateFormat;
import java.util.
                                
                                
项目完成后的小总结
                                    xiaomiya
js总结项目
                                    
项目完成了，突然想做个总结但是有点无从下手了。 
做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 
先说说项目主要实现的功能吧 
1，按键精灵 
2，获取行情数据 
3，各种input输入条件判断 
4，发送数据（有json格式和string格式） 
5，获取预警条件列表和预警结果列表， 
6，排序， 
7，预警结果分页获取 
8，导出文件（excel，text等） 
9，修
                                
                
            
        
    

    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.