我的平均应用程序与管理面板完美配合。
我的服务器在监听:http://localhost:3003
管理员面板我可以在此处访问:http://localhost:3003/#/admin/
现在我想分开管理面板和客户端面板,但无法访问客户端面板 比如当我尝试这个网址时,什么都不显示
http://localhost:3003/#/client
我更新了我的server.js文件,还在express v 10.x.x中启用了多个视图 像:
app.set('views', [__dirname + '/admin/views', __dirname + '/client/views']);
我认为问题在于
app.get('/', function (req, res) {
res.render('index.html');
});
每次都会渲染admin / index.html。
这是我的目录结构!
mean-app
----admin
|
-----js
|
---controllers
---app.js
-----views
|
---partials
---index.html
----client
|
-----js
|
---controllers
---app.js
-----views
|
---partials
---index.html
config
controllers
services
models
node_modules
services
bower_components
package.json
bower.json
server.js
这是我的server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var apiRoutes = require('./config/api-routes');
var auth = require('./config/authorization');
app.set('views', [__dirname + '/admin/views', __dirname + '/client/views']);
app.engine('html', require('ejs').renderFile);
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
var dbUrl = process.env.MONGOLAB_URI || "mongodb://127.0.0.1:27017/ecommerce-app-db";
var port = process.env.PORT || 3003;
mongoose.connect(dbUrl);
app.listen(port, function(){
console.log('Listening on port ' + port);
});
app.get('/', function (req, res) {
res.render('index.html');
});
app.get('/partials/:name', function (req, res) {
console.log(req.params.name);
res.render('partials/' + req.params.name);
});
app.use('/adminjs', express.static(__dirname + '/admin/js'));
app.use('/clientjs', express.static(__dirname + '/client/js'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/images', express.static(__dirname+'/uploads/'));
// Load Api routes
apiRoutes(app, auth);
Admin app.js
var adminApp = angular.module('adminApp', [...]);
adminApp.constant('SERVERURL', 'http://localhost:3003');
adminApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/admin', {
redirectTo: '/admin/dashboard'
})
.when('/admin/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/admin'
});
}]);
客户端app.js
var clientApp = angular.module('clientApp', [...]);
clientApp.constant('AppConfig', {
'APP_NAME' : 'Web Shop',
'SERVERURL': 'http://localhost:3003',
'META_TITLE': 'Web Shop'
});
clientApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/client', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/client'
});
// prevent preflight request for cross-domain Ajax calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
客户端index.html
<!doctype html>
<html ng-app="clientApp">
<head>
<link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
<div ng-view=""></div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="clientjs/app.js"></script>
<script src="clientjs/controllers/main.js"></script>
</body>
</html>
答案 0 :(得分:1)
好的,我带来了一个解决方案,希望它会帮助别人。
目录结构仍然如下所示,这是我的server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var apiRoutes = require('./config/api-routes');
var auth = require('./config/authorization');
app.set('views', __dirname);
app.engine('html', require('ejs').renderFile);
//Add middleware necessory for Rest API's
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
// CORS Support
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
// var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
//console.log('Client IP:', ip);
next();
});
var dbUrl = process.env.MONGOLAB_URI || "mongodb://127.0.0.1:27017/ecommerce-app-db";
var port = process.env.PORT || 3003;
mongoose.connect(dbUrl);
app.listen(port, function(){
console.log('Listening on port ' + port);
});
app.get('/admin', function (req, res) {
res.render('admin/views/index.html');
});
app.get('/client', function (req, res) {
res.render('client/views/index.html');
});
app.get('/admin/partials/:name', function (req, res) {
res.render('admin/views/partials/' + req.params.name);
});
app.get('/client/partials/:name', function (req, res) {
res.render('client/views/partials/' + req.params.name);
});
app.use('/admin/adminjs', express.static(__dirname + '/admin/js'));
app.use('/client/clientjs', express.static(__dirname + '/client/js'));
app.use('/admin/bower_components', express.static(__dirname + '/bower_components'));
app.use('/client/bower_components', express.static(__dirname + '/bower_components'));
app.use('/images', express.static(__dirname+'/uploads/'));
// Load Api routes
apiRoutes(app, auth);
这是我的管理员app.js
var adminApp = angular.module('adminApp', [....]);
adminApp.constant('SERVERURL', 'http://localhost:3003');
adminApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/admin', {
redirectTo: '/admin/dashboard'
})
.when('/admin/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
这里是admin index.html
<!DOCTYPE html>
<html ng-app="adminApp">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Web Shop Admin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="adminjs/theme/dist/css/sb-admin-2.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
</body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="adminjs/app.js"></script>
<script src="adminjs/controllers/main-controller.js"></script>
</html>
这是客户端app.js
var clientApp = angular.module('clientApp', [...]);
clientApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/client'
});
});
这是客户端index.html
<!DOCTYPE html>
<html ng-app="clientApp">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Web Shop Admin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="clientjs/theme/dist/css/sb-admin-2.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
</body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="clientjs/app.js"></script>
<script src="clientjs/controllers/main-controller.js"></script>
</html>