个人中心
gpt4 book ai didi

javascript - 脚本有效但不适用于 node.js

转载 作者：行者123 更新时间：2023-11-30 21:03:08 25 4
gpt4 key购买 nike

我正在尝试让一个小的 Angular 脚本在我的 .html 页面中工作。如果我在浏览器中将页面作为静态页面加载，Angular 脚本将正确运行。如果我运行在 res.render 语句下加载同一页面的 node.js 应用程序，则 Angular 脚本不会运行。

我的理论是我的 Angular 代码与运行的 Express.js 代码冲突。但是，我不确定如何。

这是我的脚本。

index.html

<body>
    <!--INCLUDE - JS LIBRARIES -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js" type="text/javascript"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
        crossorigin="anonymous"></script>

    <!--INCLUDE - ANGULAR CONTROLLER -->
    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function ($scope) {
            $scope.cucmpub = "x.x.x.x";
        });
    </script>

    <!--BODY - BOOTSTRAP PAGE SETUP -->
    <div class="container-fluid" ng-app="">
        <div class="row">
            <div class="col-md-12">

                <!--BODY - BOOTSTRAP NAVBAR -->
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/">CUCM
                            <sup>2</sup>
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a href="/">
                                    <img src="https://png.icons8.com/marker/office/16" title="Marker" width="16" height="16"> CSS Map</a>
                            </li>
                            <li>
                                <a href="/">
                                    <img src="https://png.icons8.com/phone/ultraviolet/20" title="Phone" width="16" height="16"> SIP2SIP</a>
                            </li>
                            <li>
                                <a href="/">
                                    <img src="https://png.icons8.com/bug/color/24" title="Bug" width="16" height="16"> Debugger</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a ng-href="https://{{cucmpub}}/ccmadmin/" target="_blank">{{cucmpub}}</a>
                            </li>
                        </ul>
                    </div>
                </nav>

                <!--BODY - CONTENT-->
                <div class="row">
                    <div class="col-md-12" class="pull-left">
                        <form class="form-horizontal" method="post" action="/cucmmapper/submit" id="cucmmapper">
                            <!-- INPUT - TEXT-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="cucmpub">CUCM Publisher</label>
                                <div class="col-md-4">
                                    <input id="cucmpub" name="cucmpub" type="text" placeholder="x.x.x.x" class="form-control input-md" required="" ng-model="cucmpub">
                                </div>
                            </div>
                            <!-- INPUT - SELECT-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="cucmpub">CUCM Version</label>
                                <div class="col-md-4">
                                    <select class="form-control" id="cucmversion" name="cucmversion">
                                        <option>11.5</option>
                                        <option>11.0</option>
                                    </select>
                                </div>
                            </div>
                            <!-- INPUT - TEXT-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="username">AXL Username</label>
                                <div class="col-md-4">
                                    <input id="username" name="username" type="text" placeholder="username" class="form-control input-md" required="">
                                </div>
                            </div>
                            <!-- INPUT - PASSWORD-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="password">Password</label>
                                <div class="col-md-4">
                                    <input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
                                </div>
                            </div>
                            <!-- INPUT - BUTTON -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="submit"></label>
                                <div class="col-md-4">
                                    <button class="btn btn-primary" type="submit">Map it!</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

应用程序.js

// APP - INCLUDE
const express = require('express')
const path = require("path")
const bodyParser = require("body-parser")
const hbs = require('hbs')
var xml2js = require('xml2js');
var parser = new xml2js.Parser();
var opn = require('opn');

// APP - DEFINITION
const app = express()

// APP - BUILD
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.engine('html', require('hbs').__express);
app.set('view engine', 'html');

// EXPRESS ROUTE - INDEX
app.get('/', function (req, res) {
  res.render('index.html', {
    title: 'CUCM 2.0'
  });
})

// EXPRESS ROUTING - INCLUDE - CUCM MAPPER
var routingextensions = require('./routes/cucmmapper.js')(app);

// APP - START
app.listen(3000, function () {
  console.log('Please keep this terminal open until finished as it is running the backend API communications with CUCM.')
});

opn('http://localhost:3000');

我在所有这些方面仍然是新手，非常感谢任何帮助或建议。谢谢大家!

最佳答案

Node 找不到“公共(public)”文件夹。

试试这一行:

app.use(express.static(__dirname + '/public'));

https://nodejs.org/docs/latest/api/modules.html#modules_dirname

此外，如果您曾经为您的库使用包管理器(而不是 cdn)，您将必须添加这一行:

app.use('/bower_components', express.static(__dirname + '/bower_components'));

关于javascript - 脚本有效但不适用于 node.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46918831/

25 4 0
文章推荐： c - 如何使用 C 获取字符串并按字母顺序排列单词
文章推荐： c# - 如何初始化 AttributeCollection 的实例？
文章推荐： c# - SQLite 和列表通用 C#
文章推荐： javascript - 如何使用 OpenLayers 创建圆形图标图像？
行者123
个人简介

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

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