JAVA_WEB个人笔记

月亮陪我写代码

已于 2024-06-03 20:47:16 修改

阅读量1k

点赞数 25

文章标签： java 前端笔记

于 2024-06-03 20:43:35 首次发布

本文链接：https://blog.csdn.net/m0_74983863/article/details/139423684

版权

JAVA_WEB

1.1什么是vue

vue是一套前端框架，免除原生js中的DOM操作简化书写
基于MVVM思想，实现数据的双向绑定，将编程放在数据额上

Vue快速入门

新建html页面，引入Vue.js文件
在js代码区域创建Vue核心对象，定义数据模型
编写视图

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-快速入门</title>
    <!--1. 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--3. 编写视图 -->
    <div id="app">
        <input type="text" v-model="message">
        <!-- 绑定数据模型 -->
        
        {{message}}
         <!-- 差值-->
    </div>
</body>   
<!--2. 创建js代码区域，创建vue核心对象，定义数据模型 -->
 <script>
        new Vue({
            el:"#app",//vue接管区域
            data:{
                message:"hellow word"
            }
        })
    </script>
</html>

插值表达式：{{}}
- 里面可以是变量、三元运算符、函数调用、算数运算
- v-model 以v开头的是命令

常用命令
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定为：<span v-if="age<=35">年轻人</span>>
        <span v-else-if="age>35 && age<60">中年人</span>
        <span v-else>老年人</span>
        <div v-for="(item,index) in data1">{{index}},{{item}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                age:20,
                data1:[1,2,3,4,5,6,7,8]
            },
            methods: {
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

可根据输入的age右边返回对应的阶段，当我们使用V-show时浏览器会默认将不符合要求的元素添加一个display：none的标签，只显示符合的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>成绩</td>
            </tr>
            <tr v-for="(item,index) in user">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <span v-if="item.gender==1">男</span>
                    <span v-else>女</span>
                </td>
                <td>
                    <span v-if="90<item.score">优秀</span>
                    <span v-else-if="60<item.score">中等</span>
                    <span style="color: brown;" v-else>不及格</span>

                    </td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:[{
                    name:"tom",
                    age:"20",
                    gender:1,
                    score:50

                },{
                    name:"jeck",
                    age:"21",
                    gender:2,
                    score:78

                },{
                    name:"london",
                    age:"20",
                    gender:2,
                    score:78

                },{
                    name:"ailn",
                    age:"22",
                    gender:2,
                    score:98
                }
            ]
            }
        })
    </script>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

vue生命周期

从创建到销毁整个过程

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods: {
                
            },
            //只要挂载完成就会返回下面的alert，
            mounted () {
                alert("挂载完成")
            }
        })
    </script>
</body>
</html>

1.2 web开发

1.2.1 Ajax

Asynchronous JavaScript And XML，异步的JavaScript和XML。
作用
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以再不更新网页的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户是否可用的校验等等

在这里插入图片描述

二者区别在于，在服务器处理过程中客户端是否能进行其他操作

Axios

对原Ajax进行封装，简化书写，快速开发。Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url [,data[,config])
axios.put(url[,data[,config])

    function get(){
        //简化前
        axios({
            method: "get",
            url:"http://www.baidu.com"
        }).then(result =>{
            console.log(result.data);
        })
        //简化后
        axios.get("http://www.baidu.com").then(result =>{
            console.log(result.data);
        })
    }

1.2.2element

网址：(https://element.eleme.cn/#/zh-CN/component/quickstart)

1.下载组件库

npm i element-ui -S

2.在main.js文件中导入

import ElementUI from 'element-ui';
Vue.use(ElementUI)

3.在vue文件中按规定写入代码

4.在App文件中进行调用步骤三的文件

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。

Vue路由

插件：Vue Router

组成：

VueRouter:路由器类，根据路由请求在路由视图中动态渲染组中的组件
:请求链接组件，浏览器会解析成
:动态视图组件，用来渲染展示与路由路径对应的组件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import( '../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DetpView.vue')
  },{
    path: '/',
    name: 'emp',
    component: () => import( '../views/tlias/EmpView.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

最后在App.vue中添加    
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

1.2.3NGINX

nginx是一款轻量级的web服务器，占用内存少并发能力强，广泛使用。

https:\\nginx.org

1.3maven

作用

方便快捷的管理项目依赖依赖的资源（jar包），避免版本冲突问题
提供标准统一的项目结构
标准跨平台（linux，Windows，macOS）的自动化项目构建

在这里插入图片描述

1.4Spring

Spring boot：快速构建应用程序，简化开发，提高效率。

编写

package com.zyk.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController//请求处理类 =@Controller+@ResponseBody
public class hello {
    @RequestMapping("/hello")//设置请求路径
    
    public String hello() {
        System.out.println("hello word");
        return "hello word";
    }
}

运行

package com.zyk;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootWebQuickstartApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringbootWebQuickstartApplication.class,args);
    }
}

