Spring boot+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、这个是整个项目的入口、要使用的在这里引入

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

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

<template><div id="app"><router-link to="/user">book</router-link><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

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

import Vue from 'vue'
import Router from 'vue-router'import UserList from '../components/UserList'
import Home from '../components/Home'Vue.use(Router)export default new Router({routes: [{path:'/user',component:UserList},{path:'/',component:Home}]
})

组件1、

<template><div>这里是首页</div>
</template><script>export default {name: "Home"}
</script><style scoped></style>

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

<template><div><table class="_table"><tr class="_tr"><td>姓名</td><td>年龄</td><td>邮箱</td></tr><tr v-for="item in books "><td>{{item.bookAuthor}}</td><td>{{item.bookName}}</td><td>{{item.price}}</td></tr></table></div>
</template><script>export default {name: "UserList",data(){return{books:[{bookName:'java',bookAuthor:'小黑',price:'33'}]}},created() {const _this =thisaxios.get('http://localhost:8181/book/findAll').then(function(resp){_this.books=resp.data})}}
</script><style scoped>
table,td{border: 1px solid silver;
}</style>

2、后端项目的构建

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

pom文件中引入的jar包

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

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--整合shirosubject:用户security manager:管理所有的用户realm:连接数据库--><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>1.4.1</version></dependency><dependency><groupId>com.github.theborakompanioni</groupId><artifactId>thymeleaf-extras-shiro</artifactId><version>2.0.0</version></dependency><!--整合mybatis--><!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--   JDBC--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!--  Mysql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.6</version></dependency></dependencies>

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

spring:datasource:username: rootpassword: rooturl: jdbc:mysql://localhost:3306/ssmbuild?allowMultiQueries=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=falsedriver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSource#spring boot 默认是不注入这些属性的,需要自己绑定#druid 数据源专有配置initiaSize: 5minIdle: 5maxActive: 20maxWait: 60000timeBetweenEvictionRunsmMillis: 60000minEvictableIdleTimeMillis: 300000validationQuery: SELECT 1 FROM DUALtestWhileIdle: truetestOnBorrow: falsetestOnReturn: falsepoolPreparedStatements: truefilters: stat,wall,log4jmaxPoolPrepareStatementPerConnectionSize: 20useGlobalDataSourceStat: trueconnectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500server:port: 8181

application.property进行一些整合


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

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

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

