mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-09-22 01:30:40 +08:00
继续搭建前端nodejs框架，添加字体动态压缩
This commit is contained in:
53
bookshelfplus-frontend/views/about.html
Normal file
53
bookshelfplus-frontend/views/about.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<%- include("./component/header.html"); %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%- include("./component/navbar.html"); %>
|
||||
|
||||
<div class="main" align="center">
|
||||
<div class="siteTitle">
|
||||
<h1>书栖网</h1>
|
||||
</div>
|
||||
|
||||
<div class="sloganBox">
|
||||
<p class="emphasize">
|
||||
一个完全免费无门槛的计算机类电子书下载网站
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>随便唠唠</h2>
|
||||
<p>本网站是“计算机类电子书”仓库的前身，我们希望能够搭建一个电子书共享平台，供大家在学习中方便搜索以及下载。</p>
|
||||
<p>目前市面上的网站下载有很多门槛，要么是收费，要么是要关注公众号等等。我们要做的就是一个没有任何门槛的下载平台。</p>
|
||||
<p style="font-weight: bold; color: crimson;">我们承诺，这个网站从出生到消失，永不投放广告，永远不会让您付费或者关注公众号来进行下载，甚至也不投放收款二维码，永远是这样。</p>
|
||||
<hr>
|
||||
<p>目前已收集到100GB左右的与计算机相关的书籍（主要是PDF）。但由于人手不足，尽管我们花费了大量时间对其进行归类、筛选、去重等工作，但仅仅将其中的四分之一整理到仓库中供大家下载。所以我们暂时停止了手动整理的重复工作，着手来开发这个网站，以减轻后期我们的重复劳动，也为了能给大家提供更好更方便的下载服务。
|
||||
</p>
|
||||
<p style="font-size: small; color: #c8c8c8;">
|
||||
【备注】在我们建设好网站前，对于希望能够打包下载全部电子书的类似需求我们无暇兼顾，因为文件太多，我们需要花很多精力，甚至分成很多个渠道才能够将其分享出去不被和谐，所以还请大家多多谅解。</p>
|
||||
<hr>
|
||||
<p>目前，我们使用业余时间进行网站开发，所以这个过程很慢，也请您耐心等待。如果您与我们一样，希望为这个项目添砖加瓦，欢迎通过 <u>contact@only4.work</u>
|
||||
与我们取得联系。当然，话说在前面，我们没有能力支付相应酬劳，包括我们自己也是一样，做这个项目不为什么，纯粹的是为爱发电罢了。同时，如果您想加入我们，你需要拥有相应编码能力，以及一些空闲时间。</p>
|
||||
<p>如果你只是单纯的喜欢本项目，或者认同我们的做事风格等等，欢迎去GitHub仓库为我们点个Star，这对我们来说比金钱更能维持我们为爱发电的热情。</p>
|
||||
<hr>
|
||||
<p>也许你会问，为爱发电的话，高昂的运维费用怎么办？这个我没有办法给出肯定的回答，就像目前很多的开源项目作者一样，他们也被这个问题所困扰。但我可以肯定的告诉你，我们会尽一切力量来维持这个网站的运行，从服务器到下载地址，我们会尽量压缩成本。压缩成本意味着尽量使用免费或者低价的云服务，这同时意味着可能会让网站加载变慢甚至少数情况下加载不出来，我们会尽量在这二者之间找到一个平衡点。
|
||||
</p>
|
||||
<p>在网站的后续运营过程中，我们将主要使用网盘分享链接的形式进行分享，但由于网盘分享链接极其容易失效，所以部分情况下我们会为压缩包设置密码。若压缩包有密码，一律为：<u>bookshelf.plus</u>。</p>
|
||||
<p>但在网站的细节方面，我们绝对会将用户体验放在第一位，该有的通通都给安排上。</p>
|
||||
<hr>
|
||||
<p>最后，还是要说一下版权的问题。我们十分重视版权。我们所整理的电子书全部来自于互联网，其中部分来自于下载站、公众号等。如果其中包含您的作品，且您不希望我们将您的作品作为免费分享出来，请联系<span>contact@only4.work</span>并提供相应证明材料，我们核实后将会第一时间删除。同时，您在本网站上下载的所有电子书文件，仅供学习交流使用，不可二次传播，特别是不可设置扫码关注等门槛二次分享。
|
||||
</p>
|
||||
<hr>
|
||||
<h2>特别说明</h2>
|
||||
<p>本站电子书由“张小弟之家”整理，出于方便学习之目的，您从本站下载的电子书仅供学习交流使用，如需他用请联系原作者。<a href="https://gitee.com/only4/computer-related-books" target="_blank">查看同步更新Gitee仓库</a></p>
|
||||
<p>由于信息量较大，我们无法做到一一确认相关电子书的权属管理，如本站不慎侵犯了您的权利，请发送邮件至<b>contact@only4.work</b>，来信请注明相关链接以及您的相关证明材料，我们收到邮件后会第一时间与您取得联系并积极处理，多谢理解！</p>
|
||||
|
||||
</div>
|
||||
|
||||
<%- include("./component/footer.html"); %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
bookshelfplus-frontend/views/category.html
Normal file
21
bookshelfplus-frontend/views/category.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<%- include("./component/header.html"); %>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("./component/navbar.html"); %>
|
||||
|
||||
<h1><%= title %></h1>
|
||||
|
||||
<main class="main">
|
||||
<div id="container">
|
||||
</div>
|
||||
</main>
|
||||
<%- include("./component/footer.html"); %>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +1,45 @@
|
||||
<footer>
|
||||
<hr />
|
||||
<p>
|
||||
<% site.footer.link.forEach(function(link){ %>
|
||||
<span><a href="<%= link.url; %>" target="<%= link.target %>"><%= link.text; %></a></span>
|
||||
<% }); %>
|
||||
</p>
|
||||
<p>
|
||||
Copyright © 2021-2022 <%= site.title; %> All Rights Reserved.
|
||||
</p>
|
||||
</footer>
|
||||
<div class="footer">
|
||||
<hr>
|
||||
<p>书栖网 • 2021-2022</p>
|
||||
</div>
|
||||
|
||||
<!-- https://gist.github.com/macbookandrew/f33dbbc0aa582d0515919dc5fb95c00a -->
|
||||
<script>
|
||||
// 获取网页上的所有文字
|
||||
// refer: https://www.cnblogs.com/yzeng/p/8268731.html
|
||||
function getPageText() {
|
||||
var str = document.documentElement.innerText;
|
||||
str += "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; // 数字和英文全部包含进去
|
||||
var res = [].filter.call(str, (s, i, o) => o.indexOf(s) == i).sort().join('').trim();
|
||||
return res;
|
||||
}
|
||||
function fontmin(text) {
|
||||
// 设置post type
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
// 接口地址
|
||||
axios.post('/fontmin/getfont', { text: text, font: "" })
|
||||
.then(function (response) {
|
||||
// 当接口成功返回时，动态设置css
|
||||
let styleDom = document.createElement('style');
|
||||
styleDom.type = 'text/css';
|
||||
const cssText = `
|
||||
@font-face {
|
||||
font-family: bookshelfplusFont;
|
||||
src: url("${response.data.url}") format("truetype");
|
||||
}
|
||||
`
|
||||
styleDom.appendChild(document.createTextNode(cssText));
|
||||
document.getElementsByTagName('head')[0].appendChild(styleDom)
|
||||
console.log("字体加载成功");
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log("字体加载失败", error);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var allText = getPageText();
|
||||
console.log(allText);
|
||||
fontmin(allText);
|
||||
});
|
||||
</script>
|
||||
@@ -1,7 +1,10 @@
|
||||
<!-- StyleSheets -->
|
||||
<link rel="stylesheet" href="/stylesheets/main.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title><%= title; %></title>
|
||||
|
||||
<link rel="stylesheet" href="./assets/stylesheets/style.css">
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> -->
|
||||
<script src="./assets/lib/jquery/3.6.0/jquery.min.js"></script>
|
||||
|
||||
<!-- JavaScripts -->
|
||||
<!-- jQuery 3.6.0 -->
|
||||
<script src="/lib/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="./assets/lib/axios/0.20.0/axios.min.js"></script>
|
||||
17
bookshelfplus-frontend/views/component/navbar.html
Normal file
17
bookshelfplus-frontend/views/component/navbar.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<div class="navbar">
|
||||
<div class="navbar-grid">
|
||||
<div class="grid-item"></div>
|
||||
<div class="grid-item">
|
||||
<nobr>
|
||||
<h1 onclick="location.href='/'" style="cursor: pointer;">书栖网</h1>
|
||||
</nobr>
|
||||
</div>
|
||||
<div class="grid-item exnarrowHide" style="text-align: right; color: white;">
|
||||
<a class="narrowHide" href="/">首页</a>
|
||||
<a href="/category">分类</a>
|
||||
<a href="/search">搜索</a>
|
||||
<a class="narrowHide" href="/about">关于</a>
|
||||
</div>
|
||||
<div class="grid-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,11 +2,10 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<%- include("./component/header.html"); %>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("./component/navbar.html"); %>
|
||||
<h1><%= message %></h1>
|
||||
<h2><%= error.status %></h2>
|
||||
<pre><%= error.stack %></pre>
|
||||
|
||||
82
bookshelfplus-frontend/views/index.html
Normal file
82
bookshelfplus-frontend/views/index.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<%- include("./component/header.html"); %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%- include("./component/navbar.html"); %>
|
||||
|
||||
<div class="main" align="center">
|
||||
<div class="siteTitle">
|
||||
<h1>书栖网</h1>
|
||||
</div>
|
||||
|
||||
<div class="searchBox">
|
||||
<input id="searchInput" type="text" placeholder="只需两步：搜索、下载 就这么简单" />
|
||||
<input id="searchButton" type="button" value="搜一下" />
|
||||
</div>
|
||||
|
||||
<div class="sloganBox">
|
||||
<p class="emphasize">
|
||||
一个完全免费无门槛的计算机类电子书下载网站
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30vh;"></div>
|
||||
|
||||
<%- include("./component/footer.html"); %>
|
||||
|
||||
<script>
|
||||
// /**
|
||||
// * 内容改变时并不会触发事件，但是在失去焦点的时候会触发。
|
||||
// */
|
||||
// $("#inputid").change(function () {
|
||||
// console.log($(this).val());
|
||||
// });
|
||||
// /**
|
||||
// * 只要文本类容发生改变，就会触发该事件
|
||||
// */
|
||||
// $("#inputid").bind("input propertychange", function () {
|
||||
// console.log($(this).val());
|
||||
// });
|
||||
|
||||
// // 搜索框文字改变事件（实时）
|
||||
// $("#searchInput").bind("input propertychange", function () {
|
||||
// if ($('#searchInput').val() !== "")
|
||||
// $('#searchInput').val("这个功能还没做呢，再等等吧");
|
||||
// });
|
||||
|
||||
// 搜索框获得焦点事件
|
||||
$('#searchInput').focus(() => {
|
||||
// $('#searchInput').val("");
|
||||
$('#searchInput').attr('placeholder', "在这里输入您想搜索的电子书吧")
|
||||
})
|
||||
|
||||
// 搜索框失去焦点事件
|
||||
$('#searchInput').blur((that) => {
|
||||
// $('#searchInput').val("");
|
||||
$('#searchInput').attr('placeholder', "只需两步：搜索、下载 就这么简单")
|
||||
})
|
||||
|
||||
// 文本框回车事件
|
||||
$('#searchInput').keydown(function (e) {
|
||||
var curKey = e.which;
|
||||
if (curKey == 13) {
|
||||
$("#searchButton").click();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索按钮点击事件
|
||||
$('#searchButton').click(function () {
|
||||
if ($('#searchInput').val() !== "") {
|
||||
location.href = "search?keyword=" + encodeURIComponent($('#searchInput').val());
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -2,151 +2,20 @@
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><%= page + " | " + title; %></title>
|
||||
<%- include("./component/header.html"); %>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<%- include("./component/navbar.html"); %>
|
||||
|
||||
<h1><%= title %></h1>
|
||||
<p>本站电子书由“张小弟之家”整理，出于方便学习之目的，您从本站下载的电子书仅供学习交流使用，如需他用请联系原作者。<a href="https://gitee.com/only4/computer-related-books" target="_blank">查看同步更新Gitee仓库</a></p>
|
||||
<p>由于信息量较大，我们无法做到一一确认相关电子书的权属管理，如本站不慎侵犯了您的权利，请发送邮件至<b>contact@only4.work</b>，来信请注明相关链接以及您的相关证明材料，我们收到邮件后会第一时间与您取得联系并积极处理，多谢理解！</p>
|
||||
|
||||
<main class="main">
|
||||
<div id="container">
|
||||
<div id="cateTable"></div>
|
||||
<div id="itemTable"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function getDefaultGridDictTemplate() {
|
||||
return {
|
||||
columns: [],
|
||||
//data: '',
|
||||
|
||||
// 搜索
|
||||
search: true,
|
||||
|
||||
// 分页
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
|
||||
// 排序
|
||||
sort: true,
|
||||
|
||||
// 可调整列宽
|
||||
resizable: true,
|
||||
|
||||
// 自适应
|
||||
fixedHeader: true,
|
||||
//height: '400px',
|
||||
|
||||
server: {},
|
||||
|
||||
language: {
|
||||
search: {
|
||||
placeholder: '🔍 搜索一下'
|
||||
},
|
||||
pagination: {
|
||||
previous: '上一页',
|
||||
next: '下一页',
|
||||
navigate: (page, pages) => `第 ${page} 页，共 ${pages} 页`,
|
||||
page: (e) => "第" + e + "页",
|
||||
showing: "显示结果：第",
|
||||
to: "-",
|
||||
of: "条结果，共",
|
||||
results: "条结果"
|
||||
},
|
||||
sort: {
|
||||
sortAsc: "按升序排序",
|
||||
sortDesc: "按降序排序"
|
||||
},
|
||||
loading: "数据正在加载中...",
|
||||
noRecordsFound: "无结果",
|
||||
error: "出错了"
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
let cateTableDict = getDefaultGridDictTemplate();
|
||||
cateTableDict.columns = [
|
||||
{
|
||||
name: '分类',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: '分类简介',
|
||||
sort: false
|
||||
},
|
||||
{
|
||||
name: '操作',
|
||||
sort: false,
|
||||
formatter: (cell, row) => {
|
||||
return gridjs.h('button', {
|
||||
className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
|
||||
onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
|
||||
}, '查看');
|
||||
}
|
||||
}
|
||||
];
|
||||
cateTableDict.server = {
|
||||
url: '/api/getCategoryList?cateLevel=1&parentCateId=', //+'page=1&perpage=20',
|
||||
then: data => data.result.reduce((result, element) => {
|
||||
//console.log(result, element);
|
||||
result.push({
|
||||
分类: element.cateId,
|
||||
分类: element.cateName,
|
||||
分类简介: element.cateDescription,
|
||||
});
|
||||
return result;
|
||||
}, [ /* reduce result的初始值 */])
|
||||
};
|
||||
|
||||
let cateTable = new gridjs.Grid(cateTableDict);
|
||||
cateTable.render(document.getElementById('cateTable'));
|
||||
</script>
|
||||
<script>
|
||||
let itemTableDict = getDefaultGridDictTemplate();
|
||||
itemTableDict.columns = [
|
||||
{
|
||||
name: '书名',
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
name: '简介',
|
||||
sort: false
|
||||
},
|
||||
{
|
||||
name: '操作',
|
||||
formatter: (cell, row) => {
|
||||
return gridjs.h('button', {
|
||||
className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
|
||||
onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`)
|
||||
}, '查看详情');
|
||||
}
|
||||
}
|
||||
];
|
||||
itemTableDict.server = {
|
||||
url: '/api/getBookList',
|
||||
then: data => data.result.reduce((result, element) => {
|
||||
result.push({
|
||||
书名: element.书名,
|
||||
简介: element.书籍简介,
|
||||
});
|
||||
return result;
|
||||
}, [ /* reduce result的初始值 */])
|
||||
};
|
||||
|
||||
let itemTable = new gridjs.Grid(itemTableDict);
|
||||
itemTable.render(document.getElementById('itemTable'));
|
||||
</script>
|
||||
|
||||
<%- include("./component/footer.html"); %>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,67 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><%= title; %></title>
|
||||
<%- include("./component/header.html"); %>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><%= title %></h1>
|
||||
|
||||
<template>
|
||||
<el-row>
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
<el-button>中文</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button plain>Plain</el-button>
|
||||
<el-button type="primary" plain>Primary</el-button>
|
||||
<el-button type="success" plain>Success</el-button>
|
||||
<el-button type="info" plain>Info</el-button>
|
||||
<el-button type="warning" plain>Warning</el-button>
|
||||
<el-button type="danger" plain>Danger</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button round>Round</el-button>
|
||||
<el-button type="primary" round>Primary</el-button>
|
||||
<el-button type="success" round>Success</el-button>
|
||||
<el-button type="info" round>Info</el-button>
|
||||
<el-button type="warning" round>Warning</el-button>
|
||||
<el-button type="danger" round>Danger</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button :icon="Search" circle></el-button>
|
||||
<el-button type="primary" :icon="Edit" circle></el-button>
|
||||
<el-button type="success" :icon="Check" circle></el-button>
|
||||
<el-button type="info" :icon="Message" circle></el-button>
|
||||
<el-button type="warning" :icon="Star" circle></el-button>
|
||||
<el-button type="danger" :icon="Delete" circle></el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
<script type="module">
|
||||
import {
|
||||
Search,
|
||||
Edit,
|
||||
Check,
|
||||
Message,
|
||||
Star,
|
||||
Delete,
|
||||
} from 'element' //from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<%- include("./component/footer.html"); %>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user