浏览器访问

在这里插入图片描述

1.4.1http协议

http:

Hyper Text Transfer Protocol,超文本传输协议，规定了浏览器和服务器数据传输的规则

常见的请求头

在这里插入图片描述

1.4.2请求

get请求：请求参数在请求行中，没有请求体，，请求大小是有限制的（请求行，请求头，）

post请求：请求参数在请求体中，没有请求大小限制（请求头，请求行，请求体）

响应：（响应行，响应头，响应体）

在这里插入图片描述

简单参数

接收请求参数

    //原始方法
    @RequestMapping("/simpParam")
    public String simpParam(HttpServletRequest request){
        //获取请求参数
        String names=request.getParameter("names");
        String ages=request.getParameter("age");
        Integer.parseInt(ages);
        System.out.println(names+":"+ages);
        return "OK";
    }

//springboot方法
@RequestMapping("/simpParam")
public String simpParam(String names,Integer ages){
    //获取请求参数
    System.out.println(names+":"+ages);
    return "OK";
}

@RequestMapping("/simpParam")
public String simpParam(@RequestParam(name = "name") String names, Integer ages){
    //获取请求参数
    System.out.println(names+":"+ages);
    return "OK";
}

@RequestParam：方法名称与请求参数名称不匹配，通过该注解完成映射，该注解的required默认是true代表请求参数必须传递

简单实体参数接收

简单实体对象：请求参数名与形参对象属性名相同，定义POJO即可

先创建javabean类

@RequestMapping("/simplePojo")
public String simplePojo(User user){
    System.out.println(user);
    return "OK";
}

http://localhost:8080/simplePojo?name=zyk&ages=17

复杂实体参数接收

创建javabean类，用类.对象的方式进行调用

在这里插入图片描述

@RequestMapping("/complexPojo")
public String complexPojo(User user){
    System.out.println(user);
    return "OK";
}

在这里插入图片描述

数组集合参数

使用场景：表单可选项，有多值可选的时候
请求参数与形参数组名相同且请求参数为多个，定义数组类型性参数形参及可接收参数

@RequestMapping("/arrPojo")
public String arrPojo(String[] hobby){
    System.out.println(Arrays.toString(hobby));
    return "OK";
}

在这里插入图片描述

list集合参数

@RequestMapping("/listPojo")
public String arrPojo(@RequestParam List<String> hobby){
    System.out.println(hobby);
    return "OK";
}

在这里插入图片描述

日期参数

@RequestMapping("/datePojo")
public String datePojo(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime times){
    System.out.println(times);
    return "OK";
}

在这里插入图片描述

//paostman
{
    "timestamp": "2024-06-02T08:07:35.213+00:00",
    "status": 400,
    "error": "Bad Request",
    "path": "/datePojo"
}

在这里插入图片描述

json参数

json数据建名和形参属性名相同，定义pojo类型形参可接受数据，需要使用 @RequestBody 标识

@RequestMapping("/jsonPojo")
public String jsonPojo(@RequestBody User user){
    System.out.println(user);
    return "OK";
}

在这里插入图片描述

路径参数

将@RequestMapping("/path/{id}")中参数写成{id}形式用@PathVariable绑定传递的形参

