SpringBoot + mybatis + HSQLDB + Vue

2024-05-28 1346阅读

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完整依赖

4.0.0

org.springframework.boot

spring-boot-starter-parent

2.7.9

com.example

demo

0.0.1-SNAPSHOT

demo

Demo project for Spring Boot

1.8

org.springframework.boot

spring-boot-starter-web

org.mybatis.spring.boot

mybatis-spring-boot-starter

3.0.0

org.hsqldb

hsqldb

runtime

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

org.springframework.boot

spring-boot-starter-aop

org.springframework.boot

spring-boot-maven-plugin

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

? 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

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

SpringBoot + mybatis + HSQLDB + Vue