MEAN应用与管理面板和客户端面板 [英] MEAN app with admin panel and client panel
本文介绍了MEAN应用与管理面板和客户端面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这正与完善的管理面板，平均应用程序。
我的服务器监听：的http：//本地主机：3003
管理面板，我可以在这里访问：的http：//本地主机：3003 /＃/管理/
现在我想管理面板和客户端面板分开，但客户端面板不可访问
就像当我试图这个网址，显示什么
我已经更新了我的server.js文件还启用前preSS v 10.x.x多个视图
这样的：
app.set（'意见'，[__dirname +'/管理/观点，__dirname +'/客户/视图']）;
我认为问题是与
app.get（'/'，函数（REQ，RES）{
res.render（'的index.html'）;
}）;
这使管理员/ index.html的每一次。
下面是我的目录结构！
意味着应用
----管理
|
----- JS
|
---控制器
--- app.js
-----意见
|
---谐音
---的index.html
- - 客户
|
----- JS
|
---控制器
--- app.js
-----意见
|
---谐音
---的index.html 配置
控制器
服务
楷模
node_modules
服务
bower_components
的package.json
bower.json
server.js
这是我的server.js
VAR前preSS =要求（'前preSS'）;
VAR应用=前preSS（）;
VAR bodyParser =要求（'身体分析器'）;
VAR猫鼬=要求（'猫鼬'）;
VAR apiRoutes =要求（'./配置/ API-路线'）;
VAR AUTH =要求（'./配置/授权'）;app.set（'意见'，[__dirname +'/管理/观点，__dirname +'/客户/视图']）;
app.engine（HTML，需要（'EJS'）RenderFile模块）;
app.use（bodyParser.urlen codeD（{延长：真}））;
app.use（bodyParser.json（））;VAR dbUrl = process.env.MONGOLAB_URI || MongoDB的：//127.0.0.1：27017 /电子商务应用-DB
VAR端口= process.env.PORT || 3003;mongoose.connect（dbUrl）;
app.listen（端口，函数（）{
的console.log（'侦听端口+端口）;
}）; app.get（'/'，函数（REQ，RES）{
res.render（'的index.html'）;
}）; app.get（'/谐音/：名称'，函数（REQ，RES）{
的console.log（req.params.name）;
res.render（'谐音/+ req.params.name）;
}）;
app.use（'/ adminjs'，前press.static（__目录名称+'/管理/ JS'））;
app.use（'/ clientjs'，前press.static（__目录名称+'/客户/ JS'））;
app.use（'/ bower_components'，前press.static（__目录名称+'/ bower_components'））;
app.use（'/图像，前press.static（__目录名称+'/上传/'））; //装载API路线
apiRoutes（应用程序，验证）;
联系app.js
VAR adminApp = angular.module（'adminApp'，[...]）;
adminApp.constant（'SERVERURL'，'HTTP：//本地主机：3003'）;
adminApp.config（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider
。当（'/管理员'，{
redirectTo：'/管理/仪表盘
}）
。当（'/管理/仪表板'，{
templateUrl：'谐音/ dashboard.html'，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：/管理员
}）;
}]）;
客户端app.js
VAR clientApp = angular.module（'clientApp'，[...]）;
clientApp.constant（'AppConfig的'，{
APP_NAME：网上商店，
SERVERURL'：'HTTP：//本地主机：3003'，
META_TITLE：网上商店
}）;
clientApp.config（函数（$ routeProvider，$ locationProvider）{
$ routeProvider
。当（'/客户端'，{
templateUrl：'谐音/ main.html中，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：'/客户端
}）; // prevent preflight跨域Ajax调用的请求
$ httpProvider.defaults.useXDomain = TRUE;
删除$ httpProvider.defaults.headers.common ['X-要求-随着']; }）;
客户端的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=clientApp＆GT;
＆LT; HEAD＆GT;
＆LT;链接相对=样式HREF =bower_components /引导/距离/ CSS / bootstrap.css/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-视图=＆GT;＆LT; / DIV＆GT;
＆LT;脚本SRC =bower_components / jQuery的/距离/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =clientjs / app.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =clientjs /控制器/ main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
好吧，我想出了一个解决方案，希望它会帮助别人。
目录保持结构法有问题，如图，这是我server.js
VAR前preSS =要求（'前preSS'）;
VAR应用=前preSS（）;
VAR bodyParser =要求（'身体分析器'）;
VAR猫鼬=要求（'猫鼬'）;
VAR apiRoutes =要求（'./配置/ API-路线'）;
VAR AUTH =要求（'./配置/授权'）;app.set（'意见'，__dirname）;
app.engine（HTML，需要（'EJS'）RenderFile模块）;//添加中间件练琴的REST API的
app.use（bodyParser.urlen codeD（{延长：真}））;
app.use（bodyParser.json（））;// CORS支持
app.use（功能（REQ，资源，下一个）{
res.header（'访问控制允许来源'，'*'）;
res.header（访问控制允许的方法，GET，PUT，POST，DELETE'）;
res.header（访问控制允许报头，Content-Type的'）;
// VAR IP = req.headers ['X-转换'] || req.connection.remoteAddress;
//console.log('Client IP：，IP）; 下一个（）;
}）;
VAR dbUrl = process.env.MONGOLAB_URI || MongoDB的：//127.0.0.1：27017 /电子商务应用-DB
VAR端口= process.env.PORT || 3003;mongoose.connect（dbUrl）;app.listen（端口，函数（）{
的console.log（'侦听端口+端口）;
}）;app.get（'/管理，功能（REQ，RES）{
res.render（管理/视图/ index.html的'）;
}）;app.get（'/客户端'，函数（REQ，RES）{
res.render（客户端/视图/ index.html的'）;
}）;
app.get（'/管理/谐音/：名称'，函数（REQ，RES）{
res.render（管理/视图/谐音/'+ req.params.name）;
}）;
app.get（'/客户/谐音/：名称'，函数（REQ，RES）{
res.render（客户端/视图/谐音/'+ req.params.name）;
}）;app.use（'/管理/ adminjs'，前press.static（__目录名称+'/管理/ JS'））;
app.use（'/客户/ clientjs'，前press.static（__目录名称+'/客户/ JS'））;app.use（'/管理/ bower_components'，前press.static（__目录名称+'/ bower_components'））;
app.use（'/客户/ bower_components'，前press.static（__目录名称+'/ bower_components'））;app.use（'/图像，前press.static（__目录名称+'/上传/'））; //装载API路线
apiRoutes（应用程序，验证）;
这是我的管理app.js
VAR adminApp = angular.module（'adminApp'，[...]）;adminApp.constant（'SERVERURL'，'HTTP：//本地主机：3003'）;adminApp.config（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider
。当（'/管理员'，{
redirectTo：'/管理/仪表盘
}）
。当（'/管理/仪表板'，{
templateUrl：'谐音/ dashboard.html'，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：'/'
}）;}]）;
在这里是admin的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=adminApp＆GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，用户可扩展性=无＆GT;
＆LT;标题＆GT;网上商店联系＆LT; /标题＆GT;
＆LT;链接HREF =bower_components /引导/距离/ CSS / bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;链接HREF =adminjs /主题/距离/ CSS / SB-管理-2.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT;脚本SRC =bower_components / jQuery的/距离/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =adminjs / app.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =adminjs /控制器/主controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
下面是客户端app.js
VAR clientApp = angular.module（'clientApp'，[...]）;
clientApp.config（函数（$ routeProvider，$ locationProvider）{
$ routeProvider
。什么时候（'/'， {
templateUrl：'谐音/ main.html中，
控制器：'MainCtrl
}）
。除此以外（{
redirectTo：'/客户端
}）;
}）;
下面是客户端的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=clientApp＆GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，用户可扩展性=无＆GT;
＆LT;标题＆GT;网上商店联系＆LT; /标题＆GT;
＆LT;链接HREF =bower_components /引导/距离/ CSS / bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT;链接HREF =clientjs /主题/距离/ CSS / SB-管理-2.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT;脚本SRC =bower_components / jQuery的/距离/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =clientjs / app.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =clientjs /控制器/主controller.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
I have a mean app which is working perfect with admin panel.
My server is listening on: http://localhost:3003
admin panel I can access here: http://localhost:3003/#/admin/
Now I want to separate admin panel and client panel, but client panel is not accessible like when I tried to this url, show nothing
http://localhost:3003/#/client
I have updated my server.js file also enable multiple views in express v 10.x.x like:
app.set('views', [__dirname + '/admin/views', __dirname + '/client/views']);
I think problem is with
app.get('/', function (req, res) {
res.render('index.html');
});
It render admin/index.html every time.
Here is my directory structure!
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
here is my 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'
});
}]);
Client 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'];
});
Client 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>
解决方案
Okay I came with a solution, hope it will help someone.
Directory structre remain as shown in question,here is my 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);
here is my 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: '/'
});
}]);
here is 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>
Here is client app.js
var clientApp = angular.module('clientApp', [...]);
clientApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/client'
});
});
Here is 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>
这篇关于MEAN应用与管理面板和客户端面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
