前端后端数据库的交互，前后端如何打通，vue+spring boot +MySQL_后端和数据库的关系

前端软件：Microsoft VS Code

后端软件：IntelliJ IDEA 

数据库：Navicat Premium

前端git地址：https://github.com/zouwanghua/ZWH_prodect_01.git

后端git地址：https://github.com/zouwanghua/ZWH_prodect_02.git

数据库git地址：https://github.com/zouwanghua/ZWH_prodect_03.git

1、在前端项目 config\index.js 中，找到 proxyTable 位置，修改为以下内容

proxyTable: {  // 注意如果不是在最后的位置，大括号外需要添加一个逗号。
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

2、运行项目 npm run dev    注意地址是 localhost:8080/#/login，这边就不写出来了（具体的看git）

3、后端开发

// 在 Login.vue 中，前端发送数据的代码段为
 
methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              // var data = this.loginForm
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }

4、后端需要接收，建 User类； 建Result 类构造 response响应码；建LoginController类对响应部分进行处理

5、同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123456,进行登录

6、前端后端打通，，接下来就是后端与数据库，引入数据库，使用 Navicat 创建数据库与表，建完记得下面打钩

7、数据库的操作完成，接下来就开始进行交互，后端项目需要配置依赖关系，修改 pom.xml，右下角出现Import Changes，点击

<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.evan</groupId>
	<artifactId>wj</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>wj</name>
	<description>White Jotter - Your Mind Palace</description>
	<packaging>war</packaging>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<dependencies>
		<!-- springboot web -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- springboot tomcat 支持 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<!-- 热部署 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- jpa-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<!-- redis -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-redis</artifactId>
		</dependency>
		<!-- springboot test -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<!-- thymeleaf -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<!-- elastic search -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
		</dependency>
		<!-- 用了 elasticsearch 就要加这么一个，不然要com.sun.jna.Native 错误 -->
		<dependency>
			<groupId>com.sun.jna</groupId>
			<artifactId>jna</artifactId>
			<version>3.0.9</version>
		</dependency>
 
		<!-- thymeleaf legacyhtml5 模式支持 -->
		<dependency>
			<groupId>net.sourceforge.nekohtml</groupId>
			<artifactId>nekohtml</artifactId>
			<version>1.9.22</version>
		</dependency>
		<!-- 测试支持 -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>
		<!-- tomcat的支持.-->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
			<version>8.5.23</version>
		</dependency>
		<!-- mysql-->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.21</version>
		</dependency>
 
		<!-- junit -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version> 4.12</version>
		</dependency>
		<!-- commons-lang -->
		<dependency>
			<groupId>commons-lang</groupId>
			<artifactId>commons-lang</artifactId>
			<version>2.6</version>
		</dependency>
		<!-- shiro -->
		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-spring</artifactId>
			<version>1.3.2</version>
		</dependency>
		<!-- hsqldb -->
		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>
	</dependencies>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

8、配置完依赖后，还需要配置数据库，打开src\main\resources\application.properties，修改内容

server.port=8443
        # 注意端口、数据库名、用户名、密码要与你想使用的数据库一致。
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/white_jotter?characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto = none
spring.jpa.database = MYSQL
 
spring.jpa.database-platform=org.hibernate.dialect.MySQLDialect
pring.jpa.hibernate.naming-strategy = org.hibernate.cfg.ImprovedNamingStrategy
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect

9、完善登录控制器，修改 User 类代码以建立对数据库的映射；建立数据访问对象DAO用来操作数据库的对象（定义）；建立Service对 UserDAO 进行了二次封装（操作）；建立Controller登录控制器查询数据库验证登录成功与否（采取三层架构（DAO + Service + Controller））