SpringBoot + mybatis + HSQLDB + Vue

第404块砖头

于 2024-05-21 23:12:07 发布

阅读量950

点赞数 28

文章标签： mybatis java spring boot

本文链接：https://blog.csdn.net/qq_37980551/article/details/129762344

版权

SpringBoot + mybatis + HSQLDB + Vue

前言：

本文旨在帮助开发者快速搭建SpringBoot-Web项目，架构师选用前后端分离架构，前端采用Vue轻量级框架，后端应用层采用以SpringBoot为核心的SSM框架，数据层采用HSQLDB内存数据库。

正在上传…重新上传取消技术栈：

正在上传…重新上传取消

SpringBoot
Mybatis
HyperSQLDb
Lombok
AOP
Vue
ElementUI
Axios

开发工具与环境：

Idea 2019.01
Jdk1.8
Maven 3.0.5

1、简介

HSQL数据库是一款纯Java编写的免费数据库，许可是BSD-style的协议，如果你是使用Java编程的话，不凡考虑一下使用它，相对其他数据库来说，其体积小，才563kb。仅一个hsqldb.jar文件就包括了数据库引擎，数据库驱动，还有其他用户界面操作等内容。在Java开源世界里，hsql是极为受欢迎的（就Java本身来说），JBoss应用程序服务器默认也提供了这个数据库引擎。由于其体积小的原因，又是纯Java设计，又支持SQL99，SQL2003大部分的标准，所以也是作为商业应用程序展示的一种选择。请到以下地址下载hsql

Download hsqldb_1_7_3_3.zip (HyperSQL Database Engine (HSQLDB))

2、四种使用模式介绍

一个db 数据库会包含如下文件:

mydb.properties：文件包含关于数据库的一般设置.
mydb.script：文件包含表和其它数据库,插入没有缓存表的数据.
mydb.log：文件包含当前数据库的变更.
mydb.data：文件包含缓存表的数据
mydb.backup：文件是最近持久化状态的表的数据文件的压缩备份文件，当操作db 数据库的时候, mydb.log 用于保存数据的变更. 当正常SHUTDOWN,这个文件将被删除. 否则(不是正常shutdown),这个文件将用于再次启动的时候,重做这些变更.
mydb.lck：文件也用于记录打开的数据库的事实, 正常SHUTDOWN,文件也被删除.在一些情况下,mydb.data.old 文件会被创建,并删除以前的.

所有以上这个文件都是必要的,不能被删除.如果数据库没有缓存表,mydb.data 和mydb.backup 文件将不会存在.另外,除了以上文件HSQLDB 数据库可以链接到任何文本文件,比如cvs 文件.

https://www.cnblogs.com/show58/p/13628322.html

HSqlDB认识及使用_最爱白嫖 O(∩_∩)O的博客-CSDN博客

SpringBoot集成内存数据库hsqldb_hsqldb springboot_蓝不蓝编程的博客-CSDN博客

项目搭建：

IDEA：File>New>Project

正在上传…重新上传取消

工程目录：

SpringBoot项目中一般结构分为：controller层、service层、mapper层、entity层作用

https://blog.csdn.net/weixin_46368865/article/details/115797760

正在上传…重新上传取消

#SpringBoot-Demo

### 目录结构:

* db 数据库设计

* src|

* main|

* java|

* com|

* example|

* demo|

* aspect AOP拦截器

* common 公共组件

* controller 控制层

* entity(model/pojo/domain) 实体类

* mapper(dao) 持久层(数据层)

* service 业务层(逻辑层)

* DemoApplication.java 项目启动类

* resources|

* mapper Mapper扫描目录

* application.yml SpringBoot配置文件

* pom.xml Maven依赖

pom完整依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

</parent>

<groupId>com.example</groupId>

<version>0.0.1-SNAPSHOT</version>

<description>Demo project for Spring Boot</description>

<java.version>1.8</java.version>

</properties>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.mybatis.spring.boot</groupId>

<artifactId>mybatis-spring-boot-starter</artifactId>

</dependency>

<groupId>org.hsqldb</groupId>

<artifactId>hsqldb</artifactId>

<scope>runtime</scope>

</dependency>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-aop</artifactId>

</dependency>

</dependencies>

<build>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

application.yml配置：

#启动端口
server:
  port: 80

#集成HsqlDB
spring:
  datasource:
#    url: jdbc:hsqldb:file:/E:/hsqldb/data/mydb # Windows
#    url: jdbc:hsqldb:file:/opt/db/mydb # Linux
    url: jdbc:hsqldb:file:mydb # 当前项目名下
    username: sa
    password:
    driver-class-name: org.hsqldb.jdbc.JDBCDriver

#集成mybatis
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.demo.entity

hsql.sql脚本:

create table SYS_SERVICE_LOG
(
    IP           VARCHAR(255),
    PORT         INTEGER,
    URL          VARCHAR(1000),
    HTTP_METHOD VARCHAR(255),
    CLASS_METHOD VARCHAR(255),
    ARGS         VARCHAR(1000)
);

