前言
最近写了个Java Web工程demo,使用maven构建;
后端使用spring + spring mvc + mybatis;
前端使用react + react-router+ webpack,使用ES6语法;顺带用了下jquery,echarts等插件,写了几个小demo
初版,还需不断完善。
先来个整体感觉吧
贴几张图:
后端,熟悉的人自然熟悉:
前端,网上关于react,reflux很多都是单页应用,我这个多页应用的目录自己设计的,参考后端,一个功能一个目录~~~
有没感觉前端的写法越来越像后端了,对于我这种业余前端选手来说,挺喜欢这种目录结构和语法的,哈哈哈:
运行效果:
后端说明
后端就是常见的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、然后输入npm run build,使用webpack打包一下,webpack是什么不清楚的,可以百度一下,反正它是可以加载各种模块,即使这些模块是使用JSX语法写的,它也有对应的loader会处理编译它们;
反正每次写完代码后,输入npm run build构建一下,然后在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使用即可;
实际项目效果
源码参考
仅供参考~