一，前后端分离。
前后端分离时将一个应用的前端代码和后端代码分开写，如果不用前后端分离传统的JavaWeb开发中前端使用JSP开发，JSP不是由后端开发者来独立完成的前端--〉html静态页面---->后端---〉JSP
R这种开发效率极低，可以用前后端分离方式进行开发，就可以完美地解决这一问题。前端只需要独立完成编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可。前端通过Ajax请求来访问后端的数据接口，将Model展示到Web中即可。
前后端开发者只需要提前预约好接口文档（URL，参数，数据类型），然后分别独立开发即可，前端可以造假数据进行测试，完全不需要依赖后端，最后完成前后端集成即可，真正实现了前后端应用的解耦和，极大地提高了开发效率。
单体----前端应用+后端应用
前端应用：负责数据展示和用户交互。
后端应用：负责提供数据处理接口。
前端HTML------Ajax------RESTful后端数据接口。
传统的单体应用
客户端------〉 (jsp====java server)
前后端分离
客户端locallhost8080----〉前端应用（HTML+CSS+JS）locallhost8181----〉后端应用(JSON返回前端)
前后端分离就是将一个单体拆分成两个独立的应用，前后端应用以JSON格式进行数据交互
实现技术
Spring Boot+Vue
使用Spring Boot进行前后端应用开发+使用Vue进行前端应用开发
下载安装node （自学第一课里面有安装包）配置部署步骤如下
/article/48b37f8dd141b41a646488bc.html
下载安装HBuilder也是在第一课就给到了安装包解压就能用,然后创建vue2.0以上版本的项目,在idea里面下载安装插件vue.js将创建项目导入idea进行编写， 其实在H里面也可以编写。
上面环境的搭建和部署很复杂每一步都要仔仔细细，不要出错了。
安装数据库Mysql，链接：/s/1SWccom5C-kWBP5OVQiECLg
提取码：4373
按照步骤mysql8.0安装教程与配置（最详细）操作简单_weixin_13077297483-CSDN博客
密码置空然后修改新密码:
mysql 8.0版本及其高版本修改默认密码_CSDNCDN的博客-CSDN博客
Mysql8.0.17 登录报1045(28000)错误(困扰好几个小时！！！！各种试，原来是mysql8.0的区别！)_疯猫-CSDN博客
第一个攻略进行到最后修改时借鉴第二个网页
6. 进行修改密码：
ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
#plugin需要改成：mysql_native_password
7. 刷新权限（必须步骤）：flush privileges;。
8. 退出 quit。
————————————————
版权声明：本文为CSDN博主「秤秤biubiu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/zoucui/article/details/97009698
第一次自学课程也提供了Navicat Premium免费绿色版 V12.0.11.0可以下载安装可以可视化操作名Mysql。至此安装部署准备工作就做完了。
使用建立好的数据库和Navicat建立连接:并测试连接
然后在HBuilder中开始创建项目 运行npm run serve 测试
测试结果如下表示成功
创建完成导入idea
下载插件
在idea中执行下载需要包，这里遇到问题
下载不了有可能是项目里面的
这个文件权限不足将创建项目里面的这个包完全卸载执行
再进行下载即可
下面是前端代码文件
1，在views文件里创建Book.vue 文件
<template><div><table><tr><td>编号</td><td>书名</td><td>作者</td><td>出版社</td><td>页数</td><td>价格</td></tr><tr v-for="item in books"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.author}}</td><td>{{item.publish}}</td><td>{{item.pages}}</td><td>{{item.price}}</td></tr></table></div></template><script>export default {name: "Book",data() {return {books: [{id: 1,name: '解忧杂货店',author: '东野圭吾',publish: '电子工业出版社',pages: 100,price: 22},{id: 2,name: '222解忧杂货店',author: '2东野圭吾',publish: '2电子工业出版社',pages: 1200,price: 222}]}},created() {//用于处理8080跨域访问8181const _this = thisaxios.get('http://localhost:8181/book/findAll/').then(function (resp) {_this.books = resp.data})}}</script><style scoped></style>
2.配置路由
import Vue from 'vue'import VueRouter from 'vue-router'import Book from '../views/Book.vue'import About from '../views/About.vue'Vue.use(VueRouter)const routes = [{path: '/book',name:'book',component:Book},{path: '/about',name:'about',component:About}]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes})export default router
3，主页面代码
<template><div id="app"><router-view></router-view></div></template><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}</style><script>export default {data() {const item = {date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}};</script>
4.下面是后端新建步骤
建好后写入数据库连接代码写到yml文件中
spring:datasource:url: jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverjpa:show-sql: trueproperties:hibernate:format_sql: trueserver:port: 8181
数据库表可以先写入navicat中
-- MySQL dump 10.13 Distrib 8.0.11, for macos10.13 (x86_64)---- Host: 127.0.0.1 Database: library-- -------------------------------------------------------- Server version 8.0.11/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;SET NAMES utf8mb4 ;/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;/*!40103 SET TIME_ZONE='+00:00' */;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;---- Table structure for table `book`--DROP TABLE IF EXISTS `book`;/*!40101 SET @saved_cs_client= @@character_set_client */;SET character_set_client = utf8mb4 ;CREATE TABLE `book` (`id` int(10) NOT NULL AUTO_INCREMENT,`name` varchar(20) DEFAULT NULL,`author` varchar(20) DEFAULT NULL,`publish` varchar(20) DEFAULT NULL,`pages` int(10) DEFAULT NULL,`price` float(10,2) DEFAULT NULL,`bookcaseid` int(10) DEFAULT NULL,`abled` int(10) DEFAULT NULL,PRIMARY KEY (`id`),KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`),CONSTRAINT `FK_ieh6qsxp6q7oydadktc9oc8t2` FOREIGN KEY (`bookcaseid`) REFERENCES `bookcase` (`id`)) ENGINE=InnoDB AUTO_INCREMENT=119 DEFAULT CHARSET=utf8;/*!40101 SET character_set_client = @saved_cs_client */;---- Dumping data for table `book`--LOCK TABLES `book` WRITE;/*!40000 ALTER TABLE `book` DISABLE KEYS */;INSERT INTO `book` VALUES (1,'解忧杂货店','东野圭吾','电子工业出版社',102,27.30,9,1),(2,'追风筝的人','卡勒德·胡赛尼','中信出版社',330,26.00,1,1),(3,'人间失格','太宰治','作家出版社',150,17.30,1,1),(4,'这就是二十四节气','高春香','电子工业出版社',220,59.00,3,1),(5,'白夜行','东野圭吾','南海出版公司',300,27.30,4,1),(6,'摆渡人','克莱儿·麦克福尔','百花洲文艺出版社',225,22.80,1,1),(7,'暖暖心绘本','米拦弗特毕','湖南少儿出版社',168,131.60,5,1),(8,'天才在左疯子在右','高铭','北京联合出版公司',330,27.50,6,1),(9,'我们仨','杨绛','生活.读书.新知三联书店',89,17.20,7,1),(10,'活着','余华','作家出版社',100,100.00,6,1),(11,'水浒传','施耐庵','三联出版社',300,50.00,1,1),(12,'三国演义','罗贯中','三联出版社',300,50.00,2,1),(13,'红楼梦','曹雪芹','三联出版社',300,50.00,5,1),(14,'西游记','吴承恩','三联出版社',300,60.00,3,1);/*!40000 ALTER TABLE `book` ENABLE KEYS */;UNLOCK TABLES;/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;-- Dump completed on -02-07 15:53:18如图
下面写对应前端的映射在相应文件下写Book 类和接口
package com.southwind.springboottest.entity;import lombok.Data;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;@Entity@Datapublic class Book {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Integer id;private String name;private String author;private String publish;private String pages;private String price;}接口package com.southwind.springboottest.entity;import org.springframework.data.jpa.repository.JpaRepository;import com.southwind.springboottest.entity.Book;public interface BookRepository extends
数据交互这里是后面要用到的分页，不加分页就应该是
package com.southwind.springboottest.controller;import com.southwind.springboottest.entity.Book;import com.southwind.springboottest.entity.BookRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/book")public class BookHandler {@Autowiredprivate BookRepository bookRepository;@GetMapping("/findAll")public list<Book> findAll(){return bookRepository.findAll();}}
JpaRepository<Book,Integer>{}
分页操作
package com.southwind.springboottest.controller;import com.southwind.springboottest.entity.Book;import com.southwind.springboottest.entity.BookRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("/book")public class BookHandler {@Autowiredprivate BookRepository bookRepository;@GetMapping("/findAll/{page}/{size}")public Page<Book> findAll(@PathVariable("page") Integer page,@PathVariable("size") Integer size){org.springframework.data.domain.Pageable pageable = PageRequest.of(page-1,size);return bookRepository.findAll(pageable);}}
JpaRepository<Book,Integer>{}相应文件下创建连接测试
方法在接口里面如下操作可以直接创建
重写一下就可以开始测试了package com.southwind.springboottest.entity;import org.junit.jupiter.api.Test;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.boot.test.context.SpringBootTest;@SpringBootTestclass BookRepositoryTest {@Autowiredprivate BookRepository bookRepository;@Testvoid findAll(){System.out.println(bookRepository.findAll());}}
前端运行后端也正常运行可以得出
注：先测试获取数据库正常与否如果正常才进行交互代码，这是前提：如果不成功检查配置文件，端口3306是否被占用，数据库服务是否启动！
后端8181正常启动
前端服务启动
访问8080没打开后端服务时
访问8181与数据库交互打开后端服务访问的时候立马跨域刷新
