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.rhkb.cn/news/344872.html

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

相关文章

JDK下载安装Java SDK

Android中国开发者官网 Android官网 (VPN翻墙) 通过brew命令 下载OracleJDK(推荐) 手动下载OracleJDK(不推荐) oracle OracleJDK下载页 查找硬件设备是否已存在JDK环境 oracle官网 备注&#xff1a; JetPack JavaDevelopmentKit Java开发的系统SDK OpenJDK 开源免费SDK …

unity3d:GameFramework+xLua+Protobuf+lua-protobuf,生成.cs,.pb工具流

概述 1.区分lua&#xff0c;cs用的proto 2.proto生成cs&#xff0c;使用protogen.exe&#xff0c;通过csharp.xslt修改生成cs样式 3.proto生成lua加载.pb二进制文件&#xff0c;并生成.pb列表文件&#xff0c;用于初始化加载 4.协议id生成cs&#xff0c;lua中枚举 区分cs&…

spring boot3登录开发-2(3邮件验证码接口实现)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 目录 写在前面 上文衔接 接口设计与实现 1.接口分析 2.实现思路 3.代码实现 1.定义验证码短信HTML模板枚举类 2.定义验证码业务接口 3. 验证码业务接口实现 4.控制层代码 4.测试 写…

【原创】springboot+mysql农业园区管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

【物联网实战项目】STM32C8T6+esp8266/mqtt+dht11+onenet+uniapp

一、实物图 前端uniapp效果图&#xff08;实现与onenet同步更新数据&#xff09; 首先要确定接线图和接线顺序&#xff1a; 1、stm32c8t6开发板连接stlinkv2下载线 ST-LINK V2STM323.3V3.3VSWDIOSWIOSWCLKSWCLKGNDGND 2、ch340串口连接底座&#xff08;注意RXD和TXD的连接方式…

数据结构之计数排序算法【图文详解】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …

贪心算法-加油站

一、题目描述 二、解题思路 1.运动过程分析 这里需要一个油箱剩余油量的变量resGas&#xff0c;初始化resGas0&#xff1b;还需要一个标记从什么位置当做初始位置的startIdx&#xff0c;初始化startIdx0。 我们从数组下标idx0处开始向后遍历&#xff0c;初始时startIdx0&#…

go语言进阶 init() 函数

go 语言包 在一个项目中通常我们需要引入第三方包&#xff0c;我们来看下 当我们导入一个包的时候 发生了什么&#xff1a; 首先我们先详细介绍下两个函数&#xff1a; init(), main() 是 go 语言中的保留函数。我们可以在源码中 定义 init()函数&#xff0c; 此函数会在包导入…

代码随想录——将有序数组转化为二叉搜索树(Leetcode108)

题目链接 递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …

Java Web学习笔记24——Vue项目开发流程

import是引入文件。 export是将对象导出为模块。 new Vue({ router, router: h > h(App) }).$mount(#app) App.vue: vue的组成文件以.vue结尾&#xff0c;每个组件由三个部分组成&#xff1a;<template>、<script>、<style>。 <template><d…

Transformer学习之SwinTransformer

1.算法简介 本文主要参考自以下链接&#xff0c;整理成线上的形式用于备忘&#xff0c;排版太麻烦了直接贴图&#xff0c;参考的朋友慎重&#xff0c;不如直接看参考链接&#xff0c;后期有了新的理解继续更正。 参考链接1&#xff1a;Swin-Transformer网络结构详解_swin tran…

基于JSP技术的文物管理系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员界面 用户前台…

mysql (事物)

一.什么是事物 事物是一组操作的集合&#xff0c;不可分割的工作单位&#xff0c;事物会把所有的操作当作一个整体一起向系统提交或撤销操作请求&#xff0c;就是这些操作要么一起成功要么一起失败。 二.事物操作 &#xff08;这个就是一个理解&#xff09; 1.事务特性 原子性…

【虚拟现实】二、主要的AR/VR硬件设备

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 2.1 微软HoloLens 微软HoloLens是一款领先的混合现实设备&#xff0c;结合了AR和VR的元素&#xff0c;允许用户…

ssm601基于ssm框架的校园闲置物品交易平台+jsp【已测试】

前言&#xff1a;&#x1f469;‍&#x1f4bb; 计算机行业的同仁们&#xff0c;大家好&#xff01;作为专注于Java领域多年的开发者&#xff0c;我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源&#xff1a; &#x1f469;‍&#x1f4bb; SpringBoot…

lua vm 五: upvalue

前言 在 lua vm 中&#xff0c;upvalue 是一个重要的数据结构。upvalue 以一种高效的方式实现了词法作用域&#xff0c;使得函数能成为 lua 中的第一类值&#xff0c;也因其高效的设计&#xff0c;导致在实现上有点复杂。 函数 (proto) upvalue 构成了闭包&#xff08;closu…

【C++ STL】模拟实现 string

标题&#xff1a;【C :: STL】手撕 STL _string 水墨不写bug &#xff08;图片来源于网络&#xff09; C标准模板库&#xff08;STL&#xff09;中的string是一个可变长的字符序列&#xff0c;它提供了一系列操作字符串的方法和功能。 本篇文章&#xff0c;我们将模拟实现STL的…

数据结构---树与二叉树

个人介绍 hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的…

【中国开源生态再添一员】天工AI开源自家的Skywork

刚刚看到《AI高考作文出圈&#xff0c;网友票选天工AI居首》&#xff0c;没想到在Huggingface中发现了Skywork大模型。天工大模型由昆仑万维自研&#xff0c;是国内首个对标ChatGPT的双千亿级大语言模型&#xff0c;天工大模型通过自然语言与用户进行问答式交互&#xff0c;AI生…

Linux系统管理:虚拟机Almalinux 9.4 安装

目录 一、理论 1.Almalinux 二、实验 1.虚拟机Almalinux 9.4 安装准备阶段 2.安装Almalinux 9.4 3.Termius远程连接 一、理论 1.Almalinux (1) 简介 Almalinux是一个开源、社区拥有和管理、免费的企业Linux发行版。专注于长期稳定性&#xff0c;并提供强大的生产级…