Nodejs+Extjs+Mongodb开发第三天登录页面(1)

来源：互联网发布：前列腺高潮经验知乎编辑：程序博客网时间：2024/04/28 07:48

学习新技术最快捷的方式就是做项目。在第一天的环境搭建好后，我就准备基于Nodejs+Extjs+Mongodb来做一个Web系统。

环境搭建：http://blog.csdn.net/jrainbow/article/details/38845639

一、技术选择的原因

1、Nodejs。这个不用说了，就是为了学习这个来的。因为要做的是Web系统，所以选择了Express框架。

2、Extjs。原因也很简单，因为笔者的美工不行，而且之前有使用过Extjs框架。为了更满足自己的银弹心理，这个项目选择了基于Extjs4.x版本的desktop框架。

3、Mongodb。搭建及使用起来都比较简单。相对于笔者之前用过的HBase，Mongodb依赖性低太多。Mongodb直接下载回来解压就能用。

Mongodb的简单使用:http://blog.csdn.net/jrainbow/article/details/39163843

二、登录页面及功能实现

1、根据第一天的内容创建一个pcrm的系统。

目录如下：

bin ，存放默认启动的脚本doc,  存入项目的文档modules,  用来存放数据模型。类似JavaEE开发中的Entity与Dao的结合体。当然，你也可以拆开成modules与daos两个目录node_modules, 存放所有的项目依赖库。类似Java中的jar包目录。   public, 静态文件(css,js,img)。我也把页面的JavaScript文件放在这个目录下。routes, 路由文件(MVC中的C,controller) 。相当于JavaEE开发中的Controller及Service的结合。当然这里也可以拆开。views, 页面文件(Ejs模板) 。相当于html或jsp页面。package.json, 项目依赖配置及开发者信息。相当于Maven的坐标配置文件。app.js, 程序启动文件

2、登录页面

在views目录中创建一个Ejs页面文件login.ejs。

<!DOCTYPE html><!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]--><!--[if IE 7 ]>    <html lang="en" class="ie7 ielt8"> <![endif]--><!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--><head>    <meta charset="utf-8">    <title>简单客户关系管理系统</title>    <link rel="stylesheet" type="text/css" href="/stylesheets/login.css" /></head><body><div class="container">    <section id="content">        <form action="/check" method="get">            <h1>登录</h1>            <div>                <input type="text" placeholder="用户名" required="" id="username" name="username" />            </div>            <div>                <input type="password" placeholder="密码" required="" id="password" name="password"/>            </div>            <div>                <input type="submit" value="登录" />                <a href="#">忘记密码?</a>                <a href="#">联系我们</a>            </div>        </form><!-- form -->        <div class="button">            <a href="#">试用版本下载</a>        </div><!-- button -->    </section><!-- content --></div><!-- container --></body></html>

把登录页面的css文件login.css放到public/stylesheets目录下

3、在后台接收页面传递的信息

在routes目录下创建一个路由文件login.js。

var express = require('express');var router = express.Router();/* GET home page. */router.get('/', function(req, res) {    res.render('login');});router.get('/check', function(req, res) {

    console.log(req.query.username);    console.log(req.query.password);});module.exports = router;

简单解释一下这个controller：

为了比较方便的使用http来处理数据。我们在项目中使用express框架。

与Java的开发一样，要使用一个类，那我们需要先import这个类进来。nodejs使用的是require，把express模块加载进来。

然后我们通过router对象来获取页面的请求。router接收页面的方式有多种，我们这里使用的是get。这里使用get方法而不是其它是基于RESTful 规范的要求决定的。具体会在后面的使用中讲到。

第一个get方法是将不默认请求转发到login页面。第二个get方法是接收登录页面action中的"/check"请求。并输出用户名和密码。

module.exports = router;把我们这个controller作为一个模块发布出去给其它的模块使用。

4、将router发布出去

在app.js文件中，在文件头先导入login的路由模块

var login = require('./routes/login');

设置login路由的访问路径

app.use('/', login);app.use('/main', main);

如果是在使用express生成项目的时候，会默认地生成一个main路由，而这个路径的路径是主路径。这里我修改为主路径的路由为login，而main路径呢走的是/main路径。

5、启动服务

启动服务器，访问地址:http://127.0.0.1:3000/

输入用户名和密码:admin + test

后台终端显示:

我们的页面数据与后台的http通道已打通。明天我们进行编写登录校验的逻辑。

1 0

Nodejs+Extjs+Mongodb开发第三天 登录页面(1)