JavaWeb基础（上）

只因哥66

已于 2023-07-10 20:49:01 修改

阅读量74

点赞数

文章标签：数学建模 java 开发语言

于 2023-07-10 20:48:00 首次发布

本文链接：https://blog.csdn.net/qq_48757028/article/details/131208179

版权

参考网站：w3school 在线教程

web简介

web网站开发模式（前后端分离）：

HTML

<h1>...</h1>:设置字体大小，h1是最大的字体，h6是最小的字体

<span> : 没有任何语义的标签

<p>....</p> : 段落标签

<div>....</div>:容器标签

<img> : 加载图片，src指定图片的位置

<hr>: 在HTML页面中创建一条水平线

<br> : 可插入一个简单的换行符

<a href = "www.....">..</a>:定义超链接，用于从一张页面链接到另一张页面。

<ul><li>....</li></ul>:无序列表标签

<ol><li>....</li></ol>:有序列表标签

单标签<meta> 是<head>的辅助标签，常用于定义一些关键字，说明之类的。

<table>标签：表示一个表格

<tr>标签：表示表格中的一行

<td>标签：表示表格中的列

<th>标签：表示表格中的表头

border:1px solid black:设置边框和颜色

border-collapse: collapse:设置边框合并

<form>标签，表示表单标签，定义整体表单区域。表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器。一个表单有很多信息组成，比如下图

这些内容有很多其他标签来承载，这些标签称为表单元素标签。

表单元素属性设置：

name属性：设置表单元素的名称，该名称是提交数据时的参数名

value属性：设置表单元素的值，该值时提交数据时参数名所对应的值

表单提交：表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器。

设置表单属性提交数据：

action属性，设置表单数据提交地址

method属性：设置表单提交的方式，一般有“GET”方式和“POST”方式（“GET”方式没有请求体，“POST”方式有请求体），不区分大小写。

CSS

CSS是美化页面的语言。

CSS语法：

选择器{样式规则} 其中样式规则是：属性名1：属性值1；属性名2：属性值2；

选择器是用来选择标签的，选出来以后给标签加样式。例如：

CSS引入方式

1、行内式：直接在标签的style属性中添加CSS样式

可视化，但不可重用

2、内嵌式（内部样式）：在<head>标签中加入<style>标签，在<style>标签中编写CSS代码。

同一个页面内可以复用和维护。但多页面之间的重用性不高。

3、外链式：将CSS代码写在一个单独的.CSS文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。

CSS选择器

用来选择标签，选出来之后给标签增加样式。

常见的选择器有：（1）标签选择器（2）类选择器（3）层级选择器(后代选择器)

（4）id选择器（5）组选择器（6）伪类选择器

（1）标签选择器，根据标签选择器来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用的设置。

（2）类选择器，以 . 开头

（3）层级选择器，根据层级关系选择后代标签，以选择器1选择器2开头

（4）id选择器，以#开头，元素的id名称不能重复，所以id选择器只能对应于页面上一个元素。

（5）组选择器，以 , 分隔开

（6）伪类选择器，主要是添加特效效果，以 : 分隔开

CSS属性

JavaScript（负责网页行为）

JavaScript式运行在浏览器端的脚本语言，是由浏览器解释执行的，简称js，它能够让网页和用户有交互功能，增加良好的用户体验效果。

JavaScript的使用方式

1、行内式

2、内嵌式

3、外链式

JavaScript变量和数据类型

JavaScript是一种弱类型语言，不需要指定变量的类型。Javascript的变量类型由它的值来决定，定义变量需要用关键字‘var’，一条Javascript语句应以 ' ; '来结尾。

数据类型：

