docker桌面环境ubuntu

拉取镜像:

docker pull dorowu/ubuntu-desktop-lxde-vnc

运行容器:

docker run -p 8001:80 -p 8002:5900 -e VNC_PASSWORD=VNC登录的密码 RESOLUTION=1920x1080 -v /dev/shm:/dev/shm dorowu/ubuntu-desktop-lxde-vnc

该镜像以VNC的方式连接到桌面环境服务器

注意,这里的容器暴露了两个端口

6080:是web版的vnc,可以在浏览器上直接访问桌面环境

显示分辨率可以通过环境变量来控制 如下:

docker run -p 6080:80 -e RESOLUTION=1920x1080 -v /dev/shm:/dev/shm dorowu/ubuntu-desktop-lxde-vnc

linux后台执行命令:&和nohup

当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件。对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨)。为了使这些进程能够在后台运行,也就是说不在终端屏幕上运行,有几种选择方法可供使用。

  • &
    当在前台运行某个作业时,终端被该作业占据;可以在命令后面加上& 实现后台运行。例如:sh test.sh &
    适合在后台运行的命令有f i n d、费时的排序及一些s h e l l脚本。在后台运行作业时要当心:需要用户交互的命令不要放在后台执行,因为这样你的机器就会在那里傻等。不过,作业在后台运行一样会将结果输出到屏幕上,干扰你的工作。如果放在后台运行的作业会产生大量的输出,最好使用下面的方法把它的输出重定向到某个文件中:
1
command  >  out.file  2>&1  & 
  • 1

这样,所有的标准输出和错误输出都将被重定向到一个叫做out.file 的文件中。

PS:当你成功地提交进程以后,就会显示出一个进程号,可以用它来监控该进程,或杀死它。(ps -ef | grep 进程号 或者 kill -9 进程号)

  • nohup
    使用&命令后,作业被提交到后台运行,当前控制台没有被占用,但是一但把当前控制台关掉(退出帐户时),作业就会停止运行。nohup命令可以在你退出帐户之后继续运行相应的进程。nohup就是不挂起的意思( no hang up)。该命令的一般形式为:
1
nohup command &
  • 1

如果使用nohup命令提交作业,那么在缺省情况下该作业的所有输出都被重定向到一个名为nohup.out的文件中,除非另外指定了输出文件:

1
nohup command > myout.file 2>&1 &
  • 1
    使用了nohup之后,很多人就这样不管了,其实这样有可能在当前账户非正常退出或者结束的时候,命令还是自己结束了。所以在使用nohup命令后台运行命令之后,需要使用exit正常退出当前账户,这样才能保证命令一直在后台运行。

  • ctrl + z
    可以将一个正在前台执行的命令放到后台,并且处于暂停状态。

  • Ctrl+c
    终止前台命令。

  • jobs
    查看当前有多少在后台运行的命令。
    jobs -l选项可显示所有任务的PID,jobs的状态可以是running, stopped, Terminated。但是如果任务被终止了(kill),shell 从当前的shell环境已知的列表中删除任务的进程标识。

  • 2>&1解析

1
command >out.file 2>&1 &
  • 1
  1. command>out.file是将command的输出重定向到out.file文件,即输出内容不打印到屏幕上,而是输出到out.file文件中。
  2. 2>&1 是将标准出错重定向到标准输出,这里的标准输出已经重定向到了out.file文件,即将标准出错也输出到out.file文件中。最后一个&, 是让该命令在后台执行。
  3. 试想2>1代表什么,2与>结合代表错误重定向,而1则代表错误重定向到一个文件1,而不代表标准输出;换成2>&1,&与1结合就代表标准输出了,就变成错误重定向到标准输出.

关于ajax请求中cookie和header的问题

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
错误:
1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true。

正确:
1.ajax同域请求下,ajax会自动带上同源的cookie;

2.ajax同域请求下,ajax添加自定义请求头(或原装)header,前端、后台不需要增加任何配置,
并且不会因为增加自定义请求头header,而引起预检查请求(options);

3.ajax跨域请求下,如果不需要携带cookie、请求头header,只需要在后台配置相应参数即可;
后台参数:
(1).Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;

4.ajax跨域请求下,ajax不会自动携带同源的cookie,需要通过前端配置相应参数才可以跨域携带同源cookie,后台配置相应参数才可以跨域返回同源cookie;
前端参数:
withCredentials: true(发送Ajax时,Request header中会带上Cookie信息)
后台参数:
(1).Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;
特别说明:配置了Access-Control-Allow-Credentials:true则不能把Access-Control-Allow-Origin设置为通配符*;
(2).Access-Control-Allow-Credentials:响应头表示是否可以将对请求的响应暴露给页面(cookie)。返回true则可以,其他值均不可以。

5.ajax请求任何时候都不会带上不同源的cookie(Cookie遵循同源策略);

6.ajax跨域请求下,ajax添加自定义或者原装的请求头,请求会发送两次,第一次预检查请求,第二次正常请求,详细描述:
post(或GET)跨域请求时,分为简单请求和复杂请求,跨域携带自定义或者原装请求头头时是复杂请求。
复杂请求会先发送一个method 为option的请求,目的是试探服务器是否接受发起的请求. 如果服务器说可以,再进行post(或GET)请求。
对于java后台web应用,跨域需要添加一个过滤器(过滤器详见下面案例代码),这个过滤器做的事就是,加了几个http header在返回中,
Access-Control-Allow-Origin 我能接受的跨域请求来源,配置主机名
Access-Control-Allow-Headers 表示能接受的http头部,别忘了加入你自己发明创造的头部
Access-Control-Allow-Methods 表示能接受的http mothed ,反正就那几种,全写上也无妨,猥琐点就只写 post, options
如果是OPTION返回空,设置返回码为202,202表示通过。
需要前端配置相应参数才可以跨域携带请求头,后台配置相应参数进行跨域携带请求头;
前端参数:
crossDomain:true(发送Ajax时,Request header 中会包含跨域的额外信息,但不会含cookie(作用不明,不会影响请求头的携带))
后台参数(配置预检查过滤器):
(1)Access-Control-Allow-Origin:设置允许跨域的配置, 响应头指定了该响应的资源是否被允许与给定的origin共享;
(2)Access-Control-Allow-Credentials:响应头表示是否可以将对请求的响应暴露给页面(cookie)。返回true则可以,其他值均不可以;
(3)Access-Control-Allow-Headers:用于预检请求中,列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。(自定义请求头);
(4)Access-Control-Allow-Methods:在对预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表;


亲测小结论:
1.ajax跨域请求下,后台不配置跨域Access-Control-Allow-Origin,同样能够执行后台方法,但是无法执行ajax的success的方法,控制台报跨域错误;
2.ajax跨域请求下,前端配置withCredentials: false,同样能够执行后台方法,但是无法携带同源cookie,后台无法获取;
3.ajax跨域请求下,前端配置withCredentials: true,后端没有配置Access-Control-Allow-Credentials:true,同样能够执行后台方法,并能够生成cookie并返回浏览器,但是无法执行ajax的success的方法,控制台报跨域错误;
4.ajax跨域请求下,前端配置withCredentials: false或不配置withCredentials,后端配置Access-Control-Allow-Credentials:true或者false,同样能够执行后台方法,并能够生成cookie并返回浏览器,但是无法携带同源cookie,能够执行ajax的success的方法;
5.Cookie携带只区分域名,不区分端口;
6.jsonp可以携带cookie,但只能携带所属域名的cookie(同源策略);
7.jsonp可以跨域生成cookie,流程如下:跨域请求之后,在服务器端生成cookie,并在浏览器端记录相应的cookie;
8.静态资源同样会携带cookie(js和图片等),但是如果是和当前页面不同域只是在network中不显示cookie选项,但是后台能够获取到对应cookie;
9.ajax同域请求会自动带上同源的cookie,不会带上不同源的cookie;
10.这是MDN对withCredentials的解释: MDN-withCredentials ,我接着解释一下同源。
众所周知,ajax请求是有同源策略的,虽然可以应用CORS等手段来实现跨域,但是这并不是说这样就是“同源”了。ajax在请求时就会因为这个同源的问题而决定是否带上cookie,这样解释应该没有问题了吧,还不知道同源策略的,应该去谷歌一下看看。

总结:最好前端后台配置跨域,则同时配置相应的跨域配置,否则总会出现不可控的错误;

博文链接:https://blog.csdn.net/menghuanzhiming/article/details/102736312

SpringBoot+Mybatis开启驼峰映射

mybatis自定义的SQL语句中,如select语句,如果数据库表的字段为驼峰命名,即如img_address这样的形式,那么select语句执行的结果会变成null。

解决办法是在配置文件中加上开启驼峰映射的配置信息。根据配置文件的类型分为以下两种:

1.在.properties文件中添加:

1
mybatis.configuration.map-underscore-to-camel-case=true 

但如果已经在.properties中配置了mybatis.config-location=classpath:mybatis/mybatis-config.xml这样的语句,就应该使用下一种方式,即把配置信息写在.xml中。

2.在mybatis的配置文件,如mybatis-config.xml中进行配置:

