前端开发必备工具，一篇文章一网打尽

文章目录

           一、前端提高“生产力”工具

1.WebStorm

2. 远程开发 - VSCode

3. 接口测试 - Postman

4.API在线文档生成和测试 - SwaggerUI

5.抓包工具 - Wireshark

6.通用数据库管理 - DBeaver

7.MD编辑器 - Typora

8.虚拟机 - VirtualBox

9.Git存储库托管 - GitHub

10.项目管理 - Trello

二、提升前端技能的26个网站，走过路过不错过：

三、前端真香教程

一、前端提高“生产力”工具

1.WebStorm

下载地址：WebStorm: The Smartest JavaScript IDE, by JetBrains

功能介绍：

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。官方提供的插件支持，满足许多不会配置的同学，ESlint，词法高亮，emmet，CSS预处理器，新版本也添加了对ES6的支持，内建了服务器调试。

目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

2. 远程开发 - VSCode

Visual Studio Code - Code Editing. Redefined

VSCode 是目前最受开发人员欢迎的编码工具之一，具备强大便捷的远程开发能力。与其它远程开发工具不同的是，VScode 是通过 SSH(Secure Shell) 的方式连接到远程服务器。这种方式不仅省略了繁琐的上传和下载步骤，还可以实现实时同步，让远程开发过程更流畅高效。

功能特色：

• 开源工具，可免费使用

• 支持自定义配置

• 可集成Git

• 支持各种文件格式（html/jade/css/less/sass/xml）

• 调试功能强大

• 插件生态机制强大

3. 接口测试 - Postman

https://www.getpostman.com

Postman 提供功能强大的 Web API 和 HTTP 请求调试，提供有 Chrome 扩展插件版和独立的APP，对于检查后端端点非常有用。

​功能特色：

• 支持多种请求类型（get、post、put、patch、delete 等）

• 支持在线存储数据和迁移数据

• 支持请求 header 和请求参数的设置

• 支持不同的认证机制（Basic Auth，Digest Auth，OAuth 1.0，OAuth 2.0 等）

• 响应数据自动按照语法格式高亮，包括 HTML，JSON 和 XML

4.API在线文档生成和测试 - SwaggerUI

http://swagger.io

SwaggerUI 是一个 API 在线文档生成和测试的利器。有了这款工具，不需要频繁更新接口文档，就能保证接口文档与代码的一致。

功能特色：

• 支持在多种开发环境中使用

• 操作便捷

• 支持所有主流浏览器

• 完整的OAS支持

5.抓包工具 - Wireshark

https://www.wireshark.org/download.html

Wireshark 是一款小巧、开源且能在几乎所有流行操作系统下使用的抓包工具软件。使用Wireshark 可以截取各种网络封包，显示网络封包的详细信息。可以在Windows和Mac OS上运行。

​

功能特色：

• 快速检测网络问题

• 快速检查信息安全相关问题

• 新通信协议调试

6.通用数据库管理 - DBeaver

Download | DBeaver Community

DBeaver 是一个 SQL 客户端和数据库管理工具。由于 DBeaver 基于 Java 开发，可以运行在各种操作系统上，比如Windows、Linux、macOS 等操作系统。同时，DBeaver 采用 Eclipse 框架开发，支持插件扩展，并且提供了许多数据库管理工具：ER 图、数据导入/导出、数据库比较、模拟数据生成等。

​

功能特色：

• 通过 JDBC 连接到数据库，支持几乎所有的数据库产品

• 可以处理任何的外部数据源

7.MD编辑器 - Typora

https://typora.io/

Typora 是一款免费的轻量级Markdown编辑器，虽然没有 Mou，Haroopad等Markdown编辑器那么大名鼎鼎，但其轻量、快速、易于上手的特点，绝对能给你带来舒适的用户体验。

功能特色：

• 启动速度快

• 支持实时预览，所见即所得

• 界面简洁易操作

• 支持多拓展

8.虚拟机 - VirtualBox

Downloads – Oracle VM VirtualBox

VirtualBox 是一款免费的开源虚拟机，可以在Windows、Linux和mac等不同操作系统中运行。

​

功能特色：

• 开源软件，免费

• 中文界面

• 体积小

• 安装配置简单实用，社区活跃

9.Git存储库托管 - GitHub

jeresig (John Resig) · GitHub

GitHub 是一个基于 Web 的 Git 存储库托管服务。无论你是软件开发的新手，还是已经具有丰富开发经验的老手，相信你在工作中都会需要这款工具。GitHub是目前世界上最大，最受欢迎的代码库，可以帮助开发人员审查代码，管理项目和软件构建。

功能特色：

• 极高的安全性

• APP体积小

• 数据同步流畅无冲突

• 不限制私有仓库数量和流量

10.项目管理 - Trello

https://trello.com