命名规则：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
        <!--内嵌式写入JavaScript-->
        <script>
            //(1)数字number
            var inum = 10;
            var fnum = 10.1;
            //(2)字符串string
            var sName = "itcast"
            //(3)布尔 boolean
            var bIsTrue = true;
            //(4)未定义 undefined
            var unData;
            //(5)空类型 null
            var nullData = null;
            //(6) object表示对象类型
            var oPerson = {
                name:"itcast",
                age:12
            }
            //获取变量类型typeof
            alert(typeof(inum))
            alert(typeof(fnum))

            //获取数据,console.log方便调式javascript用的,可以看到在页面中输出的内容,与alert相比,它能看到结构化的东西,而alert淡出一个对象就是[obujct object],但comsole能看到对象的内容,console不会打断页面的操作
            console.log(oPerson.name)
            console.log(oPerson.age)
        </script>
    </head>
<body>
</body>
</html>

JavaScript函数

JavaScript函数使用的是function进行定义。

函数调用的时候，后面要加上小括号。

JavaScript处理标签元素

1、获取标签元素，使用内置对象document的getElementById方法（如果没有获取成功，则返回的是null）来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
        <!--内嵌式写入JavaScript-->
        <script>
            //定义一个函数，方便随时调用
            function fnLoad(){
                //通过内置方法获取对应的id的标签，如果没有获取成功返回null
                var oBtn = document.getElementById("btn")
                alert(oBtn)
            }

            //因为按顺序执行，如果不定义函数就会先执行getElementById，但是还没有input，所以就会报错。所以要定义函数。定义函数通过onload事件对函数进行使用。
            //onload事件：页面数据加载完毕后触发，是一个被动事件。
            window.onload = fnLoad;


            //工作的写法,更加方便一点
            //window.onload = function(){
                //通过内置方法获取对应的id的标签，如果没有获取成功返回null
              //  var oBtn = document.getElementById("btn")
           //     alert(oBtn)
           // }


        //onclick事件：点击触发，是一个主动的事件。
        </script>
    </head>
<body>
    <input type="button" value="按钮" id="btn" onclick="fnLoad()">
</body>
</html>

2、操作标签元素

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!--类样式-->
        <style>
            .mybtn{
                width: 100px;
                height: 100px;
                background: green;
            }
        </style>
        <!--内嵌式写入JavaScript-->
        <script>
            //定义一个函数，方便随时调用
            function fnLoad(){
                //通过内置方法获取对应的id的标签，如果没有获取成功返回null
                var oBtn = document.getElementById("btn")
                // oBtn.value = "username"
                // oBtn.style.background = "red"
                oBtn.className = "mybtn"
            }
        </script>
    </head>
<body>
    <input type="button" value="按钮" id="btn" onclick="fnLoad()">
</body>
</html>

3、读取或设置标签包裹的内容

使用innerHTML可以读取或者设置标签包裹的内容。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!--内嵌式写入JavaScript-->
        <script>
            //等待我们的页面数据加载完毕触发onload事件
            window.onload =  function fnLoad(){
                var oDiv = document.getElementById("mydiv")
                oDiv.innerHTML = "你好阳光";
            }
        </script>
    </head>
<body>
    <div id="mydiv">我是一个标签</div>
</body>
</html>

JavaScript数组

数组的创建：

多维数组的创建：

获取数组的长度：alist.length;

添加数据：aList.push(5); 删除最后一个数据：aList.pop();

根据下标添加和删除元素：

2、字符串拼接

JavaScript的字符串拼接直接使用：“+”。

var sStr = "123" //这是字符串类型

转化成整型或者浮点型： parseInt(sStr) 或 parseFloat(sStr)

JS定时器

1、设置定时器：setTimeout（）函数

2、设置定时器：setInterval（）函数

3、清除定时器：clearTimeout（timeoutID）

清楚setTimeout（）函数，timeID为调用setTimeout函数时所获得的返回值。

4、清楚定时器：clearInterval(timeoutID)

清楚setInterval（）函数，timeID为调用setInterval函数时所获得的返回值。
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
        <script>
            function fnShow(name){
                alert(name);
               
            }
           //停止重复定时器的函数
            function fnStop(name){
                clearInterval(tId);
            } 
        
            var tId = setInterval(fnShow,2000,"itcast")
        </script>
    </head>
