java学习笔记——众筹项目练习——数据建模工具（PowerDesigner）与前端框架bootstrap体验

                                数据建模工具（PowerDesigner）

之前我们在生成数据库表的时候生成了许多的数据库表，如果我们在数据库中一张一张的创建每个表，实在是太麻烦了，并且也容易出错。所以这里我们需要使用数据建模工具（PowerDesigner）。

• （PowerDesigner）为我们提供了方便的数据库表设计方法，这里简单了解一下吧！
• 安装  安装非常简单，双击安装包直接安装，破解版只需要将破解版中的pdflm16.dll文件与放在PowerDesigner的安装目录的相应文件替换掉就可以了，这样就可以无限试用了，下载地址：https://download.csdn.net/download/qq_25106373/11041568
• 使用   这里介绍一下如何的简单使用吧

1. 打开PowerDesigner

1. 选择相应的数据库

1. New Model

1. 添加表

1. 双击某一张表，进行修改，注意这里的Name只是我们自己为了方便阅读起的名字，Code才是在数据库中显示的表名

1. 添加列，并修改主键、自增（先不考虑外键表中的Foreign Key）

1. 同样的方法，添加部门表

1. 为两张表添加外键关联

1. 修改关联信息（因为现在的关联信息是错误的，应该是用户表的部门id作为外键关联部门表的id），双击两张表直接的连线进行修改

1. 查看生成数据库表的代码，选择所有需要生成的table表，点击Database中的生成数据库

这样拷贝所有sql语句到SQLyog中执行，就可以直接生成数据库表了！！！！

 

 

                                            前端框架bootstrap

 不管是众筹网项目还是其他的什么web项目都免不了前端的界面展示，这里我们就来体验一个简单、容易上手、并且功能强大的前端框架bootstrap。

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

 

为什么使用 Bootstrap？

•移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

•浏览器支持：所有的主流浏览器都支持 Bootstrap。                 

•容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

•响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。                                                                                                                                                             

•它为开发人员创建接口提供了一个简洁统一的解决方案。

•它包含了功能强大的内置组件，易于定制。

•它还提供了基于 Web 的定制

它是开源的。

 

环境搭建

• 下载HBuilder   开发前端界面时使用的开发工具，比eclipse的前端提示功能更加强大，所以开发前端界面更加快捷、智能。https://download.csdn.net/download/qq_25106373/11042284
• 下载bootstrap  初学者推荐http://www.bootcss.com/
• 页面引入bootstrap 

  Bootstrap.css是主要的css文件

       Bootstrap.min.js是bootstrap运行需要的js文件，他依赖jquery库所以需要先导入jquery库

<script type="application/javascript" src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>

 使用也很简单

• 先打开HBuilder创建一个web项目

• 再将解压后的bootstrap文件夹整个拷贝到项目中

• 由于bootstrap的js还依赖于 jQuery库，所以还需要将jquery库也整个拷入项目中

再在项目的页面中引用之后，这样就可以使用了，就是这么简单。

下面我们来体验一下这段代码的效果吧

我们再来看看引入bootstrap后的效果是怎样的呢

是不是漂亮了很多呢！！！

下面打开bootstrap的中文说明文档了解一下。bootstrap基本包括全局CSS样式、组件、JavaScript插件与定制这几个功能。

• 在全局CSS样式功能中，包含很多的样式，比如栅格系统、表格、表单、按钮等。

• 栅格系统

为了解决适应性问题，bootstrap将网页抽象成网格。并用container来包含这些行和列，container就相当于一个大容器！

使用row来表示一行

使用.col-xs-    .col-sm-     .col-md-    .col-lg-   来定义列，分别对应超小、小、中、大、超大型显示设备，列必须包含在row中，一行最多可以有12列，那后边可以接数字参数，表示该列所占的宽度，比如col-xs-4就表示该列所占的宽度是整个屏幕分成12份中的4分。

 

• 表格

为任意的表格添加最基本的table类即可

.table-striped   条纹状表格

.table-bordered    带边框的表格

.table-hover  鼠标悬停变色

.table-condensed   紧缩表格

 

• 表单

<div class="form-group">

    <label for=“in1">Email address</label>

    <input type="email" class="form-control" id=“in1“ placeholder="Email">

  </div>

每个表单项放在form-group的div中可以获得更好的效果

Label标签为表单项添加文字提示

For属性指定为表单项的id即可

每个表单项需要制定class为form-control

 

• 按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

示例：

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

 

• 图片

 

好了，就先简单介绍到这里吧，具体的还是要查看说明文档更好一点 。嘻嘻嘻！！！！！

这里附上bootstrap库与说明文档还有jQuery库的地址：https://download.csdn.net/download/qq_25106373/11042456