Nodejs+Extjs+Mongodb开发第三天 登录页面(1)
时间:2022-03-13 23:38
学习新技术最快捷的方式就是做项目。在第一天的环境搭建好后,我就准备基于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通道已打通。明天我们进行编写登录校验的逻辑。