当前位置:   article > 正文

Spring boot+vue前后端分离_springboot vue前后端分离

springboot vue前后端分离

目录

1、前端vue的搭建

2、后端项目的构建

pom文件中引入的jar包

yml文件用来配置连接数据库和端口的设置

application.property进行一些整合

service层

imp层

mapper

实体类

额外写一个类、解决跨域问题

3、测试

1、前端vue的搭建


建立项目的过程略
开启一个建立好的vue项目用npm run dev
关闭一个vue项目可在终端操作:ctrl+c
需要注意的几点
1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。
2、安装axios npm install --save axios vue-axios

前端项目结构样式

main.js、这个是整个项目的入口、要使用的在这里引入

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import './plugins/axios'
  5. import App from './App'
  6. import router from './router'
  7. Vue.config.productionTip = false
  8. /* eslint-disable no-new */
  9. new Vue({
  10. el: '#app',
  11. router,
  12. components: { App },
  13. template: '<App/>'
  14. })

Vue.js
在这里可以定义跳转到其他页面的连接

  1. <template>
  2. <div id="app">
  3. <router-link to="/user">book</router-link>
  4. <router-view/>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'App'
  10. }
  11. </script>
  12. <style>
  13. #app {
  14. font-family: 'Avenir', Helvetica, Arial, sans-serif;
  15. -webkit-font-smoothing: antialiased;
  16. -moz-osx-font-smoothing: grayscale;
  17. text-align: center;
  18. color: #2c3e50;
  19. margin-top: 60px;
  20. }
  21. </style>

配置的路由
在这里配置各个页面跳转的路由

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import UserList from '../components/UserList'
  4. import Home from '../components/Home'
  5. Vue.use(Router)
  6. export default new Router({
  7. routes: [
  8. {
  9. path:'/user',
  10. component:UserList
  11. },
  12. {
  13. path:'/',
  14. component:Home
  15. }
  16. ]
  17. })

组件1、

  1. <template>
  2. <div>
  3. 这里是首页
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "Home"
  9. }
  10. </script>
  11. <style scoped>
  12. </style>

组件2
(每个组件之间都可以和后台数据交互通过axios)
提示: const _this =this变量的设置,否则会和回调函数搞混
这里和后台进行连接是通过url。这里的url是访问某一个接口的url,就相当于和某个方法进行打通

  1. <template>
  2. <div>
  3. <table class="_table">
  4. <tr class="_tr">
  5. <td>姓名</td>
  6. <td>年龄</td>
  7. <td>邮箱</td>
  8. </tr>
  9. <tr v-for="item in books ">
  10. <td>{{item.bookAuthor}}</td>
  11. <td>{{item.bookName}}</td>
  12. <td>{{item.price}}</td>
  13. </tr>
  14. </table>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. name: "UserList",
  20. data(){
  21. return{
  22. books:[
  23. {
  24. bookName:'java',
  25. bookAuthor:'小黑',
  26. price:'33'
  27. }
  28. ]
  29. }
  30. },
  31. created() {
  32. const _this =this
  33. axios.get('http://localhost:8181/book/findAll').then(function(resp){
  34. _this.books=resp.data
  35. })
  36. }
  37. }
  38. </script>
  39. <style scoped>
  40. table,td{
  41. border: 1px solid silver;
  42. }
  43. </style>

2、后端项目的构建

首先构建项目
目录结构这个样子

pom文件中引入的jar包

