Javaweb后端开发必学(HTML、CSS、JS、Vue)
Javaweb
- HTML、CSS
- CSS引入方式
- < span >标签
- CSS选择器：
- 页面布局
- 表格
- 表单标签
- 表单项
- JavaScript
- JavaScript引入方式
- JS语法
- 变量
- 数据类型
- 运算符
- 函数(Java中方法)
- JS对象
- Array
- String
- JSON(对象标记法)
- BOM
- Window 浏览窗口对象
- Location： 地址栏对象
- DOM
- JS事件监听
- 事件绑定
- 常见事件
- Vue
- vue生命周期
- Axios
- 前后端分离开发
- [YApi]( )
- 前端工程化
- Vue项目-创建
- Vue的组件库Element
- 常见组件(CV工程师)
- Axio异步加载数据
- Vue路由
- 打包部署
- Nginx
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>
特点：
图片
CSS引入方式
行内样式： 写在标签的style属性中(不推荐)
行内样式仅针对这一条语句有效！ 所以不推荐
<h1 style = "xxx: xxx; xxx: xxx;"> 中国新闻网 </h1>
<!--前面XXX为属性名 后面XXX为属性值-->
内嵌样式： 写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)
<style>
h1{ <!-- 这当中的CSS样式对所有h1标签都有效果-->xxx: xxx; xxx: xxx;
}
</style>
外联样式： 写在一个单独的.css文件中(需要通过 ink 标签在网页中引入)
h1{ <!-- 单独定义在CSS文件当中-->xxx: xxx; xxx: xxx;
}
link标签演示： <link rel = "stylesheet" href = "css/news.css">
颜色
< span >标签
< span > 是一个在开发网页时大量会用到的没有语义的布局标签
特点： 一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
<head><style>
span{color: red;
}</style>
</head>
<body><span> Chinese </span>
</body>
CSS选择器：
用来选取需要设置样式的元素(标签)
css记得在头标签内使用 < sytle > 包裹
字体大小： font-size : 10px; 调整文字大小
优先级： id选择器优先级第一 类选择器第二 元素选择器第三
属性：
color： 设置文本的颜色
font-size： 字体大小(记得加px)
超链接：
<a href="..." target="...">央视网</a>
属性：
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
音频：< audio >
src： 规定音频的url
controls： 显示播放控件
段落：< p >
换行： < br >
文本加粗： < b > / < strong > 后者是有强调意义的、不过也能加粗
文本对齐方式：
h1{text-align: center/ left / right;} 分别是居中、靠左、靠右
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>
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
函数(Java中方法)
介绍： 函数(方法)是被设计为执行特定任务的代码块
定义： JavaScript 函数通过 function 关键字进行定义，语法为
function functionName(参数1,参数2){//代码块}
注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用： 函数名称(实际参数列表)
我们通常定义一个变量来接收函数返回的内容
var result = add(2,4);
alert(result)
或者：
var result = function functionName(a ,b){return a + b;}
JS中、函数调用可以传递任意个数的参数！
JS对象
Array
JS中Array对象用于定义数组：
console.log(arr[0]);//输出到控制台
JavaScript 中的数组相当于Java 中集合，数组的长度是可变的，而JavaScript 是弱类型，所以可以存储任意的类型的数据
for循环也可以遍历的、没有值也给你遍历了
arr.forEach((e)=>{console.log(e);})
有点类似于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>
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>
Location： 地址栏对象
alert(location.href);
location.href = "https://www.baidu.com";
有些网站打开就跳转广告就这么写的
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>
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);
在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>
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:端口号
Javaweb后端开发必学(HTML、CSS、JS、Vue)相关推荐
- java 委托_动态代理：Java开发必学
一句话概括:java 动态代理通过反射机制,可在不修改原代码的情况下添加新的功能,应用于多种场景,简单.实用.灵活,是 java 开发必学知识,本文将对动态代理使用进行详细介绍. 1. 引言 最近开发 ...
- 后端要学MySQL_做后端开发需要学什么
展开全部 对于初学Java并且有志于后端开发的同学来说,需要重点关注以下几个部分:32313133353236313431303231363533e4b893e5b19e31333433656631 ...
- java后端开发需要学什么_从事Java后端开发，要学习哪些知识和技能？
首先要明确后端包括哪些职业:DBA(数据库维护优化专家),Developer(程序猿),Architect(构架师),Scrum master及类似(敏捷开发专家),Project Manager(产 ...
- 后端开发需要学什么_都2020年了，还在纠结学什么语言？| 后端篇
几个礼拜前,一个学弟问我: "Ray,我打算之后要找工作了,不过现在自己没有特别深入的语言,最近想找一门好好学一下,你觉得学什么语言好呀?" 我表示:"这个要看你求职方向 ...
- Web前端开发必学15大技术
快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 Angular 2和ReactJs出现了,使用了尚未完全定型的ECM ...
- Web开发必学的8个网页优化技巧！
现在,有越来越多所谓的"教程"来帮助我们提高网站的易用性.达妹收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站. 通 ...
- java后端开发所学的技术有哪些？
学习目标: 了解java后端开发工程师所具备的最基础的技术 学习内容: 熟悉java语言.了解J2EE体系结构.熟悉相关软件开发工具 了解IO.多线程.集合.通信传输.数据库访问.JVM 了解serv ...
- 「后端小伙伴来学前端了」Vue脚手架中 render 函数
前言 上一篇文章写了:「后端小伙伴来学前端了」分析Vue脚手架结构 简单说明了Vue的脚手架结构,但是上篇文章还欠了个小点没有说完,就在这篇文章中补齐.就是所谓的render函数. 一.main.js ...
- CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
最新文章
- 15个可交互的真实房屋场景，Silvio/李飞飞组开源大型室内场景的模拟环境iGibson...
- hexde php_怎样在PHP中把16进制HEX数据转换为2进制数据呢?
- SP-45ML光电二极管放大电路设计
- python初学者可以做的金融小程序-Python入门 —— 用pycharm写一个简单的小程序3...
- 使用Trello看板管理项目
- 开发linux显卡驱动,显卡驱动开发DRM入门--Apple的学习笔记
- 手写自己的MyBatis框架-支持插件
- STM32- 定时器的设定 - 二元一次方程的因素分解求解实现PWM和定时器频率的小数位 - Matlab 方法：
- Git：git stash存储文件修改
- 易语言linux登录器网关源码,Mir2源码详解之服务端-登录网关(LoginGate）
- 【写paper系列之一】怎样写好introduction--转自nature
- LPC解算的burg算法
- 二重积分x^2+y^2_计算二重积分∫∫(x^2+y^2+x)dxdy,其中D为区域x^2+y^2=1
- C++ STL 之堆栈(后进先出) stack 详解
- PC817做IO输出使用方法
- 地统计插值学习心得（三）ArcGIS Pro与ArcMap软件中地统计分析的区别
- python api接口10060_Python请求错误10060
- dom4j——解析XML
- pom.xml详解撸一下基础
- 跨平台应用：Qt 对决 HTML5