学习SpringBoot遇到的坑

1. 端口号被占用，如何改端口

• 在 src / main / resources下创建application.properties文件，并在其中定义server.port属性：server.port=9090

• 使用管理员权限启动CMD，结束占用该端口的程序

  # 搜索占用8080端口的程序
  netstat -aon|findstr "8080" 
  # 查看占用端口的程序信息，6036为占用端口程序的PID
  tasklist|findstr "6036"
  # 结束占用端口的程序
  taskkill /pid 6036 -f
  

• 如果占用端口号的是TNSLSNR.EXE（Oracle10g中的），每次开机后都要重新杀进程会比较麻烦，可以执行以下命令将程序的端口改到8081

  # 用dba账户登录
  CMD> sqlplus sys/123 as sysdba
  # 把HTTP/WEBDAV端口从8080改到8081 
  SQL> call dbms_xdb.cfg_update(updateXML(dbms_xdb.cfg_get(), '/xdbconfig/sysconfig/protocolconfig/httpconfig/http-port/text()',8081)) 
  / 
  # 把FTP端口从2100改到2111
  SQL> call dbms_xdb.cfg_update(updateXML(dbms_xdb.cfg_get(), 
  '/xdbconfig/sysconfig/protocolconfig/ftpconfig/ftp-port/text()',2111)) 
  / 
  SQL> commit; 
  SQL> exec dbms_xdb.cfg_refresh; 
  # 检查修改是否已经成功 
  SQL> select dbms_xdb.cfg_get from dual;
  

2. 添加注解时提示：Spring Boot Configuration Annotation Processor not found in classpath

<!--导入配置文件处理器，在编写配置文件时就会有提示-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-configuration-processor</artifactId>
  <optional>true</optional>
</dependency>

添加过上面这段在 pom.xml 中后，不红了，但依然有其他提示。这时加入 @Component，将当前组件纳入 Spring容器 中来管理，编译器不再提示错误。

3. Element ‘dependency’ cannot have character [children], beacuse the type’s content type is element-only

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
</dependency>

说明子标签存在非标签元素，检查是否在标签外存在字符或中文空格。以上配置是粘贴过来的，其中的空格是中文空格，替换为英文空格没有了错误。

4.SpringBoot 和 Vue 的跨域问题

• 通过在后端代码中新增了跨域配置类来解决

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CORSConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")     //addMapping：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
                .allowedMethods("*")      //allowedMethods：允许所有的请求方法访问该跨域资源服务器，如：POST、GET、PUT、DELETE等。
                .allowedOrigins("*")         //allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如：”http://www.aaa.com“，只有该域名可以访问我们的跨域资源。
                .allowCredentials(true)     // 允许携带凭证
                .allowedHeaders("*");    //allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息。
        WebMvcConfigurer.super.addCorsMappings(registry);
    }
}

• 另外前端代码中的如下配置和后端代码中的允许携带凭证应该是相对应的

// 允许携带 cookie信息 进行服务器 session身份验证
Axios.defaults.withCredentials = true

5.Vue Axios POST 请求 SpringBoot 接受为 null 的问题

之前在学校做课设的时候什么都不懂，就是跟着老师做，当时用的请求方法都是GET。自己做的时候用到了POST方法，结果发现怎么弄后端接收到的都是null。

在 Chrome 调试模式下选择 NetWork，发现 axios 发送数据的格式是 Request Payload，而我们常用的格式是 Form Data，官方文档也有如下内容：

---

使用 application/x-www-form-urlencoded format

默认情况下，axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

浏览器

在浏览器中，您可以使用URLSearchParams API，如下所示：

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

请注意，所有浏览器都不支持URLSearchParams（请参阅caniuse.com），但可以使用polyfill（确保填充全局环境）。

或者，您可以使用qs库编码数据：

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

或者以另一种方式（ES6），

import qs from 'qs';const data = { 'bar': 123 };
const options = { method: 'POST',  
				headers: { 'content-type': 'application/x-www-form-urlencoded' },  
				data: qs.stringify(data),  url,};
axios(options);

---

按照官方文档给出的方式使用 qs 库编码数据果然后端可以正常接收了。

// main.js
import qs from 'qs'

// 定义全局变量
Vue.prototype.$qs = qs

// 设置方法的请求内容格式🍋
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
Axios.defaults.headers.delete['Content-Type'] = 'application/x-www-form-urlencoded'

<script>
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login: function () {
      this.axios.post(
        '/user/login.do',
        this.$qs.stringify({
          'username': this.username,
          'password': this.password
        })
      ).then((response) => {
        console.log(response.data)
      })
    }
  }
}
</script>

参考资料

官方文档