2024-03-16 21:06:02
- 基本语法
- 添加前缀
@ConfigurationProperties(prefix="前缀")
\ - 启动类
@SpringBootApplication
- 增大启动类访问范围
@ComponentScan(basePackages = "com.包路径")
- 用
@Bean
单独添加某一个对象@Import
在需要引用外部类对象的类中添加添加一个类到ioc容器 对第三方包的对象注入到bean容器 @ConditionalOnProperty
想象这样一个情况:你的智能家居系统里有个功能,可以在你说“我回家了”时自动打开灯。这个功能只在你事先选择开启它时才会工作。如果你在系统设置里勾选了“启用回家照明”这个选项,那么当你到家说那句话时,灯就会亮。这就像@ConditionalOnProperty,它检查你是否在配置中“勾选了一个选项”,如果勾选了,就会启用某个功能。@ConditionalOnMissingBean
当然可以。想象一下你买了一个“智能家居”套装。这个套装里有各种默认设置,比如默认的温度设定是20摄氏度。现在,如果你没做任何改动,它就会自动使用这个默认温度。但如果你决定自己设置温度,比如你想要22摄氏度,那么你的设置就会被使用,而不是默认的20摄氏度。@ConditionalOnClass
现在想象你的智能家居系统可以连接很多不同品牌的设备,但是有些功能只在某些品牌的设备上才有。比如说,你家里安装了一个智能温控器,但这个功能只有在系统检测到特定品牌的温控器时才会激活。如果系统没有发现这个特定品牌的设备,那么这个功能就不会出现在你的智能家居控制菜单里。@ConditionalOnClass的作用类似:它会检查你的程序是否有用到某些特定的代码库,如果有,就会启用一些相关的功能。- 获取错误信息中的内容
1
StringUtils.hasLength(e.getMessage())
- 添加前缀
命令行修改参数
java -jar *******.jar --server.port=9090
用于修改服务端口
Spring Boot配置文件的加载顺序大致如下:
- 在当前目录下的 /config 子目录中的配置文件。
- 当前目录中的配置文件。
- 在classpath中的 /config 包中的配置文件。
- 在classpath根下的配置文件。
不同开发环境配置
- 代码示例
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# 通用信息指定生效的环境
# 如果特定环境和通用环境冲突 则特定环境生效
spring:
profiles:
active: dev #选择了dev为开发环境
server:
servert:
context--path: /*** # 这里的路径不管选择哪个环境都可以用
#<!-- 开发环境 -->
spring:
config:
activite:
on-profile: dev
service:
port: 8081
---
#<!-- 测试环境 -->
spring:
config:
activite:
on-profile: test
service:
port: 8082
---
#<!-- 生产环境 -->
spring:
config:
activite:
on-profile: pro
service:
port: 8083
---- 同一yml文件多分组
1
2
3
4
5
6
7
8
9spring:
profiles:
group:
"dev": devServer,devDB,devSelf#相关分文件的名字
#"test": testServer,testDB,testSelf
active: dev #选择dev组下的全部文件名
#同一yml文件多分组文件命名示例
#Application.yml#总文件
#Application-devServer.yml#分文件
- 同一yml文件多分组
- 代码示例
vue
创建vue项目
安装node.js
配置npm全局安装路径 (node的安装目录)
可选使用(npnm)
npm install -g pnpm
更换安装包的源
npm config set registry http://registry.npm.taobao.org/
查看源
npm config get registry
npm install vue@latest
npm install element-plus --save
npm install axios
npm install sass -D
npm install vue-router
安装路由管理npm install pinia
安装pinia管理库npm install pinia-persistedstate-plugin
pinia的持久化插件不然浏览器刷新后数据丢失npm install @vueup/vue-quill@latest --save
安装富文本编辑器导入组件和样式
import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
vue常规代码
基础语法
- 单位
em
: 相对于当前字体尺寸的单位。例如,1 em 等于当前字体的字体尺寸。rem
: 相对于根元素(html)的字体尺寸的单位。vh
(Viewport Height): 视窗高度的 1%。vw
(Viewport Width): 视窗宽度的 1%。%
: 相对于父元素的百分比单位。px
屏幕像素
- 单位
<style>
下的样式设置语法颜色
- background-color=”transparent” 设置为透明色
一些特殊规则
- 在template在此声明template时要在上面加
#header
位置
background-size: cover;
确保背景图片覆盖整个元素,不留空白,也不重复。background-position: center;
图片居中显示。background-repeat: no-repeat;
防止背景图片在元素中重复。background-attachment: fixed;
背景固定,不随页面滚动移动。**
margin: 0 auto;
**设置自动创建周围空间 0(上下空间为0) auto(自动设置左右空间)盒子模型
设置边距
内边距
1
2
3.avatar-wrapper {
padding-left: 10px; /* 在头像左侧增加10px内边距 */
}外边距
1
2
3.avatar-wrapper {
margin-right: 10px; /* 向左推10px */
}
设置模糊效果
1
2
3
4
5.header {
/* 其他样式... */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}- 第一组值
0 4px 6px -1px rgba(0, 0, 0, 0.1)
创建了一个较大而模糊的阴影。0
表示阴影在水平方向上没有偏移。4px
是阴影在垂直方向上的偏移。6px
是阴影的模糊半径。-1px
是阴影的扩展半径(负值会使阴影缩小)。rgba(0, 0, 0, 0.1)
定义了阴影的颜色和透明度。
- 第二组值
0 2px 4px -1px rgba(0, 0, 0, 0.06)
创建了一个较小且更为细微的阴影,用于增加深度感。
- 第一组值
- 关于元素的移动
display: flex;
flex-direction: column;
- 下面这两个都可以修改位置但是我感觉
align-items
更好用 align-items: flex-start;
调整子项对齐到起始边缘justify-content: center;
在垂直方向上居中对齐子元素user-select: none;
position: relative;
增加定位以便使用偏移padding-left: 25%;
或者根据实际需求调整,推动所有子元素向右移动
配置相应拦截器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21//定制请求的实例
//导入axios npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀 , baseURL
const baseURL = '/api';//配置代理 实现跨域请求
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
result=>{
return result.data;
},
err=>{
alert('服务异常');
return Promise.reject(err);//异步的状态转化成失败的状态
}
)
export default instance;
注意事项
-
1
2
3
4
5data(){
return {
url:'https://baidu.com'
}
}这个url后面没有空格不然会导致无法正确连接
在
<div>
中引用函数注意在data中的函数需要把主函数也写上 而跟data同级的函数可以直接调用不用写主函数 如果违反则无法实现功能关于delete的请求 注意网址请求要加
=
'/category/delete?id='+string
就像这样在配置pinia的peisist时不要写在函数体里面
{{persist}}
要写在函数体外面{},{persist}
-
- 关于一些vue下常见出错误集锦(折磨人)
- 记得
<script type='moudle'>
中添加moudle不然无法读取里面的函数 - 记得
data(){函数中要加return{}}
不然会运行不成功 - 记得
'http://localhost:8080/article/search?category=' + this.searchArticle.category + '&state='+this.searchArticle.state
中要写=号不然数据传到后端无法识别
- 记得
问题
配置nginx反向代理解决vue中配置的跨域不生效的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20server {
listen 80;
server_name yourdomain.com; # 替换为你的域名
# 配置服务静态文件
location / {
root /path/to/your/vue/project; # 替换为你 Vue 项目打包后的目录
try_files $uri $uri/ /index.html;
}
# 配置反向代理,将 /api 的请求代理到后端服务器
location /api/ {
proxy_pass http://121.41.121.72:8080/; # 替换为你的后端服务器地址
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}运行
npm install
时无法成功构建时检查node版本是否与node-sass版本兼容不兼容安装兼容版本[到官方github上查看支持版本](sass/node-sass: :rainbow: Node.js bindings to libsass (github.com))
1
npm install node-sass@选择版本 --save-dev