大家好哦,大熊君又来了,昨天因为有点个人的事没有写博客,今天又出来了一篇,这篇主要是写一个记事本的小应用,前面的文章,
我也介绍过“Connect”中间件的使用以及“Mongodb”的用法,今天就结合这两个中间件,写个实际的例子,不断完善和重构,已达到
充分学习的目的。好了,废话不说了,直接进入主题。
二,需求分析
(1),用户注册,登录功能(没有涉及很复杂的交互场景,注册时会有用户判断是否已存在)。
(2),用户登录成功,进入笔记管理系统的后台(笔记模块的增删改查功能)。
(3),用户可以具有简单的权限划分(管理员,注册用户)。
(4),界面比较简单,以学习为主。
三,开始设计应用(第一部分)
(1),建立用户登录页面,代码如下:
复制代码 代码如下:
<!doctype html>
<html>
<head>
<title>Bigbear记事本应用登录</title>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.note-title {
margin-bottom : 45px ;
background : #6699cc ;
font-size : 14px ;
font-weight : bold ;
color : #fff;
font-family:arial ;
height : 24px ;
line-height : 24px ;
}
a {
color : #336699;
font-family:arial ;
font-size : 14px ;
font-weight : bold ;
}
</style>
<script src="https://www.jb51.net/js/index.js"></script>
</head>
<body>
<div>Bigbear记事本应用登录</div>
<form action="/login" method="post">
<span>用户名:</span><input type="text" /><br/><br/>
<span>密 码:</span><input type="password" />
<input type="submit" value="登录" />
<a href="https://www.jb51.net/reg.html">我要注册</a>
</form>
</body>
</html>
效果图:
(2),建立用户注册页面,代码如下:
复制代码 代码如下:
<!doctype html>
<html>
<head>
<title>Bigbear记事本应用注册</title>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.note-title {
margin-bottom : 45px ;
background : #ff3300 ;
font-size : 14px ;
font-weight : bold ;
color : #fff;
font-family:arial ;
height : 24px ;
line-height : 24px ;
}
</style>
<script src="https://www.jb51.net/js/index.js"></script>
</head>
<body>
<div>Bigbear记事本应用注册</div>
<form action="/reg" method="post">
<span>用户名:</span><input type="text" /><br/><br/>
<span>密 码:</span><input type="password" /><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
效果图:
(3),建立“Mongodb”连接代码,如下:
复制代码 代码如下: