JAVA_WEB个人笔记

JAVA_WEB

1.1什么是vue

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

Vue快速入门

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

双向数据绑定

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

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

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><divid="app">
        年龄<inputtype="text"v-model="age">经判定为：<spanv-if="age<=35">年轻人</span>>
        <spanv-else-if="age>35 && age<60">中年人</span><spanv-else>老年人</span><divv-for="(item,index) in data1">{{index}},{{item}}</div></div><script>newVue({el:"#app",data:{age:20,data1:[1,2,3,4,5,6,7,8]},methods:{}})</script></body></html>

在这里插入图片描述

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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><divid="app"><tableborder="1"><tr><td>姓名</td><td>年龄</td><td>性别</td><td>成绩</td></tr><trv-for="(item,index) in user"><td>{{item.name}}</td><td>{{item.age}}</td><td><spanv-if="item.gender==1">男</span><spanv-else>女</span></td><td><spanv-if="90<item.score">优秀</span><spanv-else-if="60<item.score">中等</span><spanstyle="color: brown;"v-else>不及格</span></td></tr></table></div><script>newVue({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生命周期

从创建到销毁整个过程

在这里插入图片描述

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><divid="app"></div><script>newVue({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])

functionget(){//简化前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 =newVueRouter({
  routes
})exportdefault 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：快速构建应用程序，简化开发，提高效率。

编写

packagecom.zyk.controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;@RestController//请求处理类 =@Controller+@ResponseBodypublicclass hello {@RequestMapping("/hello")//设置请求路径publicStringhello(){System.out.println("hello word");return"hello word";}}

运行

packagecom.zyk;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublicclassSpringbootWebQuickstartApplication{publicstaticvoidmain(String[] args){SpringApplication.run(SpringbootWebQuickstartApplication.class,args);}}

浏览器访问

在这里插入图片描述

1.4.1http协议

http:

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

常见的请求头

在这里插入图片描述

1.4.2请求

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

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

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

在这里插入图片描述

简单参数

接收请求参数

//原始方法@RequestMapping("/simpParam")publicStringsimpParam(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")publicStringsimpParam(String names,Integer ages){//获取请求参数System.out.println(names+":"+ages);return"OK";}

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

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

简单实体参数接收

简单实体对象：请求参数名与形参对象属性名相同，定义POJO即可先创建javabean类@RequestMapping("/simplePojo")publicStringsimplePojo(User user){System.out.println(user);return"OK";}

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

复杂实体参数接收

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

在这里插入图片描述

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

在这里插入图片描述

数组集合参数

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

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

在这里插入图片描述

list集合参数

@RequestMapping("/listPojo")publicStringarrPojo(@RequestParamList<String> hobby){System.out.println(hobby);return"OK";}

在这里插入图片描述

日期参数

@RequestMapping("/datePojo")publicStringdatePojo(@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")publicStringjsonPojo(@RequestBodyUser user){System.out.println(user);return"OK";}

在这里插入图片描述

路径参数

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

@RequestMapping("/path/{id}")publicStringpath(@PathVariableInteger 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"})@SpringBootApplicationpublicclassSpringbootWebQuickstartApplication{publicstaticvoidmain(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简介

单行注释：–或#

多行注释：/* 注释内容 */
分类全称说明DDLData Definition Language数据定义语音，用来定义数据库对象（数据库，表，字段）DMLData Manipulation Language数据操作语言，用来对数据库表中数据进行增删改查DQLData Query Language数据库查询语言，用来查询数据DCLData Control Language数据控制语言，用来创建数据库用户，控制访问权限

#查看数据库showdatabases;#创建数据库db01createdatabaseifnotexists db01;#使用db01use db01;#删除db01dropdatabaseifexists db01;#创建表结构createtableuser(
    id intcomment'id 唯一标识',
    username varchar(20)comment'用户名',
    age intcomment'年龄',
    gender char(1)comment'性别')comment"用户表";

在这里插入图片描述

createtableuser(#auto_increment自动增长
    id intprimarykeycomment'id 唯一标识',
    username varchar(20)notnulluniquecomment'用户名',
    name varchar(10)notnullcomment'姓名',
    age intnotnullcomment'年龄',
    gender char(1)default'男'comment'性别')comment"用户表";

在这里插入图片描述

标签： java 前端笔记

本文转载自: https://blog.csdn.net/m0_74983863/article/details/139423684
版权归原作者 月亮陪我写代码 所有，如有侵权，请联系我们删除。

JAVA_WEB个人笔记

JAVA_WEB

1.1什么是vue

1.2 web开发

1.2.1 Ajax

1.2.2element

1.2.3NGINX

1.3maven

1.4Spring

1.4.1http协议

1.4.2请求

1.4.3响应

1.4.4 分层解藕

1.4.5IOC&DI

1.4.6IOC详解

1.5数据库

发表评论

“JAVA_WEB个人笔记”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航