我目前只用到mysql,shiro用来做后续的权限安全验证

  1. <dependencies>
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter</artifactId>
  5. </dependency>
  6. <dependency>
  7. <groupId>org.springframework.boot</groupId>
  8. <artifactId>spring-boot-starter-test</artifactId>
  9. <scope>test</scope>
  10. </dependency>
  11. <!--整合shiro
  12. subject:用户
  13. security manager:管理所有的用户
  14. realm:连接数据库
  15. -->
  16. <dependency>
  17. <groupId>org.apache.shiro</groupId>
  18. <artifactId>shiro-spring</artifactId>
  19. <version>1.4.1</version>
  20. </dependency>
  21. <dependency>
  22. <groupId>com.github.theborakompanioni</groupId>
  23. <artifactId>thymeleaf-extras-shiro</artifactId>
  24. <version>2.0.0</version>
  25. </dependency>
  26. <!--整合mybatis-->
  27. <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
  28. <dependency>
  29. <groupId>org.mybatis.spring.boot</groupId>
  30. <artifactId>mybatis-spring-boot-starter</artifactId>
  31. <version>2.1.0</version>
  32. </dependency>
  33. <dependency>
  34. <groupId>org.springframework.boot</groupId>
  35. <artifactId>spring-boot-starter-web</artifactId>
  36. </dependency>
  37. <!-- JDBC-->
  38. <dependency>
  39. <groupId>org.springframework.boot</groupId>
  40. <artifactId>spring-boot-starter-jdbc</artifactId>
  41. </dependency>
  42. <!-- Mysql-->
  43. <dependency>
  44. <groupId>mysql</groupId>
  45. <artifactId>mysql-connector-java</artifactId>
  46. <scope>runtime</scope>
  47. </dependency>
  48. <dependency>
  49. <groupId>com.alibaba</groupId>
  50. <artifactId>druid</artifactId>
  51. <version>1.1.6</version>
  52. </dependency>
  53. </dependencies>

yml文件用来配置连接数据库和端口的设置

  1. spring:
  2. datasource:
  3. username: root
  4. password: root
  5. url: jdbc:mysql://localhost:3306/ssmbuild?allowMultiQueries=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false
  6. driver-class-name: com.mysql.cj.jdbc.Driver
  7. type: com.alibaba.druid.pool.DruidDataSource
  8. #spring boot 默认是不注入这些属性的,需要自己绑定
  9. #druid 数据源专有配置
  10. initiaSize: 5
  11. minIdle: 5
  12. maxActive: 20
  13. maxWait: 60000
  14. timeBetweenEvictionRunsmMillis: 60000
  15. minEvictableIdleTimeMillis: 300000
  16. validationQuery: SELECT 1 FROM DUAL
  17. testWhileIdle: true
  18. testOnBorrow: false
  19. testOnReturn: false
  20. poolPreparedStatements: true
  21. filters: stat,wall,log4j
  22. maxPoolPrepareStatementPerConnectionSize: 20
  23. useGlobalDataSourceStat: true
  24. connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
  25. server:
  26. port: 8181

application.property进行一些整合

  1. spring.aop.auto=true
  2. #整合mybatis
  3. mybatis.type-aliases-package=com.zheng.pojo
  4. mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

controller层(这里返回给前端的数据用json)
这里使用RestController返回的就是return的内容

        知识点:@RestController注解相当于@ResponseBody + @Controller合在一起的作用。
如果需要返回JSON,XML或自定义mediaType内容到页面,则需要在对应的方法上加上@ResponseBody注解。

  1. package com.zheng.controller;
  2. import com.zheng.pojo.Books;
  3. import com.zheng.service.BookService;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.web.bind.annotation.GetMapping;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RestController;
  8. import java.util.List;
  9. @RestController
  10. @RequestMapping("/book")
  11. public class BooksController {
  12. @Autowired
  13. BookService bookService;
  14. //查询所有的书籍信息
  15. @GetMapping("/findAll")
  16. public List<Books> findAll() {
  17. return bookService.queryBookList();
  18. }
  19. }

service层

  1. package com.zheng.service;
  2. import com.zheng.pojo.Books;
  3. import java.util.List;
  4. public interface BookService {
  5. /**
  6. * 查询图书
  7. */
  8. public List<Books> queryBookList();
  9. }

