Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】

最新推荐文章于 2023-11-09 11:22:12 发布

upward337

最新推荐文章于 2023-11-09 11:22:12 发布

阅读量1.9k

点赞数 8

分类专栏： Bootstrap 文章标签： bootstrap 数据库 mysql powerdesigner sqlyog

希望对您有所帮助；知识共享，欢迎转载，转载时：请附上原文链接！

本文链接：https://blog.csdn.net/weixin_44949135/article/details/109801245

版权

Bootstrap 专栏收录该内容

21 篇文章 7 订阅

订阅专栏

【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程博客汇总表详细笔记】

目录

W3C标准盒子模型和IE盒子模型的区别

Bootstrap4——新闻管理手机端页面

菜鸟教程——Bootstrap4 网格系统

Bootstrap4——导航、导航栏、轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

PowerDesigner软件自动生成SQL语句

使用记事本打开sql文件，查看代码

SQLyog软件的使用

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

W3C标准盒子模型和IE盒子模型的区别

https://blog.csdn.net/sayoko06/article/details/86743083

Bootstrap4——新闻管理手机端页面

新闻列表页面

max-width: 100%; /*最大宽度100%*/
height: auto; /*高度自适应*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="jquery/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="js/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="bootstrap4/js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>主页</title>
		<style type="text/css">
			body {
				margin: 0px;
			}
			header {
				height: 54px;
				background-color: #F8F8F8;
				display: flex;
				justify-content: space-between;
				padding: 0px 10px;
				align-items: center; /*垂直居中*/
			}
			#back, #close-page {
				color: #FFC74F;
			}
			nav {
				height: 45px;
				border-bottom: 1px solid #FFC74F;
				display: flex;
			}
			nav>a {
				text-decoration: none;
				flex-grow: 1; /*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
				border-right: 1px #FFC74F solid;
				background-color: antiquewhite;
				display: flex;
				justify-content: center;
				align-items: center;
				color: brown;
			}
			.col-7 {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.row {
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<header>
			<span id="back"><i class="fa fa-chevron-left"></i> 返回</span>
			<span>校内新闻</span>
			<span id="close-page">关闭</span>
		</header>
		<nav>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
			<a href="#">教务处</a>
		</nav>
		<div class="container-fluid">
			<div class="row">
				<div class="col-5">
					<img src="img/timg.jpg" class="img-fluid" />
				</div>
				<div class="col-7">
					<h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5>
					<span>2020-11-19 09:15</span>
				</div>
			</div>
			<div class="row">
				<div class="col-5">
					<img src="img/timg.jpg" class="img-fluid" />
				</div>
				<div class="col-7">
					<h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5>
					<span>2020-11-19 09:15</span>
				</div>
			</div>
			<div class="row">
				<div class="col-5">
					<img src="img/timg.jpg" class="img-fluid" />
				</div>
				<div class="col-7">
					<h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5>
					<span>2020-11-19 09:15</span>
				</div>
			</div>
			<div class="row">
				<div class="col-5">
					<img src="img/timg.jpg" class="img-fluid" />
				</div>
				<div class="col-7">
					<h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5>
					<span>2020-11-19 09:15</span>
				</div>
			</div>
			<div class="row">
				<div class="col-5">
					<img src="img/timg.jpg" class="img-fluid" />
				</div>
				<div class="col-7">
					<h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5>
					<span>2020-11-19 09:15</span>
				</div>
			</div>
		</div>
	</body>
</html>

菜鸟教程——Bootstrap4 网格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="jquery/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="js/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="bootstrap4/js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>网格系统</title>
	</head>
	<body>
		<div class="container-fluid bg-danger">
			<div class="row">
				<div class="col-5 bg-success">2</div>
				<div class="col-7 bg-warning">2</div>
			</div>
		</div>
	</body>
</html>

Bootstrap4——导航、导航栏、轮播

菜鸟教程——Bootstrap4——导航
菜鸟教程——Bootstrap4——导航栏
菜鸟教程——Bootstrap4——轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="jquery/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="js/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="bootstrap4/js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>网格系统</title>
		<style type="text/css">
			.carousel-item>img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
			<!-- Brand -->
			<a class="navbar-brand" href="#">Navbar</a>

			<!-- Toggler/collapsibe Button -->
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
				<span class="navbar-toggler-icon"></span>
			</button>

			<!-- Navbar links -->
			<div class="collapse navbar-collapse" id="collapsibleNavbar">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
				</ul>
			</div>
		</nav>
		<div style="margin-top: 56px;" id="demo" class="carousel slide" data-ride="carousel">

			<!-- 指示符 -->
			<ul class="carousel-indicators">
				<li data-target="#demo" data-slide-to="0" class="active"></li>
				<li data-target="#demo" data-slide-to="1"></li>
				<li data-target="#demo" data-slide-to="2"></li>
			</ul>

			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="img-fluid">
				</div>
				<div class="carousel-item">
					<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="img-fluid">
				</div>
				<div class="carousel-item">
					<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="img-fluid">
				</div>
			</div>

			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#demo" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#demo" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>

		</div>

		<div class="container-fluid">
			<div class="row">
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop1.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
				<div class="shop-item col-lg-3 col-md-6 col-12">
					<img src="img/shop2.jpg" class="img-fluid" />
					<p>商品********* 价格<span style="color: red;">￥999</span></p>
				</div>
			</div>
		</div>
	</body>
</html>

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

P：主键。
M：非空。
varchar：长度可变。
datetime：日期+时间。
timestrap：时间戳，自动更新时间。

添加注释：用户主键ID

PowerDesigner软件自动生成SQL语句

【选中数据表，点击：DataDase -> Generate Database（建议删除多余的数据表！）】

使用记事本打开sql文件，查看代码

/*==============================================================*/
/* DBMS name:      MySQL 5.0                                    */
/* Created on:     2020/11/19 10:55:58                          */
/*==============================================================*/


drop table if exists user_info;

/*==============================================================*/
/* Table: user_info                                             */
/*==============================================================*/
create table user_info
(
   user_id              int not null comment '用户主键ID',
   user_name            varchar(255) not null comment '用户名',
   user_pwd             varchar(255) not null comment '用户密码',
   create_time          datetime comment '创建时间',
   update_time          datetime comment '更改时间',
   primary key (user_id)
);

alter table user_info comment '用户信息表';

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
10
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 10

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

upward337 谢谢老板~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。