Trello 是一款灵活易用的项目管理工具，非常适合作为看板和 Scrum 开发，它易于管理，具有极高的可定制性。虽然不是专门为开发人员打造的工具，但Trello绝对可以帮助开发人员更好地完成工作。

功能特色：

• 更直观的资料与任务分类

• 更清晰的便利贴式任务呈现

• 操作便利，拖曳即可整理分类与管理进度

• 可以新增丰富的卡片内容

• 支持颜色标签、特殊印章

• 简单易懂、即时同步、多人管理

二、提升前端技能的26个网站，走过路过不错过：

1. CSS battle【在线比拼 CSS】 : https://cssbattle.dev

2. Learn CSS layout【学习 CSS 布局】：http://learnlayout.com

3. Flexbox Froggy【学习 Flex 布局的小游戏】：http://flexboxfroggy.com

4. EnjoyCSS【在线CSS代码可视化工具】：https://enjoycss.com

5. CSS-Tricks 【CSS 技巧】：https://css-tricks.com

6. Neumorphism【实现新拟态效果】：https://neumorphism.io

7. uiGradients【分享渐变色】：https://uigradients.com

8. JavaScript【一个一直更新的JavaScript 的语法文档，主要会写如何去避免一些常见的错误】：https://bonsaiden.github.io/JavaScript-Garden/zh/

9. JS Tips【JS 技巧】：https://www.jstips.co

10. JSweekly【技术周刊 】：https://javascriptweekly.com

11. CDNJS【JavaScript 资料库】：https://cdnjs.com/libraries

12. Beautiful Open 【开源 JS 库集合】：https://beautifulopen.com

13. JavaScript Fun【代码库集合】：https://www.javascript.fun

14. Stack Overflow【编程人员问答网】：https://stackoverflow.com

15. 掘金【高质量技术社区】：https://juejin.im

16. Codrops【网页设计开发博客】：https://tympanus.net

17. CodePen【一个网站前端设计开发平台，针对网站前端代码的一个工具，上面有各种效果的案例特效（炫技），可以在他们的 demo 基础上开发自己的前端设计。】： https://codepen.io

18. CodeSandBox【提供一个在线开发环境的“沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。】： https://codesandbox.io

19. JS Bin【轻量级在线编辑器网站】：https://jsbin.com

20. ICONSVG【在线自定义设计SVG图标素材】：https://iconsvg.xyz

21. OpenMoji【免费表情符号库】：https://www.openmoji.org

22. Share Icon 【免费矢量素材图库】：https://www.shareicon.net

23. tableconvert 【在线表格编辑器】：https://tableconvert.com

24. Feathericons【极简 ICON 图标集】：https://feathericons.com

25. HTML5UP 【提供大量的HTML5模版】：https://html5up.net/

26. 趣IT【一个会更新面试题和练习题的宝藏王】https://www.funit.cn/

​

三、前端真香教程

web 入门 Html5+css：最新前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 web 进阶：web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）

技术进阶 JavaScript：JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门 DOM BOM：JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作 jQuery：前端基础必备教程|jQuery网页开发案例精讲 Ajax：AJAX零基础到精通_整合Git核心内容全套教程

Vue 开发 Node.js: Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解 Vue2+Vue3全套：Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

React &小程序开发

React：前端React视频教程，react零基础入门原理详解到好客租房项目实战

零基础玩转微信小程序：前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)

​

别看了，收藏支持一下

由于经常分享失败，我上传github上了，先放上链接：https://github.com/Lydever/web-1-x.git

_{请礼貌，不要耍流氓哈哈}，创作不易，下载的同时，请start一下，谢谢~

注意：转载请备注来源: https://blog.csdn.net/weixin_43853746/article/details/109992935

# 官方信息网站
👉 1+X Web考证信息成绩查询系统
👉 工信部: 关于首批1+X证书制度试点院校名单的公告
👉 1+X Web 前端开发职业技能等级标准.pdf
# 前言
2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？
# 关于考不考
因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除外，如果要缴费的看自己需要…) 反正不损失什么，就算以后没什么用就当给自己做的一次测试吧。
# 关于理论题
就这去年和今年考的那几批的试题来看，考得很基础，对于选择题基本上都是基础的知识点和概念之类的，记住多看看基础，在我发的这几套试题认真做，中级基础的知识点都在这里面了。
# 关于实操题
中级实操的考核是在初级的基础上,重点考察下面几个部分，所以下面五个知识点差不多一个知识点一道大题，一般实操有四道大题，打√的都是重点考的知识点（极少可能只有三道）：

• 前端静态搭建（html+css+js ）
• 深入浅出MySQL数据库（php与MySQL数据库操作）√
• PHP 技术与应用 (PHP Laravel 框架应用) √
• Web前后端交互技术（php）√
• 响应式开发技术（bootstrap响应式题型）√

