NODEJS实战微博评论02_静态文件托管

最新推荐文章于 2020-07-01 14:09:32 发布

chenzeze0707

最新推荐文章于 2020-07-01 14:09:32 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： node 文章标签： node angularjs mongodb

本文链接：https://blog.csdn.net/chenzeze0707/article/details/83661478

node 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Node.js与Express框架托管静态资源，包括HTML、CSS和JavaScript文件，并通过AngularJS渲染页面。具体展示了app.js的配置代码，以及如何在public目录下创建并引用index.html、index.js和index.css文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

启动服务后，将页面，样式，脚本用静态托管的方式引入

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

修改后的app.js代码如下

//加载express模块
var express = require('express');

//创建app应用
var app = express();

//设置静态文件托管
//当用户请求的路径以'/'开头时，直接返回__dirname + '/public'目录下文件
//第一个参数默认'/'，以下语句相当于 app.use('/',express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/public'));
/**
 * req:request对象，用于接收客户端传来的数据
 * res:response对象，用于返回客户端信息/数据
 * next:函数，用于执行下一个和当前路径匹配的函数
 */
app.get('/', function (req, res, next) {
    res.send('<h1>hello world</h1>');
})

//监听
app.listen(8080);

在public目录下新建index.html，index.js, index.css

index.html代码如下,用augularjs 渲染

<!DOCTYPE html>
<html lang="en" ng-app="weibo">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微博评论,nodejs+mongodb+angularjs</title>
    <link rel="stylesheet" href="index.css">
</head>

<body ng-controller="myCon">
    我是public目录下的index.html
    测试angular：{{test}}
    <!-- <a href="/test">跳转</a> -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/angular.js"></script>
    <script src="index.js"></script>

</body>

</html>

index.js代码如下

var app = angular.module('weibo', []);
app.controller('myCon', function ($scope, $http) {
    $scope.test = "成功";
});

运行node app.js ,访问 http://localhost:8080 或者 http://localhost:8080/index.html

前者与后者访问效果一样，因为url默认访问index.html