package com.zheng.controller;import com.zheng.pojo.Books;
import com.zheng.service.BookService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
@RequestMapping("/book")
public class BooksController {@AutowiredBookService bookService;//查询所有的书籍信息@GetMapping("/findAll")public List<Books> findAll() {return bookService.queryBookList();}}

service层

package com.zheng.service;import com.zheng.pojo.Books;import java.util.List;public interface BookService {/*** 查询图书*/public List<Books> queryBookList();}

imp层

package com.zheng.service.serviceImpl;import com.zheng.mapper.BooksMapper;
import com.zheng.pojo.Books;
import com.zheng.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BookServiceImpl implements BookService {@AutowiredBooksMapper booksMapper;//查询书籍@Overridepublic List<Books> queryBookList() {return booksMapper.queryBookList() ;}
}

dao层

package com.zheng.mapper;import com.zheng.pojo.Books;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;import java.util.List;@Mapper    //这个注解表示这个是mybatis的mapeper
@Repository
public interface BooksMapper {/*** 查询图书*/public List<Books> queryBookList();}

mapper

、这个位置

<?xml version="1.0" encoding="UTF8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zheng.mapper.BooksMapper"><select id="queryBookList" resultType="com.zheng.pojo.Books">select * from bookss</select></mapper>

实体类

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

package com.zheng.pojo;public class Books {private String bookId;private String bookName;private String bookAuthor;private Double price;private String address;private String impression;private String introduce;public Books(String bookId, String bookName, String bookAuthor, Double price, String address, String impression, String introduce) {this.bookId = bookId;this.bookName = bookName;this.bookAuthor = bookAuthor;this.price = price;this.address = address;this.impression = impression;this.introduce = introduce;}public Double getPrice() {return price;}public void setPrice(Double price) {this.price = price;}public Books() { }public String getBookId() {return bookId;}public void setBookId(String bookId) {this.bookId = bookId;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public String getBookAuthor() {return bookAuthor;}public void setBookAuthor(String bookAuthor) {this.bookAuthor = bookAuthor;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public String getImpression() {return impression;}public void setImpression(String impression) {this.impression = impression;}public String getIntroduce() {return introduce;}public void setIntroduce(String introduce) {this.introduce = introduce;}
}

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

package com.zheng.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CrosConfig implements WebMvcConfigurer {public void addCorsMappings(CorsRegistry registry){registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}
}

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

3、测试

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

第二步、开启前端服务

看页面效果

点击book

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用自然语言连接信息孤岛

信息孤岛互联互通的困难 尽管已经进入了互联网时代&#xff0c;信息系统中的信息孤岛现象仍然十分地严重&#xff0c;不同部门&#xff0c;不同机器之间难以实现信息的互联互通。存在大量的信息孤岛。 不同信息系统的相互通信依赖通信协议和数据模型的定义&#xff0c;前者决定…

上海安全员C证继续教育题库(附答案)

1.从业人员经过安全教育培训&#xff0c;了解岗位操作规程&#xff0c;但未遵守而造成事故的&#xff0c;行为人应负( )责任&#xff0c;有关负责人应负( )责任。 A.直接 间接 B.直接 领导 C.间接 管理D.直接 管理 2.对生产附着式升降脚手架产品的单位&#xff0c;必须…

一定要了解的 WordPress 数据库中默认 12 个表

WordPressan 安装的时候会有 12 张默认的数据表,每张表的数据都包含了 WordPress 不同的功能。看看这些表的结构,你能很容易的了解网站不同的部分都是存在哪里的。目前,默认的 WordPress 安装会创建如下的数据表。 注意:每张表名前面的 wp_ 是你在安装过程中选择的数据库前…

【IoT NTN】3GPP R18中关于各类IoT设备在NTN中的增强和扩展

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G技术研究。 博客内容主要围绕…

SAP ABAP 往数据库表里加数据

目录 方法一&#xff1a;SE16N SE11 方法二&#xff1a;创建维护VIEW&#xff1a;SE11 SM30 Error补充说明&#xff1a; 方法一&#xff1a;SE16N SE11 首先SE16N 进来。 进来之后在テーブル的位置输入表名&#xff0c;然后点击执行&#xff08;F8&#xff09; 如果第一次…

spring 解决循环依赖

在 spring 框架中&#xff0c;我们知道它是通过三级缓存来解决循环依赖的&#xff0c;那么它具体是怎么实现的&#xff0c;以及是否必须需要三级缓存才能解决循环依赖&#xff0c;本文来作相关介绍。 具体实现 先来看看它的三级缓存到底是什么&#xff0c;先看如下代码&#…

Unity动画录制工具在运行时录制和保存模型骨骼运动的方法录制动画给其他角色模型使用支持JSON、FBX等格式

如果您正在寻找一种在运行时录制和保存模型骨骼运动的方法&#xff0c;那么此插件是满足您需求的完美解决方案。 实时录制角色运动 将录制到的角色动作转为动画文件 将录制好的动作给新的角色模型使用&#xff0c;完美复制 支持导出FBX格式 操作简单&#xff0c;有按钮界面…

【机器学习】我们该如何评价GPT-4o?GPT-4o的技术能力分析以及前言探索

目录 &#x1f926;‍♀️GPT-4o是什么&#xff1f; &#x1f68d;GPT-4o的技术能力 1. 自然语言理解 2. 自然语言生成 3. 对话系统 4. 语言翻译 5. 文本纠错 6. 知识问答 7. 定制和微调 8. 透明性和可解释性 9. 扩展性 &#x1f690;版本对比分析 1. GPT-4标准版 …

像素蛋糕Photoshop颜色导出不一致问题分析与解决

问题点&#xff1a;发现用像素蛋糕修完图明天应该为最右边图片显示 模特应该是白皙的&#xff0c;但是导出图片无论是否勾选SRGB都表现的为种间图片颜色一样 饱和度巨高。 问题分析&#xff1a;那这一定是颜色配置文件出现问题&#xff0c;找到客服表示可以去PS打开看是否与预…

Linux之进程信号详解【上】

&#x1f30e; Linux信号详解 文章目录&#xff1a; Linux信号详解 信号入门 技术应用角度的信号 信号及信号的产生       信号的概念       信号的处理方式 信号的产生方式         键盘产生信号         系统调用产生信号         软件…

P1072 [NOIP2009 提高组] Hankson 的趣味题

Hankson 的趣味题 这题要有思维&#xff01;对。数论&#xff01;最大公约数与最小公倍数。 用LaTex写公式&#xff0c;真的麻烦&#xff01;wcnmd!,,,,,,be---- 于是我用手写了&#xff1a; 大功告成&#xff01;上马&#xff01; #include<cstdio> using namespace …

MyBatis插件机制

MyBatis插件机制是该框架提供的一种灵活扩展方式&#xff0c;允许开发者在不修改框架源代码的情况下对MyBatis的功能进行定制和增强。这种机制主要通过拦截器&#xff08;Interceptor&#xff09;实现&#xff0c;使得开发者可以拦截和修改MyBatis在执行SQL语句过程中的行为。 …

两轮自平衡小车资料(L298N 模块原理图及使用说明+c源码)

本文详细介绍了基于STM32微控制器的两轮自平衡小车的设计与实现过程。内容包括小车的硬件选型、电路设计、软件编程以及PID控制算法的应用。通过陀螺仪和加速度计获取小车的姿态信息&#xff0c;利用PID控制算法调整电机输出&#xff0c;实现小车的自主平衡。此外&#xff0c;还…

[图解]企业应用架构模式2024新译本讲解12-领域模型5

1 00:00:00,560 --> 00:00:04,690 刚才是往那个表里面添加数据了 2 00:00:04,700 --> 00:00:07,960 相当于&#xff0c;或者往这个合同里面添加数据了 3 00:00:08,430 --> 00:00:09,530 现在要查询怎么办 4 00:00:09,900 --> 00:00:10,930 跟前面一样 5 00:00:…

简单的基于threejs和BVH第一人称视角和第三人称视角控制器

渲染框架是基于THREE,碰撞检测是基于BVH。本来用的是three自带的octree结构做碰撞发现性能不太好 核心代码&#xff1a; import * as THREE from three import { RoundedBoxGeometry } from three/examples/jsm/geometries/RoundedBoxGeometry.js; import { MeshBVH, MeshBVHHe…

计算机系统基础笔记(12)——控制

前言 在持续输出ing 一、条件码 1.处理器状态&#xff08;x86-64&#xff0c;部分的&#xff09; 当前程序的执行信息 ◼ 临时数据 ◼ 运行时栈的位置&#xff08;栈顶&#xff09; ◼ 当前代码控制点的位置&#xff08;即将要执行的指令地址&#xff09; ◼ 最近一次指令执…

【C++关键字】auto的使用(C++11)

auto的使用&#xff08;C11&#xff09; auto关键字auto的使用细则auto使用场景 随着程序的复杂化&#xff0c;程序中用到的类型也越来越复杂化&#xff0c;经常体现在&#xff1a; 1.类型难以拼写 2.含义不明确导致容易出错 在C语言阶段处理这类问题的方法&#xff0c;可以使…

拉格朗日乘子将不等式约束转化为等式约束例子

拉格朗日乘子将不等式约束转化为等式约束例子 在优化问题中,常常需要将不等式约束转化为等式约束。使用拉格朗日乘子法,可以通过引入松弛变量将不等式约束转换为等式约束,然后构造拉格朗日函数进行求解。 拉格朗日乘子法简介 拉格朗日乘子法是求解带约束优化问题的一种方…

【吊打面试官系列-Mysql面试题】BLOB 和 TEXT 有什么区别 ?

大家好&#xff0c;我是锋哥。今天分享关于 【BLOB 和 TEXT 有什么区别&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; BLOB 和 TEXT 有什么区别 &#xff1f; BLOB 是一个二进制对象&#xff0c;可以容纳可变数量的数据。TEXT 是一个不区分大小写的 BLOB。 1…

【调整堆】(C++ 代码实现 注释详解)

自定义结构体&#xff1a; #define sz 105 typedef struct node{int length;int l[sz]; }SqList; 调整堆的函数&#xff1a; HeapAdjust函数思路说明&#xff1a; //目标&#xff1a;将以s为根的子树调整为大根堆 //具体操作&#xff1a;将路径上比s大的都往上移动,s往下移…