# 关于答题技巧
实操就是自己读懂程序代码，理清相关文件，进行填空，补齐代码，实现功能。技巧：整体看一下整体相关文件，有一个大概的了解，理清思路，程序代码“上下前后连接”，记不得样式单词找样式单词看一下前后代码，找变量尽量copy，防止自己稍不留神_敲错

了解 1+X Web前端开发等级考证的看这里戳这里👈

2020年下半年 Web前端开发中级 实操考试

考生姓名：——————————— 准考证号：——————————

试题一（30分）

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（15）代码。
【说明】
这是一个响应式完成，用bootstrap4完成。
项目名称为callio，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含style.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件和bootstrap.min.js文件；img文件夹包含用到的图片。
首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为四部分：
一是【页头】，包括网页标题和导航栏，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；
二是【轮播图】，图片切换时呈现由大缩小的动画；
三是【网站介绍】，主要是介绍分类，采用栅格系统布局，以图片和标题的形式展示，鼠标经过图片放大，且不能溢出；
四是【表单提交】，利用弹性盒子实现表单左侧的介绍相对于表单的高度垂直对居
【效果图】
（1）index.html在PC端效果如图1-1所示。

图1-1
（2）index.html在移动端效果如图1-2所示。

图1-2

【代码：首页index.html】

<!DOCTYPE html>
<html>
<head>
	<title>callio</title>
	<meta charset="utf-8">
<meta name="viewport" content="width=__(1)__, initial-scale=1, shrink-to-fit=no">
	<link rel="__(2)_____" type="text/css" href="css/bootstrap.min.css">
	<link rel="__(2)_____" type="text/css" href="css/style.css">
</head>
<body>
	<!-- 头部 -->
<div class="__(3)______">
	<div class="row ___(4)_ _ __">
		<a class="navbar-brand">
			<img src="img/logo.png">
		</a>
		<nav class="navbar navbar-expand-lg ___(5)____">
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#navToggler'>
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navToggler">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link active">首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">HTML/CSS</a>
						<div class="dropdown-menu">
					      <a class="dropdown-item" href="#">HTML</a>
					      <a class="dropdown-item" href="#">CSS</a>
					      <div class="dropdown-divider"></div>
					      <a class="dropdown-item" href="#">HTML5</a>
					      <a class="dropdown-item" href="#">CSS3</a>
					    </div>

					</li>
					<li class="nav-item">
						<a class="nav-link">JAVASCRIPT</a>
					</li>
					<li class="nav-item">
						<a class="nav-link">JQUERY</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
</div>

<!-- 轮播图 -->
<div id="" class="__(6)____ slide carousel-scale" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
		    <img src="img/banner1.jpg" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
		  <img src="img/banner2.jpg" class="d-block w-100" alt="...">
		</div>
	</div>
</div>

<!-- 列表展示 -->

<section class="list">
	<div class="container">
		<div class="row">
			<div class="__(7)__"><!--中屏以上显示3列，小屏显示2列，最小屏显示1列 -->
				<div class="item">
					<div class="thumb">
						<img src="img/service01.jpg">
					</div>
					<h2>HTML</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
			<div class="__(7)__">
				<div class="item">
					<div class="thumb">
						<img src="img/service02.jpg">
					</div>
					<h2>JAVASCRIPT</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
			<div class="__(7)__">
				<div class="item">
					<div class="thumb">
						<img src="img/service03.jpg">
					</div>
					<h2>MYSQL</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
			<div class="__(7)__">
				<div class="item">
					<div class="thumb">
						<img src="img/service04.jpg">
					</div>
					<h2>ES6</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
			<div class="__(7)__">
				<div class="item">
					<div class="thumb">
						<img src="img/service05.jpg">
					</div>
					<h2>PHP</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
			<div class="__(7)__">
				<div class="item">
					<div class="thumb">
						<img src="img/service05.jpg">
					</div>
					<h2>VUE</h2>
					<p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
					<a href="">更多</a>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="message">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-6 d-flex __(8)_ ___ description"><!-- 以下内容要垂直对齐-->
				<div class="row">
					<h2 class="col-12">web前端</h2>
					<p class="col-12">Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。</p>
				</div>
			</div>
			<div class="col-12 col-md-6 form">
				<h2>
					<span>Service Form</span>
					Get Your Service
				</h2>
				<form>
					<div class="form-group">
						<input type="text" class="__(9)___" placeholder="输入用户名">
					</div>
					<div class="form-group">
						<input type="text" class="__(9)___" placeholder="输入用户名">
					</div>
					<div class="form-group">
						<input type="text" class="__(9)___" placeholder="输入用户名">
					</div>
					<div class="form-group">
						 <select id="inputState" class="__(9)___">
					        <option selected>html</option>
					        <option>css</option>
					      </select>
					</div>
					<div class="form-group">
						 <button type="submit" class="__(9)___ btn btn-primary">Sign in</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>

