[项目][准备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文件，部署到本地或云端

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

问题思考

以下问题建议实践思考：

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

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

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

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

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

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