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

短命女 2022-04-22 06:34 228阅读 0赞

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

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}}
        
        <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] 或者 [http://localhost:8080][http_localhost_8080]/index.html

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

![20181102232842270.png][]

[Link 1]: https://blog.csdn.net/chenzeze0707/article/details/83657489
[http_localhost_8080]: http://localhost:8080/index.html
[20181102232842270.png]: /images/20220422/ec561d8a340140079e21ad52955e1ffa.png