个人中心
gpt4 book ai didi

javascript - 带有管理面板和客户端面板的 MEAN 应用程序

转载 作者：太空宇宙 更新时间：2023-11-04 00:41:46 25 4
gpt4 key购买 nike

我有一个与管理面板完美配合的平均应用程序。

我的服务器正在监听:http://localhost:3003

管理面板我可以在这里访问:http://localhost:3003/#/admin/

现在我想分离管理面板和客户端面板，但客户端面板无法访问就像当我尝试这个网址时，什么也不显示

http://localhost:3003/#/client

我已经更新了我的 server.js 文件，并且在 Express v 10.x.x 中启用了多个 View 像:

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);

管理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'];

  });

客户端索引.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>

最佳答案

好吧，我带来了一个解决方案，希望它能对某人有所帮助。

目录结构仍如问题所示，这是我的 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: '/'
            });

}]);

这里是管理索引.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>

关于javascript - 带有管理面板和客户端面板的 MEAN 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36374424/

25 4 0
文章推荐： node.js - NodeJS 中多个模块上的单个 MySQL 连接
文章推荐： python - 精确率、召回率、F1 分数与 sklearn 相同
文章推荐： python - 检查 IP 地址是否在给定范围内
文章推荐： c - C如何 self 托管？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com