devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Javaweb后端开发必学(HTML、CSS、JS、Vue)_前端用html,css,javascript,后端一般用什么

作者：小蓝xlanll | 2024-02-28 02:07:20

赞

踩

前端用html,css,javascript,后端一般用什么

Javaweb

HTML、CSS

HTML：
HTML (HyperText Markup Language)： 超文本标记语言
超文本： 超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言： 由标签构成的语言
HTML标签都是预定义好的
例如： 使用< a >展示超链接，使用< ima >展示图片，< video >展示视频
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet)： 层叠样式表，用于控制页面的样式(表现)
参考HTML API

基础标签格式： ! 回车 只有在VS CODE 能用
注释快捷键： ctrl + shift + /

<html>
<head>
    <title>第一条HTML语句</title> <!-- 控制的是浏览器最上方的网页标题 -->
</head>
<body>  
<h1>Hello HTML</h1>  <!-- 一级标题 -->
<img src = "xx.jpg"/> <!-- 给一个图片路径 -->
<img src = "xx.jpg"> </img> <!-- 也可以这么写 但是没必要 -->
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

特点：
在这里插入图片描述
图片
在这里插入图片描述
在这里插入图片描述

CSS引入方式

行内样式： 写在标签的style属性中(不推荐)
行内样式仅针对这一条语句有效！ 所以不推荐

<h1 style = "xxx: xxx; xxx: xxx;"> 中国新闻网 </h1>
<!--前面XXX为属性名 后面XXX为属性值-->

  • 1
  • 2

内嵌样式： 写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

