JavaScript web网页入门级开发详解

第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏)

第二篇:玩转web表单网页快速开发(❤建议收藏❤)

一、前言

提前学习web的有关知识,那我们来认识这个神乎怪哉的东西。

我的idea是中文版的,不过区别不大。

第一步:首先创建一个新项目,按照图示

第二步:起个任意名字,然后图示

第三步:这个你在项目里创建新项目的时候会弹出,弹出建议点新窗口

第四步:按照图示点击即可

第五步:注意圈起来的要一样

第六步:这两个名字任意的

第七步:按图示操作即可

第八步:直接点完成即可

第九步:如图

第十步:依次点击hello左边的小三角,然后点src的小三角,依次点开所有看到的小三角,找到

你刚才创建的模块名,这里我创建的是hello

第11步:右键点击hello,鼠标移动到新建那里,出现好多,点击左键单击包即可

第12步:hello前面的都是自己生成的,我们只需要加个controller即可

建好包之后我们就要进行环境配置,idea本身不支持jsp的,但是我们为了学习其中的原理性

的东西,从简单的jsp里面学到我们后续需要的一些原理性的东西,因此我们需要使用jsp,

所以我们需要学一门jsp语言。idea本身不支持这门语言,因此我们要想使用jsp,就必须导入

依赖。

第13步:在main中右键如图依次

第14步:输入webapp后点回车即可

第15步:在webapp下按照如图所示操作即可

第16步:在这目录下输入WEB-INF回车即可

第17步:继续在新建出来的WEB-INF右键后按图示即可

第18步:输入views回车即可

在views下没有我们想要的jsp文件,这说明我们还没有导入依赖,在导入依赖之前

我们要先确定根目录在哪里

第19步:要知道根目录在哪只需点击文件如图,单击项目结构即可

第20步:如图,你们不必慌,只需要按照我标的序号来点击即可

把这个设置成根目录后,我们就可以把jsp文件全部放在里面,并且可以调用他了。

第21步:完成上面那步之后,就会有在views下就会jsp文件了,单击即可,如图

第22步:随便起个名,我起的叫a1,回车即可

第23步:我画红圈圈起来的是随便写的,内容没有任何要求,这是后面再页面会显示出来的

第24步:做完上面那步之后,双击划红线的部分,就会出现右边的东西,是什么不重要

第25步:就要导入jsp的依赖了只需把这代码段全部的复制进去如图所示即可

 <!-- 添加servlet依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <!-- 添加jstl标签库依赖模块 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
        </dependency>
        <!--添加tomcat依赖模块.-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <!-- 使用jsp引擎,springboot内置tomcat没有此依赖 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

将上面那段代码复制下面到图示的位置,这两个单词之间,一般是第18-19行

第26步:你在这两个单词之间按ctrl+v复制时,会出现右下角的两个,此时,我们只需选右边

画圈圈的,自动导入更方便快捷

第27步:复制完成之后,按图示点击编辑配置即可

第28步:按图示点击即可

在工作目录下选择第三个,说明这个文件夹是一个模块,从其中也可以看出有一个模块

的英文单词。

第29步:依次从src下一直点开左边的小三角形,知道找到conterller后,右击,如图,

创建一个Demo类

第30步:输入@Con回车就会自动补全包名之类的

补全之后如图:

这个controller就相当于一个控制器,控制器是所有程序开始都要经过这个控制器,控制器

是进行数据的处理和接受。

第31步:在图示位置输入@Re回车(回车自动会补全)即可

补全之后如图所示:

第32步:按着图补全剩下的即可。

其中@RequestMapping表示从哪里来,而("/")表示从当前目录来,return "a1",这个要和

你之前起的jsp要一致。

第33步:按图所示,单击第二步即可出现右边的内容

第34步:在右边的内容把下面代码段的复制到里面即可

spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp

复制完成如图所示:

第35步:单击如图所示的,运行即可

运行之后会看到如图,说明运行成功了

有时候我们会出现图示这种情况:

不要慌,这种情况是接口被占用,说白了就是你前面用了但是没关掉就会照成这种情况,

解决起来也是十分的容易,只需要把8080,该为其他数字即可(任意)

第36步:我们只需在百度上搜索localhost:8081,如图

就会出现我们之前输入的语句了

好了,web快速开发已经讲解完毕了

后续篇幅:

第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏)

第二篇:玩转web表单网页快速开发(❤建议收藏❤)

