1.开发框架的选用
2、项目需求
实现一个简单注册页面,保存用户数据到mongondb数据库中
3、项目框架搭建
方法1:自己创建一个工程目录,然后到工程目录执行下面安装命令
npm install express // 后台开发第三方
npm install mongoose //数据库管理
npm install moment // 时间处理的js
npm install bower -g Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源
bower install bootstrap // html第三方框架
新版express4中,要独立安装static,npm install serve-static --save
bodyParser 已经不再与Express捆绑,需要独立安装。
令行执行:npm install body-parser
grunt相关安装,注意需要在工程目录使用npm init
生产package.json
npm install grunt -g
npm install grunt-cli -g
npm install grunt-contrib-watch --save-dev //只有有文件修改,就会重新执行注册好的任务
npm install grunt-nodemon --save-dev // 实时监听app.js 自动重启
npm install grunt-concurrent --save-dev
2、使用express-generator
来初始化项目
首先安装node.js
brew install node
然后全局安装express
npm install -g express
安装express-generator,全局安装-g
npm install -g express-generator
创建一个项目,我们用的ejs
模板,创建命令如下
express -e loginWebApp
-e
表示使用ejs
模板,loginWebApp为项目的名字
3、到项目目录中执行npm install
就把需要第三方依赖安装好
另外需要安装mongoose
数据库操作第三方和Promise第三方bluebird
npm install bluebird
npm install mongoose
4、项目结构的简单说明
1、app.js:服务器启动的入口文件,在这里编写服务器的逻辑
2、models:数据库操作的models
3、node_modules:依赖的第三方模块
4、package.json: 此文件是项目的配置文件(可定义应用程序名,版本,依赖项等等)
5、public:images、javascripts、stylesheets,存放一些静态资源
6、routes:存放路由文件
7、schemas:存放数据库抽象模式
8、views:存放视图
5、编写服务代码
1、创建app对象和mogoose
创建一个app对象
var express = require('express');
var app = express();
// 数据库相关
var mongoose = require('mongoose')
mongoose.Promise = require('bluebird');
2、设置views路径和模板引擎
//设定视图路径主要清楚__dirname的意思就可以了,它是node.js中的全局变量,表示取当前执行文件的路径
app.set('views', path.join(__dirname, 'views'));
//设定视图引擎模板
app.set('view engine', 'ejs');
3、使用app.use([path], function)方法来使用中间件path
为路径,function·
为中间件
//这一句中可能要注意一下,express.static()是处理静态请求的,
//设置了public文件,public下所有文件都会以静态资料文件形式返回
//(如样式、脚本、图片素材等文件)
app.use(express.static(path.join(__dirname, 'public')));
//上面代码表示当用户使用/访问时,调用routes,即routes目录下的index.js文件,
//其中.js后缀省略,用/users访问时,调用routes目录下users.js文件
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
4、看下index.js主要的路由代码
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;```
5、编写数据库的操作模式
var mongoose = require('mongoose')
var Schema = mongoose.Schema
var UserSchema = new Schema({
username:String,
password:String
})
module.exports = UserSchema
转为User模型
var mongoose = require('mongoose')
var UserSchema = require('../schemas/UserSchema')
var User = mongoose.model('User',UserSchema)
module.exports = User;
6、注册路由编写,get为获取注册页面,post处理表单的提交保存用户数据到数据库
var express = require('express')
var router = express.Router()
var User = require('../models/User')
var crypto = require('crypto')
router.get('/',function(req,res){
res.render('register')
})
router.post('/',function(req,res){
console.log(req.body.username);
console.log(req.body.password);
var password = req.body.password
//加密
var md5 = crypto.createHash('md5')
var md5_pwd = md5.update(password).digest('hex')
var user = new User({
username:req.body.username,
password: md5_pwd
});
// 检查是否有用户存在
User.find({'username':req.body.username},function(err,result){
if(err){
res.locals.error=err;
res.render('register')
return;
}
if(result.length>0){
res.locals.error='用户已存在';
console.log('test is result ' + res)
res.render('register')
}
else {
user.save(function(err,result){
if(err){
res.locals.error=err;
res.render('register')
}else {
res.locals.success = '注册成功,请点击 登录 ' ;
res.render('register')
}
});
}
})
})
})
module.exports = router
注册页面的ejs,注意这里用到`bootstrap`和`jquery`
注册页面
<% if (locals.success) { %>
<%- success %>
<% } %>
<% if (locals.error) { %>
<%= error %>
<% } %>
7、运行项目进行测试
node app.js
在浏览其中http://localhost:3000/register进行注册页面
[bower的使用方法](https://segmentfault.com/a/1190000002971135)