create table BLOG
(
    ID    INTEGER not null
        constraint BLOG_PK
            primary key,
    TITLE VARCHAR(255)
);

VUE

1、node.js安装

首先我们上node.js官网(https://nodejs.org/zh-cn/)，下载最新的长期版本，直接运行安装完成之后，我们就已经具备了node和npm的环境了。

正在上传…重新上传取消

安装完成之后检查下版本信息：

正在上传…重新上传取消

Vue.js 安装

https://www.runoob.com/vue2/vue-install.html

NPM 方法

# 最新稳定版

$ npm install vue

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

介绍 | Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack

#1.0 my-project

? Project name my-project

? Project description A Vue.js project

? Author runoob <test@runoob.com>

? Vue build standalone

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "my-project".

To get started:

cd my-project

npm install

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project

$ cnpm install

$ cnpm run dev

DONE Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

正在上传…重新上传取消

注意：

Vue.js 目录结构

https://panjiachen.github.io/vue-element-admin-site/zh/

上一章节中我们使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等）中打开该目录，结构如下所示：

正在上传…重新上传取消

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

正在上传…重新上传取消

3、安装element-ui

接下来我们引入element-ui组件（https://element.eleme.cn），这样我们就可以获得好看的vue组件。

正在上传…重新上传取消

命令很简单：

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({

el: '#app',

render: h => h(App)

});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

4、axios安装

接下来，我们来安装axios（http://www.axios-js.com/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

安装命令：

使用 npm:

$ npm install axios

引入axios

在main.js中全局引入axios。

import axios from 'axios'

Vue.prototype.$axios = axios

组件中，我们就可以通过this.$axios.get()来发起我们的请求了。

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 对响应数据做点什么

return response;

}, function (error) {

// 对响应错误做点什么

return Promise.reject(error);

});

如果你想在稍后移除拦截器，可以这样：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器。

var instance = axios.create();

instance.interceptors.request.use(function () {/*...*/});

错误处理：

axios.get('/user/12345')

.catch(function (error) {

if (error.response) {

// 请求已发出，但服务器响应的状态码不在 2xx 范围内

console.log(error.response.data);

console.log(error.response.status);

console.log(error.response.headers);

} else {

// Something happened in setting up the request that triggered an Error

console.log('Error', error.message);

}

console.log(error.config);

});

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {

validateStatus: function (status) {

return status < 500; // 状态码在大于或等于500时才会 reject

}})

axios 拦截器_axios拦截器_努力学编程呀(๑•ี_เ•ี๑)的博客-CSDN博客

Axios拦截器(Interceptors)_axios interceptors_小柒、Q的博客-CSDN博客

5.跨域问题

Vue项目中proxyTable解决axios的baseURL跨域问题

https://blog.csdn.net/zm_960911/article/details/105564075

在Vue项目中config文件下的index.js添加proxyTable配置

proxyTable:{

'/api': {

target:'http://xxxxxx.com',

changeOrigin:true,

pathRewrite: {

'^/api': ''

}

//api这个词可以任意换,但文下的词要一致

2.在Vue项目中config文件下的dev.env.js文件中配置BASE_API,即与上文对应的api

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

BASE_API: '"/api"'

})

//这里是开发模式下的配置,产品模式到prod.env.js中配置

3.在定义的axios文件中设置baseURL为配置好的process.env.BASE_API

let http = axios.create({

baseURL: process.env.BASE_API,

withCredentials: true,

headers: {

'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',

timeout：5000,

}）

4.在需要请求接口的组件中加入axios请求接口的代码，不需要在url的位置加/api路径，例如请求 http://xxxxxx.com/login 这个接口时，url直接写/login

// created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中

created(){

axios.get('/login'

).then(function(res){

console.log(res.data);

}).catch(function (error) {

console.log(error);

});

}

若是使用原生的axios请求接口时发生了跨域，请看《Vue项目中proxyTable解决axios跨域问题》

vue-element-admin

参考文献(鸣谢)：

[1]Spring全家桶：https://blog.csdn.net/u013733643/article/details/124044866

[2]Spring核心：https://blog.csdn.net/sinat_28007043/article/details/106111498

https://blog.csdn.net/qq_38939822/article/details/124258258

[3]HSQLDB：https://www.cnblogs.com/show58/p/13628322.html

https://blog.csdn.net/weixin_43050247/article/details/89237081

https://blog.csdn.net/yinxing2008/article/details/120148646

[4]工程目录:https://blog.csdn.net/weixin_46368865/article/details/115797760

[5]axios拦截器：https://blog.csdn.net/YHLSunshine/article/details/123881984

https://blog.csdn.net/Whoo_/article/details/125461676

vue跨域问题：Vue项目中proxyTable解决axios的baseURL跨域问题_醉殇姒若梦遗年的博客-CSDN博客

第404块砖头

关注

28
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot + mybatis + HSQLDB + Vue

它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。接下来，我们来安装axios（http://www.axios-js.com/），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。4.在需要请求接口的组件中加入axios请求接口的代码，不需要在url的位置加/api路径，例如请求 http://xxxxxx.com/login 这个接口时，url直接写/login。
复制链接

扫一扫