<style>
h1{ <!-- 这当中的CSS样式对所有h1标签都有效果-->
    xxx: xxx; 
    xxx: xxx;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

外联样式： 写在一个单独的.css文件中(需要通过 ink 标签在网页中引入)

h1{ <!-- 单独定义在CSS文件当中-->
    xxx: xxx; 
    xxx: xxx;
}
link标签演示： <link rel = "stylesheet" href = "css/news.css">

  • 1
  • 2
  • 3
  • 4
  • 5

颜色
在这里插入图片描述

< span >标签

< span > 是一个在开发网页时大量会用到的没有语义的布局标签
特点： 一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

<head>
    <style>
span{
    color: red;
}
    </style>
</head>
<body>
    <span> Chinese </span>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

CSS选择器：

用来选取需要设置样式的元素(标签)
css记得在头标签内使用 < sytle > 包裹
在这里插入图片描述
字体大小： font-size : 10px; 调整文字大小

优先级： id选择器优先级第一 类选择器第二 元素选择器第三

属性：
color： 设置文本的颜色
font-size： 字体大小(记得加px)

超链接：

<a href="..." target="...">央视网</a>

  • 1

属性：
href： 指定资源访问的url
target： 指定在何处打开资源链接
_self： 默认值，在当前页面打开
_blank： 在空白页面打开
超链接默认有下划线、使用： text-decoration: none; 取消文本效果

视频：< video >
src： 规定视频的url
controls： 显示播放控件
width： 播放器的宽度
height： 播放器的高度

<video src = "video/1.mp4" controls = "controls"></video>
<!--如果controls = "controls"这种属性名 = 属性值、可以直接省略属性值-->
直接写作controls

  • 1
  • 2
  • 3

音频：< audio >
src： 规定音频的url
controls： 显示播放控件

段落：< p >
换行： < br >
文本加粗： < b > / < strong > 后者是有强调意义的、不过也能加粗

文本对齐方式：

h1{text-align: center/ left / right;} 分别是居中、靠左、靠右

  • 1

line-height: 设置行高
text-indent: 定义第一个内容的缩进

注: 在HTML中无论输入多少个空格，只会显示一个。
可以使用空格占位符达到输出多个空格的效果： ` 

页面布局

盒子： 页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成： 内容区域 (content) 、内边距区域 (padding) 、边框区域 (border) 、外边距区域(margin)

布局标签： 实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签： < div > < span >
特点：
div标签：
一行只显示一个(独占一行)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高 (width、height)
span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高 (width、height)
在这里插入图片描述

表格

在这里插入图片描述

表单标签

在这里插入图片描述

<body>
   <form action="" method="get">

    用户名：<input type = "text" name = "username">
    年龄： <input type = "text" name = "age">
    
    <input type = "submit" value="提交">

   </form>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

form表单属性：
action： 表单提交的ur1，往何处提交数据 . 如果不指定，默认提交到当前页面
method： 表单的提交方式
get： 在url后面拼接表单数据，比如: ?username=Tom&age=12 ，url长度有限制 ，get是method属性的默认值、不写method默认就是get
post： 在消息体(请求体) 中传递的，参数大小无限制的。

表单项必须有name属性才可以提交

表单项

在这里插入图片描述

JavaScript

JavaScript引入方式

内部脚本： 将S代码定义在HTML页面中
JavaScript代码必须位于< script >< /script >标签之间
在HTML文档中，可以在任意地方，放置任意数量的< script >
一般会把脚本置于< body >元素的底部，可改善显示速度
外部脚本： 将JS代码定义在外部JS文件中，然后引入到 HTML页面中
外部JS文件中，只包含JS代码，不包含< script >标签
< script >标签不能自闭合
在< head >标签中声明
引入方式: < script src=“js/demo.js” > < /script >

JS语法


在这里插入图片描述

变量

JavaScript 中用var关键字 (variable 的缩写)来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
组成字符可以是任何字母、数字、下划线()或美元符号 (S)
数字不能开头
建议使用驼峰命名

特点：
作用域较大、全局变量、而且可以重复定义
注：
ECMAScript 6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。 等于局部变量
ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。等于是Java中 final

数据类型

JavaScript中分为： 原始类型 和引用类型。 原始等于Java中基本类型
number： 数字(整数、小数、NaN(Not a Number))
string： 字符串，单双引皆可
boolean： 布尔。true，false
null： 对象为空
undefined： 当声明的变量未初始化时，该变量的默认值是undefined

typeof运算符能够获取数据类型

运算符

在这里插入图片描述

== 和 ===的区别

== ： 会进行类型转换在比较

===：不会进行类型转换、直接比较数据类型是否相同

数据类型的转换：
在这里插入图片描述

parseInt("12"); 跟Java一样
parseInt("12A45")// 12 遇到A不是同一个数据类型后面就不看了
parseInt("A45")//NaN

  • 1
  • 2
  • 3

函数(Java中方法)

介绍： 函数(方法)是被设计为执行特定任务的代码块
定义： JavaScript 函数通过 function 关键字进行定义，语法为

function functionName(参数1,参数2){
//代码块}

  • 1
  • 2

注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用： 函数名称(实际参数列表)
我们通常定义一个变量来接收函数返回的内容
var result = add(2,4);
alert(result)
或者：

var result = function functionName(a ,b){
return a + b;}

  • 1
  • 2

JS中、函数调用可以传递任意个数的参数！

JS对象

Array

JS中Array对象用于定义数组：
在这里插入图片描述
console.log(arr[0]);//输出到控制台

JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据
在这里插入图片描述
for循环也可以遍历的、没有值也给你遍历了
在这里插入图片描述

arr.forEach((e)=>{
console.log(e);})

  • 1
  • 2

有点类似于lambda表达式、一个是-> 一个是 =>

String

在这里插入图片描述

<script>
    var a1 = "  HELLO JS  ";
    console.log(a1.length);
    console.log(a1.indexOf("E"));
    var a2 = a1.trim();
    console.log(a2);
    console.log(a2.substring(0,5));
   </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

JS自定义对象
在这里插入图片描述
在定义函数的时候、可以直接省略function

JSON(对象标记法)

百度JSON格式化，能够检查你的语法格式
key : value；都要用双引号包裹
在这里插入图片描述
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

在这里插入图片描述

BOM

概念： Browser Obiect Model 浏览器对象模型，允许avacript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

Window 浏览窗口对象

在这里插入图片描述
confirm()；是有返回值的、点击确认返回true；点击取消返回false；

<script>
    window.alert("HELLO BOM");
    alert("HELLO BOM WINDOW");

    confirm("确认删除该记录吗");//取消或确定对话框

    var i = 0;
    setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000); //每隔两秒就会执行一次函数;不断重复！

    setTimeout(function(){
        alert("JS");
    },3000);//三秒之后弹出JS对话框
    </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Location： 地址栏对象

在这里插入图片描述

alert(location.href);
location.href = "https://www.baidu.com";

  • 1
  • 2

有些网站打开就跳转广告就这么写的

DOM

在这里插入图片描述
在这里插入图片描述

JS事件监听

事件绑定

在这里插入图片描述
在这里插入图片描述

常见事件

在这里插入图片描述

Vue

框架： 是一个半成品软件、是一套可重用的、通用、软件基础代码模型。基于框架进行开发，更加快捷、更加高效

这里的Vue.js要去官方文档里面下载
在这里插入图片描述
在这里插入图片描述
通过 v-bind 或 v-model绑定的变量，必须在数据模型中声明

    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
   <a v-bind:href="url">百度一下，你就知道</a> <br><hr>
   <a :href="url">百度一下，你就知道</a><br><hr>

   <input type="text" v-model="url">{{url}}
</div>
</body>
<script>
    new Vue({ //定义一个Vue对象
       el:"#app",
       data: {
           url: "https://www.baidu.com"
       }
   })
 </script>
 //=====================================
 <body>
<div id="app">
   <input type="button" value="按钮" v-on:click="handle()">
   <input type="button" value="按钮" @click="handle()">
</div>
</body>
<script>
    new Vue({ //定义一个Vue对象
       el:"#app",
       data: {
           url: "https://www.baidu.com"
       },methods: {
        handle: function(){
            alert('点击！');
}}  }) 
   </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

在这里插入图片描述

vue生命周期

生命周期： 指一个对象从创建到销毁的整个过程
在这里插入图片描述
在这里插入图片描述
我们每次执行Vue方法都一定会触发道mounted这个状态、我们主要就用它来发送请求到服务端、加载数据

也称之为钩子函数

Axios

对原生的Ajax进行封装、简化书写、快速开发
在这里插入图片描述
更渐变的方式
在这里插入图片描述

前后端分离开发

根据接口文档让前后端开发、可以无缝衔接
接口文档可以在线、离线两种模式。由项目经理写出原型+需求

开发流程：
在这里插入图片描述

YApi

前端工程化

模块化： JS、CSS
组件化： UI结构、样式、行为
规范化： 目录结果、编码、接口
自动化： 构建、部署、测试

前端工程化： 是指在企业级的前端项目开发中，把前端开发所需的工具技术、流程、经验等进行规范化、标准化。

vue-cli： 是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

Vue-cli提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境： NodeJS

Vue项目-创建

命令行： vue create vue-project01
图形化界面： vue ui

在这里插入图片描述

Vue项目启动的两种方式：
方式一： 图形化界面 NPM脚本第一个小扳手
方式二： 命令行npm run serve

Vue端口修改：
在这里插入图片描述
默认主页的界面
在这里插入图片描述
Vue的组件文件以.vue结尾，每个组件由三个部分组成: < templat >、< script >、< style >

Vue的组件库Element

初次安装:
在项目中打开cmd命令窗口，输入命令---- npm i element-ui -S命令

安装之后在main.js中写入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

  • 1
  • 2
  • 3
  • 4

在App.vue里面写上导入Element

<template>
  <div>
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'

export default{   
   components: { ElementView },
    data() {
        return {
            message: "Hello Vue!"
        }
    },
    methods: {}
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

main.js一般都是连着 App.vue。你就可以在App.vue里面去导入不同的vue文件、 主要就是修改< div >里面改成你要导入的vue <vue文件名 - vue>。然后在< script >里面导入路径。在方法里面 components: { vue名字 }

Element

常见组件(CV工程师)

Pagination 分页：
Dialog 对话框：
From 表单： 能够跟Dialog嵌套

Axio异步加载数据

在这里插入图片描述
导入是在你当前需要传输数据的 VUE文件 < script >的第一句导入
再使用Axios章节的方法、获取URL的数据

在这里插入图片描述
在这里插入图片描述

Vue路由

前端路由： URL中的hash(#号) 与组件之间的对应关系

在这里插入图片描述

如果你在创建vue项目的时候没有选择路由
在这里插入图片描述

之后打开项目src下的router中index.js去配置你的路由

在这里插入图片描述
需要在这个位置再定义一个 path: '/'。因为你打开项目的时候默认是没有后面的路径。所以你需要一个根路径。
记得检查一下main.js中是否配置好
在这里插入图片描述

到你需要实现跳转的vue文件位置去配置一下路由link
在这里插入图片描述

最后到 App.js当中去设置路由展示组件
在这里插入图片描述

打包部署

在这里插入图片描述

Nginx

在这里插入图片描述
将你打包好的文件里面的内容复制到 html 文件夹下
启动nginx就行。如果没有反应可以到log文件夹下面看看有没有error
很有可能是端口被占用、cmd
netstat -ano | findStr 80 看看80端口被谁占用 ， 每一行最末尾是一个PID进程编号
你可以到任务管理器查看PID

打开conf 里面的 nginx.conf，记事本里面36行修改端口
如果看到任务管理器 nginx正在运行，就可以打开localhost:端口号

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/157141
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号