<footer class="container-fruild bottom">
	版权
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

【代码：CSS文件style.css】

.carousel-scale .carousel-item img{
	transform: ___(10)____;/*放大到1.12倍*/
}
.carousel-scale .carousel-item.active img {
	animation: scaleUpDown 1s ___(11)_ __ cubic-bezier(0.250, 0.460, 0.450, 0.940);/*让动画保持最终状态*/
}
@keyframes scaleUpDown {
	__(12)____ {
		transform: scale(1.12);
	}
	__(13)____ {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.list{
	margin-top:2rem;
}
.list .item{
	margin:20px 10px;
	padding-bottom: 20px;
	border:1px solid #ccc;
	_____(14)____;/*设置边框圆角，四个角都是20px*/
}
.list .item .thumb{
	overflow: hidden;
	margin-bottom:1rem;
}
.list .item .thumb img{
	width: 100%;
	transition: all .8s;
}
.list .item:hover .thumb img{
	transform: scale(1.2);
}
.list .item h2,.list .item p,.list .item a{
	padding:0 2rem;
}

.message{
	padding:3rem 0;
	border-top:1px solid #ccc;
}
.message .form{
	border:1px solid #ccc;
	padding:20px 30px;
	border-radius: 10px;
	background-color: #eee;
}
.message .form h2{
	padding:20px 0;
	text-align: center;
}
.message .form h2 span{
	display: block;
	font-size: 18px;
	font-weight: normal;
}
.description h2{
	text-align: center;
	line-height:70px;
}
.description p{
	line-height: 28px;
	____(15)__ ___;//文字首页缩进
}

.bottom{
	height: 6rem;
	line-height: 6rem;
	text-align: center;
	background-color: #333;
	color:#fff;
}

【问题】（30分，每空2分）
进行静态网页开发，补全代码，在（1）至（15）处填入正确的内容。

试题二（30分）

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
在我们的生活中，当加载的内容看完后，再次下拉，就会加载出更多的内容，本项目实现下拉加载功能，应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为news，包含主页index.html、style.css和adminList.php文件，其中，主页面index.html显示新闻内容；style.css为主页样式文件；adminList.php为主页提供数据，返回JSON格式数据。
主页分为两个部分：焦点图和新闻列表，当滚动条触底，通过ajax发送请求到adminList.php，adminList.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作，实现动态加载数据。如图3-1所示。
【效果图】

图3-1

【代码：主页index.html】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表页</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery.min.js"></script>
</head>
<body>
	<div class="box"></div>
	<div class="list">
		<div class="title">新闻列表</div>
		<ul>
			
		</ul>
	</div>
	<script src="js/index.js"></script>
</body>
</html>

【代码：style.css】

body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
.box{
	width: 100%;
	height: 300px;
	background: url("../img/timg.jpg") center;
}
.list{
	width: 700px;
	margin:0 auto 50px;
}
.list .title{
	font-size: 22px;
	line-height: 60px;
}
.list ul{
	____(1)____;/*设置盒子投影，颜色为#CCC,模糊度为15px*/
}
.list ul li{
	position: relative;
	padding:20px;
	border-bottom:1px dashed #ccc;
}
.list ul li h2{
	width: 500px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
	font-size: 16px;
}
.list ul li h2 a{
	color:#333;
}
.list ul li span{
	position: absolute;
	top:20px;
	right:20px;
}

【代码：adminList.php】

<?php
// header ("Content-type: text/html; charset=utf-8")
$servername = "localhost";
$username = "root";
$password = "123456";

// 创建连接
$conn = __(2)____($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

mysqli_query($conn,'set names utf8');

// 查询数据库
mysqli_select_db($conn,"list");
// 求信息总数
$sqlCount="____(3)____";# 查询所有数据的sql语句
$resultC = ___(4)____(__(5)___, __(6)____);# 执行数据库
$count=mysqli_num_rows($resultC);

$num=$_GET["num"];
$pageCount=$_GET["pageCount"];
$start=_____(7)____;#求开始查询的索引值
// 返回指定数据
$sql = "___(8)______";#返回指定数据的sql语句
$result = mysqli_query($conn, $sql);
$res = array('count'=>$count);
$jarr=array();
// 遍历数据
while($row = _____(9)_____($result))
  {
    array_push($jarr,$row);
  }
$res = array(
    'count'=>$count,
    'list'=>$jarr
);
echo json_encode($res);
mysqli_close($conn);
?>

【代码：index.js】

$(function(){
	var num=1;//当前页数
var pageCount=7;//每页显示的数量
var pageNum=0;//总页数
	function ajaxDate(num){
		$.ajax({
			url: 'http://localhost/second/adminList.php',
			type: 'get',
			dataType: 'json',
			data: {
				___(10)_____//传递的参数
			},
			success:function(res){
				pageNum=___(11)_______;//请求的总页数
				res.list.forEach(function(data){
					var str="<li>"+
							"<h2><a href=''>"+data.title+"</a></h2>"+
							"<span>"+ data.time+"</span>"+
							"</li>";
					___(12)_______;//将字符串追加到指定的位置
				})
			}
		})
	}
	ajaxDate(num);

	$(window).scroll(function(){
		var sTop=____(13)__;//获取滚动条卷进去的距离，用jquery
		var sHeight=____(14)_____;//获取可视区域的高度，用jquery
		var bodyH=______(15)________;//获取页面所有内容的高度，用jquery
		if(___(16)_____){//请写出判断条件
			num++;
			if(____(17)____){//请写出判断条件
				console.log(num);
				___(18)______;//调用函数请求加载数据
			}
		}
	})
	
})

【问题】（27分，每空1.5分）
进行动态网页开发，补全代码，在（1）至（18）处填入正确的内容。

试题四（20分）

阅读下列说明，用MySQL操作数据库。填写（1）至（10）代码。
【说明】
给项目“信息管理系统”设计一个数据库，采用MySQL数据库。主要创建产品信息管理模块，主要有新闻分类和新闻信息两个表。
【MySQL数据库操作：创建数据库脚本db.sql】
系统使用MySQL数据库，数据库名为info_manage，表名为newtype。newtype表包含序号、分类名称、时间，其中，序号为自增字段和主键。另一表明为news,news表包含序号、新闻标题、新闻内容、时间。补充下列（1）和（4），以下是对（1）-（4）的说明。
(1) 删除已经存在的数据库
(2) 创建数据库info_manage
(3) id为自增字段
(4) 默认是当前时间
(5) 设置主键

____(1)____ DATABASE IF EXISTS user_center;
______(2)_________;
USE info_manage;
CREATE TABLE `newtype`
(
   `id` int (4) NOT NULL （3） COMMENT '序号',
   `typename` varchar (16) NOT NULL COMMENT '分类名称',
   `time` datetime DEFAULT ___(4)____  COMMENT '创建时间',
   （5） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

CREATE TABLE `news`
(
   `id` int (4) NOT NULL （3） COMMENT '序号',
   `title` varchar (16) NOT NULL COMMENT '新闻标题',
`body` text(20000)  COMMENT '新闻内容',
   `time` datetime DEFAULT ___(4)____ COMMENT '创建时间',
   （5） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

【MySQL数据库操作：初始化数据脚本init.sql】
在MySQL数据库中，向info_manage数据库中newtype表插入信息分类数据，插入数据脚本如下。

USE info_manage;
_____(6)______ newtype(typename) value('行业新闻');
_____(6)______ newtype(typename) value('集团新闻');
_____(6)______ newtype(typename) value('通知公告');

【MySQL数据库操作：修改news表】
在news表中，字段‘新闻分类’未创建，现需要修改news表,将‘新闻分类’字段插入到字段‘新闻标题’后，修改表脚本如下。

USE info_manage;
___(7)____ table news __(8)___ newtype int(4) ___(9)___ title;

【MySQL数据库操作：修改news表】
由于newtype输入的是数字，为了提高用户体验，现在需要将所有信息的分类名显示，显示的字段有新闻序号，新闻标题，新闻分类名。执行脚本如下：

USE info_manage;
create view newsinfo as select n.id,n.title,t.typename from news as n,newtype as t where __(10)____;

【问题】（30分，每空1.5分）
进行动态网页开发，补全代码，在（1）至（10）处填入正确的内容。

试题四（20分）

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
该程序为一个问卷调查系统，使用PHP的Laravel框架编程，项目名称为XXX，核心文件包括路由文件web.php、模板文件（信息展示模板news.blade.php）、控制器文件newscontroller.php。实现批量删除功能。

【效果图】
（1）信息展示模板页面：对应模板文件news.blade.php
先选中需要删除的数据，点击“批量删除”按钮，如图4-1所示。

图4-1

【问题】基于Laravel框架，回答下列问题，填写（1）至（10）。
【web.php】

<?php
Route::get('/', function () {
    return view('welcome');
});

// 后台首页
Route::___(1)_ ___(['namespace'=>'Admin','prefix'=>'admin'],function(){
	// 后台商品管理模块
	Route::resource('goods','GoodsController');
	Route::get('news_ajax',"Newscontroller@aajax");
	
});

【GoodsController.php】
将数据库中的数据展示到news.blade.php文件上，请根据页面目录结构并分析代码，填写（2）-（4）

<?php
namespace _____(2)__ ___;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
___(3)_ __; //使用数据库
class GoodsController extends Controller{
	// 定义list方法
	public function index(){
		$data=DB::table('product')->get();
		return view('admin.news')->___(4)_____("data",$data);//返回结果数据
	}
}

【Newscontroller.php】
当点击‘批量删除’时，需要请求一个地址从数据库中删除选中的数据。分析相关的控制器文件和模板文件，填写（5）-（7）

<?php
namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;

class Newscontroller extends Controller{
	public function aajax(){
	
	    //获取到ajax传来的需要删除的id
	    $id = $_GET['str'];
	    //把传来的所有id改为数组形式  explode  字符串转数组
	    $str = __(5)__ _(",",$id);
	    //利用循环将需要删除的id 一个一个进行执行sql；
	    foreach($str as $v){
			DB::delete(“delete from product where id=?”,[$v]);
	        DB::table('product')->_ ___(6)______->delete();//删除数据的条件
	    }
	    ___(7)_____;//返回删除的数据id
	}
}

2、信息展示模板news.blade.php
在信息展示模板文件news.blade.php中，使用for循环显示信息，显示需要数据由GoodsController类中index()返回时传递，点击‘批量删除按钮’，批量删除选中的数据，分析index()方法和模板文件，填写（8）-（10）。

_____(8)____('muban.admin')
@section('content')
<div class="content">
  <table>
  ____(9)_ __
    <tr>
        <td align="center">
          <input type="checkbox" name="box" value="{{$v->id}}" class="box"/>
        </td>
        <td>{{$v->id}}</td>
        <td>{{$v->title}}</td>
        <td>{{$v->pric}}</td>
        <td>删除</td>
    <tr>
                  
  @endforeach
</table>
<input type="button" value="批量删除" id="but">
</div>
<script>

 $("#but").click(function(){
     //获取到所有的input
     var  box = $("input[name='box']");
     //去所有的input长度
     length =box.length;
     // alert(length);
     var str ="";
     for(var i=0;i<length;i++){
         //如果数组中的checked 为true  就将他的id进行拼接
         if(box[i].checked==true){
             str =str+","+box[i].value;
         }
     }
     //将拼接的字符串第一个，号删除
     str= str.substr(1);

     //ajax  将id传入后台
     $.ajax({
         url:"______(10)__{{url(“admin/ news_ajax”)}}___",
         type:"get",
         data:{str:str},
         success:function (a) {
            a.forEach(function(ele){
                $("input").each(function(){
                  if($(this).val()==ele){
                    $(this).parents("tr").remove();
                  }
                })
            })
         }
     })
 })
   
</script>
@endsection 

实操考试评分细则：

试题一（30分）（每空2分，共30分）

【问题】（30分）
（1）device-width
（2）stylesheet
（3）container
（4）justify-content-between
（5）navbar-light
（6）carousel
（7）col-md-4 col-sm-6 col-12
（8）align-items-center
（9）form-control
（10）scale(1.12)
（11）forwards
（12）from或者0%
（13）to或者100%
（14）border-radius: 20px;
（15）text-indent: 2em;

试题二（30分）（1-12每空1.5分，13-18每空2分 共30分）
【问题】（30分）
（1）box-shadow: 0 0 15px #ccc
（2）new mysqli
（3）SELECT * from news (不区分大小写)
（4）mysqli_query
（5）$conn（6）$sqlCount
（7）($num-1)\ast$pageCount
（8）SELECT * from news limit $start,$pageCount
（9）mysqli_fetch_array
（10）num: num,pageCount:pageCount
（11）Math.ceil(res.count/pageCount)
（12）$ (".list ul").append(str)
（13）$ (this).scrollTop()
（14）$ (this).height()
（15）$(document).height()
（16）sTop+sHeight>bodyH-1（这里的数值不是唯一的，可以是任意数字）
（17）num<=pageNum或者pageNum>=num
（18）ajaxDate(num)

试题三（20分）（每空2分，共20分）
【问题】（20分）
（1）DROP（不区分大小写）
（2）CREATE DATABASE info_manage
（3）auto_increment
（4）current_timestamp
（5）primary key
（6）insert into
（7）alter
（8）add
（9）after
（10）n.newtype=t.id

试题四（20分）（每空2分，共20分）
【问题】（20分）
（1）group
（2）App\Http\Controllers\Admin
（3）use DB
（4）with
（5）explode
（6）where(‘id’,"=","$v")
（7）return $ str
（8）@ extends
（9）@foreach($ data as $v)
（10）{{url(‘admin/news_ajax’)}}

1+X 系列导航

考点知识回顾:

一、 1+X Web前端中级必考 | PHP 技术与应用
二、 1+X Web前端等级考证 | 详解jQuery基础
三、 1+X Web前端等级考证 | 深入浅出MySQL数据库
四、1+X Web前端等级考证 | Web中级12月最新模拟题
五、 1+X Web前端等级考证 | 浅谈AJAX基础知识 (中级必考)
…

模拟题

1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷1) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷1) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案

有时间会持续更新关于1+X 方面的~~

入职离职，离职入职，循环往复，生生不息。天下无不散之筵席，我也到了要和当下公司说再见的时候了。

其实有时候挺羡慕有些同事一毕业之后就一直在一家公司工作很久，首先说明这家公司的业务比较稳定，其次个人在这家公司能够得到较为长足的发展，最直接的是工资可以稳步提升，技能也会越来越扎实，这其实对我们程序员来说还是比较难得的，反正我个人从实习到现在工作近三年的时间，已经换了很多份工作了，其中有些是公司的原因，也有些是个人的原因，兜兜转转，走来走去其实现在想来不是很好，尤其是在工作前几年经验不是很丰富的情况下，频繁跳槽不会带来工资上的多少提升，唯一的好处可能是：如果你非常善于学习的话，可以有更丰富的项目经验，以及通过不同的同事来学习到每个人所特有的一些长处，或是为人处事方面的，或是专业技能方面的。

自2020年10月份笔者入职现公司到今天离职，感觉时间还是过的很快的。对个人职业生涯发展和人际关系相处方面有了很多新的认识。这一次离职更多的是个人的原因——笔者打算回家发展，理由也很简单，家里工作可以和另一半长期相处，并且以后也有很大机会在老家买房，当然在外工作也可以攒钱老家买房，速度可能还会快些。只是笔者觉得老家买房老家住，而不是老家买房外面租房住，这样会好一些。并且早在2020年夏天的时候，笔者就已经打探了老家的相关工作岗位，作为一个三线城市来说，虽然不多，但却也足以容纳一个在外漂泊多年又想要返乡的的灵魂了。工资待遇上，因为笔者打听的是 web 前端开发相关的岗位，这里只说前端相关的待遇，平均工资待遇大概是二线城市平均水平的 60%。一线城市平均水平的 50% 的样子。个人还是可以接受的，并且最重要的是可以和心爱的人一起朝夕相处，工资相比之下只能算是一个小问题了。

说会在公司工作的 2021 年度吧。如前所述，笔者主要学习到了工作技能和人际关系相处两个方面。

工作技能方面，2021 年来说，web 前端最流行的开发技术还是 vue 和 react。国内的中小型公司 vue.js 的使用量更大，特别是 vue3 开始流行以来。目前来看 vue3 + TypeScript 的技术栈是未来2年国内前端发展的主要方向。react 相关则还是 react hooks 及相关生态系统。殊途同归，其实熟悉了 vue3 也就容易上手 react hooks ，就笔者个人来说，更偏爱 vue3 ,相比于 jsx 的 render 函数式语法，笔者更钟爱在业务需求中写模板语法，也许有先入为主的原因。在工作中笔者 vue 和 react 都写过，也都维护过相关的项目，总的来说还是觉得在业务尤其是网页中写模板语法比 jsx 会更直观一些。当然 jsx 更加灵活，并且相比于 vue 中还是不断新生的各类语法糖来说，react 和 jsx 的这套技术栈组合更加拥抱原生 JS 语法，几乎没有什么新增的语法糖，这其实是 react 系框架技术的优势所在。

 也因此，笔者在 21 年主要学习了 vue3 和 TypeScript 的相关知识，并且已经运用到了新的项目中，效果还是很不错的，特别是 vue3 解决了之前 vue2 的一些“顽疾”，比如说一直让人比较头疼的响应式对象检测问题了：

这和 vue2 的响应式实现原理 Object.defineProperty 的局限性有关，彼时 ES6 的新特性 Proxy 还没有完全普及，特别是在 IE 浏览器下的支持度很不好。如今微软已经放弃了 IE 系浏览器转而全面拥抱基于 Chromium 的新 edge 浏览器，ES6 语法新特性已在主流浏览器中普及，而 vue3 的响应式原理基于 Proxy 正当时。那么现在就无需再当心响应式的 vue 对象/数组新增或删除属性不会被检测到的问题了。再比如 vue3 的合成型API（Composition API）代码风格，可以更加方便的写出 hooks 风格的代码，hooks 风格代码除了有更简洁、更低的代码耦合度的优点外，还可以更加方便的做代码功能复用和 Tree Shaking.在过去，vue2 及 react 老版本在做代码复用时常常利用混入（mixin）,当然 react 还可以利用高阶组件来实现。但是这些实现都不是很优雅，特别是 混入 的做法，就笔者实际开发项目来说，如果大量使用混入会使项目代码逻辑结构更加不清晰，也会越来越不容易维护，而使用 hooks 风格的代码可以较好的解决此类问题（前提是需要扎实的 JS 基础和良好的 hooks 函数封装经验）。Mixins Considered Harmful – React Bloghttps://zh-hans.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

关于 mixins 做法的问题，这里有一篇文章做了详尽的解释。这也是现在 vue3/react hooks 大行其道的原因之一。 

21年，笔者除了学习了 vue3 相关知识外，另一个比较重要的是学习了 uniApp 的相关开发。作为一个跨端开发框架来说，uniApp 实用吗？很实用！好用吗？个人觉得很一般，但确确实实是能够解决项目中的很多问题。首先 uniApp 的最大有点在于降低了开发成本。一套代码可以在经过相关配置之后运行在 web，小程序（各大平台），App（安卓和 iOS）上。现在国内很多面向广大用户的产品都要求自己的软件不仅要有网页版的，还要有小程序，甚至还要有 App，如果按照传统模式开发，至少需要 3 个团队，web 开发团队，App开发团队（还需细分成 安卓和 ios），小程序开发团队。当然，一般小程序开发可以被 web 开发团队兼任，但是 App 开发，即使不使用原生开发技术，利用 RN， flutter，weex 等跨端框架，同样需要另外招人。那么 uniApp 可以把这三拨人减为一拨人，确实有很大作用。但是事实远没有那么简单。首先是项目具体需求方面，如果是一个要求较为简单的产品，譬如一个小型的管理系统，一个小型的在线商店，那么使用 uniApp 开发问题不大。而如果是一个较大型的项目，使用 uniApp 开发需要解决的问题就很多：

1. uniApp 和其他框架结合使用产生 bug 的问题：这里问题有很多不仅少见而且比较难排查解决，如这篇文章介绍的 在 uniApp 项目中使用 echarts tooltip 无法解析 html 标签的问题及解决_似水流年的博客-CSDN博客前言如题，最近笔者所在项目组正在开发一个需要有 web，h5及App版本的项目。那么在技术选型的时候我们自然是想到了目前国内比较火的 uniApp 了，根据其官网介绍是一次开发到处使用啊，而且uni本身也是基于 vue 生态开发的，对我们之前一直使用 vue 全家桶开发的前端人员来说也是比较容易过渡（仔细一想目前如果是要开发一个同时带有 web h5和 app 的项目，除了 uni 的话，可能就是React Native(主要是开发App)， weex（类似RN但是用的更少），最有前景的 Flutterhttps://blog.csdn.net/a715167986/article/details/113559444

2. 实际开发中各种小 bug 较多，有很多淤积问题一直没有得到有效解决。虽然 uniApp 在国内使用者较多，但是比之 RN flutter 等同类解决方案来说，uni 一方面没有英文文档（外国人几乎没法使用，中文文档水平也不很高），另一方面社区维护力量较弱，所以很多小问题一直存在却无人解决。

3. App 开发相关体验较差。使用 uni 开发小程序体验尚可，但是开发相关 App 就不是那么容易的了。当然这里也不能全算 uniApp 的问题，毕竟本身 App 需要的相关经验就很多。比如说安卓App的离线通知功能在国内由于厂商自定义 ROM 五花八门需要各种适配，而开发 iOS App 需要 Xcode 工具，申请成为苹果开发者等等。而使用 uni 开发需要踩坑的地方就更多了，比如安装包的打包等。

总的来说，uniApp 的出现很好的解决了一些问题，但是也引入了一些新的问题，就程序员的开发体验来说，是比较一般的。具体使用与否还是要取决于具体的业务场景。

21 年，微前端概念的流行。应该说从 2020 年开始，微前端的概念便开始大行其道了。当然了，一般的项目其实是使用不到的。之所以笔者接触到是因为近期笔者参与的公司开发的项目使用到了一个有名的微前端框架 qiankun.js 。这是一个关于设备仪器的管理系统，业务较为庞大，但是私以为实际上也还没达到使用 qiankun 的程度，而之所以还是上了 qiankun 是因为项目开发的时间较长（一年半以上），最初开发是还是 vue2 版本，之后 vue3 开始越来越流行，考虑到新功能可以使用 vue3 写，但是原有业务是 vue2 实现的问题，再加上项目本身的体量于是使用 qiankun 改造。具体做法是将项目拆分成 8 个子应用，以具体模块功能来划分，原有功能使用 vue2 技术栈，新模块全部采用 vue3 技术栈，在这种情况下，新功能的开发技术栈不在受限于原有技术体系，即使是使用 react 开发也没有问题。当然，qiankun 框架的配置还是有很多坑需要踩的。应该说微前端适用于大项目大团队开发，比如 qiankun 的开发公司阿里这一类体量的公司业务，可以同时让多个团队并行开发多个子应用，各个小团队具体的模块实现方法不做限制，最终合并到一个大项目中运行。

关于 21 年的总结内容很多，笔者暂时先更新这些，其他有时间再补。