Express全系列教程之(十三)：一个mysql数据库操作的小实例

妖狐艹你老母 2023-01-07 10:14 143阅读 0赞

## 一、简介 ##

这个实例主要展示express对mysql的基本操作(增删改查)，前端由ejs模板渲染，加上bootstrap框架，以更快做出不错的页面效果。总体来说代码还比较简洁，适合入门：  
源码地址：[https://download.csdn.net/download/no10086/11164223][https_download.csdn.net_download_no10086_11164223]

## 二、使用说明 ##

请确保电脑已安装mysql、express和Navicat for mysql；当解压后会有以下文件：  
![目录][20190507134303646.jpg]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vMTAwODY_size_16_color_FFFFFF_t_70]  
这里public文件夹为ejs文件，你还会看到有一个sql文件，用Navicat for mysql将其导入到mysql中，关于mysql的导入有一篇不错的文章：[https://www.cnblogs.com/keyi/p/5978982.html][https_www.cnblogs.com_keyi_p_5978982.html]

之后命令行进入此地址后执行“node app.js”，浏览器地址栏就可以看到以下内容了：  
![页面效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vMTAwODY_size_16_color_FFFFFF_t_70 1]

## 三、流程说明： ##

app.js为服务器主文件，他会自动在localhost根目录渲染index.ejs文件使其输出到页面上，之后又add、del、up三个不同的路由，用于index.ejs在发送请求时以访问到合适的路径；而条件渲染，则用 ejs的<% if()\{ %>html<% \} %> 来实现，首先发送给首页的数据不止为sql的数据，还有当前 req.originalUrl，这使得他将自动判断当前路由情况，已选择渲染不同的页面。以下为全部代码：  
mysql数据：  
![mysql][]  
app.js

index.ejs模板引擎：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>数据库基本操作</title>
    		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    		<link rel="stylesheet" type="text/css" href="css/index.css"/>
    		<script src="js/jquery.v1.9-min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="container">
    			<div class="col-xs-4">
    				<div class="url">
    					<div class="col-xs-12">
    						<div class="col-xs-4"><button class="btn-primary">添加</button></div>
    						<div class="col-xs-4"><button class="btn-primary">删除</button></div>
    						<div class="col-xs-4"><button class="btn-primary">修改</button></div>
    					</div>
    				</div>
    				
    				<div class="control">
    					<% if(path=="/"){ %>
    						<form action="http://localhost:8080/add" method="get" role="form">
    							<div class="form-group">
    								<label>名字：</label>
    								<input type="text" name="name" placeholder="请输入姓名" class ="form-control"/>
    								<br>
    								<label>年龄：</label>
    								<input type="text" name="age" placeholder="请输入年龄" class ="form-control"/>
    								<br>
    								<input type="submit" value="添加" class ="form-control"/>
    							</div>
    						</form>
    					<% }else if(path=="/?del-view"){ %>
    						<form action="http://localhost:8080/del" method="get" role="form">
    							<div class="form-group">
    								<label>ID号：</label>
    								<input type="text" name="id" placeholder="请输入ID号" class ="form-control"/>
    								<br>
    								<input type="submit" value="删除" class ="form-control"/>
    							</div>
    						</form>
    					<% }else if(path=="/?up-view"){ %>
    						<form action="http://localhost:8080/up" method="get" role="form">
    							<div class="form-group">
    								<label>选择要修改ID号：</label>
    								<input type="text" name="id" placeholder="请输入id" class ="form-control"/>
    								<br>
    								
    								<h4>需要修改的信息(不修改的可以不填)：</h4>
    								<label>名字：</label>
    								<input type="text" name="name" placeholder="请输入姓名" class ="form-control"/>
    								<br>
    								<label>年龄：</label>
    								<input type="text" name="age" placeholder="请输入年龄" class ="form-control"/>
    								<br>
    								<input type="submit" value="修改" class ="form-control"/>
    							</div>
    						</form>
    					<% } %>
    				</div>
    			</div>
    			
    			<div class="col-xs-8">
    				<div class="table-responsive">
    				  	<table class="table table-striped">
    					    <caption>第九届少年人口普查</caption>
    					    <thead>
    					      <tr>
    					        <th>质检编号</th>
    					        <th>姓名</th>
    					        <th>年龄</th>
    					      </tr>
    					    </thead>
    					    <tbody>
    							<% for(var i=0;i<data.length;i++){ %>
    								<%-
    									"<tr>"+
    									  "<td>"+data[i].id+"</td>"+
    									  "<td>"+data[i].name+"</td>"+
    									  "<td>"+data[i].age+"</td>"+
    									"</tr>"
    								%>
    							<% } %>
    					    </tbody>
    				  	</table>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

index.css：

html,body{margin: 0;padding: 0;}
    div.container{width: 100%;padding: 0;margin-top: 10px;}
    input[type="submit"]{
    	margin: 0 auto;
    	width: 20%;
    	background-color: #285E8E;
    	color: #fff;
    	cursor: pointer;
    }
    .control{margin-top: 35px;}
    h4{color: red;}

index.js：

[https_download.csdn.net_download_no10086_11164223]: https://download.csdn.net/download/no10086/11164223
[20190507134303646.jpg]: /images/20221119/e7970b76f3c1405ca955673221fa1db7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vMTAwODY_size_16_color_FFFFFF_t_70]: /images/20221119/5f516c76df224d9b87c6bb6ecb73a1e5.png
[https_www.cnblogs.com_keyi_p_5978982.html]: https://www.cnblogs.com/keyi/p/5978982.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vMTAwODY_size_16_color_FFFFFF_t_70 1]: /images/20221119/85cb3459de4142e0be184121b35d026a.png
[mysql]: https://img-blog.csdnimg.cn/20190507141104527.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25vMTAwODY=,size_16,color_FFFFFF,t_70