nodeJS web端包使用 bower 管理

女爷i 2022-02-04 20:47 242阅读 0赞

使用 npm 管理 server 端（服务端）的包  
使用 bower 管理 web 端（客户端）的包

bower 的使用：  
1.使用 npm 安装 bower  
npm install bower -g

2.查看 bower 是否安装成功：  
bower -v

3.搭建 bower 初始化环境  
bower init  
会生成一个bower.json 文件，与 package.json文件差不多

4.创建 bower 运行时文件  
null>.bowerrc  
并添加如下配置：  
\{“directory”: “./components”\}  
这里的路径是可以自由指定的，但必须使用双引号

5.使用 bower 安装需要使用的前端包，比如：bootstrap jquery angular  
bower install bootstrap jquery angular --save

源代码的 GitHub路径如下:  
[https://github.com/slhuang520/study/tree/master/web/nodeJS/3part][https_github.com_slhuang520_study_tree_master_web_nodeJS_3part]

## .bowerrc ##

{ 
      "directory" : "./components"
    }

## bower.json ##

{ 
      "name": "view",
      "authors": [
        "slhuang520 <349733050@qq.com>"
      ],
      "description": "",
      "main": "",
      "license": "MIT",
      "homepage": "",
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ],
      "dependencies": { 
        "bootstrap": "^4.3.1",
        "jquery": "^3.4.1",
        "angular": "^1.7.8"
      }
    }

## package.json ##

{ 
      "name": "3part",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "body-parser": "^1.19.0",
        "express": "^4.16.4"
      }
    }

## app.js ##

server端

/** * 使用 npm 管理 server 端（服务端）的包 * 使用 bower 管理 web 端（客户端）的包 * @type {*|createApplication} */
    
    var express = require("express");
    var path = require("path");
    var bodyParser = require("body-parser");
    
    //创建server网站
    var app = express();
    // 获取Post body 传参
    app.use(bodyParser.json());
    // 如果有url加密的，需要解密
    app.use(bodyParser.urlencoded({ extended: false}));
    
    //指定默认的访问页面（index.html）
    app.use(express.static('view'));//路径指向 相对的文件夹路径
    
    // Get 返回字符串
    app.get("/a", function (req, res) { 
        res.send("server response");
    });
    // Get 返回 Json
    app.get("/b", function (req, res) { 
        res.json({ name: "Jim", age: 12});
    })
    // Post 返回 Json
    app.post("/b", function (req, res) { 
        res.json({ name: "Jim", age: 12});
    });
    // All 返回 Json，all 可以接收 get 或是 Post
    app.all("/c", function (req, res) { 
        res.json({ name: "Jim", age: 12});
    });
    // Get 通过路由传参
    app.get("/d/:id", function (req, res) { 
        var id = req.params.id;
        console.log(id);
        res.json({ name: id, age: 12});
    });
    // Post body 传参
    app.post("/d", function (req, res){ 
        var name = req.body.name;
        console.log(name);
        res.json({ name: name, age: 12});
    });
    
    //通过路由显示相应的页面
    app.use("/list", function (req, res) { 
        res.status(200).sendFile(path.join(__dirname, "view", "list.html"));//返回200表示正常
    });
    
    app.use("/info", function (req, res) { 
        res.sendFile(path.join(__dirname, "view", "info.html"))
    });
    
    //[*]表示所有，如果以上的路径都没有匹配时，则表明没有找到相应的页面
    app.use("*", function (req, res) { // 这里的[*]是可以省略的
        res.sendFile(path.join(__dirname, "view", "err", "404.html"));
    });
    
    app.listen(3000, /*"192.168.56.1",*/ function (err) { 
        if (err) { 
            console.log("监听失败");
            throw err;
        }
    
        console.log("server 已经开启，默认IP: 127.0.0.1, Port：3000");
    });

## index.html ##

web 端

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Index</title>
        <link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
    index
    <div id="msg"></div>
    <button class="btn btn-danger" id="getText">GetText</button>
    <button class="btn btn-danger" id="getJson">GetJson</button>
    <button class="btn btn-danger" id="postJson">PostJson</button>
    <button class="btn btn-danger" id="getAll">GetAll</button>
    <button class="btn btn-danger" id="postAll">PostAll</button>
    <button class="btn btn-danger" id="getByParam">Get路由传参</button>
    <button class="btn btn-danger" id="postByParam">Post Body传参</button>
    
    <script src="components/jquery/dist/jquery.min.js"></script>
    <script> $("#getText").click(function (e) { $.get("/a", function (res) { console.log(res); $("#msg").text(res); }); }); $("#getJson").click(function (e) { $.get("/b", function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); $("#postJson").click(function (e) { $.post("/b", function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); $("#getAll").click(function (e) { $.get("/c", function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); $("#postAll").click(function (e) { $.post("/c", function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); $("#getByParam").click(function (e) { $.get("/d/Jim", function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); $("#postByParam").click(function (e) { $.post("/d", { name: "Jim"}, function (res) { console.log(res); $("#msg").text(res.name + " : " + res.age); }); }); </script>
    </body>
    </html>

页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

[https_github.com_slhuang520_study_tree_master_web_nodeJS_3part]: https://github.com/slhuang520/study/tree/master/web/nodeJS/3part
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220205/1f97994fa98d4dc59dc4954f8025c626.png