[项目][准备7][终结] Lab2实践体验

学习目标

项目准备系列的终结篇，完全使用前6篇的技术实现了Lab2，主要是验证技术的可行性，仅供参考验证。

说明：在使用系列技术初期，曾有一个未使用Webpack的Lab2版本，设计的非常差。现在这个版本是基于那个版本重构的，故设计的也不咋地。因此文中只给出成品和问题思考，不谈设计和思路，防止将错误传递。

学习参考

无

实践示例

准备工作

将以下三个地址clone或zip下载到本地：

Lab2-Struts2

Lab2-Webpack

Lab2-SQL

其中，第一个地址是Eclipse工程，可以直接用Eclipse导入或打开；第三个地址是数据库转储SQL，直接扔到数据库跑就可以直接建立表和数据；第二个地址是Webpack项目，应得到如下目录结构：

-Lab2-Webpack
-apiTest
-allauthors
authors.json
-search
data0.json
data1.json
dataall.json
datanull.json
-app
-components
BookInfoTableItem.jsx
ModifyExtendedView.jsx
ModifyNormalView.jsx
RemoveModal.jsx
SearchInput.jsx
ShowModal.jsx
-containers
Add.jsx
App.jsx
BookInfoTable.jsx
ModifyModal.jsx
index.jsx
-css
main.css
-icon
favicon.ico
-node_modules
-bootstrapValidator
......
-templates
index.html
.gitignore
package.json
README.md
server.js
webpack.config.js
webpack.config.production.js

操作步骤

打开cmd，切换到Lab2-Webpack目录

下载安装依赖，保持网络畅通，耐心等待完成

npm install

使用Webpack打包

npm run build

查看Lab2-Webpack/build目录，里面应有8个文件

使用Eclipse打开Lab2-Struts2工程，将上面生成的8个文件复制到工程里面的WebContent目录

在Lab2-Struts2工程中找到c3p0-config.xml，修改其中的数据库地址等信息

根据上一步的修改的数据库信息，建立相应名称的数据库，并将Lab2-SQL中的sql文件(任选其一)导入到数据库中

在Eclipse中导出Lab2-Struts2工程的war文件，部署到本地或云端

使用浏览器访问部署的地址即可看到页面效果

问题思考

以下问题建议实践思考：

使用npm run start和npm run server配合apiTest目录下的文件可以实现前端单独测试(参见准备6)

前后端是分离的，真实情况就是先完成的Webpack部分，然后再写的Struts2部分

webpack.config.production.js用于打包出生产环境的代码

Lab2使用了bootstrapValidator插件，代码中可以找到具体用法

require配合file-loader可以将任意路径文件打包到build目录，比如icon/favicon.ico

jQuery、bootstrap、react、react-dom是全局效果的