NodeJS学习笔记之Connect中间件应用实例

大家好哦,大熊君又来了,昨天因为有点个人的事没有写博客,今天又出来了一篇,这篇主要是写一个记事本的小应用,前面的文章,

我也介绍过“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>密&nbsp;&nbsp;码:</span><input type="password" />
                <input type="submit" value="登录" />
                <a href="https://www.jb51.net/reg.html">我要注册</a>
            </form>
    </body>
</html>

  效果图:

NodeJS学习笔记之Connect中间件应用实例

(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>密&nbsp;&nbsp;码:</span><input type="password" /><br/><br/>
                 <input type="submit" value="注册" />
             </form>
     </body>
 </html>


  效果图:

NodeJS学习笔记之Connect中间件应用实例

(3),建立“Mongodb”连接代码,如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfpxw.html