整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通俗地說，前端工作用戶可以直接看到，而后端開發工作主要在服務器端，用戶無法直接看到。雖然前端開發和后端開發有很大的區別，但是為了更好的用戶體驗，他們的工作是相輔相成的。
網站前端指的是網站的頁面制作或靜態頁面制作，是直接與用戶交互的部分，包括你在瀏覽網頁時接觸到的所有視覺內容——從字體到顏色，以及下拉菜單和側邊欄。這些可視內容由瀏覽器解析、處理和呈現后呈現。
舉個簡單的例子，靜態頁面就像是固定布局的內容和圖片。
之所以稱之為靜態，是因為這些內容是不能動態改變的，而動態改變則是指用戶可以在后臺進行上傳、編輯、發布等操作來改變網頁的內容。
簡而言之，網站前端是指網站的頁面制作，網站前端工作利用html、css、js等計算機語言技術制作網站頁面的樣式、布局、動態效果和數據交互，即為網站前端。
網站后端是指網站的服務器端技術或后端技術。
為了使服務器、應用程序和數據庫能夠相互交互，我們也說過靜態頁面的缺點是不能動態改變頁面上的內容，實現一些代碼邏輯，比如我們需要實現用戶的注冊和登錄驗證，或者上傳圖片和發布文章等，這都需要后端來實現。
后端工作主要是做平臺部署、界面設計和功能實現。平臺部署主要是配置服務器；接口設計主要針對不同的服務設計相應的功能接口。通常，一個平臺有多個windows套接字。功能是實現具體的業務邏輯。
后端工程師需要有服務器端語言，如asp、java、jsp、php等，用于應用程序構建。采用Linux作為開發部署環境，網站后端技術還包括MySQL、sqlserver等數據庫，用于存儲后端數據。
現在我們明白了，網站的前端和后端工作是完全不同的。
(1) 呈現方式不同。
前端工作是創建網頁，后端工作是結合數據庫實現一些代碼的功能邏輯。
簡單來說，前端開發人員用一個按鈕在應用程序中創建一個界面，然后按下按鈕獲取客戶數據。后端開發人員編寫代碼，通過指出從數據庫中提取哪些數據并傳遞回前端(最后顯示在那里)，使按鈕工作。
(2)使用不同的技術
前端開發使用的技術包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js、Webpack、AngularJs、ReactJs、VueJs等技術。
以java為例，后端開發主要使用的技術包括但不限于Struts Spring MVC Hibernate HTTP協議Servlet Tomcat服務器。
VvvebJs是一個開源的網頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網頁樣式，內置jquery和Bootstrap，你可以拖拽相關的組件進行網頁的構建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網頁設計，需要的朋友不可錯過！
https://github.com/givanz/VvvebJs
默認情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進行擴展。
如下代碼：
<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>
<script src="libs/builder/components-widgets.js"></script>
<script>
$(document).ready(function()
{
Vvveb.Builder.init('demo/index.html', function() {
//load code after page is loaded here
Vvveb.Gui.init();
});
});
</script>
要初始化編輯器，調用Vvveb.Builder.init。第一個參數是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數是頁面加載完成時調用的函數，默認情況下調用編輯器Gui.init();
Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側面板中對組件進行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下
Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];
Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：
Vvveb.Components.extend("_base", "html/link", {
nodes: ["a"],
name: "Link",
properties: [{
name: "Url",
key: "href",
htmlAttr: "href",
inputtype: LinkInput
}, {
name: "Target",
key: "target",
htmlAttr: "target",
inputtype: TextInput
}]
});
在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網格行等。例如，TextInput擴展Input對象并定義為：
var TextInput=$.extend({}, Input, {
events: {
"keyup": ['onChange', 'input'],
},
setValue: function(value) {
$('input', this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
輸入還需要一個在編輯器html（在editor.html中）定義為<script>標簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
以上是借助瀏覽器翻譯工具，對官網的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關文檔！
VvvebJs是一個非常強大的網頁可視化生成構建工具，讓不懂網頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網頁出來，讓設計網頁就像設計圖片一樣，VvvebJs特別適合展示型網頁，甚至可以不需要代碼就能完成一項復雜的網頁設計，總體來說，VvvebJs是一個值得嘗試的工具！
光年后臺管理模板(Light Year Admin)是一個基于Bootstrap v3.3.7的后臺HTML模板。作為后端開發人員，自己在做一些簡單系統時，經常為了后臺的模板煩惱，因此今天向大家介紹一個對后端開發人員比較友好的管理模板，模板的作者本人也是一名開發人員，因此結合后端人員一些特點而開發的一套基于Bootstrap的管理模板，界面真的非常漂亮，而且功能也能滿足大多數人需求！
https://gitee.com/yinqi/Light-Year-Admin-Template
https://gitee.com/yinqi/Light-Year-Admin-Using-Iframe
作者考慮到不同人群的開發習慣和方式，一共分為兩半版本，一種是自帶tab標簽頁的iframe版，另一種則是普通的頁面版，可根據自己需要和業務需求選擇不同的版本。
網站主題切換，有默認白色，黑色，和漸變藍綠色的半透明三種。另外：logo、頂部和側邊欄可單獨調整顏色(黑色和半透明主題時選擇白色不變)。
增加主題切換，增加了很多css，如果你不需要有主題切換功能，可將多余的內容刪除掉。
主題切換并沒有存到cookie中，大家根據自己實際情況，做cookie存儲或者其他方式。
// 讀取cookie中的主題設置
var the_logo_bg=$.cookie('the_logo_bg'),
the_header_bg=$.cookie('the_header_bg'),
the_sidebar_bg=$.cookie('the_sidebar_bg'),
the_site_theme=$.cookie('the_site_theme');
console.log(the_logo_bg);
if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
if (the_site_theme) $('body').attr('data-theme', the_site_theme);
// 設置主題配色
setTheme=function(input_name, data_name) {
$("input[name='"+input_name+"']").click(function(){
$('body').attr(data_name, $(this).val());
$.cookie('the_'+input_name, $(this).val());
});
}
setTheme('site_theme', 'data-theme');
setTheme('logo_bg', 'data-logobg');
setTheme('header_bg', 'data-headerbg');
setTheme('sidebar_bg', 'data-sidebarbg');
項目在Light Year Admin的基礎上整理修改而來，用到了開源項目Bootstrap-Multitabs來實現多標簽頁，稍微做了一些修改。
普通版：
iframe版本：
一共有兩個版本，這里我們選擇帶有tab的iframe版本的進行截圖演示：
以上是部分頁面的截圖，已經包括了很多功能在里面，包括列表、表單、分步表單、主體配色、多級菜單、模態框、確認框、提示、登錄、404等！另附兩張普通版中的暗色系以及彩色系主題：
LightYearAdmin管理模板對后端人員可以說非常的友好了，筆者認為從配色、樣式、布局、操作等方面都非常友好，如果你正好缺一款屬于適合的模板，不妨試試看！
PS:相關文件在Gitee上都可以下載，這是純靜態模板，適合任何后端語言進行配合開發！大家也可以多多支持模板作者！謝謝！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
