1 什么是前后端分离
前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。
网络异常，图片无法展示
|
2 Spring Boot后端搭建
2.1 Mapper层
请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/article/details/118342143
此次项目的后端搭建就是在这个项目的基础上
2.2 Service层
接口：
/** * @author 17122 */ public interface StudentService { /** * 添加一个学生 * * @param student * @return */ public int saveStudent(Student student); /** * 根据ID查看一名学生 * * @param id * @return */ public Student findStudentById(Integer id); /** * 查询全部学生 * * @return */ public List<Student> findAllStudent(); /** * 根据ID删除一个 * * @param id * @return */ public int removeStudentById(Integer id); /** * 根据ID修改 * * @param student * @return */ public int updateStudentById(Student student); } 复制代码
实现类：
/** * @author 17122 */ @Service public class StudentServiceImpl implements StudentService { @Autowired private XmlStudentMapper xmlStudentMapper; @Override public int saveStudent(Student student) { return xmlStudentMapper.saveStudent(student); } @Override public Student findStudentById(Integer id) { return xmlStudentMapper.findStudentById(id); } @Override public List<Student> findAllStudent() { return xmlStudentMapper.findAllStudent(); } @Override public int removeStudentById(Integer id) { return xmlStudentMapper.removeStudentById(id); } @Override public int updateStudentById(Student student) { return xmlStudentMapper.updateStudentById(student); } } 复制代码
2.3 Controller层
/** * @author 17122 */ @RestController @RequestMapping("/student") public class StudentController { @Autowired private StudentService studentService; /** * 添加学生 * * @param student * @return */ @PostMapping("/save") public int saveStudent(@RequestBody Student student) { int result; try { result = studentService.saveStudent(student); } catch (Exception exception) { return -1; } return result; } /** * 查看全部 * * @return */ @GetMapping("/findAll") public List<Student> findAll() { return studentService.findAllStudent(); } /** * 根据ID查看 * * @param id * @return */ @GetMapping("/findById/{id}") public Student findById(@PathVariable("id") Integer id) { return studentService.findStudentById(id); } /** * 删除一个 * * @param id * @return */ @DeleteMapping("/remove/{id}") public int remove(@PathVariable("id") Integer id) { return studentService.removeStudentById(id); } /** * 修改学生信息 * * @param student * @return */ @PostMapping("/update") public int update(@RequestBody Student student) { return studentService.updateStudentById(student); } } 复制代码
2.4 配置类
解决跨域请求
/** * @author 17122 */ @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } } 复制代码
图解跨域问题：
网络异常，图片无法展示
|
3 Vue前端搭建
3.1 新建Vue_cli2.x项目
3.2 引入路由
npm install vue-router --save 复制代码
3.3 新建文件
网络异常，图片无法展示
|
3.4 配置和测试路由
main.js配置
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app') 复制代码
index.js
//注册路由 import Vue from 'vue'; import VueRouter from 'vue-router'; //引入路由 import index from '../view/index' import update from "../view/update"; import selectAll from "../view/selectAll"; import selectOne from "../view/selectOne"; import insert from "../view/insert"; Vue.use(VueRouter); const router = new VueRouter({ routes: [ { name: "主页重定向", path: "/", redirect: "/index" }, { name: "主页", path: "/index", component: index, children: [ { name: "修改操作", path: "/update", component: update, }, { name: "查看全部", path: "/selectAll", component: selectAll, }, { name: "查看一个", path: "/selectOne", component: selectOne, }, { name: "添加一个", path: "/insert", component: insert, } ] } ] }) export default router 复制代码
App.vue
<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App', } </script> 复制代码
index.vue
<template> <div> <router-link to="update">update</router-link> <br> <router-link to="selectAll"> selectAll</router-link> <br> <router-link to="selectOne"> selectOne</router-link> <br> <router-link to="insert"> insert</router-link> <br> <br> <router-view></router-view> </div> </template> <script> export default { name: "index" } </script> <style scoped> </style> 复制代码
insert.vue
<template> <div> insert </div> </template> <script> export default { name: "insert" } </script> <style scoped> </style> 复制代码
selectOne.vue
<template> <div> selectOne </div> </template> <script> export default { name: "selectOne" } </script> <style scoped> </style> 复制代码
selectAll.vue
<template> <div> selectAll </div> </template> <script> export default { name: "selectAll" } </script> <style scoped> </style> 复制代码
update.vue
<template> <div> update </div> </template> <script> export default { name: "update" } </script> <style scoped> </style> 复制代码
测试
启动项目
npm run serve 复制代码
访问：http://localhost:8080/
网络异常，图片无法展示
|
点击相关标签时会显示响应页面
3.5 引入Element UI
npm i element-ui -S 复制代码
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI) new Vue({ render: h => h(App), router }).$mount('#app') 复制代码
