Html+CSS+JS响应式开发-企业站（gulp篇）_js和css文件怎么添加响应头-程序员宅基地
技术标签： 前端自动化构建 css gulp html javascript
一、gulp开发环境搭建
gulp环境搭建，之前已整理过，这就不细讲，地址：前端自动化构建基础，以及相关插件使用（gulp篇）_觉醒法师的博客-程序员宅基地
二、编辑工具
这里使用EditPlus超文本编辑器，如果想锻炼语法和熟记单词，可以手敲。想快速开发，可以在EditPlus中安装zen coding，使用Emmet语法，也可以媲美其他高级IDE工具。
Emmet语法地址：前端开发中，使用Emmet语法提升开发效率_觉醒法师的博客-程序员宅基地
三、基本架构
3.1 Gulp项目目录
这部分，前端自动化构建基础中已讲过，不明白同学可以先看看这篇文章。
3.2 项目资源目录
assets资源目录，创建对应的css，图片，js和html文件。
template目录中，创建公共模板，这里创建是公共头部header.html，公共尾部footer.html和公共侧边栏aside.html，首页公共盒子模块indexBox.html。
3.3 页面结构分析
公共头部文件，每个页面都是一样的，这部分将放到header.html模块中。
公共尾部文件，这部分将放到footer.html模块中。
列表页和文章详情页，左侧和右侧上面部分是相同的，这部分将放到aside.html模块中。
如上图，首页中五个区域有共同部分组件，盒子标题，更多，以及内容三块，这三部分将放到indexBox.html模块中。
四、首页代码编写
4.1 header.html模块
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{
{title}} - 网站名称</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<dataList>
{
"navList": [
{"name": "首页", "enName": "home", "url": "index.html"},
{"name": "新闻动态", "enName": "news", "url": "news.html"},
{"name": "旅游项目", "enName": "project", "url": "javascript:;"},
{"name": "服务项目", "enName": "services", "url": "javascript:;"},
{"name": "公司产业", "enName": "entertainment", "url": "javascript:;"},
{"name": "联系我们", "enName": "contact us", "url": "javascript:;"},
]
}
</dataList>
<div class="navigation" id="navBox">
<div class="container">
<ul class="list">
{
{each navList as item i}}
<li {
{if nIndex==i }}class="act"{
{/if}}>
<a href="{
{item.url}}">{
{item.name}}<span class="en">{
{item.enName}}</span></a>
</li>
{
{/each}}
</ul>
</div>
</div>
{
{if banner}}
<div class="banner-box">
<div class="container">
<img src="{
{banner}}" alt="">
</div>
</div>
{
{/if}}4.2 footer.html模块
<div class="footer">
<div class="container">
<p>Copyright @ 2011-2012 XXXX度假村有限公司 版权所有 All Right Reserved. 苏ICP备XXX号</p>
<p>地址：XXXX 邮编：211300 电话：025-XXXXXXXX</p>
</div>
</div>
</body>
</html>4.3 indexBox.html模块
<div class="index-box">
<div class="title">
<a href="javascript:;">更多</a>
<h3>{
{title}}</h3>
</div>
<div class="content">
{
{# content}}
</div>
</div>4.4 index.html页面及模块引入
<template src="header.html"
title="首页"
nIndex="0"
banner="images/index_banner.jpg"
></template>
<div class="main-box">
<div class="container">
<div class="first-row-box">
<template src="indexBox.html" title="最新活动">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="旅游项目">
<fragment id="content">
内容
</fragment>
</template>
</div>
<div class="second-row-box">
<template src="indexBox.html" title="旅游咨询">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="贵宾服务">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="招聘信息">
<fragment id="content">
内容
</fragment>
</template>
</div>
</div>
</div>
<template src="footer.html"></template>这样首页基础架构就出现了，是不是看上去so easy，代码简洁，各模块清晰。现在首页是这样的，如下所示：
4.5 页面优化，添加CSS样式
现在咱们在css目录，添加style.scss样式文件（现在主流预编译工具有sass，less，styuls，可去了解自己熟悉的编译工具），在header.html模块中title标签后面，引入样式文件。
<link rel="stylesheet" href="css/style.css" />头部、盒子、尾部样式代码
/*样式文件*/
*{ margin: 0; padding: 0; font-size: 12px; font-family: 'Microsoft YaHei', sans-serif; }
.container{ width: 980px; margin: 0 auto; }
.clearfix{ clear: both; }
.navigation{ background: #017E3A;
ul.list{ width: 100%; display: table; height: 54px;
li{ width: 16%; display: table-cell; vertical-align: middle; text-align: center;
a{ font-size: 16px; color: #FFFFFF; text-decoration: none;
span.en{ display: block; }
}
&.act{
background: linear-gradient(top, #D6FF69, #6EB101);
background: -webkit-linear-gradient(top, #D6FF69, #6EB101);
border-radius: 3px;
text-shadow: 0 0 blur #000
}
}
}
}
.banner-box{ padding: 10px 0;
img{ width: 100%; }
}
.footer{
background: #017E3A;
font-size: 12px;
color: #FFFFFF;
line-height: 2;
text-align: center;
padding: 20px 0;
}
.index-box{ width: 100%;
.title{
padding: 10px 15px;
background: linear-gradient(top, #96EA01, #7BC500);
background: -webkit-linear-gradient(top, #96EA01, #7BC500);
border-radius: 3px;
h3{ font-size: 14px; color: #FFFFFF; }
a{ font-size: 12px; color: #FFFFFF; text-decoration: none; float: right; }
}
.content{ padding: 10px 0; }
}
.main-box{
.first-row-box, .second-row-box{
.index-box{ margin-left: 2%; margin-bottom: 10px; float: left;
&:first-child{ margin-left: 0; }
}
}
.first-row-box{
.index-box{ width: 49%; }
}
.second-row-box{
.index-box{ width: 32%; }
}
}添加完样式后，如下图所示:
4.6 首页其他部分代码及样式
略..... 这部分比较简单，大家自行补充即可。
五、新闻列表页
5.1 aside.html模块
<dataList>
{
"menuList": [
{"name": "园区新闻", "url": "javascript:;"},
{"name": "旅游咨询", "url": "javascript:;"},
{"name": "供求信息", "url": "javascript:;"},
]
}
</dataList>
<div class="aside-container">
<div class="container">
<div class="aside-menu">
<h2>{
{title}}</h2>
<ul class="list">
{
{each menuList as item}}
<li><a href="{
{item.url}}">>> {
{item.name}}</a></li>
{
{/each}}
</ul>
</div>
<div class="aside-content">
<div class="position">
<h3>{
{title}}</h3>
<p class="right">
<span>当前位置</span> >
<a href="javascript:;">首页</a> >
<span>{
{title}}</span>
</p>
<div class="clearfix"></div>
</div>
<div class="content">
{
{# content}}
</div>
</div>
<div class="clearfix"></div>
</div>
</div>5.2 列表页
<template src="header.html" title="新闻" nIndex="1" banner="images/inner_banner.jpg"></template>
<template src="aside.html" title="新闻中心">
<fragment id="content">
内容
</fragment>
</template>
<template src="footer.html"></template>5.3 aside部分样式
.aside-container{ padding-bottom: 20px;
.aside-menu{
width: 20%;
border: 1px solid #cfff9f;
background: -webkit-linear-gradient(top, #ffffff, #d8ffae);
float: left;
h2{
font-size: 20px;
color: #a48d66;
font-weight: normal;
padding: 12px 0;
text-align: center;
border-bottom: 2px solid #017e3a;
}
ul.list{ padding: 10px 0;
li{ list-style: none; text-align: center; padding: 10px 0;
a{ font-size: 14px; color: #54594f; text-decoration: none; }
}
}
}
.aside-content{ width: 78%; float: right;
.position{ padding: 12px 0; border-bottom: 2px solid #017e3a; color: #429361;
h3{ font-size: 20px; font-weight: normal; float: left; }
p.right{ float: right;
a{ color: #429361; text-decoration: none; }
}
}
.content{ padding: 15px 0; }
}
}列表页样式如下：
5.4 添加列表内容和样式
<template src="header.html" title="新闻" nIndex="1" banner="images/inner_banner.jpg"></template>
<dataList>
{
"newsList": [
{
"title": "望玉岛一日游方案",
"thumb": "images/img_01.jpg",
"content": "活动主题：放飞心情，走进自然 活动地点：望玉岛度假村 行程特点：领略望玉"
+"岛谷激情，感受大山文化品农家菜。行程安排； 第一日 ： 12：00 —————— "
+"13：00 前往望玉岛安排午餐及住宿事宜13：30 ———— 17：30 宾客就近观赏景……。",
"url": ""
},
{
"title": "望玉岛一日游方案",
"thumb": "images/img_02.jpg",
"content": "活动主题：放飞心情，走进自然 活动地点：望玉岛度假村 行程特点：领略望玉"
+"岛谷激情，感受大山文化品农家菜。行程安排； 第一日 ： 12：00 —————— "
+"13：00 前往望玉岛安排午餐及住宿事宜13：30 ———— 17：30 宾客就近观赏景……。",
"url": ""
},
{
"title": "望玉岛一日游方案",
"thumb": "images/img_03.jpg",
"content": "活动主题：放飞心情，走进自然 活动地点：望玉岛度假村 行程特点：领略望玉"
+"岛谷激情，感受大山文化品农家菜。行程安排； 第一日 ： 12：00 —————— "
+"13：00 前往望玉岛安排午餐及住宿事宜13：30 ———— 17：30 宾客就近观赏景……。",
"url": ""
}
]
}
</dataList>
<template src="aside.html" title="新闻中心">
<fragment id="content">
<div class="news-list-box">
{
{each newsList as item}}
<dl class="item">
<dd class="tit">{
{item.title}}</dd>
<dt><img src="{
{item.thumb}}" alt=""></dt>
<dd>
{
{item.content}} <a href="article.html">[详情情况]</a>
</dd>
</dl>
{
{/each}}
</div>
</fragment>
</template>
<template src="footer.html"></template>.news-list-box{
dl.item{ border: 1px solid #017e3a; margin-bottom: 20px;
&:after{ display: block; content: ''; clear: both; }
dt, dd{ padding: 10px; box-sizing: border-box; }
dt{ width: 20%; float: left;
img{ width: 100%; }
}
dd{ width: 80%; font-size: 12px; color: #999999; float: right;
a{ color: #89c524; text-decoration: none; }
}
dd.tit{
width: 100%;
font-size: 14px;
color: #429361;
border-bottom: 1px solid #017e3a;
padding: 6px 10px;
float: none;
}
}
}现在列表页是这样的，如下图：
六、详情页
在列表页中，已将公共部分完成，只需添加内容部分即可。
<template src="header.html" title="新闻-详情" nIndex="1" banner="images/inner_banner.jpg"></template>
<template src="aside.html" title="新闻中心">
<fragment id="content">
<div class="article-box">
<div class="title">
<h3>望玉岛度假村一日游活动方案</h3>
<p class="intro">
<span class="read">阅读数：180</span>
<span class="date">加入时间：2015-03</span>
</p>
</div>
<div class="content">
<p>活动主题：放飞心情，走进自然</p>
<p>活动地点：望玉岛度假村</p>
<p>行程特点：领略望玉岛谷激情，感受大山文化，品农家菜</p>
<p>行程安排：</p>
<p>第一日：12：00 —— 13：00 前往望玉岛安排午餐及住宿事宜。</p>
<p>13：30 —— 17：30宾客就近观赏景观拍照，可进行采摘或放风筝（酒店提供）</p>
<p>17：30 —— 20：30 晚宴开始</p>
</div>
</div>
</fragment>
</template>
<template src="footer.html"></template>.article-box{
.title{ color: #a48d66;
h3{ font-size: 18px; text-align: center; border-bottom: 1px dashed #95c83d; padding: 10px 0px; }
p.intro{ text-align: center; padding: 10px 0 20px; font-size: 12px;
span{ display: inline-block; padding: 0 5px; }
}
}
.content{ color: #a48d66; font-size: 12px; line-height: 1.8; }
}现在详情页是这样的，如下图：
七、实现响应式布局
以上简单介绍了首页、新闻列表页、详情页的开发过程，现在对每个部分的样式，通过媒体查询进行修饰下，即可实现在不同屏幕上的响应式布局了。
7.1 header.html模块样式
html部分修改：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{
{title}} - 网站名称</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<dataList>
{
"navList": [
{"name": "首页", "enName": "home", "url": "index.html"},
{"name": "新闻动态", "enName": "news", "url": "news.html"},
{"name": "旅游项目", "enName": "project", "url": "javascript:;"},
{"name": "服务项目", "enName": "services", "url": "javascript:;"},
{"name": "公司产业", "enName": "entertainment", "url": "javascript:;"},
{"name": "联系我们", "enName": "contact us", "url": "javascript:;"},
]
}
</dataList>
<div class="navigation" id="navBox">
<div class="container">
<div class="mobile-menu">
<span></span>
<span></span>
<span></span>
</div>
<ul class="list">
{
{each navList as item i}}
<li {
{if nIndex==i}}class="act"{
{/if}}>
<a href="{
{item.url}}">{
{item.name}}<span class="en">{
{item.enName}}</span></a>
</li>
{
{/each}}
</ul>
</div>
</div>
{
{if banner}}
<div class="banner-box">
<div class="container">
<img src="{
{banner}}" alt="">
</div>
</div>
{
{/if}}css部分修改：
@media screen and (max-width: 980px){
body{ padding-top: 60px; }
}
.container{ width: 980px; margin: 0 auto;
@media screen and (max-width: 980px){
&{ width: 100%; box-sizing: border-box; padding: 0 15px; }
}
}
.clearfix{ clear: both; }
.navigation{ background: #017E3A;
ul.list{ width: 100%; display: table; height: 54px;
li{ width: 16%; display: table-cell; vertical-align: middle; text-align: center;
a{ font-size: 16px; color: #FFFFFF; text-decoration: none;
span.en{ display: block; }
}
&.act{
background: linear-gradient(top, #D6FF69, #6EB101);
background: -webkit-linear-gradient(top, #D6FF69, #6EB101);
border-radius: 3px;
text-shadow: 0 0 blur #000
}
}
}
.mobile-menu{ display: none; width: 30px; position: absolute; top: 50%; right: 15px; margin-top: -10px;
span{ display: block; width: 100%; height: 4px; background: #FFFFFF; margin-bottom: 4px; }
}
@media screen and (max-width: 980px){
&{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 99;
&:before{
display: block;
content: '';
width: 210px;
height: 60px;
background: #017E3A;
position: fixed;
top: 0;
left: 0;
z-index: 97;
}
ul.list{
display: block;
width: 200px;
height: 100%;
background: #FFFFFF;
border: 0;
box-sizing: border-box;
padding-top: 60px;
position: fixed;
left: 0;
right: 0;
z-index: 95;
li{ display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid #6EB101;
a{ color: #89c524; }
&.act{ border-bottom-color: #FFFFFF;
a{ color: #FFFFFF; }
}
}
}
.mobile-menu{ display: block; }
}
}
}现在页面如下图所示：
7.2 footer.html模块样式
这里底部模块比较简单，屏幕大小变化后，影响并不大，这里不作优化。
7.3 首页样式
css部分修改：
.main-box{
.first-row-box, .second-row-box{
.index-box{ margin-left: 2%; margin-bottom: 10px; float: left;
&:first-child{ margin-left: 0; }
}
}
.first-row-box{
.index-box{ width: 49%; }
}
.second-row-box{
.index-box{ width: 32%; }
}
@media screen and (max-width: 980px){
.second-row-box{
.index-box{ width: 49%;
&:nth-child(2n+1){ margin-left: 0; }
}
}
}
@media screen and (max-width: 640px){
.first-row-box, .second-row-box{
.index-box{ width: 100%; margin: 0 0 10px;}
}
}
}现在样式在980px以下，以及640px以下样式如下图：
一般要求不高的项目，只提供PC端页面，这时前端可以自由发挥，在较小屏幕上显示时，调整比较美观即可，一般有美术功底的前端会比较占优势。要求较高的项目，提供PC和移动端设计稿时，也可以通过媒体查询，在不同尺寸范围内，显示不同布局。
7.4 aside.html模块样式
CSS部分修改：
.aside-container{ padding-bottom: 20px;
.aside-menu{
width: 20%;
border: 1px solid #cfff9f;
background: -webkit-linear-gradient(top, #ffffff, #d8ffae);
float: left;
h2{
font-size: 20px;
color: #a48d66;
font-weight: normal;
padding: 12px 0;
text-align: center;
border-bottom: 2px solid #017e3a;
}
ul.list{ padding: 10px 0;
li{ list-style: none; text-align: center; padding: 10px 0;
a{ font-size: 14px; color: #54594f; text-decoration: none; }
}
}
}
.aside-content{ width: 78%; float: right;
.position{ padding: 12px 0; border-bottom: 2px solid #017e3a; color: #429361;
h3{ font-size: 20px; font-weight: normal; float: left; }
p.right{ float: right;
a{ color: #429361; text-decoration: none; }
}
}
.content{ padding: 15px 0; }
}
@media screen and (max-width: 980px){
.aside-menu, .aside-content{ width: 100%; }
.aside-menu{
ul.list{ width: 100%; overflow-x: scroll; white-space: nowrap;
li{ display: inline-block; vertical-align: middle; padding: 0 10px; }
}
}
.aside-content{
.position{ display: none; }
}
}
}现在页面如下图：
这部分，是将二级菜单横向处理了，如果二级菜单过多，横向显示，超出部分会自动出现滚动条，可左右滑动查看。仁者见仁智者见智，大家有更好方式可自行修改。
7.5 新闻列表页样式
CSS样式修改：
.news-list-box{
dl.item{ border: 1px solid #017e3a; margin-bottom: 20px;
&:after{ display: block; content: ''; clear: both; }
dt, dd{ padding: 10px; box-sizing: border-box; }
dt{ width: 20%; float: left;
img{ width: 100%; }
}
dd{ width: 80%; font-size: 12px; color: #999999; line-height: 1.8; float: right;
a{ color: #89c524; text-decoration: none; }
}
dd.tit{
width: 100%;
font-size: 14px;
color: #429361;
border-bottom: 1px solid #017e3a;
padding: 6px 10px;
float: none;
}
}
@media screen and (max-width: 980px){
dl.item{
dd, dt{ float: none; width: 100%; }
dt{ text-align: center;
img{ width: auto; max-width: 100%; }
}
}
}
}页面如下图所示：
PC端图文是左右显示，小屏上左右显示不满足情况下，可以改为竖向显示。
7.6 详情页样式
详情页内容不多，这就不作说明。
八、JS实现移动端导航显示与隐藏
这里可以在js目录里，创建一个公共的common.js，common.js之前要引入jquery，到header.html模块中。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>html代码修改，添加对应ID选择器：
<div class="navigation" id="navBox">
<div class="container">
<div class="mobile-menu" id="mobileMenu">
<span></span>
<span></span>
<span></span>
</div>
<ul class="list" id="navList">
{
{each navList as item i}}
<li {
{if nIndex==i}}class="act"{
{/if}}>
<a href="{
{item.url}}">{
{item.name}}<span class="en">{
{item.enName}}</span></a>
</li>
{
{/each}}
</ul>
</div>
</div>JS代码：
$(function(){
$(document).on('click', '#mobileMenu', function(){
var _navList = $('#navList');
if(_navList.is(":hidden")){
_navList.show();
}else{
_navList.hide();
}
});
});这里所介绍页面还是比较简单的，复杂的页面处理起来，需要更多优化和处理。这里就先介绍这么多，希望这些能帮助到初学者。
智能推荐
Android过渡动画基础使用_gradentdrawable过渡-程序员宅基地
文章浏览阅读2k次。前言Android从API19引入了Transition过渡动画框架，它通过场景Scene概念来表述动画的关键帧，只要提供了开始和结束场景的内容就会自动做动画。过渡动画其实是对属性动画的一种封装，它能够一次对多个对象做动画而不需要特别复杂的配置。除此之外Activity之间的切换效果也可以使用过渡动画来实现。基础使用首先需要定义Scene也就是场景对象，场景其实就是某个事件点所有的..._gradentdrawable过渡
h2ouve工具使用_GitHub - sha310139/Edit_BIOS_Setting_Interface: H2OUVE是使用command修改BIOS設定的工具，此介面結合H2OUVE，對...-程序员宅基地
文章浏览阅读4.7k次。Edit_BIOS_Setting_Interface簡介H2OUVE是個可透過command的方式修改BIOS設定的工具，我們利用Python3撰寫一個簡易的介面，透過H2OUVE去修改BIOS的設定，省去使用者一一下指令並修改設定檔的麻煩。當多台server需套用同一個BIOS設定時，只要先針對一台電腦修改所需的BIOS設定，匯出設定檔後，即可透過deploy kit執行這個程式，讓多台ser..._h2ouve
超时尚的UI电子商务PSD分层模板，临摹学习必备-程序员宅基地
文章浏览阅读124次。用户体验或更准确地说，电子商务用户体验（UX）是所有UI的重要方面，在处理电子商务应用程序时是必需的。当前，电子商务业务变得越来越有竞争力，各种各样的选择使客户忠诚度成为无可挑剔的现象。UX主要是指用户在操作电子商务网站时的体验。UX封装了用户在经营电子商务商店时所经历的一系列印象，包括可访问性，便利性，满意度等。拥有“好”用户体验是指用户可以高效，愉快地满足其需求的情况。此外，用户体验优化与转化化不同。尽管UX优化的重点是满意度，可用性和将其推荐给朋友的热情等指标，但其他形式的优化却着眼于提高
Ubuntu18.04安装Cartographer_error: cannot launch node of type [cartographer_ro-程序员宅基地
文章浏览阅读3.4k次，点赞5次，收藏44次。你好你好#include <iostream>using namespace std;int main(int argc, char* argv[]){ return 0;}_error: cannot launch node of type [cartographer_ros/cartographer_node]: cart
无法理解高等数学怎么办？_高数-程序员宅基地
文章浏览阅读5.8k次，点赞26次，收藏39次。我们学高等数学的时1候是这样的：这当然学不懂了，跨度太大了。这个锅，教材（对，说的就是同济《高等数学》）肯定得背。1 应该怎么学习？学习应该循序渐进，意思就是，应该从已有的知识出发，保持足够小的步伐前进。让我们把已有的知识称作 ，足够小的步伐称为 ，那么：才是最有效的学习方法。比如：注意：什么是 是比较主观的问题。下面我尝试用 的方法，解释下..._高数
openGauss学习笔记-42 openGauss 高级数据管理-触发器_opengauss数据库创建触发器语法-程序员宅基地
文章浏览阅读457次。触发器会在指定的数据库事件发生时自动执行函数。_opengauss数据库创建触发器语法
随便推点
ES6新特总结_new easy let 选择那个不同的-程序员宅基地
文章浏览阅读250次。ES6新特性Babel转码器ECMAScript 6 简介学习网址：http://es6.ruanyifeng.com/ECMAScript是javascript标准ES6就是ECMAScript的第6个版本ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系ECM_new easy let 选择那个不同的
idea 如何配置软回车_idea 软换行什么意思-程序员宅基地
文章浏览阅读598次。软回车: 只是视觉上的换行, 其实文本内容并没实际换行, 这是为了我们可以直接看到整行内容, 而无需再使用鼠标水平滚动窗口idea 中可以配置编辑器软换行editor > general > 勾选 soft wrap these files: * (其中 * 表示软换行对所有文件生效)配置控制台软换行editor > console > 勾选 use soft wraps in console编辑器和控制台软换行效果如图..._idea 软换行什么意思
Vue 2项目如何升级到Vue 3？_vue2项目换成vue3-程序员宅基地
文章浏览阅读2.4w次，点赞14次，收藏67次。Vue2项目如何升级到Vue3_vue2项目换成vue3
Activiti工作流使用详细介绍_activiti开启工作流-程序员宅基地
文章浏览阅读554次。Activiti项⽬是⼀项新的基于Apache许可的开源BPM平台，BPM，即Business Process Management，业务流程管理，通常，BPM也指针对流程管理的信息化系统，其特点是注重流程驱动为核⼼，实现端到端全流程信息化管理。BPMN，即Business Process Modeling Notation，业务流程建模符号。BPMN定义了⼀个业务流程图。_activiti开启工作流
十大排序算法总结（c++版本）-程序员宅基地
文章浏览阅读78次。排序算法的分类：1插入：插入，折半插入，希尔2交换：冒泡，快速3选择：简单选择，堆4归并：归并（不只二路归并）5基数：1插入排序void insert_sort(){ for (int i = 1; i < n; i ++ ) { int x = a[i]; int j = i-1; while (j >= 0 && x < a[j])...
新颖的基于BS结构的毕业设计题目50例_bs实训题目-程序员宅基地
文章浏览阅读711次。新颖的基于BS结构的毕业设计题目50例，该基于BS结构的毕业设计题目包含了：UML对基于BS结构的PDM系统的分析与建模，基于BS结构的高校毕业设计选题系统的设计与实现，基于BS结构的第三方物流管理系统设计与实现，基于BS结构的毕业设计(论文)系统的设计与实现等。..._bs实训题目