spring + spring mvc + mybatis + react + reflux + webpack Web工程例子

最近写了个Java Web工程demo,使用maven构建;

后端使用spring + spring mvc + mybatis;

前端使用react + reflux + webpack,使用ES6语法;顺带用了下jquery,bootstrap,echarts等插件,写了两个小demo

初版,还需不断完善。

先来个整体感觉吧,

贴几张图:

后端,熟悉的人自然熟悉:

前端

有没感觉前端的写法越来越像后端了,对于我这种业余前端选手来说,挺喜欢这种目录结构和语法的,哈哈哈:

运行效果

后端说明

后端就是常见的spring+spring mvc+mabatis了,怎么说呢,主要是写配置文件了,spring的配置、mybatis的配置,spring mvc的配置,web.xml配置,pom.xml配置等等,有兴趣的可以把源码下载下来,挺容易看懂的;

后端的主要功能就是给前端提供请求服务,前端通过ajax向后端发送请求,后端返回json格式的数据给前端,这里也没用spring mcv的视图解析器,当然想用的话,可以自己添加,个人觉得好像也没必要。

后端专门加了个servlet用于处理url请求,很简单就是forward到指定的html页面;在这个servlet里可以添加一些权限控制、过滤相关的东西。

前端说明

1、先安装nodejs,然后打开cmd,cd到\webapp目录,输入npm install,安装一堆的模块,这里需要安装的模块是参考package.json配置文件的,话说package.json配置文件跟pom.xml的功能挺相似的,都会配置各种依赖,工程信息,工程build等一堆东西;

2、然后输入webpack --display-error-details,使用webpack打包一下(加了个参数,打印相信错误信息),webpack是什么不清楚的,可以百度一下,反正它是可以加载各种模块,即使这些模块是使用JSX语法写的,它也有对应的loader会处理编译它们;

反正每次写完代码后,输入webpack运行一下,然后在html里引入打包好的js即可;

另外,关于react,reflux的说明,感觉要说的太多了,本菜鸟也只是了解各大概,内容都是参考自网络再加上自己的判断,会使用,这里就不详细说了;

简单说下个人理解:

react主要涉及虚拟dom和React.Component组件,每个React组件都有一个state,state变化后会重新调用组件的 render 方法渲染整个组件的 UI,这里不是直接操作dom,而是通过diff算法对虚拟dom进行一次计算,得到需要更新的dom,然后把需要更新的那部分dom写入到真正地dom里。另外组件是可以复用的;

reflux是flux思想的一种实现,别的实现还有redux什么的,

网上偷了张图,大概就是这么个意思:

PS:后端有什么MVC思想,前端也得来个什么类似的吧,当然,flux跟mvc还是有点不一样的

另外,要使用jquery,bootstrap也很方便,安装相应的组件,直接import使用即可;

最后

源码地址:https://github.com/peterchenhdu/webbf

仅供参考~

时间: 2024-10-27 07:52:10

spring + spring mvc + mybatis + react + reflux + webpack Web工程例子的相关文章

多工程:基于Maven的SSM(Spring,SpringMvc,Mybatis)整合的web工程(中)

上篇用了单工程创建了SSM整合的web工程(http://www.cnblogs.com/yuanjava/p/6748956.html),这次我们把上篇的单工程改造成为多模块工程 一:创建对应的多工程 首先原工程有对应的包如下 因为原单工程是 contoller 调用 service ,service 调用 mapper ,mapper 调用pojo 因此把对应的 service  mapper  pojo 分别拆分出去当做模块  然后把utils公用的抽出去当做common模块 最后创建出来

【Spring】Spring系列7之Spring整合MVC框架

7.Spring整合MVC框架 7.1.web环境中使用Spring 7.2.整合MVC框架 目标:使用Spring管理MVC的Action.Controller 最佳实践参考:http://www.itnose.net/detail/6102205.html http://wenku.baidu.com/link?url=ABQ1RvCWEAVObPpqJKWudD-UPc4YyH1MQQlu11fpCeoKexpDLxc2Lgs1c_Fh8HuqshxBfYxNfte6wU2PzdyzcSH

基于Spring + Spring MVC + Mybatis + shiro 高性能web构建

一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJS,做了大量的研究,对前后端交互有了更深层次的认识. 今天抽个时间写这篇文章,我有预感,这将是一篇很详细的文章,详细的配置,详细的注释,看起来应该很容易懂. 用最合适的技术去实现,并不断追求最佳实践.这就是架构之道. 希望这篇文章能给你们带来一些帮助,同时希望你们可以为这个项目贡献你的想法. 源码地址:https://github.com/starzou/quick4j 点击打开 看我们的项目结构: 是一个典型

maven新建Spring MVC + MyBatis + Oracle的Web项目中pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion&

[转]基于Spring + Spring MVC + Mybatis 高性能web构建

http://blog.csdn.net/zoutongyuan/article/details/41379851/ 一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJs,做了大量的研究,对前后端交互有了更深层次的认识. 今天抽个时间写这篇文章,我有预感,这将是一篇很详细的文章,详细的配置,详细的注释,看起来应该很容易懂. 用最合适的技术去实现,并不断追求最佳实践.这就是架构之道. 希望这篇文章能给你们带来一些帮助,同时希望你们可以为这个项目贡献你的想法. 源

基于Spring + Spring MVC + Mybatis 高性能web构建

一直想写这篇文章,前段时间 痴迷于JavaScript.NodeJs.AngularJs,做了大量的研究,对前后端交互有了更深层次的认识. 今天抽个时间写这篇文章,我有预感,这将是一篇很详细的文章,详细的配置,详细的注释,看起来应该很容易懂. 用最合适的技术去实现,并不断追求最佳实践.这就是架构之道. 希望这篇文章能给你们带来一些帮助,同时希望你们可以为这个项目贡献你的想法. 源码地址:https://github.com/starzou/quick4j 点击打开 看我们的项目结构: 是一个典型

Spring+spring mvc+mybatis+多数据源切换

spring mvc+mybatis+多数据源切换 选取oracle,mysql作为例子切换数据源.oracle为默认数据源,在测试的action中,进行mysql和oracle的动态切换. web.xml Java代码   <context-param> <param-name>webAppRootKey</param-name> <param-value>trac</param-value> </context-param> &l

Spring+Spring MVC+MyBatis实现SSM框架整合详细教程【转】

关于Spring+SpringMVC+Mybatis 整合,见还有不少初学者一头雾水,于是写篇教程,初学者按部就班的来一次,可能就会少走不少弯路了. 一:框架介绍(啰嗦两句,可自行度娘) 1.1:Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development and Design中阐述的部分理念和原型衍生而来.它是为了解决企业应用开发的复杂性而创建的

spring mvc+mybatis+多数据源切换

spring mvc+mybatis+多数据源切换 选取oracle,mysql作为例子切换数据源.oracle为默认数据源,在测试的action中,进行mysql和oracle的动态切换. web.xml Java代码   <context-param> <param-name>webAppRootKey</param-name> <param-value>trac</param-value> </context-param> &l