这次给大家带来用nodejs做简介的网站，用nodejs做网站的注意事项有哪些，下面就是实战案例，一起来看一下。
首先你要有nodejs环境和会使用npm,不会自行Google或百度。（相关推荐：Node.js视频教程）
ok！开始吧！
第一步 用nodejs编写后台:
1.新建项目
2.创建static文件夹(可自行更改)
3.static文件夹下创建videos文件夹(可自行更改)
4.在项目目录创建 app.js 内部代码如下
var http = require('http');var fs = require('fs');var rd = require('rd');var express = require('express');var app = express();
app.use("/static", express.static(dirname + '/static'));//引入静态文件夹var vdo_path = dirname + "\\static\\videos\\";//视频文件夹路径(可自行更改)var vdo_info_ls = [];//获取到的文件信息集function getFileInfo(path) {//遍历文件夹
try { var files = rd.readSync(path);//获取目录下所有文件和文件夹
for (var i in files) {//循环遍历
if (!fs.lstatSync(files[i]).isDirectory()) {//判断是否为文件
if (files[i].toLowerCase().split(".mp4").reverse()[0].length== 0) {//判断是否为MP4格式文件(这里默认以MP4为例 其他格式大家自行过滤)
vdo_info_ls[vdo_info_ls.length]={ name: files[i].split("\\").reverse()[0].replace(".mp4", "").replace(".MP4", ""),//获取文件名
url: (vdo_path.replace(dirname, "")+ files[i].replace(vdo_path, "")).replace("\\", "/"), //获取文件的web路径
mtime: fs.statSync(files[i]).mtime//修改时间作为发布时间
}//添加信息到文件信息集
}
}
}
} catch (e) { console.log(e)
}
}function reGetFileInfos() {//这里是为了大家以后写后台进行文件刷新时使用
vdo_info_ls = [];//初始化集合
getFileInfo(vdo_path); //遍历文件夹
vdo_info_ls.sort(function (a, b) {//时间排序
return Date.parse(b.ctime) - Date.parse(a.ctime);//时间正序(不过这个方法好像只能对月日起效 对年好像不起作用)
});
}
var page_count = 20;//分页条数app.get('/getvdojson', function (req, res) { var ret = [];//返回的分页json初始化
if (req.query.page) {//判断是否有get参数page
if (parseInt(req.query.page) >= 0) {//
for (var i = 0; i < page_count; i++) {//遍历获取
ret[ret.length] = vdo_info_ls[parseInt(req.query.page) * page_count + i];
}
}
}
res.json(ret);//返回json});
// 创建服务端http.createServer(app).listen('5000', function () {
reGetFileInfos();//初始化文件信息集
console.log('启动服务器完成');
});写入代码后运行。
浏览器访问http://127.0.0.1:5000/getvdojson?page=0 查看效果
改变url的page参数查看效果。
如果运行正常页面会返回json。(如:[{“name”:”一分钟学唱《loser》…..”mtime”:”2016-07-27T11:11:28.501Z”}])
第二步 编写网站前台主页面：
1.添加以下代码到app.js
app.get('/', function (req, res) {
res.sendFile(dirname + "\\" + "index.html");
});2.static文件夹下创建img,js和css文件夹分别存放img,js和css文件
3.在项目下创建index.html写入以下代码
<!DOCTYPE html><html ><head>
<meta charset="UTF-8">
<title>小视频</title>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/minigrid.js"></script><!-- 轻量级瀑布流插件 具体可搜索minigrid了解 -->
<style>
/*全局样式*/
* { margin: 0; padding: 0;
}
a { text-decoration: none;
}
body { line-height: 1; background: #FFF;
}
body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%;
} /*主体居中*/
.container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto;
}
#photo-box .photo { display: block; /*float: left;*/
width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2;
}
#photo-box .photo .content { margin: 0 10px ; font-size: 14px; color: #777; line-height: 20px; word-break: break-all;
} /*显示加载*/
#load-over{ width: 95%; margin: 0 auto;
border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999;
} </style></head><body>
<!--"photo-box"为瀑布流 图片容器-->
<div id="photo-box" class="container">
<!--"photo"显示视频缩略图与图片信息-->
<a class="photo" target="_blank" href="#">
[站外图片上传中……(2)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a> <a class="photo" target="_blank" href="#">
[站外图片上传中……(3)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(4)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(5)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(6)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(7)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(8)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(9)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(10)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(11)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(12)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
<a class="photo" target="_blank" href="#">
[站外图片上传中……(13)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
</div>
<div id="load-over" >
加载中... </div>
<script>
minigrid('#photo-box', '.photo', 20, null, function() { //更新后回调
});//瀑布流插件初始化
window.addEventListener('resize', function() {//窗口大小改变自动排版
minigrid('#photo-box', '.photo');
});
</script></body></html>访问http://127.0.0.1:5000/ 查看效果
效果示例:
Paste_Image.png
第三步 前后台结合：
1.修改index.html为以下代码(请注意修改变化)
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>小视频</title>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/minigrid.js"></script>
<style>
/*全局样式*/
* { margin: 0; padding: 0;
}
a { text-decoration: none;
}
body { line-height: 1; background: #FFF;
}
body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%;
} /*主体居中*/
.container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto;
}
#photo-box .photo { display: block; /*float: left;*/
width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2;
}
#photo-box .photo .content { margin: 0 10px; font-size: 14px; color: #777; line-height: 20px; word-break: break-all;
} /*显示加载*/
#load-over { width: 95%; margin: 0 auto; border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999;
} </style>
<script>
//--获取视频缩略图--
function vload(obj) {
$(obj).removeAttr("poster"); var vimg = $("<img src="/static/imghwm/default1.png" data-src="/static/js/jquery-2.1.4.min.js" class="lazy" / alt="導入としてnode.jsを使用したWebサイト" >",{width:"100%"})[0];
captureImage(obj, vimg);
$(obj).after(vimg);
obj.remove();
minigrid('#photo-box', '.photo');
}; var scale = 0.8; //缩放
function captureImage(video, output) { //截图
try { var videocanvas = $("<canvas/>")[0];
videocanvas.width = video.videoWidth * scale;
videocanvas.height = video.videoHeight * scale;
videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
output.src = videocanvas.toDataURL("image/png"); delete videocanvas;
} catch(e) {
output.src = "/static/img/status.gif"; //--status.gif为加载动画
}
}; </script></head><body>
<!--"photo-box"为瀑布流 图片容器-->
<div id="photo-box" class="container">
<!--"photo"显示视频缩略图与图片信息-->
<a class="photo" target="_blank" href="#">
[站外图片上传中……(14)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
</div>
<div id="load-over" >
加载中... </div>
<script>
minigrid('#photo-box', '.photo', 20, null, function() { //更新后回调
});//瀑布流插件初始化
window.addEventListener('resize', function() {//窗口大小改变自动排版
minigrid('#photo-box', '.photo');
});
function b_load(page){
$("#load-over").text("加载...");
$.getJSON("/getvdojson?page=" + page, function(data) {
if(data.length > 0) { for(let i in data) { if(data[i]==null){
$("#load-over").text("加载完毕");
continue;
}
$("#photo-box").append(
$("<a/>", { class: "photo", href:"javascript:void(0)"
})
.append($("<video/>", { src: data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%"
}))
.append($("<div/>", { class: "content" }).html(data[i].name) )
.append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly"
}).css({width:"100%", border:"none", color: "#777", "padding-left": "10px", "padding-bottom": "10px"
}))
);
}
minigrid('#photo-box', '.photo');
}
});
}
page = 0; window.onscroll = function() { // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); //获取滚动条的位置
var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立说明滚动条已在最底部
{
page = page + 1; //传递页码
b_load(page);
}
};
b_load(page);
page=page+1;
b_load(page);
</script></body></html>[为什么不直接显示视频而偏偏搞个截图?--因为本人前写过类似小网站,发现如果后台插件获取视频截图麻烦,但直接显示视频也就是video标签的话会出现当加载大量视频时,出现卡顿,导致部分视频无法显示缩略图和无法播放的现象。]
运行项目重新访问http://127.0.0.1:5000/ 查看效果
第四步 添加点击播放功能：
1.修改index.html为以下代码(请注意修改变化)
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>小视频</title>
<script ></script>
<script src="/static/js/minigrid.js"></script>
<style>
/*全局样式*/
* { margin: 0; padding: 0;
}
a { text-decoration: none;
}
body { line-height: 1; background: #FFF;
}
body { font-family: "Microsoft Yahei"; background: #f4f4f4; min-width: 1000px; height: 100%;
} /*主体居中*/
.container { width: 98%; position: relative; margin-bottom: 20px; margin: 0 auto;
}
#photo-box .photo { display: block; /*float: left;*/
width: 225px; background-color: #fff; overflow: hidden; position: absolute; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid #e2e2e2;
}
#photo-box .photo .content { margin: 0 10px; font-size: 14px; color: #777; line-height: 20px; word-break: break-all;
} /*显示加载*/
#load-over { width: 95%; margin: 0 auto; border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding: 20px 0px; text-align: center; margin-bottom: 30px; color: #999;
} /*弹出播放页面样式*/
.mask { z-index: 999; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(229, 229, 229, .95); overflow: auto; padding-top: 30px;
}
.mask .close-layer { width: 56px; height: 56px; position: fixed; right: 14px; top: 0; cursor: pointer; z-index: 99995;
}
.mask .close-layer i { background: url(/static/img/btn_close_layer.png) 0 0 no-repeat; width: 36px; height: 36px; position: absolute; left: 50%; top: 50%; margin: -18px 0 0 -18px;
}
.pin-view-wrapper { width: 84%; margin: 0 auto; position: relative;
}
.pin-view-wrapper>.main-part, .pin-view-wrapper>.side-part { background-color: #fff; display: block; width: 100%;
}
.pin-view-wrapper>.main-part {}
.pin-view-wrapper>.side-part { margin-bottom: 15px;
}
ul { list-style: none outside none; padding-left: 0; margin: 0;
}
.main-part .item img { /*width: 100%;*/
display: block; margin: 0 auto; max-width: 100%;
}
.main-part .item {}
.lSSlideOuter .lSPager.lSGallery img { display: block; height: 100%; max-width: 100px; width: 100%; max-height: 100px;
}
.clearfix video { width: 640px; margin: 0 auto; height: 480px; display: block; background-color: #000;
} </style>
<script>
//--获取视频缩略图--
function vload(obj) {
$(obj).removeAttr("poster"); var vimg = $("<img / alt="導入としてnode.jsを使用したWebサイト" >",{width:"100%"})[0];
captureImage(obj, vimg);
$(obj).after(vimg);
obj.remove();
minigrid('#photo-box', '.photo');
}; var scale = 0.8; //缩放
function captureImage(video, output) { //截图
try { var videocanvas = $("<canvas/>")[0];
videocanvas.width = video.videoWidth * scale;
videocanvas.height = video.videoHeight * scale;
videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
output.src = videocanvas.toDataURL("image/png"); delete videocanvas;
} catch(e) {
output.src = "/static/img/status.gif"; //--status.gif为加载动画
}
}; </script></head><body>
<!--"photo-box"为瀑布流 图片容器-->
<div id="photo-box" class="container">
<!--"photo"显示视频缩略图与图片信息-->
<a class="photo" target="_blank" href="#">
[站外图片上传中……(15)] <div class="content">
欢迎来到XXX(公告或广告位) </div>
</a>
</div>
<div id="load-over" >
加载中... </div>
<!--遮罩层-->
<div id="vdo-mask" class="mask" hidden="hidden" style="display: none;">
<div class="close-layer" onclick="$(this).parent().fadeOut(300);$('#vdo-tBox').attr('src','');$('.side-part').html('')">
<i></i>
</div>
<div class="pin-view-wrapper">
<div class="side-part" style="text-align: center;padding: 10px 10px;font-size: 16px;font-weight: 600; color: #777;"></div>
<div class="main-part" style="padding: 10px 10px;">
<div class="item">
<div class="clearfix">
<video id="vdo-tBox" style="height: 600px; width: 100%;" controls="controls">
</video>
</div>
</div>
</div>
</div>
</div>
<script>
minigrid('#photo-box', '.photo', 20, null, function() { //更新后回调
});//瀑布流插件初始化
window.addEventListener('resize', function() {//窗口大小改变自动排版
minigrid('#photo-box', '.photo');
});
function b_load(page){
$("#load-over").text("加载...");
$.getJSON("/getvdojson?page=" + page, function(data) {
if(data.length > 0) { for(let i in data) { if(data[i]==null){
$("#load-over").text("加载完毕");
continue;
}
$("#photo-box").append(
$("<a/>", { class: "photo", href:"javascript:void(0)",
onclick:"$('#vdo-mask').show(100); $('#vdo-tBox').attr('src','"+data[i].url+"');$('.side-part').html('"+data[i].name+" <small>(发布:"+(data[i].mtime.split('.')[0]).replace("T"," ").replace("/","-")+")</small>')"
})
.append($("<video/>", { src: data[i].url , preload: "metadata", onloadeddata:'vload(this)',poster:"/static/img/status.gif",width: "100%"
}))
.append($("<div/>", { class: "content" }).html(data[i].name) )
.append($("<input/>",{type:"datetime-local",value:(data[i].mtime).split('.')[0],readonly:"readonly"
}).css({width:"100%", border:"none", color: "#777", "padding-left": "10px", "padding-bottom": "10px"
}))
);
}
minigrid('#photo-box', '.photo');
}
});
}
page = 0; window.onscroll = function() { // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var tops = $(document).scrollTop(); //获取滚动条的位置
var sctop = $(document).height() - $(window).height(); if(tops >= sctop) //成立说明滚动条已在最底部
{
page = page + 1; //传递页码
b_load(page);
}
}; //默认先加载
b_load(page);
page=page+1;
b_load(page);
//播放时阻止 滚动条 上下滚动 防止滚动加载
$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; if(document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
$(this).on(eventType, function(event) { // 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滚 || 向下滚
event.preventDefault();
}
});
});
};
$('.mask').scrollUnique();//事件绑定</script></body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上が導入としてnode.jsを使用したWebサイトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前ByDDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前ByDDD
ホットツール
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