复制代码

1
2
3
4
5
6
7
8
<configuration>
<!-- 开启驼峰映射 ,为自定义的SQL语句服务-->
<!--设置启用数据库字段下划线映射到java对象的驼峰式命名属性,默认为false-->
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>

</configuration>

方式一:通过springboot的配置文件application.yml

1
2
3
mybatis:
configuration:
map-underscore-to-camel-case: true

此方式是最简单的,但是要注意,通过springboot的配置文件配置mybatis的设置,则不能够再使用mybatis的配置文件,例如:下边代码中标红的两个设置不能同时存在,要么使用config-location指定mybatis的配置文件,在通过mybatis的配置文件配置相关设置,要么通过springboot配置文件的mybatis.configuration进行相关设置,二者只能选其一,否则会报错。

1
2
3
4
5
mybatis:
config-location: classpath:mybatis/mybatis-config.xml
mapper-locations: classpath:mybatis/mapper/*.xml
configuration:
map-underscore-to-camel-case: true

方式二:通过mybatis的配置文件

首先需要在springboot的配置文件application.yml中指定mybatis配置文件的位置。

1
2
3
mybatis:
config-location: classpath:mybatis/mybatis-config.xml
mapper-locations: classpath:mybatis/mapper/*.xml

然后在mybatis配置文件中进行设置

复制代码

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<settings>
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
</configuration>

复制代码

方式三:通过@Comfiguration注解和@Bean注解,向容器中添加ConfigurationCustomizer类型的组件,在ConfigurationCustomizer中进行设置

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
@Configuration
public class MybatisConfig {
@Bean
public ConfigurationCustomizer configurationCustomizer(){
return new ConfigurationCustomizer() {
@Override
public void customize(org.apache.ibatis.session.Configuration configuration) {
configuration.setMapUnderscoreToCamelCase(true);
}
};
}
}

Vue3监听路由变化

1
2
3
4
5
import { onBeforeRouteUpdate } from "vue-router";
//在setup中
onBeforeRouteUpdate((to) => {
console.log(to, "=====");
});
1
2
3
4
5
6
7
8
import { useRoute } from 'vue-router'

setup() {
const route = useRoute()
watch(() => route.path,() => {
console.log('监听到变化')
}
}

Vue3简单博客项目后台开发笔记

开发博客后端的一些简单记录

坑:reactive

对于reactive的使

reactive可以直接使用无需配合toRefs 但是如果需要动态加载数据,这是必要的.!

Element UI

开发时建议全量导入,按需导入是不是出一些奇怪的问题,浪费时间

关闭eslint

开发中最好关闭这个鬼东西.

关闭方法:

在项目根目录下增加vue.config.js文件。
内容如下

1
2
3
4
// vue.config.js
module.exports = {
lintOnSave: false
}

Axios跨域问题

http://xxhoz.com/2021/02/06/Vue-Axios%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/

只能在开发环境下跨域!!!!!!

Vue3编程式路由

1
2
3
4
import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/admin')

另外一个未尝试:

https://blog.csdn.net/weixin_48566243/article/details/114294364

Vue3路由参数获取

1
2
3
4
5
import { onBeforeRouteUpdate } from "vue-router";
//在setup中
onBeforeRouteUpdate((to) => {
console.log(to, "=====");
});
1
2
3
4
5
6
7
8
import { useRoute } from 'vue-router'

setup() {
const route = useRoute()
watch(() => route.path,() => {
console.log('监听到变化')
}
}

axios拦截器的使用

1
2
3
4
5
6
7
axios.interceptors.request.use(config => {
// 为请求头对象,添加token验证的Authorization字段
config.headers.token = window.sessionStorage.getItem('token')
return config
})

// response 同上

关于数据对接

最好开发时对应后端数据格式,不要图一时开发方便自定一个数据格式.否者后面改的头疼!!!!

v-md-editor的使用

这个简单 看官方文档:

http://ckang1229.gitee.io/vue-markdown-editor/zh/

路由守卫

这个很有用

1
2
3
4
5
6
7
8
// 挂载路由导航守卫,to表示将要访问的路径,from表示从哪里来,next是下一个要做的操作
router.beforeEach((to, from, next) => {
if (to.path === '/login') { return next() }
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) { return next('/login') }
next()
})

具体查看官方文档

错误解决

建议开发中打开控制台.尽可能解决所有警告!

Nginx解决跨域

前面跨域只在开发阶段有用.生成环境

nginx配置代理跨域:

1
2
3
location ^~ /api{
proxy_pass http://blogapi.xxhoz.com/api;
}

完美解决