MEAN应用与管理面板和客户端面板

MEAN应用与管理面板和客户端面板

本文介绍了MEAN应用与管理面板和客户端面板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这正与完善的管理面板,平均应用程序。

我的服务器监听:

管理面板,我可以在这里访问:

现在我想管理面板和客户端面板分开,但客户端面板不可访问
就像当我试图这个网址,显示什么

我已经更新了我的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

 <!DOCTYPE HTML>
< HTML NG-应用=clientApp>
  < HEAD>
 <链接相对=样式HREF =bower_components /引导/距离/ CSS / bootstrap.css/>
 < /头>
  <身体GT;
< D​​IV NG-视图=>< / DIV>
<脚本SRC =bower_components / jQuery的/距离/ jquery.js和>< / SCRIPT>
&所述; SCRIPT SRC =bower_components /角度/ angular.js>&下; /脚本>
&所述; SCRIPT SRC =clientjs / app.js>&下; /脚本>
 <脚本SRC =clientjs /控制器/ main.js>< / SCRIPT>
< /身体GT;
< / HTML>


解决方案

好吧,我想出了一个解决方案,希望它会帮助别人。

目录保持结构法有问题,如图,这是我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

 <!DOCTYPE HTML>
< HTML NG-应用=adminApp>
< HEAD>
< META NAME =视口CONTENT =WIDTH =设备宽度,用户可扩展性=无>
<标题>网上商店联系< /标题>
<链接HREF =bower_components /引导/距离/ CSS / bootstrap.min.css的rel =stylesheet属性>
<链接HREF =adminjs /主题/距离/ CSS / SB-管理-2.css的rel =stylesheet属性>
< /头>
<身体GT;
< D​​IV NG-视图>< / DIV>
< /身体GT;
 <脚本SRC =bower_components / jQuery的/距离/ jquery.js和>< / SCRIPT>
&所述; SCRIPT SRC =bower_components /角度/ angular.js>&下; /脚本>
&所述; SCRIPT SRC =adminjs / app.js>&下; /脚本>
<脚本SRC =adminjs /控制器/主controller.js>< / SCRIPT>
< / HTML>

下面是客户端app.js

  VAR clientApp = angular.module('clientApp',[...]);
clientApp.config(函数($ routeProvider,$ locationProvider){
$ routeProvider
      。什么时候('/', {
        templateUrl:'谐音/ main.html中,
        控制器:'MainCtrl
      })
    。除此以外({
        redirectTo:'/客户端
      });
  });

下面是客户端的index.html

 <!DOCTYPE HTML>
    < HTML NG-应用=clientApp>
    < HEAD>
    < META NAME =视口CONTENT =WIDTH =设备宽度,用户可扩展性=无>
    <标题>网上商店联系< /标题>
    <链接HREF =bower_components /引导/距离/ CSS / bootstrap.min.css的rel =stylesheet属性>
    <链接HREF =clientjs /主题/距离/ CSS / SB-管理-2.css的rel =stylesheet属性>
    < /头>
    <身体GT;
    < D​​IV NG-视图>< / DIV>
    < /身体GT;
     <脚本SRC =bower_components / jQuery的/距离/ jquery.js和>< / SCRIPT>
    &所述; SCRIPT SRC =bower_components /角度/ angular.js>&下; /脚本>
    &所述; SCRIPT SRC =clientjs / app.js>&下; /脚本>
    <脚本SRC =clientjs /控制器/主controller.js>< / SCRIPT>
    < / HTML>

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 accessiblelike 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.xlike:

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应用与管理面板和客户端面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-07 06:35