到此这篇关于JavaScript web网页入门级开发详解的文章就介绍到这了,更多相关JavaScript web 网页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript一文带你玩转web表单网页

    一.前言 前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看 上篇,之后在食用这篇. 二.正文部分 如图示:点击webapp上面的小三角形点到直到看到jsp位置 我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行 后端数据处理和接收. 第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是 一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大 要先点击这个运

  • 浅谈Webpack4 plugins 实现原理

    目录 前言 认识 实践出真知 前言 在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的 认识 先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo

  • web开发跨域原因的多种解决方案

    目录 跨域原因 JSONP Nginx解决 后端解决 跨域原因 是由于浏览器的同源策略限制; 跨域指: 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 JSONP 这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇. 核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来. 缺点: 需要后端配合才能完成只能发送

  • web项目开发之JS函数防抖与节流示例代码

    目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上

  • web开发js字符串拼接占位符及conlose对象Api详解

    目录 占位符替换 控制台打印 table() log.info.warn.error group(),groupCollapsed(),groupend() 占位符替换 控制台打印(conlose.log())或者拼接字符换, 可以借助占位符解决 %s    字符串 %d  / %i    整数 %f    小数(整数.小数都可以, 推荐) %o    对象 %c    后面字符串的样式 示例代码: // %s示例 let s1 = '爱' let s2 = '祖国' console.log('

  • js实现web留言板功能

    本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input type="text" id="mood"/><br/> 笔记:<br/> <textarea id="network"></textarea><br/> <button id="send&q

  • JavaScript web网页入门级开发详解

    第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏) 第二篇:玩转web表单网页快速开发(❤建议收藏❤) 一.前言 提前学习web的有关知识,那我们来认识这个神乎怪哉的东西. 我的idea是中文版的,不过区别不大. 第一步:首先创建一个新项目,按照图示 第二步:起个任意名字,然后图示 第三步:这个你在项目里创建新项目的时候会弹出,弹出建议点新窗口 第四步:按照图示点击即可 第五步:注意圈起来的要一样 第六步:这两个名字任意的 第七步:按图示操作即可 第八步:直接点完成即可 第九步:如图 第十步:依次

  • JavaScript实现与web通信的方法详解

    web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. comet技术 浏览器作为 Web 应用的前台,自身的处理功能比较有限.浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广.在 Web 应用中,浏览器的主要工作是发送请求.解析服务器返回的信息以不同的风格显示.AJAX 是浏览器技术发展的成果,

  • Python开发自定义Web框架的示例详解

    目录 开发自定义Web框架 1.开发Web服务器主体程序 2.开发Web框架主体程序 3.使用模板来展示响应内容 4.开发框架的路由列表功能 5.采用装饰器的方式添加路由 6.电影列表页面的开发案例 开发自定义Web框架 接收web服务器的动态资源请求,给web服务器提供处理动态资源请求的服务.根据请求资源路径的后缀名进行判断: 如果请求资源路径的后缀名是.html则是动态资源请求, 让web框架程序进行处理. 否则是静态资源请求,让web服务器程序进行处理. 1.开发Web服务器主体程序 1.

  • Javascript之BOM(window对象)详解

    ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变

  • 从表单校验看JavaScript策略模式的使用详解

    众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重.事实上,几乎每一个中大型网站都会有"登录注册"以验证用户信息.防止一些不可名状的隐患... 那么表单的优劣就成了前端开发者急需解决的问题.其实我更愿意称为"代码的可读性"或"可复用性"以及"是否冗杂". 表单也有"优劣"?你在开玩笑嘛? 我想你可以认真看下下面的代码,它用到了一些"新知识": <form action=

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • Java基础之Web服务器与Http详解

    目录 Web服务器 技术讲解 PHP: JSP/Servlet Web服务器 IIS Tomcat JAVA jdk中的内容 Tomcat Tomcat根目录下的内容 Tomcat的配置 Http 1.什么是Http 2.两个时代 3.Http请求 4. Http响应 Web服务器 技术讲解 微软:国内最早流行的就是ASP 在HTML中嵌入了VB的脚本,ASP+COM 在ASP开放中,基本一个页面都有几千行的业务代码,页面极其混乱 维护成本高 PHP: PHP开发速度很快,功能很强大,跨平台,代

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • SpringCloud应用骨架开发详解

    我们每做一个新项目,通常都是从另一个项目把代码拷贝过来,然后在其上做开发.但是这种模式的一个比较大的问题就是会有很多上个项目的遗留代码.因此,开发一个公共的应用骨架系统,在开始其他新项目时,从这个骨架系统开始开发,是一个很好的选择. 我们首先需要创建一个SpringBoot工程,我们可以使用:https://start.spring.io/ 如下所所: 上图中比较关键的是从页面右侧"Add Dependencies"按钮弹出的列表中选择"Spring Web".网站

  • Javascript中window.name属性详解

    关于window下自带name的属性 不知道大家有没有发现这样一种情况 在控制台里直接输出未声明变量,正常情况应该是会报错的,而且声明未赋值的变量输出应该是undefined var a; //undefined b; //报错 但是偏偏就个别特例,就是name属性 其实window自身就带有name这个属性,在控制台输入window可以可以看到 打开 往下翻就可以找到 window.name直译过来是窗口名字,主要用于为超链接和表单设置目标(targets),什么意思呢,我们做个案例 建立两个

随机推荐