前后端分离项目踩过的坑（SpringBoot+layui）

1、引言之前做过一个前后端分离的项目，也是我第一次做前后端分离的项目。作为一个新手，踩过很多坑，想在这里分享给大家，让大家少走弯路。2、开发环境前端：HBuilderX后端：IDEAJDK版本：1.83、配置文件项目目录pom依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.or

是小葱哦

3166人浏览 · 2021-01-06 12:38:56

是小葱哦 · 2021-01-06 12:38:56 发布

1、引言

之前做过一个前后端分离的项目，也是我第一次做前后端分离的项目。作为一个新手，踩过很多坑，想在这里分享给大家，让大家少走弯路。

2、开发环境

前端：HBuilderX
后端：IDEA
JDK版本：1.8

3、配置文件

项目目录

在这里插入图片描述

pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.jx</groupId>
    <artifactId>medical</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>medical</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!--web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        
        <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.yaml

server:
  port: 8081
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/medical?useSSL=true&useUnicode=true&characterEncoding=utf8
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
mybatis:
  type-aliases-package: com.jx.medical.pojo,com.jx.medical.vo
  mapper-locations: classpath:mappers/*.xml
logging:
  level:
    com.jx.medical.mapper: debug

注意：

缩进是两个空格，而不是tab键
冒号后面有一个空格

过滤器

package com.jx.medical.filter;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;

@WebFilter
public class CrosFilter  implements Filter{

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		// TODO Auto-generated method stub
	System.out.println("========filter=========");
	HttpServletResponse resp=(HttpServletResponse) response;
	resp.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, content-type, xxxx");
	resp.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
	resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8848");
	resp.setHeader("Access-Control-Allow-Credentials", "true");
	chain.doFilter(request, resp);

	}
}

此过滤器解决的是跨域问题。

注意：在启动类上添加组件扫描的注解

@ServletComponentScan(basePackages="com.jx.medical.filter")
@SpringBootApplication
public class MedicalApplication {

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

每个Controller类要加@CrossOrigin注解
在这里插入图片描述

后端的就配置完了，接下来看一下前端，也是解决跨域问题

在发送ajax请求时，需要加上：

xhrFields: {withCredentials: true}

解决跨域问题

	//发送请求
	$.ajax({
		type:"get",
		url:"http://localhost:8081/query/showOutRecord",
		async:true,
		contentType:"application/json;charset=UTF-8",
		xhrFields: {
			withCredentials: true
		},
		success:function(res){
			// sessionStorage.setItem("userName",res.data);
			console.log(res);
			// fillToTable(resp.data);
			if(res.code==0){
				fillToTable(res.data);
			}
			$('#msg').val(res.msg);
		}
	});

如果使用table.render，会有所不同，我们需要修改它的table.js
在这里插入图片描述
添加下面的代码

下面是layui框架中的请求

table.render({
   elem: '#test'
   ,url:'http://localhost:8081/query/queryMedicineByName'
   ,toolbar: '#toolbarDemo'
   ,title: '药品表'
   ,id:'medTable'
   ,cols: [[
     {field:'medId', title:'药品编号', width:90, fixed: 'left', unresize: true}
     ,{field:'medName', title:'药品名', width:120}
     ,{field:'medIngredient', title:'成分', width:90}
     ,{field:'medCharacter', title:'性状', width:100}
     ,{field:'medEffect', title:'功效'}
     ,{field:'medPrice', title:'药品价格', width:100}
     ,{field:'medStorage', title:'库存量', width:100}
     ,{field:'factoryId', title:'药厂编号', width:100}
     ,{field:'medProDate', title:'生产日期', width:120}
     ,{field:'medUseDate', title:'有效期', width:120}
     ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
   ]]
   ,page: true
});