You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

815 lines
40 KiB

<!DOCTYPE html>
<html lang="">
<head>
<title>公共开支结算系统 - EEE.DOG</title><meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">
<meta name="description" content="公共开支结算系统"/><meta name="keywords" content="iotcat,yimian,blog" /><link rel="alternate" href="/atom.xml" title="EEE.DOG"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=1.0.0" /><script>lang = ['zh', 'en'];</script>
<script type="text/javascript" src="https://cdn.yimian.xyz/ushio-js/ushio-head.min.js"></script>
<script>page.proj = 'iotcat/eee.dog-public';</script>
<!--<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/iziModal/iziModal.min.css" />-->
<!--<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/iziToast/iziToast.min.css" />-->
<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/shaky/shaky.css">
<link rel="canonical" href="https://www.eee.dog/tech/crown-place-erp.html"/>
<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/lib/fancybox/jquery.fancybox.css" /><script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });
</script>
<script type="text/javascript" async src="https://cdn.yimian.xyz/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.yimian.xyz/kayo/css/style.css?v=1.0.0" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-169276192-1" data-pjax></script>
<script>
pjax_google_analytics = () => {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-169276192-1');
}
</script><script id="baidu_push">
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
window.config = {"leancloud":"","toc":true,"fancybox":true,"pjax":{"enable":true,"loadingbar":true},"latex":true};
</script>
<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/atom.xml" title="EEE.DOG" type="application/atom+xml">
</head>
<body><div id="mobile-navbar" class="mobile-navbar">
<div class="mobile-header-logo">
<a href="/." class="logo">EEE.DOG</a>
</div>
<div class="mobile-navbar-icon">
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-bar">
<div class="progress"></div>
</div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
<ul class="mobile-menu-list"><div id="mobile-menu-Home">
<a href="/">
<li class="mobile-menu-item"><span class=".en">Home</span><span class=".zh">主页</span>
</li>
</a></div><div id="mobile-menu-Archives">
<a href="/archives/">
<li class="mobile-menu-item"><span class=".en">Archives</span><span class=".zh">归档</span>
</li>
</a></div><div id="mobile-menu-Categories">
<a href="/categories/">
<li class="mobile-menu-item"><span class=".en">Categories</span><span class=".zh">分类</span>
</li>
</a></div><div id="mobile-menu-Projects">
<a href="#">
<li class="mobile-menu-item"><span class=".en">Projects</span><span class=".zh">项目</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="https://fp.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">fp</span><span class=".zh">fp</span>
</a>
</li>
<li>
<a href="https://wiot.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">wiot</span><span class=".zh">wiot</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-Projects').click(function(){
$("#mobile-menu-Projects ul").toggle();
})</script>
</div><div id="mobile-menu-Map">
<a href="#">
<li class="mobile-menu-item"><span class=".en">Map</span><span class=".zh">导航</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="https://api.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">APIs</span><span class=".zh">接口</span>
</a>
</li>
<li>
<a href="https://img.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Imgs</span><span class=".zh">图库</span>
</a>
</li>
<li>
<a href="/">
<span class=".en">Imgbed</span><span class=".zh">图床</span>
</a>
</li>
<li>
<a href="https://share.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Fileshare</span><span class=".zh">文件分享</span>
</a>
</li>
<li>
<a href="https://monitor.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Monitor</span><span class=".zh">监控</span>
</a>
</li>
<li>
<a href="https://acg.watch/" target="_blank" rel="noopener">
<span class=".en">ACG.WATCH</span><span class=".zh">视频</span>
</a>
</li>
<li>
<a href="https://onedrive.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Oneindex</span><span class=".zh">网盘</span>
</a>
</li>
<li>
<a href="https://proxy.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">Proxy</span><span class=".zh">下载代理</span>
</a>
</li>
<li>
<a href="https://shorturl.yimian.xyz/" target="_blank" rel="noopener">
<span class=".en">ShortenURL</span><span class=".zh">短链</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-Map').click(function(){
$("#mobile-menu-Map ul").toggle();
})</script>
</div><div id="mobile-menu-About">
<a href="#">
<li class="mobile-menu-item"><span class=".en">About</span><span class=".zh">关于</span>
</li>
</a><ul class="sub-menu" style="display: none;">
<li>
<a href="/links/">
<span class=".en">links</span><span class=".zh">友链</span>
</a>
</li>
<li>
<a href="https://iotcat.me/" target="_blank" rel="noopener">
<span class=".en">Me</span><span class=".zh">关于我</span>
</a>
</li>
</ul>
<script>$('#mobile-menu-About').click(function(){
$("#mobile-menu-About ul").toggle();
})</script>
</div></ul>
</nav>
<div class="container" id="mobile-panel">
<header id="header" class="header"><div class="logo-wrapper">
<a href="/." class="logo">EEE.DOG</a>
</div>
<nav class="site-navbar"><ul id="menu" class="menu"><li class="menu-item">
<a id="menu-Home" class="menu-item-link" href="/">
<span class=".en">Home</span><span class=".zh">主页</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Archives" class="menu-item-link" href="/archives/">
<span class=".en">Archives</span><span class=".zh">归档</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Categories" class="menu-item-link" href="/categories/">
<span class=".en">Categories</span><span class=".zh">分类</span>
</a>
</li>
<li class="menu-item">
<a id="menu-Projects" class="menu-item-link" href="#">
<span class=".en">Projects</span><span class=".zh">项目</span>
</a>
<script>
$("#menu-Projects").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'Projects',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'fp':'fp')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://fp.yimian.xyz/");
else
window.location.href="https://fp.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'wiot':'wiot')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://wiot.yimian.xyz/");
else
window.location.href="https://wiot.yimian.xyz/";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
<li class="menu-item">
<a id="menu-Map" class="menu-item-link" href="#">
<span class=".en">Map</span><span class=".zh">导航</span>
</a>
<script>
$("#menu-Map").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'Map',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'APIs':'接口')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://api.yimian.xyz/");
else
window.location.href="https://api.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Imgs':'图库')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://img.yimian.xyz/");
else
window.location.href="https://img.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Imgbed':'图床')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("/");
else
window.location.href="undefined";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Fileshare':'文件分享')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://share.yimian.xyz/");
else
window.location.href="https://share.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Monitor':'监控')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://monitor.yimian.xyz/");
else
window.location.href="https://monitor.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'ACG.WATCH':'视频')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://acg.watch/");
else
window.location.href="https://acg.watch/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Oneindex':'网盘')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://onedrive.yimian.xyz/");
else
window.location.href="https://onedrive.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Proxy':'下载代理')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://proxy.yimian.xyz/");
else
window.location.href="https://proxy.yimian.xyz/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'ShortenURL':'短链')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://shorturl.yimian.xyz/");
else
window.location.href="https://shorturl.yimian.xyz/";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
<li class="menu-item">
<a id="menu-About" class="menu-item-link" href="#">
<span class=".en">About</span><span class=".zh">关于</span>
</a>
<script>
$("#menu-About").click(function(){
tips.question({
timeout: 20000,
close: false,
overlay: true,
displayMode: 'once',
//id: 'question',
zindex: 999,
title: 'About',
message: '',
position: 'center',
buttons: [
['<button><b>'+((page.tran.getLang() != 'zh')?'links':'友链')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("true" == "true")
pjax.loadUrl("/links/");
else
window.location.href="/links/";
}, true],
['<button><b>'+((page.tran.getLang() != 'zh')?'Me':'关于我')+'</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
if("undefined" == "true")
pjax.loadUrl("https://iotcat.me/");
else
window.location.href="https://iotcat.me/";
}, true],
['<button><b>close</b></button>', function (instance, toast) {
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true],
]
});
});
</script>
</li>
</ul></nav>
</header>
<main id="main" class="main">
<div class="content-wrapper">
<div id="content" class="content"><article class="post">
<header class="post-header">
<h1 class="post-title"><span class=".zh">公共开支结算系统</span><span class=".en" hidden>Public expenditure settlement system</span>
</h1>
<div class="post-meta">
<span class="post-time">
2019-09-22
</span><span class="post-category">
<a href="/categories/tech/">tech</a>
</span>
</div>
</header>
<style>.toc-level-2 > .toc-child {display: none !important; }</style>
<div class="post-toc" id="post-toc">
<h2 class="post-toc-title">Contents</h2>
<div class="post-toc-content">
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-功能介绍"><span class="toc-text">1.功能介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-系统架构"><span class="toc-text">2.系统架构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-前端"><span class="toc-text">2.1 前端</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-后端"><span class="toc-text">2.2 后端</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-数据库"><span class="toc-text">2.3 数据库</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-图片上传"><span class="toc-text">2.4 图片上传</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-用户系统"><span class="toc-text">2.5 用户系统</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-外观"><span class="toc-text">3. 外观</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-Function-introduction"><span class="toc-text">1. Function introduction</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-System-Architecture"><span class="toc-text">2. System Architecture</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-Frontend"><span class="toc-text">2.1 Frontend</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-Backend"><span class="toc-text">2.2 Backend</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-Database"><span class="toc-text">2.3 Database</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-Image-upload"><span class="toc-text">2.4 Image upload</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-User-System"><span class="toc-text">2.5 User System</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-Appearance"><span class="toc-text">3. Appearance</span></a></li></ol>
</div>
</div>
<script>var arr = [];var ts = '';if($('.post-toc-content').children().length>1){var el = '.post-toc-content';ts = ($(el).children('ol')[0].outerHTML);}else{var el = '.toc';};for(var i = 0; i < $(el).children('li').length; i++){arr.push($(el).children('li')[i].outerHTML);}; arr.splice(arr.length / 2, 0, '</span><span class=".en">');arr.unshift(ts);arr.unshift('<span class=".zh">');arr.push('</span>');$(el).html(arr.join(''));</script><div class="post-content"><span class=".zh">
<p>在英国留学与4个室友合租,为了更好的控制和监管公共支出,以及维持彼此之间的公共支出平衡,我利用迎新周三天时间设计并开发除了此ERP公共开支计划系统。希望此系统能够便捷接下来一年的生活,减少大家之间的矛盾,促使充满幸福感的公共支出项目持久化OωO</p>
</span>
<span class=".en">
<p>I studied in the UK and shared with 4 roommates. In order to better control and monitor public expenditures and maintain the balance of public expenditures between each other, I designed and developed this ERP public expenditure planning system during the welcome Wednesday. I hope that this system will make life easier for the next year, reduce conflicts between everyone, and promote the sustainability of public expenditure projects full of happiness OωO</p>
</span>
<a id="more"></a>
<script>
session.onload(function(){
if(page.tran.getLang() == 'en'){
tips.warning({
title: 'Caution',
position: 'topRight',
message: 'This page was translated by Machine!!',
buttons: [['<button>Show Original Page</button>', function (instance, toast) {
page.tran.setLang('zh');
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true]]
});
}
});
</script>
<span class=".zh">
<h2 id="1-功能介绍"><a href="#1-功能介绍" class="headerlink" title="1.功能介绍"></a>1.功能介绍</h2><ul>
<li>统计日均周均流水,让公共支出可视化</li>
<li>用户申报一次公共支出,并提交发票照片留证</li>
<li>监视各成员间支出不均衡程度,计算方差,并可视化显示</li>
<li>对比本周与上周的开支,给出增减比例</li>
<li>当存在一人支出超出均值阈值,并且存在至少一人支出少于均值阈值,则会邮件这两个人产生一次内部交易</li>
<li>当上例中收款人收到款项后,需要到平台确认收到</li>
<li>平台所有历史公共开支及发票可查</li>
</ul>
<h2 id="2-系统架构"><a href="#2-系统架构" class="headerlink" title="2.系统架构"></a>2.系统架构</h2><h3 id="2-1-前端"><a href="#2-1-前端" class="headerlink" title="2.1 前端"></a>2.1 前端</h3><p>前端基于一个网上找到的比特币网站平台模板,深度改造实现。值得一提的是,前端使用<a href="https://github.com/iotcat/ushio-js" target="_blank" rel="noopener">Ushio-js项目</a>作为安全及日志插件,并得到了<a href="https://ushio.cool" target="_blank" rel="noopener">Ushio</a>系统做背后支持。</p>
<h3 id="2-2-后端"><a href="#2-2-后端" class="headerlink" title="2.2 后端"></a>2.2 后端</h3><p>后端使用php语言编写。提供5个接口,分别提供获取账户事件,获取内部流通信息,获取公共支出信息,获取周报表,操作的功能。</p>
<p>mail系统使用<a href="https://www.eee.dog/tech/mail-api.html">Yimian Mail API</a>快速构建。</p>
<h3 id="2-3-数据库"><a href="#2-3-数据库" class="headerlink" title="2.3 数据库"></a>2.3 数据库</h3><p>数据库使用yimian-db/mysql。构建了三个表,分别用于存储流水,公共支出详情,内部流通。</p>
<h3 id="2-4-图片上传"><a href="#2-4-图片上传" class="headerlink" title="2.4 图片上传"></a>2.4 图片上传</h3><p>直接引用<a href="https://imgbed.yimian.xyz" target="_blank" rel="noopener">呓喵酱の图床</a>代码,少量改写。</p>
<h3 id="2-5-用户系统"><a href="#2-5-用户系统" class="headerlink" title="2.5 用户系统"></a>2.5 用户系统</h3><p>目前用额外网页简单实现,等待<a href="https://github.com/iotcat/ushio-auth" target="_blank" rel="noopener">ushio-auth项目</a>完成后统一整合。</p>
<h2 id="3-外观"><a href="#3-外观" class="headerlink" title="3. 外观"></a>3. 外观</h2><p>没啥可说的,摆图,自己看<br><img src="https://api.yimian.xyz/img/?path=imgbed/img_ed08c497_1080x6654_8_null_normal.jpeg" alt="imgbed_ed08c497"></p>
<p><img src="https://api.yimian.xyz/img/?path=imgbed/img_ea04ad82_1080x5082_8_null_normal.jpeg" alt="imgbed_ea04ad82"></p>
<p><img src="https://api.yimian.xyz/img/?path=imgbed/img_a8b3adb0_1080x2160_8_null_normal.jpeg" alt="imgbed_a8b3adb0"></p>
</span>
<span class=".en">
<h2 id="1-Function-introduction"><a href="#1-Function-introduction" class="headerlink" title="1. Function introduction"></a>1. Function introduction</h2><ul>
<li>Calculate the daily average weekly flow rate to visualize public expenditure</li>
<li>The user declares a public expenditure and submits the invoice photo certificate</li>
<li>Monitor the disequilibrium of expenditure among members, calculate the variance, and display it visually</li>
<li>Compare spending this week and last week, and give the percentage increase or decrease</li>
<li>When there is one person whose expenditure exceeds the average threshold, and there is at least one person whose expenditure is less than the average threshold, the two people will be emailed to generate an internal transaction</li>
<li>When the recipient receives the money in the above example, he needs to go to the platform to confirm receipt</li>
<li>All historical public expenditures and invoices on the platform can be checked</li>
</ul>
<h2 id="2-System-Architecture"><a href="#2-System-Architecture" class="headerlink" title="2. System Architecture"></a>2. System Architecture</h2><h3 id="2-1-Frontend"><a href="#2-1-Frontend" class="headerlink" title="2.1 Frontend"></a>2.1 Frontend</h3><p>The front end is based on a Bitcoin website platform template found on the Internet, and a deep transformation is realized. It is worth mentioning that the front end uses <a href="https://github.com/iotcat/ushio-js" target="_blank" rel="noopener">Ushio-js project</a> as a security and logging plug-in, and got <a href="https://ushio.cool" target="_blank" rel="noopener">Ushio</a> The system does behind the scenes.</p>
<h3 id="2-2-Backend"><a href="#2-2-Backend" class="headerlink" title="2.2 Backend"></a>2.2 Backend</h3><p>The backend is written in php language. Provides 5 interfaces, which respectively provide the functions of obtaining account events, obtaining internal circulation information, obtaining public expenditure information, obtaining weekly statements, and operating.</p>
<p>The mail system is quickly constructed using <a href="https://www.eee.dog/tech/mail-api.html">Yimian Mail API</a>.</p>
<h3 id="2-3-Database"><a href="#2-3-Database" class="headerlink" title="2.3 Database"></a>2.3 Database</h3><p>The database uses yimian-db/mysql. Three tables are constructed, which are used to store flow, public expenditure details, and internal circulation.</p>
<h3 id="2-4-Image-upload"><a href="#2-4-Image-upload" class="headerlink" title="2.4 Image upload"></a>2.4 Image upload</h3><p>Directly quote the code of <a href="https://imgbed.yimian.xyz" target="_blank" rel="noopener">呓喵酱の图床</a> with a small amount of rewriting.</p>
<h3 id="2-5-User-System"><a href="#2-5-User-System" class="headerlink" title="2.5 User System"></a>2.5 User System</h3><p>At present, it is simple to implement with additional web pages, waiting for the <a href="https://github.com/iotcat/ushio-auth" target="_blank" rel="noopener">ushio-auth project</a> to complete the unified integration.</p>
<h2 id="3-Appearance"><a href="#3-Appearance" class="headerlink" title="3. Appearance"></a>3. Appearance</h2><p>Nothing to say, show the picture, see for yourself<br><img src="https://api.yimian.xyz/img/?path=imgbed/img_ed08c497_1080x6654_8_null_normal.jpeg" alt="imgbed_ed08c497"></p>
<p><img src="https://api.yimian.xyz/img/?path=imgbed/img_ea04ad82_1080x5082_8_null_normal.jpeg" alt="imgbed_ea04ad82"></p>
<p><img src="https://api.yimian.xyz/img/?path=imgbed/img_a8b3adb0_1080x2160_8_null_normal.jpeg" alt="imgbed_a8b3adb0"></p>
</span>
</div>
<div class="post-copyright">
<p class="copyright-item">
<span>Author: </span>
<a href="https://iotcat.me/" target="_blank" rel="noopener">IoTcat</a>
</p>
<p class="copyright-item">
<span>Link: </span>
<a href="https://www.eee.dog/tech/crown-place-erp.html">https://www.eee.dog/tech/crown-place-erp.html</a>
</p>
<p class="copyright-item">
<span>License: </span><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>
</p>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/crown-place/">crown-place</a>
<a href="/tags/uk/">uk</a>
<a href="/tags/liverpool/">liverpool</a>
<a href="/tags/erp/">erp</a>
<a href="/tags/system/">system</a>
</div>
<nav class="post-nav"><a class="prev" href="/life/liverpool-accom-inves.html">
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default"><span class=".zh">Liverpool 学生公寓条件调研</span><span class=".en">Liverpool student apartment conditions survey</span></span>
<span class="prev-text nav-mobile">Prev</span>
</a>
<a class="next" href="/tech/smart-home.html">
<span class="next-text nav-default"><span class=".zh">在家中部署智慧家庭系统</span><span class=".en">Deploy a smart home system at home</span></span>
<span class="prev-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i>
</a>
</nav></footer>
</article><script>$(()=>{var p = window.location.pathname;setTimeout(()=>{if(window.location.pathname == p)tips.show({
title: 'tips',
position: 'topRight',
message: ((page.tran.getLang() == 'zh')?"此文章预计阅读 3 分钟哦~": "Read this page will spend around 6 minutes~")
})}, 6000)})</script>
</div><div class="comments" id="comments"><div id="vcomments"></div>
</div></div>
</main>
<footer id="footer" class="footer">
<script>
page_obj = {
layout: "post",
comments: "true"
};
</script><div class="social-links"><a href="mailto:i@iotcat.me" class="iconfont icon-email" title="email"></a>
<a href="https://github.com/iotcat" target="_blank" rel="noopener" class="iconfont icon-github" title="github"></a>
<a href="/atom.xml" class="iconfont icon-rss" title="rss"></a>
</div><div class="copyright"><span id="/tech/crown-place-erp.html" class="statistic leancloud_visitors">
<em>Visitors </em> <i class="leancloud-visitors-count">??</i>
<span class="division"> |</span>
<em>Reading </em> 6 min
</span>
<br>
<span class="power-by">
Powered by <a class="hexo-link" href="" onClick="page.showUshio();">Ushio</a>
</span>
<span class="division">|</span>
<span class="theme-info">
Theme -
<a class="theme-link" href="https://github.com/iotcat/kayo" target="_blank" rel="noopener">Kayo</a>
</span>
<span class="copyright-year">&copy;2018 - 2020<span class="heart shaky">
<i class="iconfont icon-heart"></i>
</span>
<span class="author">IoTcat</span>
</span>
</div>
</footer>
<div class="back-to-top" id="back-to-top">
<i class="iconfont icon-up"></i>
</div>
</div>
<script src="https://cdn.yimian.xyz/kayo/lib/valine/valine.min.js" data-pjax></script>
<style>
/* 背景图片 */
#veditor {
background-image: url(https://cdn.yimian.xyz/img/blog/comments_bg.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: rgba(255, 255, 255, 0);
resize: vertical
}
/* 头像旋转 */
img.vimg {
transition: all 1s /* 旋转时间为 1s */
}
img.vimg:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/* 盒子模式 */
#vcomments .vcards .vcard {
padding: 15px 20px 0 20px;
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, .12);
transition: all .3s
}
#vcomments .vcards .vcard:hover {
box-shadow: 0 0 8px 3px rgba(0, 0, 0, .12)
}
#vcomments .vcards .vcard .vh .vcard {
border: none;
box-shadow: none;
}
</style>
<script>
pjax_valine = () => {
$.get('https://auth.yimian.xyz/getEmailHash.php', function(res){
if(page.tran.getLang() == 'zh'){
var lan = 'zh-CN';
var metaPlaceholder = {"nick":"昵称/QQ号","mail":"邮箱(完全保密)"};
var tagMeta = ["博主","小伙伴","访客"];
var placeholder = "填写邮箱可以及时收到回复哦(●'◡'●)";
}else{
var lan = 'en';
var metaPlaceholder = {"nick":"Nickname/QQ","mail":"EMail"};
var tagMeta = ["Master","Friend","Visitor"];
var placeholder = "Leave some comments here (●'◡'●)";
}
new Valine({
el: '#vcomments',
appId: 'eVzpK7EyT6OafJvXWIRminWT-gzGzoHsz',
appKey: '2qjuEBgVE0BscTQnTmoS9roU',
master: '9b616ff4cd6c305e5970bee7b1bd9b1f', //博主邮箱md5
tagMeta: tagMeta, //标识字段名
friends: res, //["b6ddef7c7e1c647e7767afeacdfb7b64","46dd4e6fef4f9591736c4723a965ca2e","6132d77f9f0ae060bc733090991acecb","3e00e104b79d7c6e866c6b23c6ba6dfc"], //小伙伴邮箱Md5
metaPlaceholder: metaPlaceholder,
placeholder: placeholder,
lang: lan,
path: window.location.pathname,
enableQQ: true,
visitor: true,
emojiCDN: '//i0.hdslb.com/bfs/emote/',
emojiMaps: {
"tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
"tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
"tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
"tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
"tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
"tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
"tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
"tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
"tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
"tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
"tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
"tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
"tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
"tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
"tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
"tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
"tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
"tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
"tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
"tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
"tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
"tv_打脸": "56ab10b624063e966bfcb76ea5dc4794d87dfd47.png",
"tv_抓狂": "fe31c08edad661d63762b04e17b8d5ae3c71a757.png",
"tv_抠鼻": "c666f55e88d471e51bbd9fab9bb308110824a6eb.png",
"tv_斜眼笑": "911f987aa8bc1bee12d52aafe62bc41ef4474e6c.png",
"tv_无奈": "ea8ed89ee9878f2fece2dda0ea8a5dbfe21b5751.png",
"tv_晕": "5443c22b4d07fb1907ccc610c8e6db254f2461b7.png",
"tv_流汗": "cead1c351ab8d79e9f369605beb90148db0fbed3.png",
"tv_流泪": "7e71cde7858f0cd50d74b0264aa26db612a8a167.png",
"tv_流鼻血": "c32d39db2737f89b904ca32700d140a9241b0767.png",
"tv_点赞": "f85c354995bd99e28fc76c869bfe42ba6438eff4.png",
"tv_生气": "26702dcafdab5e8225b43ffd23c94ac1ff932654.png",
"tv_生病": "8b0ec90e6b86771092a498c54f09fc94621c1900.png",
"tv_疑问": "0793d949b18d7be716078349c202c15ff166f314.png",
"tv_白眼": "c1d59f439e379ee50eef488bcb5e5378e5044ea4.png",
"tv_皱眉": "72ccad6679fea0d14cce648b4d818e09b8ffea2d.png",
"tv_目瞪口呆": "0b8cb81a68de5d5365212c99375e7ace3e7891b7.png",
"tv_睡着": "8b196675b53af58264f383c50ad0945048290b33.png",
"tv_笑哭": "1abc628f6d4f4caf9d0e7800878f4697abbc8273.png",
"tv_腼腆": "89712c0d4af73e67f89e35cbc518420380a7f6f4.png",
"tv_色": "61822c7e9aae5da76475e7892534545336b23a6f.png",
"tv_调侃": "4bc022533ef31544ca0d72c12c808cf4a1cce3e3.png",
"tv_调皮": "b9c41de8e82dd7a8515ae5e3cb63e898bf245186.png",
"tv_鄙视": "6e72339f346a692a495b123174b49e4e8e781303.png",
"tv_闭嘴": "c9e990da7f6e93975e25fd8b70e2e290aa4086ef.png",
"tv_难过": "87f46748d3f142ebc6586ff58860d0e2fc8263ba.png",
"tv_馋": "fc7e829b845c43c623c8b490ee3602b7f0e76a31.png",
"tv_鬼脸": "0ffbbddf8a94d124ca2f54b360bbc04feb6bbfea.png",
"tv_黑人问号": "45821a01f51bc867da9edbaa2e070410819a95b2.png",
"tv_鼓掌": "1d21793f96ef4e6f48b23e53e3b9e42da833a0f6.png"
// ... 更多表情
}
});
});
};
</script><script type="text/javascript" src="https://cdn.yimian.xyz/ushio-js/ushio-footer.min.js"></script>
<script>
session.onload(function(){
if(session.get('group') != 'anonymous'){
function insertNick(){
if($('.vnick').length){
$('.vnick').val(session.get('nickname'));
}else{
setTimeout(insertNick, 500);
}
}
function insertMail(){
if($('.vmail').length){
$('.vmail').val(session.get('email'));
}else{
setTimeout(insertMail, 500);
}
}
if(session.get('nickname')){
insertNick();
}
if(session.get('email')){
insertMail();
}
}
});
</script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/slideout/slideout.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/iziToast/iziToast.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/iziModal/iziModal.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/lib/mermaid/mermaid.min.js"></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/js/src/kayo.js?v=1.0.0" data-pjax></script>
<script type="text/javascript" src="https://cdn.yimian.xyz/kayo/js/src/kayo-no-pjax.js?v=1.0.0"></script>
<script src="https://cdn.yimian.xyz/kayo/lib/pjax/pjax.min.js"></script>
<script>window.pjax = new Pjax({
elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"])',
selectors: ["head title, #main", "#footer"],
});/* 第一次载入页面加载的函数 */
pjax_ini = () => {
/* 关闭侧边栏 */
window.slideout.close();
if(page_obj.comments == "true"){pjax_valine();}pjax_google_analytics();mermaid.init(undefined, $(".mermaid"));};
/* 第一次 执行 */
pjax_ini();var loadingBar = document.querySelector(".loading-bar");
var progress = document.querySelector(".loading-bar .progress");
var timer = null;
// Pjax 开始时执行的函数
var loadingbarStart = function () {
// 进度条默认已经加载 20%
var loadingBarWidth = 20;
// 进度条的最大增加宽度
var MAX_LOADING_WIDTH = 95;
// 显示进度条
loadingBar.classList.add("loading");
// 初始化进度条的宽度
progress.style.width = loadingBarWidth + "%";
clearInterval(timer);
timer = setInterval(function () {
// 进度条的增加速度(可以改为一个随机值,显得更加真实)
loadingBarWidth += 3;
// 当进度条到达 95% 后停止增加
if (loadingBarWidth > MAX_LOADING_WIDTH) {
loadingBarWidth = MAX_LOADING_WIDTH;
}
progress.style.width = loadingBarWidth + "%";
}, 500);
};
// Pjax 完成之后执行的函数
var loadingbarStop = function () {
clearInterval(timer);
progress.style.width = "100%";
loadingBar.classList.remove("loading");
setTimeout(function () {
progress.style.width = 0;
}, 400);
};/* Pjax 开始时,重新加载的函数 */
document.addEventListener("pjax:send", function () {loadingbarStart();
});
/* Pjax 完成后,重新加载的函数 */
document.addEventListener("pjax:complete", function () {
/* 重载带data-pjax的script,或者.pjax-reload属性内容的script */
$("script[data-pjax], .pjax-reload script").each(function () {
$(this).parent().append($(this).remove());
});
pjax_ini();loadingbarStop();
page.tran.setLang();
});
/* Pjax 出错,执行的函数 */
document.addEventListener("pjax:error", function () {
});</script>
</body>
</html>