<body>
    <input type="button" value="停止" onclick=fnStop()">
</body>
</html>

js对象BOM

BOM：浏览器对象模型，允许js与浏览器进行对话，js将浏览器的各个组成部分封装为对象。

BOM中的Window对象是浏览器的窗口对象，window.alert("Hello Window"); alert("Hello Window");

BOM中的Location对象是地址栏对象。使用window.location.属性；或location.属性；

属性 href:设置或返回完整的URL。

js对象DOM

DOM是文档对象模型，将标记语言的各个组成部分封装为对应的对象。

Element元素对象封装的就是标签。

通过封装文档，也会形成一个DOM树。示例如下：

js通过DOM对html完成：改变html元素的内容，改变html的css，对html DOM事件做出反应，添加和删除html元素。

DOM对象中的Documnet对象：

Vue前端框架

Vue可免除原生js的DOM操作（Document Object Model 一种独立于语言，用于操作xml，html文档的应用编程接口），简化书写，基于MVVM（Model-View-ViewModel，最重要的理念其实就是分而治之，就是把不同的功能代码放到不同的模块里边，然后通过特定的方式让它们之间建立起关联。M指的是model数据模型就是vue实例中data里的数据；接下来的V就是view视图，说白了就是所写的模版，本质上来说就是DOM元素；最后的两个字母VM就是上面两者的结合View-Model，它所扮演的角色就是一些控制逻辑。model模型是提供数据的，view视图是提供页面展示效果的，VM是实现控制逻辑把两者结合在一起
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

常用指令：

vue生命周期：

Ajax

Ajax（Asynchronous js and xml），异步的js和xml。作用有：数据交换，通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想（搜索引擎会自动产生多个可能搜索话题）、用户名是否可用的校验等。未刷新界面，界面就会发生变化。

原生Ajax：1、准备数据地址。2、创建XMLHttpRequest对象：用于和服务器交换数据。3、向服务器发送请求.4、获取服务器响应数据。（已不再使用）

现在使用Axios：对原生的Ajax进行了封装，简化书写，快速开发。

使用Axios：1、引入Axios的js文件。2、使用Axios发送请求，并获取响应结果。

前后端分离

YApi

YApi是高效，易用，功能强大的api管理平台，旨在开发，产品，测试人员提供更优雅的接口管理服务。后端即使没有完成函数的设计，前端人员也可以根据YApi中的mock服务找到对应的函数进行模拟测试。

前端工程化

模块化：：js，css

组件化：UI结构，样式，行为

规范化：目录结构，编码，接口

自动化：构建，部署，测试

Vue项目-创建

命令行：vue create vue-project01

图形化界面：vue ui

Element

Element：一套为开发者，设计师和产品经理准备的基于vue2.0的桌面端组件库。

常见的组件：button按钮，table表格，pagination分页（常与table一起使用），Dialog对话框（相当于弹出一个窗口），Form表单（由输入框，选择器，单选框，多选框等控件组成，用以收集，校验和提交数据），Container佈局容器（快捷搭建頁面的基本结构）

前端路由：URL中的hash（#号）与组件之间的对应关系。例如选择员工管理进入员工管理的界面，选择部门管理进入部门管理的界面。

Vue Router在创建项目的时候就已经安装好了，直接使用就可以。

打包部署：NPM脚本中的build就是打包。打包好之后部署在nginx服务器上。

Nginx：是一款轻量级的web服务器/反向代理服务器及电子邮件代理服务器。占有内存少，并发能力强。

只因哥66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb基础（上）

参考网站：w3school 在线教程web简介web网站开发模式（前后端分离）：HTML<h1>...</h1>:设置字体大小，h1是最大的字体，h6是最小的字体<span> : 没有任何语义的标签<p>....</p> : 段落标签<div>....</div>:容器标签<img> : 加载图片，src指定图片的位置<hr>: 在HTML页面中
复制链接

扫一扫