整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
通俗地说，前端工作用户可以直接看到，而后端开发工作主要在服务器端，用户无法直接看到。虽然前端开发和后端开发有很大的区别，但是为了更好的用户体验，他们的工作是相辅相成的。
网站前端指的是网站的页面制作或静态页面制作，是直接与用户交互的部分，包括你在浏览网页时接触到的所有视觉内容——从字体到颜色，以及下拉菜单和侧边栏。这些可视内容由浏览器解析、处理和呈现后呈现。
举个简单的例子，静态页面就像是固定布局的内容和图片。
之所以称之为静态，是因为这些内容是不能动态改变的，而动态改变则是指用户可以在后台进行上传、编辑、发布等操作来改变网页的内容。
简而言之，网站前端是指网站的页面制作，网站前端工作利用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小时内与您取得联系。
