已有后端基础学习前端简单页面交互

文章目录

前言
[1. html](#1. html)
- [1.1 创建html文件](#1.1 创建html文件)
- [1.2 生成html骨架](#1.2 生成html骨架)
- [1.3 页面跳转](#1.3 页面跳转)
- [1.4 表单](#1.4 表单)
- [1.5 文件](#1.5 文件)
- [1.7 http请求](#1.7 http请求)
- [1.8 session令牌](#1.8 session令牌)
- [1.9 JWT令牌](#1.9 JWT令牌)
[2. css](#2. css)
- [2.1 选择器](#2.1 选择器)
- [2.2 属性](#2.2 属性)
- [2.3 布局](#2.3 布局)
- [2.4 引入css](#2.4 引入css)
[3. javascript](#3. javascript)
- [3.1 引入外部script](#3.1 引入外部script)
- [3.2 声明变量](#3.2 声明变量)
- [3.3 数据类型](#3.3 数据类型)
- - [3.3.1 undefined null](#3.3.1 undefined null)
  - [3.3.2 String](#3.3.2 String)
  - [3.3.3 number](#3.3.3 number)
  - [3.3.4 bigint](#3.3.4 bigint)
  - [3.3.5 boolean](#3.3.5 boolean)
- [3.4 function](#3.4 function)
- - [3.4.1 创建函数](#3.4.1 创建函数)
  - [3.4.2 函数是对象](#3.4.2 函数是对象)
  - [3.4.3 函数的作用域](#3.4.3 函数的作用域)
- [3.5 数组](#3.5 数组)
- [3.6 Object](#3.6 Object)
- - [3.6.1 定义Object](#3.6.1 定义Object)
  - [3.6.2 增删属性](#3.6.2 增删属性)
  - [3.6.3 this](#3.6.3 this)
  - [3.6.4 原型继承](#3.6.4 原型继承)
  - [3.6.5 json与js对象](#3.6.5 json与js对象)
- [3.7 动态类型](#3.7 动态类型)
- [3.8 运算符表达式](#3.8 运算符表达式)
- [3.9 控制语句](#3.9 控制语句)
- [3.10 Fetch API](#3.10 Fetch API)
- [3.11 跨域](#3.11 跨域)
- [3.12 导入导出](#3.12 导入导出)
[4. 前端环境准备](#4. 前端环境准备)
- [4.1 安装nvm](#4.1 安装nvm)
- [4.2 安装前端服务器](#4.2 安装前端服务器)
[5. vue2](#5. vue2)
- [5.1 安装脚手架](#5.1 安装脚手架)
- [5.2 创建vue项目](#5.2 创建vue项目)
- [5.3 vue组件](#5.3 vue组件)
- [5.4 属性事件绑定](#5.4 属性事件绑定)
- [5.5 计算属性](#5.5 计算属性)
- [5.6 axios](#5.6 axios)
- [5.7 Element UI](#5.7 Element UI)
- [5.8 Router 路由](#5.8 Router 路由)
- [5.9 vueX](#5.9 vueX)
[6. VUE3](#6. VUE3)
- [6.1 创建vue3项目](#6.1 创建vue3项目)
- [6.2 vue3项目目录结构](#6.2 vue3项目目录结构)
- [6.3 vue3项目必要依赖](#6.3 vue3项目必要依赖)

前言

在已有后端基础上学习前端, 做一些简单的页面交互

1. html

1.1 创建html文件

VS code 新建文本, 另存为 html 格式.

下载Idea KeyBindings 插件, 使用idea的快捷键

1.2 生成html骨架

感叹号+tab

删除 html 标签的 lang属性, 防止浏览器英文翻译

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.3 页面跳转

href输入本地html路径, 跳转本地html
输入网站地址 http:// 跳转进入网页
输入#id, 跳转到对应id的标签处, 不加id,跳转到顶部

html 复制代码

<a href=" "> </a>

1.4 表单

像服务端/test发送默认get请求, 传参数username

想要发送post请求, 需要修改表单属性 method="post"

html 复制代码

<form action="http://localhost:8080/test">
    <input type="text" name="username">
    <input type="submit" value="search">
</form>

name对应后端类的属性名,value对应属性值

1.5 文件

前端html

html 复制代码

<form action="http://localhost:8080/test"
    method="post" enctype="multipart/form-data">
    文件上传<input type="file" name="avatar">
    <input type="submit" value="file submit">
</form>

后端接收

java 复制代码

MultipartFile avatar

1.7 http请求

常见GET和POST请求

请求内容

请求行: URI
请求头: 定义编码, 请求类型等信息
请求体: POST请求参数

区别:

Get请求参数在URI , POST请求参数在请求体
请求头指定的编码方式不同, 默认URL编码, 可选JSON和Multipart

http原始请求示例

GET请求
POST请求URL编码
POST请求JSON格式
POST请求传文本+文件

html 复制代码

GET /api/user?id=123&name=zhangsan&age=25 HTTP/1.1  # 请求行：方法 + 带参数的路径 + HTTP版本
Host: example.com                                   # 必选头：目标域名/IP
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36  # 客户端标识
Accept: application/json                            # 期望返回的数据格式
Connection: keep-alive                              # 连接复用
                                                    # 空行（必须，\r\n）
# GET无请求体，空行后无内容
----------------------------------------------------------------------------------

POST /api/user/save HTTP/1.1                        # 请求行
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36
Accept: application/json
Content-Type: application/x-www-form-urlencoded     # 表单编码类型（必选）
Content-Length: 27                                  # 请求体长度（字节数，可选但推荐）
Connection: keep-alive

id=123&name=zhangsan&age=25                        # 请求体（表单参数）
----------------------------------------------------------------------------------
POST /api/user/save HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36
Accept: application/json
Content-Type: application/json                      # JSON编码类型（必选）
Content-Length: 45                                  # JSON字符串的字节长度
Connection: keep-alive

{
  "id": 123,
  "name": "zhangsan",
  "age": 25
}                                                   # 请求体（JSON参数）
----------------------------------------------------------------------------------
POST /api/upload HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0 Safari/537.36
Accept: application/json
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW  # 边界符（随机生成）
Content-Length: 350                                 # 整体请求体的字节长度
Connection: keep-alive

------WebKitFormBoundary7MA4YWxkTrZu0gW            # 开始边界
Content-Disposition: form-data; name="username"     # 文本参数名

zhangsan                                            # 文本参数值
------WebKitFormBoundary7MA4YWxkTrZu0gW            # 下一个边界
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"  # 文件参数+文件名
Content-Type: image/jpeg                            # 文件MIME类型

[文件二进制数据]                                    # 文件内容（二进制）
------WebKitFormBoundary7MA4YWxkTrZu0gW--           # 结束边界（加--）

1.8 session令牌

第一次请求后端带HttpSession参数的URL, 会自动生成Session对象, 返回后将SessionID存储在浏览器的Cookie , session可以key-value存储数据, 占用服务器内存,不宜存过多数据

适用场景: 浏览器网页, 单体项目, 和redis配合实现分布式

1.9 JWT令牌

一般在登录后后端手动生成JWT令牌,将数据嵌入令牌, 返回给前端, 前端手动存储, 并且在再下一次请求中将JWT令牌设置进请求头的Authorization, 后端手动接收, 解析JWT令牌的数据

适用场景: 分布式, 安全防篡改

2. css

2.1 选择器

type选择器, 根据标签类型选择

class 选择器 , 根据标签class属性选择, class名可重复

id 选择器 , 根据id属性选择, id不可重复

css 复制代码

/* 类型选择器 */
p{
    background-color:aquamarine;
}
/* class选择器 */
.c1  {
    background-color: bisque;
}
/* id选择器 */
#p3 {
    background-color: brown;
}

优先级: id > class > css

2.2 属性

background背景颜色

display显示或隐藏

...成百上千

2.3 布局

div 容器布局

template 模板复制

2.4 引入css

引入外部css

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实例</title>
    <link rel="stylesheet" href="style.css">
</head>

3. javascript

3.1 引入外部script

html 复制代码

<body id="b1">
    <p id="p1">02.html</p>
    <script src="1.js"></script>
</body>

3.2 声明变量

let 变量名 = 值; 变量函数里和函数外是两个作用域,和java类似
const 常量名 = 值; 常量
var 变量名 = 值; 变量函数里和函数外是一个作用域

3.3 数据类型

3.3.1 undefined null

undefined 未定义

表达式或函数无返回值, 访问未定义变量, 或变量无初始值. 数组越界, 对象不存在的属性都会出现undefined

由js产生

null 程序员手动赋值的null值

由程序员手动产生

共同点: 都没有属性, 方法, 统称为nullish

3.3.2 String

单双引号, 反引号表示字符串, 多引号减少转义次数

javascript 复制代码

String s = `<a src="1.html">超链接</a>`;

模板字符串

javascript 复制代码

let name="zhang";
let age = 18;
let uri = `/test?name=${name}&age=${age}`;

3.3.3 number

双精度浮点数, 默认数字类型

类型转换parseInt("10.5")转换为10,也是浮点数

3.3.4 bigint

10n 表示整数数后加n

3.3.5 boolean

falsy:

false

Nullish

0, 0n, NaN

"", '' ,``

trusy

true

除falsy的其他

3.4 function

3.4.1 创建函数

函数可以设置参数默认值, 使用默认值可以不传或者传undefined

javascript 复制代码

function add(a,b=10) {
	//函数体
	return a+b;
}

匿名函数, 只用一次

javascript 复制代码

(function (a,b){
	return a+b;
})(1,2)

箭头函数

javascript 复制代码

(箭头)=>{
	return 结果
}

3.4.2 函数是对象

把add函数传给p1的onclick属性

javascript 复制代码

document.getElementById("p1").onclick= add

函数可以作为参数传进来, 也可以在函数中创建函数对象作为结果返回

3.4.3 函数的作用域

javascript 复制代码

// 定义函数c
function c() {
    var z = 30;
}
var x = 10;
//定义函数a
function a() {
    var y=20;
    //定义函数b
    function b() {
			console.log(x,y);
    }
    //调用b
    b();
}
//定义函数a
a();

找变量, 根据作用域向上找, 不能向下找

不管在哪里调用函数, 函数的作用域都是定义函数时的作用域, 作用域是函数的属性, 定义时就赋值好

3.5 数组

定义,修改

javascript 复制代码

let arr = [1,2,3]
arr[1] = 20;

API

javascript 复制代码

let arr=[1,2,3]
arr.push(4)//尾部加元素
arr.shift(1)//头部删元素
arr.splice(1,2)// 删索引1到2的元素, 闭区间
arr.join("")//数组转字符串,参数是分隔符

3.6 Object

3.6.1 定义Object

javascript 复制代码

let obj = {
	name:"zhangsan",
	age:18
	study: function(){
		console.log("---");
	}
}

3.6.2 增删属性

js中类的属性可以增删,方法也可以增删

3.6.3 this

单独的函数

this是全局window对象

对象内的函数

this是对象本身

动态改变this

箭头函数内出现的this以外部的this理解

3.6.4 原型继承

会继承父类的属性包括属性值, 方法

属性和方法可以覆盖父对象

3.6.5 json与js对象

json本质是字符串

js对象是一个对象, 有属性和方法

json与js对象转换

javascript 复制代码

JSON.parse(json字符串); //返回js对象
JSON.stringify(js对象); //返回json字符串

3.7 动态类型

javascript是弱类型语言

变量没有类型, 可以赋值任意类型的数据

难维护

typescript 强类型语言

3.8 运算符表达式

javascript 复制代码

2 ** 3//8, 2的3次方
3 ** 2//9, 3的2次方
1=='1' //true自动转换类型,再比较
1==='1' //false比较类型,再比较值
typeof //查看某个值的类型
值1 || 值2 //如果值1是falsy, 就取值2
... //浅拷贝复制数组,合并数组,复制对象,合并对象
[]{}//结构赋值

3.9 控制语句

for in遍历对象属性

javascript 复制代码

for (const n in father) {
	console.log(n);
}

3.10 Fetch API

支持同步和异步获取后端数据

但原生JS用起来教麻烦

3.11 跨域

协议, 主机, 端口不一致, 就叫不同源

同源检查是浏览器行为, 且只针对fetch, xhr请求

http client , postman 不做同源检查

统一经过express代理放到tomcat, 例如所有后端api都叫上/api前缀

3.12 导入导出

单个变量, 函数导出

批量导出

4. 前端环境准备

4.1 安装nvm

nvm 是管理node.js的版本

npm是管理js的版本

卸载现有node.js, 清除残留文件和环境变量
安装nvm
以管理员身份运行cmd,验证是否安装完毕
nvm安装路径找到settings文件新增国内镜像源

bash 复制代码

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
# 可用版本
nvm list available
# 已安装版本
nvm list
# 切换版本
nvm use 16.16.0

npm切换为国内镜像
检查镜像配置是否成功

4.2 安装前端服务器

新建文件夹,目录打开cmd, 执行

bash 复制代码

npm install express --save-dev

5. vue2

5.1 安装脚手架

安装一次就行, 后续不用安装

bash 复制代码

npm install -g @vue/cli

所谓脚手架就是创建vue项目的向导

5.2 创建vue项目

创建项目文件夹, 在文件夹目录

bash 复制代码

vue ui

等待一会后自动打开浏览器进入vue创建项目的浏览器页面

http://localhost:8000/project/select

选择项目文件夹, 如果已经创建了仓库就不要勾选创建git仓库, 会冲突

选择手动

除默认勾选再添加router和vuex

下一步选择vue版本2.x

pick a linter 选第一项

下载devtools v5版本, 进入扩展,选允许访问文件url,勾选inprivate
高版本devtools不支持vue2

F12打开开发者模式, 没有数据的话 Ctrl+Shift+R 强制刷新

启动服务

bash 复制代码

npm run serve

修改代理

添加代理

5.3 vue组件

vue组件文件包含

template script style

自定义vue

javascript 复制代码

<script>
const options = {
  data: function () {
    return { name: "zhangsan", age: 18 };
  },
};
export default options;
</script>

模板使用options的数据

javascript 复制代码

<template>
  <h1>{{name}}{{ age }}</h1>
</template>

5.4 属性事件绑定

methods里使用this代表data返回的数据

javascript 复制代码

<script>
const options = {
  data: function () {
    return { count:0 };
  },
  methods: {
    m1:function(){
        this.count++;
        console.log("m1");
    },
    m2(){
        this.count--;
        console.log("m2");
    }
  }
};
export default options;
</script>

支持单向绑定js->template和双向绑定

5.5 计算属性

computed 定义计算属性 , 有缓存

5.6 axios

底层XMLHttpRequest(xhr), 相比Fetch更强大, 不支持同步, 封装为axios, 同时支持同步和异步, 提供对请求和响应的拦截处理

安装axios, 到项目的文件夹下执行

bash 复制代码

npm install axios -s

5.7 Element UI

项目目录下下载Element UI

bash 复制代码

npm install element-ui -S

导入与使用

javascript 复制代码

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

Vue.use(Element)

加冒号与不加冒号的含义

加冒号,到js中找, 不加冒号, 右边的值就是右边填写的字符串

其实加冒号就是绑定

常用标签:

table表格

pagitation分页翻页

search搜索

5.8 Router 路由

vue是单页面应用, 想要切换页面其实是切换组件

设置路由:

编写具体的vue组件页面
src/router/下编写路由js
在路由vue添加<router-view></router-view>, 主页不做路由, 避免二次渲染
main.js 导入路由, 并且运行首页vue

javascript 复制代码

import Vue from 'vue'
import e1 from './views/ExampleView09.vue' 
import router from './router/example14'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


Vue.config.productionTip = false

Vue.use(Element)

new Vue({
  router,
  store,
  render: h => h(e1)
}).$mount('#app')

5.9 vueX

用 Vuex 管理全局状态：存储用户登录状态、角色、权限、当前空间类型等，避免路由跳转时重复请求数据

6. VUE3

技术选型

组合式API

单文件组件

Typescript

脚手架:vite

路由: vue-router

共享存储: pinia

视图组件:Antdv

6.1 创建vue3项目

进入目标文件夹, 使用vite创建vue项目
(加 . 不在创建目录)

bash 复制代码

npm init vite@latest .

运行项目:

bash 复制代码

npm run dev

6.2 vue3项目目录结构

根目录有src, index.html主页, 配置文件等等

src有components组件, App.vue 默认首页组件, main.ts默认将首页组件挂载到首页html的代码, 后续还会新增view目录,router目录,自定义类型目录等等

6.3 vue3项目必要依赖

安装依赖:包括 antdv, router, pinia等

bash 复制代码

npm install vue-router@4 pinia ant-design-vue @ant-design/icons -S && npm install @vitejs/plugin-vue-jsx -D

bash 复制代码

npm i @vueuse/core -S

bash 复制代码

npm i axios @vueuse/core -S && npm i @types/node -D

bash 复制代码

npm install vue-request -S