1.NodeJS
下载安装包
安装安装包
tar --strip-components 1 -xzvf node-v0.12.1-linux-x64.tar.gz -C /opt/app/nodejs_12
2.安装开发包
npm install -g express npm install -g express-generator npm install -g yo
npm install -g generator-angular
npm install -g bower
npm install -g nodemon
3.建立Front项目
cd $PROJECT_HOME mkdir client cd client
yo angular
vi client/Gruntfile.js
修改dist: ‘dist‘with dist: ‘../server/dist‘.
grunt serve
http://localhost:9000测试前端静态页面
4。建立Backend
cd $PROJECT_HOME mkdir server
express
npm install
mkdir dist
delete public views 文件夹
vi app.js 注释掉如下行：app.set(‘views‘, path.join(__dirname, ‘views‘)); app.set(‘view engine‘, ‘jade’); app.use(express.static(path.join(__dirname, ‘public‘))); app.use(‘/‘, routes); app.use(‘/users‘, users);
添加如下行
/**
* Development Settings
*/
if (app.get(‘env‘) === ‘development‘) {
// This will change in production since we‘ll be using the dist folder
app.use(express.static(path.join(__dirname, ‘../client‘)));
// This covers serving up the index page
app.use(express.static(path.join(__dirname, ‘../client/.tmp‘)));
app.use(express.static(path.join(__dirname, ‘../client/app‘)));
// Error Handling
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: err
});
});
}
/**
* Production Settings
*/
if (app.get(‘env‘) === ‘production‘) {
// changes it to use the optimized version for production
app.use(express.static(path.join(__dirname, ‘/dist‘)));
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: {}
});
});
}
vi server/package.json
"start": " nodemon ./bin/www", "test": " nodemon ./bin/www"
npm uninstall jade --save
5.Connecting AngularJS with Express
cd client
1.add views/signup.html
2.modify app.js
‘use strict‘;
/**
* @ngdoc overview
* @name clientApp
* @description
* # clientApp
*
* Main module of the application.
*/
angular
.module(‘clientApp‘, [
‘ngAnimate‘,
‘ngCookies‘,
‘ngResource‘,
‘ngRoute‘,
‘ngSanitize‘,
‘ngTouch‘
])
.config(function ($routeProvider) {
$routeProvider
.when(‘/‘, {
templateUrl: ‘views/main.html‘,
controller: ‘MainCtrl‘
})
.when(‘/about‘, {
templateUrl: ‘views/about.html‘,
controller: ‘AboutCtrl‘
})
.when(‘/signup‘, {
templateUrl: ‘views/signup.html‘,
controller: ‘SignupCtrl‘
})
.otherwise({
redirectTo: ‘/‘
});
});
3.添加scripts/signup.js
‘use strict‘;
angular.module(‘clientApp‘) // make sure this is set to whatever it is in your client/scripts/app.js
.controller(‘SignupCtrl‘, function ($scope, $http) { // note the added $http depedency
// Here we‘re creating some local references
// so that we don‘t have to type $scope every
// damn time
var user,
signup;
// Here we‘re creating a scope for our Signup page.
// This will hold our data and methods for this page.
$scope.signup = signup = {};
// In our signup.html, we‘ll be using the ng-model
// attribute to populate this object.
signup.user = user = {};
// This is our method that will post to our server.
signup.submit = function () {
// make sure all fields are filled out...
// aren‘t you glad you‘re not typing out
// $scope.signup.user.firstname everytime now??
if (
!user.firstname ||
!user.lastname ||
!user.email ||
!user.password1 ||
!user.password2
) {
alert(‘Please fill out all form fields.‘);
return false;
}
// make sure the passwords match match
if (user.password1 !== user.password2) {
alert(‘Your passwords must match.‘);
return false;
}
// Just so we can confirm that the bindings are working
console.log(user);
// Make the request to the server ... which doesn‘t exist just yet
var request = $http.post(‘/signup‘, user);
// we‘ll come back to here and fill in more when ready
request.success(function (data) {
// to be filled in on success
console.log(data);
});
request.error(function (data) {
// to be filled in on error
console.log(data);
});
};
});
4..modify Backend server
A.cd server
B.server/routes/signup.js
C.modify server/app.js
在var app = express();前面添加
/** * Route Imports */var signup = require(‘./routes/signup‘);
在module.exports = app;后面添加
/** * Routes */ app.use(‘/signup‘, signup);
D.modify server/routes/signup.js
// Include Express
var express = require(‘express‘);
// Initialize the Router
var router = express.Router();
// Setup the Route
router.post(‘/‘, function (req, res) {
// show the request body in the command line
console.log(req.body);
// return a json response to angular
res.json({
‘msg‘: ‘success!‘
});
});
// Expose the module
module.exports = router;
E:在控制台执行（windows)
cd server
Set NODE_ENV=development
npm test
http://localhost:3000/#/signup
6.Connecting Express with MongoDB
6.1 Install mongoose
$ npm install mongoose
6.2cd $PROJECT_HOME/server
a.mkdir database && mkdir database/schemas
b.cd database
c.create db.js
var mongoose = require(‘mongoose‘);
var config = require(‘../config/config.index‘);
var UserModel = require(‘./schemas/User‘);
var uri = ‘mongodb://‘ + config.mongo.uri + ‘/‘ + config.mongo.db;
var options = {
server: {poolSize: 5}
};
mongoose.connect(uri, options);
// get an instance of our connection to our database
var db = mongoose.connection;
// Logs that the connection has successfully been opened
db.on(‘error‘, console.error.bind(console, ‘connection error:‘));
// Open the connection
db.once(‘open‘, function callback () {
console.log(‘Databsae Connection Successfully Opened at ‘ + uri);
});
exports.user= UserModel;
d.cd database/schemas
e.create user.js
/**
* Our Schema for Users
*/
var mongoose = require(‘mongoose‘);
//var bcrypt = require(‘bcrypt‘);
var Schema = mongoose.Schema;
// Define the User Schema
var userSchema = new Schema({
firstname: { type: String, required: true },
lastname: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
profile: {} // for extra information you may / may not want
});
// A method that‘s called every time a user document is saved..
userSchema.pre(‘save‘, function (next) {
var user = this;
next();
/* // If the password hasn‘t been modified, move along...
if (!user.isModified(‘password‘)) {
return next();
}*/
/* // generate salt
bcrypt.genSalt(10, function(err, salt){
if (err) {
return next(err);
}
// create the hash and store it
bcrypt.hash(user.password, salt, function(err, hash){
if (err) {
return next(err);
}
user.password = hash;
next();
});
});*/
});
// Password verification helper
userSchema.methods.comparePassword = function (triedPassword, cb) {
/*bcrypt.compare(triedPassword, this.password, function(err, isMatch) {
if(err) return cb(err);
cb(null, isMatch);
});*/
};
// The primary user model
var User = mongoose.model(‘User‘, userSchema);
module.exports = User;
f.modify router/signup.js
/**
* This handles the signing up of users
*/
var express = require(‘express‘);
var router = express.Router();
var moment = require(‘moment‘);
var _ = require(‘underscore‘);
var color = require(‘cli-color‘);
var db = require(‘../database/db‘);
var User = db.user;
// The POST /signup route
router.post(‘/‘, function (req, res) {
// The posted information from the front-end
var body = req.body;
// Current time this occurred
var time = moment().format(‘MMMM Do YYYY, h:mm:ss a‘);
// Check to see if the user already exists
// using their email address
User.findOne({
‘email‘: body.email
}, function (err, user) {
// If there‘s an error, log it and return to user
if (err) {
// Nice log message on your end, so that you can see what happened
console.log(‘Couldn\‘t create new user at ‘ + color.red(time) + ‘ by ‘ + color.red(body.email) + ‘ because of: ‘ + err);
// send the error
res.status(500).json({
‘message‘: ‘Internal server error from signing up new user. Please contact [email protected]‘
});
}
// If the user doesn‘t exist, create one
if (!user) {
console.log(‘Creating a new user at ‘ + color.green(time) + ‘ with the email: ‘ + color.green(body.email));
// setup the new user
var newUser = new User({
firstname: body.firstname,
lastname: body.lastname,
email: body.email,
password: body.password1
});
// save the user to the database
newUser.save(function (err, savedUser, numberAffected) {
if (err) {
console.log(‘Problem saving the user ‘ + color.yellow(body.email) + ‘ due to ‘ + err);
res.status(500).json({
‘message‘: ‘Database error trying to sign up. Please contact [email protected]‘
});
}
// Log success and send the filtered user back
console.log(‘Successfully created new user: ‘ + color.green(body.email));
res.status(201).json({
‘message‘: ‘Successfully created new user‘,
‘client‘: _.omit(savedUser, ‘password‘)
});
});
}
// If the user already exists...
if (user) {
res.status(409).json({
‘message‘: body.email + ‘ already exists!‘
});
}
});
});
// export the router for usage in our server/router/index.js
module.exports = router;
g.运行
cd server
Set NODE_ENV=development
npm test
http://localhost:3000/#/signup
7.Git代码库
https://github.com/hlxinyan/OnlineFoodOrdering.git
8.参考教程
http://start.jcolemorrison.com/building-an-angular-and-express-app-part-1/
http://start.jcolemorrison.com/building-an-angular-and-express-app-part-2/
http://start.jcolemorrison.com/building-an-angular-and-express-app-part-3/
时间： 2024-10-15 07:38:17