imp层

  1. package com.zheng.service.serviceImpl;
  2. import com.zheng.mapper.BooksMapper;
  3. import com.zheng.pojo.Books;
  4. import com.zheng.service.BookService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  7. import java.util.List;
  8. @Service
  9. public class BookServiceImpl implements BookService {
  10. @Autowired
  11. BooksMapper booksMapper;
  12. //查询书籍
  13. @Override
  14. public List<Books> queryBookList() {
  15. return booksMapper.queryBookList() ;
  16. }
  17. }

dao层

  1. package com.zheng.mapper;
  2. import com.zheng.pojo.Books;
  3. import org.apache.ibatis.annotations.Mapper;
  4. import org.springframework.stereotype.Repository;
  5. import java.util.List;
  6. @Mapper //这个注解表示这个是mybatis的mapeper
  7. @Repository
  8. public interface BooksMapper {
  9. /**
  10. * 查询图书
  11. */
  12. public List<Books> queryBookList();
  13. }

mapper

、这个位置

  1. <?xml version="1.0" encoding="UTF8"?>
  2. <!DOCTYPE mapper
  3. PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  4. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  5. <mapper namespace="com.zheng.mapper.BooksMapper">
  6. <select id="queryBookList" resultType="com.zheng.pojo.Books">
  7. select * from bookss
  8. </select>
  9. </mapper>

实体类

可以使用Lombok、我不喜欢使用

  1. package com.zheng.pojo;
  2. public class Books {
  3. private String bookId;
  4. private String bookName;
  5. private String bookAuthor;
  6. private Double price;
  7. private String address;
  8. private String impression;
  9. private String introduce;
  10. public Books(String bookId, String bookName, String bookAuthor, Double price, String address, String impression, String introduce) {
  11. this.bookId = bookId;
  12. this.bookName = bookName;
  13. this.bookAuthor = bookAuthor;
  14. this.price = price;
  15. this.address = address;
  16. this.impression = impression;
  17. this.introduce = introduce;
  18. }
  19. public Double getPrice() {
  20. return price;
  21. }
  22. public void setPrice(Double price) {
  23. this.price = price;
  24. }
  25. public Books() { }
  26. public String getBookId() {
  27. return bookId;
  28. }
  29. public void setBookId(String bookId) {
  30. this.bookId = bookId;
  31. }
  32. public String getBookName() {
  33. return bookName;
  34. }
  35. public void setBookName(String bookName) {
  36. this.bookName = bookName;
  37. }
  38. public String getBookAuthor() {
  39. return bookAuthor;
  40. }
  41. public void setBookAuthor(String bookAuthor) {
  42. this.bookAuthor = bookAuthor;
  43. }
  44. public String getAddress() {
  45. return address;
  46. }
  47. public void setAddress(String address) {
  48. this.address = address;
  49. }
  50. public String getImpression() {
  51. return impression;
  52. }
  53. public void setImpression(String impression) {
  54. this.impression = impression;
  55. }
  56. public String getIntroduce() {
  57. return introduce;
  58. }
  59. public void setIntroduce(String introduce) {
  60. this.introduce = introduce;
  61. }
  62. }

额外写一个类、解决跨域问题

  1. package com.zheng.config;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.servlet.config.annotation.CorsRegistry;
  4. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  5. @Configuration
  6. public class CrosConfig implements WebMvcConfigurer {
  7. public void addCorsMappings(CorsRegistry registry){
  8. registry.addMapping("/**")
  9. .allowedOriginPatterns("*")
  10. .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
  11. .allowCredentials(true)
  12. .maxAge(3600)
  13. .allowedHeaders("*");
  14. }
  15. }

遇到的问题:
在测试从数据库取数据的时候,那个测试类出了问题。根本原因是spring boot的启动类没有放在根目录。

3、测试

第一步、1、开启后端服务

第二步、开启前端服务

看页面效果

点击book

这个是从后端请求来的数据。没做样式、简单打通、可以使用elementui让页面更加美观。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码探险家/article/detail/808464
推荐阅读
相关标签
  

闽ICP备14008679号