@RequestMapping("/path/{id}")
public String path(@PathVariable Integer id){
    System.out.println();
    return "OK";
}

在这里插入图片描述

在路径中也可以多写如 /{id}/{name} 只需在形参中写入对应的参数即可path(@PathVariable Integer id,@PathVariable String name)

1.4.3响应

响应数据

类型：方法注解，注解类
位置：Controller方法上/类上
作用：将方法返回值直接响应，如果返回值类型是实体对象/集合，将会转换成json格式响应
说明：@RestController=@Controller+@ResponseBody；
@ResponseBody注解下面的所有方法的返回值都会作为响应数据

1.4.4 分层解藕

三层架构

controller：控制层，接收前端发送的请求，对请求进行处理，并响应数据。
Service：业务逻辑层，处理具体的业务逻辑。
Dao：数据访问层（Data Access Object）持久层，负责数据访问操作，包括增删改查。

在这里插入图片描述

内聚和耦合

内聚：软件中各个功能模块内部的功能联系

耦合：衡量软件中各个层/模块之间的依赖、关联的程度

软件设计原则：高内聚低耦合

在这里插入图片描述

1.4.5IOC&DI

控制反转

完成ioc容器管理也就是控制反转需要将此类加上 @Component 注解，成为ioc容器中的bean

在创建的对象上加上 @Autowired 运行时ioc容器会提供该类的bean对象，称为依赖注入

在这里插入图片描述

1.4.6IOC详解

在这里插入图片描述

在声明bean的时候，可以通过Value属性指定bean的名字，如果没有指定，默认为类名首字母小写
使用上面四个注解都可以声明bean，但在springboot集成web开发中，声明控制器bean只能使用@controller

当你的包和启动类包不在同一目录下时，可以使用@ComponentScan进行包扫描，当在启动类上添加@ComponentScan这一注解时会自动覆盖@SpringBootApplication注解中的@ComponentScan，所以不仅需要添加需要添加的包还需要写入本包 @ComponentScan({“test”,“com.zyk”})。

@ComponentScan({"test","com.zyk"})
@SpringBootApplication
public class SpringbootWebQuickstartApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringbootWebQuickstartApplication.class,args);
    }
}//不推荐这种写法

依赖注入

bean注入：@Autowired注解默认是通过类型进行，如果同时存在相同类型的bean，将会报错

通过以下几种方案进行解决。

@Primary：在bean设置优先级谁设置就谁优先，让当前bean生效
@Qualifier(“empServerA”)：与@Autowired一起使用默认通过类型进行注入，使用empServerA这一bean类，。
@Resource(name=“bean名字”)：它会尝试按类型自动装配bean。如果存在多个相同类型的bean，则会出现异常，除非明确指定了名称。

1.5数据库

数据库：DataBase(DB)，是数据储存和管理的仓库。
数据管理系统：DataBase Management System（DBMS）,操纵和管理数据库的大型软件。
SQL：Structured Query Language，操作关系型数据库的编程语言，定义了一套操作关系型数据库统一标准。

sql简介

单行注释：–或#

多行注释：/* 注释内容 */

分类	全称	说明
DDL	Data Definition Language	数据定义语音，用来定义数据库对象（数据库，表，字段）
DML	Data Manipulation Language	数据操作语言，用来对数据库表中数据进行增删改查
DQL	Data Query Language	数据库查询语言，用来查询数据
DCL	Data Control Language	数据控制语言，用来创建数据库用户，控制访问权限

#查看数据库
show databases;
#创建数据库db01
create database if not exists db01;
#使用db01
use db01;
#删除db01
drop database if exists db01;
#创建表结构
create table user(
    id int comment 'id 唯一标识',
    username varchar(20) comment '用户名',
    age int comment '年龄',
    gender char(1) comment '性别'
)comment "用户表";

在这里插入图片描述

create table user(
    #auto_increment自动增长
    id int primary key comment 'id 唯一标识',
    username varchar(20) not null unique comment '用户名',
    name varchar(10) not null comment '姓名',
    age int not null comment '年龄',
    gender char(1) default '男' comment '性别'
)comment "用户表";