nodeJS web端包使用 bower 管理

最新推荐文章于 2021-12-16 18:17:13 发布

雾里看花叹朦胧

最新推荐文章于 2021-12-16 18:17:13 发布

阅读量1k

点赞数 3

分类专栏： nodejs 文章标签： nodeJS web端包管理 bower npm .bowerrc

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/89819590

版权

nodejs 专栏收录该内容

21 篇文章 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

.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>

页面效果：
在这里插入图片描述

雾里看花叹朦胧

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
nodeJS web端包使用 bower 管理

使用 npm 管理 server 端（服务端）的包使用 bower 管理 web 端（客户端）的包bower 的使用：1.使用 npm 安装 bowernpm install bower -g2.查看 bower 是否安装成功：bower -v3.搭建 bower 初始化环境bower init会生成一个bower.json 文件，与 package.json文件差不多4.创建...
复制链接

扫一扫