精华内容
下载资源
问答
  • web前端开发和游戏开发
    千次阅读
    2021-03-02 11:56:51

    作为一个开发人员,你可能会想:2021年是web前端开发好还是后端开发好?他们有什么区别?如果你在思考这个问题,那你来对地方了。

    1、什么是前端开发?

    前端开发主要是关于网站和应用程序,用户可以从应用程序屏幕或浏览器上看到东西。简而言之,你在应用屏幕和浏览器上看到的都是前端。

    网站和移动App的前端

    让我们以你正在浏览的网页为例。页面上的内容,图片,段落之间的间隙,左上角的图标,右下角的通知按钮,都属于前端。移动应用的前端和网站是一样的。例如,你看到的内容,按钮,图片,它们都属于前端。此外,由于移动设备的屏幕是可触摸的,应用程序对各种触摸手势的响应,如缩放、双击、滑动等,是前端的一部分,也是前端的活动部分。

    物联网的前端

    任何能连接到互联网的设备都是物联网设备。你可能想知道物联网设备的前端是什么样的。任何智能设备,例如智能冰箱、远程pos机、智能手表或智能钱包,都需要提供某种界面,以便用户能够操作该设备。这个界面是一个交互媒介,组成这个界面的元素是物联网的前端。

    但严格来说,物联网设备并没有真正的前端。但他们都有固件,和手机应用的前端类似。这些固件可以用多种编程语言开发,比如c、c++、lua、python或javascript。

    2、什么是后端开发?

    后端开发是“服务器端”开发,主要涉及软件系统“后端”的事情。例如,用于托管web和应用程序数据的服务器,以及位于后端服务器、浏览器和应用程序之间的中间件都是后端。简单地说,你在屏幕上看不到但是用来支持前端的东西是后端。

    网站和移动App的后端

    网站的后端包括构建服务器、保存和检索数据,以及连接到前端的接口。如果前端开发人员关心站点的外观,后端开发人员则关心通过代码、api和数据库集成提高站点的速度、性能和响应能力。与前端相似,移动应用程序的后端与网站的后端相同。为移动应用构建后端有几种选择:云平台(aws、firebase)、自己的服务器或mbaas(移动后端作为服务)。

    物联网的后端

    云平台是物联网后端的重要组成部分。有证据表明,大多数物联网设备严重依赖云服务器上传、处理和下载数据。高端物联网解决方案的后端甚至包括人工智能和机器学习。物联网项目的后端平台包括amazoniot,googlecloud,mqttbroker,ifttt等等。

    3、前端和后端开发者,哪个更好?

    无论是前端开发还是后端开发,都取决于哪些内容比技术内容更重要。如果美观和产品感觉对你来说更重要,你可能倾向于选择前端技术。如果您的重点是提高网站、应用程序或软件的效率和响应能力,那么您的目标可能是后端开发。前端设计师所做的很大一部分工作就是让用户在手机或电脑屏幕上看到的东西看起来很棒,很容易使用。相比之下,后端开发人员只关心编写干净的代码。如果你根据上面所说的,判断前端和后端之间的一个比另一个好,那就是错误的假设。事实上,在建立网站或应用程序时,它们都是不可替代的,同样重要。

    更多相关内容
  • web前端开发和后端开发哪个好?

    千次阅读 2021-01-08 18:31:54
    这几年互联网行业发展很快,很多人都想在这个行业中寻找到自己合适的岗位,特别是近几年手机普遍的情况下,与此同时,程序员这个职业走进了我们视野,那前端开发和后端开发哪个发展前景更好? 对于想要学习计算机的...

    这几年互联网行业发展很快,很多人都想在这个行业中寻找到自己合适的岗位,特别是近几年手机普遍的情况下,与此同时,程序员这个职业走进了我们视野,前端开发和后端开发哪个发展前景更好

    1. 对于想要学习计算机的初学者而言,首先要明白计算机行业和其它技术行业的职业要求没什么不同,一样的标准、一样的要求、一样的艰辛。学习没有捷径,专业没有好坏。学习任何一门技术都不是一蹴而就的事情,都需要循序渐进、由入深,都需要抱有极大的兴趣和爱好,保以持之以恒、坚韧不拔的精神和毅力,才能学有所成、堪为重用。有精湛的技术、有解决实际问题的能力,才是大家愿意招纳的对象,才能拥有远大的前程
    2. 何为前端何为后端,概括的说在终端设备(如PC、手机、单片机等)上运行的程序即为前端软件;在服务器上运行的程序或中间件即为后端系统。因其运行的操作系统、支撑的硬件环境和软件环境不同,其软件开发的语言和涉及的技术、理论差异非常大,学习难度和学习曲线的陡峭程度也不一样。相对而言,前端入门容易一点,但技术纷杂、变化快,难精;后端涉及的专业知识和关键技术面广,要求高,学习成本高、入门和上手的时间长,但技术持久性强,易积累
    3. 前端重于呈现和用户体验,后端重于算法和架构;前端是一对一的,后端是一对多的,对于后端而言面对动则百万、千万级的用户高并发访问,能胜任一个高性能和高并发后台系统的开发工作,不是一朝一夕之功。另外,从目前的系统架构来说,大部分逻辑算法和数据处理都是在后台系统中实现的,所以算法设计和数据处理开发也是后端的重要内容,但这方面的技能和素质要求更高
    4. 总之,粗略地谈,前端入门容易,岗位需求量大,竞争激烈;后端入门难,但工作相对稳定,发展前景好,多为企业核心人员

    最后我的观点是:前端也好,后端也好,任何行业都需要你付出很多的努力,方能有很好的前景。

    展开全文
  • Web前端开发工程师经典面试题(附参考答案)
  • 【1+X Web前端等级考证 】| 最新Web前端开发中级实操

    万次阅读 多人点赞 2020-11-23 13:20:37
    但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,...

    由于经常分享失败,我上传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 NULL3COMMENT '序号',
       `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 NULL3COMMENT '序号',
       `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) c o n n ( 6 ) conn (6) conn6sqlCount
    (7)( n u m − 1 ) ∗ num-1)* num1)pageCount
    (8)SELECT * from news limit s t a r t , start, 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 方面的~~

    展开全文
  • Web前端开发师必备的8个工具

    千次阅读 2021-08-26 17:26:36
    Web前端开发需要掌握的几个必备技术是: HTML +_CSS核心、JavaScript、VUE框架 前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。 前端程序猿切页面写页面,...

    在这里插入图片描述

    【此回答转自乐字节】

    Web前端开发需要掌握的几个必备技术是:

    HTML +_CSS核心、JavaScript、VUE框架

    前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。

    前端程序猿切页面写页面,Web上、H5上的炫酷效果,是前端开发大展身手的地方。最常见的用于前端开发的技术组合是:

    HTML+CSS+JavaScript。

    web前端是在开发人员中最直接面向产品、面向用户的设计人员,一个开发团队的成果是要靠web前端去展现,因为用户不会去关心后台的处理有多么强大。

    后端开发是写后台,各种业务逻辑、数据处理、模块接口、客户端接口等等。后端开发者通常精通于一种Web编程语言和一个数据库管理系统。电商平台点击筛选条件下面为你筛选出来的宝贝的功能以及付款人数数据的变化等都是由后台来实现提供的。

    目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端去做。
    前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。

    Web前端开发师必备的8个工具

    1、HBuilder

    功能简介:

    HBuilder是专为前端打造的开发工具,具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。

    2、Sublime Text

    功能简介:

    Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如迷你地图,多选择,Python的插件,代码段,等等。完全可自定义键绑定,菜单和工具栏。Sublime Text的主要功能包括:拼写检查,书签,完整的Python API,Goto功能,即时项目切换,多选择,多窗口等等。

    3、PS

    功能介绍:

    Dobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。

    Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。

    4、Dreamweaver

    功能介绍:

    dreamweaver是个由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口,亦有HTML编辑的功能。

    5、WebStorm

    功能介绍:

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

    6、Visual Studio Code

    功能介绍:

    Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器,软件功能非常强大,界面简洁明晰、操作方便快捷,设计得很人性化。软件主要改进了文档视图,完善了对 Markdown的支持,新增PHP语法高亮。

    7、wampServer

    功能介绍:

    WampServer,是Windos Apache Mysql PHP集成安装环境,即在window下的apache、php和mysql的服务器软件。PHP扩展、Apache模块,开启/关闭鼠标点点就搞定,再也不用亲自去修改配置文件了,WAMP它会去做。再也不用到处询问php的安装问题了,WAMP一切都搞定了。

    8、Atom

    功能介绍:

    ATOM,是一个现代的文本编辑器,平易近人,但可删节的核心工具定制做任何事,也可以使用有效不沾一个配置文件。

    暂时就这些

    注:每周福利均会更新,更多福利等你领取,更多技巧,欢迎在评论区一起交流!
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    学习Java没有那么容易,一定要掌握学习方法,初学者对于学习方法有什么不懂的可以随时找我咨询,真的是希望新手少走弯路,下面有我的java学习交流q
    u n:前面是四九零,中间是五七四,后面是七五三,进qun备注123,任何问题都可以随时问我。,领取Python
    ,web前端开发,Python爬虫,Python数据分析,大数据开发,人工智能,Java项目,Java基础等精品学习课程。带你从零基础系统性的学好Python,Java,web前端和大数据等!做一名牛逼的程序员!

    希望这些能够帮助大家从一个小白成长为大牛,最后提醒大家,不要在拼搏的年纪选择安逸,希望小编的文章能够帮助到小伙伴们!

    END
    祝大家学的愉快,学的神速。
    有帮助的话,各位小伙伴可以点个赞收藏支持下啦!❤️
    也欢迎关煮lili,一个在变秃,但能带你变强的程序员~
    今天先说这么多,我是乐字节哩哩,一个有趣的灵魂!下期见!
    展开全文
  • 移动设备在全球范围内得到了空前的普及,在前端领域,Hybird Web、React Native、Weex、Flutter 等等一系列新的移动前端技术也如同雨后春笋般冒出来,今天来和大家分享一下我对「移动前端开发和 Web 前端开发」的...
  • web前端开发是什么?

    千次阅读 2020-01-20 16:13:19
    web前端开发 1、web即web系统,是以网站的形式呈现,通过浏览器的访问来实现一定的功能的系统。 2、什么是前端开发? 前端开发是创建web页面或app等前端界面呈现给用户的过程。通过html、css、js以及衍生出来的各种...
  • 根据大数据直观显示,2022年,Web前端开发依然是值得大家选择的职业。目前各个企业对于这块的人才稀缺量比较大,可以说这块是有市场的,其他的行业相比它还没有达到饱和状态,所以说这方面的岗位也是很好求职的。
  • 但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,...
  • 零基础如何学 Web 前端开发

    千次阅读 2021-07-31 16:27:12
    但是呢,就是有一些可爱的小伙伴私聊问我,零基础如何学 Web 前端开发,有什么建议,指导一下。这可难为我了,说实话这种建议还真不敢说,因为建议好了就把人带到了正确道路了,建议差了就是误人子弟。但是呢,既然...
  • web前端开发前景如何

    千次阅读 2021-07-04 11:35:57
    web前端开发前景如何?前端是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTML、CSS、JavaScript等专业技能工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,...
  • web前端开发工程师岗位的职责

    千次阅读 2021-07-29 06:05:55
    web前端开发工程师需要与后端开发团队紧密配合,确保代码有效对接,优化前端应用性能。以下是学习啦小编整理的web前端开发工程师岗位的职责。web前端开发工程师岗位的职责1职责:1、负责产品的前端代码开发、页面...
  • 5个Web前端开发软件,零基础入门完全够用了!

    万次阅读 热门讨论 2020-11-24 15:44:19
    这个软件就不多说了,记事本的增强版,主要应用在Windows平台下,大部分人都应该使用过,非常轻巧灵活,运行速度快,支持多窗口切换,可编辑语言也非常多,自动补全、语法提示检查等功能都不错,对于前端开发入门...
  • web前端开发行业前景分析

    千次阅读 2021-08-01 04:37:55
    web前端开发行业前景分析近年来,计算机技术培训的需求在不断提升,大家对其的要求也越来越高。当下很多人都会网上搜寻相关的信息。接下来就让小编带你走进它吧。对于家庭,许多人都希望有一个稳定的工作,这时候,...
  • 对于正在从事Web前端开工作的人来说,了解Web前端开发规范是很重要...因为只有这样才能保证高效快速的完成工作,今天小千就来大家分享一下新手初学Web前端需要注意的Web前端开发规范有哪些!希望对小伙伴们有所帮助。
  • 学习web前端能做游戏开发吗?

    千次阅读 2020-04-26 09:06:48
    Web前端能做游戏吗?就业方向大概有哪些?前端开发是创建Web页面或APP等前端界面呈现给用户的过程,Web前端工程师是随着移动互联网的迅猛发展而诞生的新兴职业。下面且看小编的分析。 前端技术包括JavaScript、...
  • web前端开发基础入门篇(一)

    千次阅读 2021-11-18 18:19:39
    本篇将依次介绍HTML、W3C标准、网页的开发工具浏览工具、客户端应用计术等基础知识。
  • (完整word版)web前端开发技术试卷三

    千次阅读 2020-12-22 02:22:37
    Web前端开发技术课程考试试卷(三)总分100分考试时间:120分钟考试形式:闭卷一、选择题(每题1分,共20分)1.HTML指的是__________。(A)超链接的文本标记语言(B)超文本标识语言(C)家庭工具标记语言(D)以上都不是2....
  • 目录试题一(40分)试题二(30分)试题三(30分)2019年下半年“Web前端开发中级”实操考试评分细则 2020年下半年 Web前端开发中级 实操考试 考生姓名:——————————— 准考证号:—————————— ...
  • 前端开发工程师的主要职责是与交互设计师、 视觉设计师协作,根据设计图用HTMLCSS完成页面制作,下面随小编一起看看web前端开发实习报告吧。年轻的工程师需要更多的了解需求设计、产品经理更要懂得软件迭代规律。...
  • web前端开发(一)—HTML基础

    万次阅读 多人点赞 2018-07-31 23:41:15
    web前端简介 什么是HTML? HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、...
  • Web前端开发主要做什么

    千次阅读 2021-07-24 14:13:21
    Web前端开发主要做什么?朗沃小刘小编今天来谈谈web前端开发主要做什么?web前端工程师,做的工作与网站前/后台系统的页面相关,使用到的主要技术包括:HTML、CSS、JavaScript。现代web前端开发已经不能像传统web...
  • 今年是1+X 等级考试试点第二年,2020年1+X Web前端开发考试第一批在10月17号已经考了,今年的第二批将在12月进行… 下面是研究这方面的人给出的模拟题,考前做一做,考试不慌慌!根据前几批考的真题来看,有时候选择还...
  • 首先,网页设计师是对网页的架构、色彩以及网站的整体页面代码负责,网页美工只针对UI设计,比如网站是否做的漂亮,Web前端开发工程师是负责交互设计的,需要程序猿进行交互设计的配合。 出色的Web前端开发工程师...
  • web前端开发常用工具有哪些?

    千次阅读 2019-07-01 17:05:18
    下面苏州学码思小编为大家介绍一些常用的web前端开发工具。 1、Bootstrap Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSSHTML的集合,它使用了新的浏览器技术,给你的Web开发提供了时尚的版式,表单,...
  • web前端开发   用最简单粗暴的方式来讲,就是用html + css + javascript来构建一个供人浏览的网页,其中又包括两个主要的分类:pc端网页开发以及移动端网页开发(很多时候被称为h5开发)。 那么这两者有什么...
  • 2020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— 试题一(30分) 阅读下列说明、效果图HTML代码,进行静态网页开发,填写(1)至(10)代码。 ...
  • Web前端开发需要学习哪些知识

    万次阅读 多人点赞 2018-09-03 11:37:36
    Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态 的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0...
  • 2020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— 试题一(30分) 试题一(30分) 阅读下列说明、效果图HTML代码,进行静态网页开发,填写(1)至...
  • Web前端开发 HTML设计 经验与技巧总结

    万次阅读 多人点赞 2020-01-19 13:09:33
    Web前端开发是是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互,有一些常用的方法技巧,包括限制input输入框...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 443,704
精华内容 177,481
关键字:

web前端开发和游戏开发