Java技术栈 CRUD演示分享

1、整体说明

伴随着“技术转型”这样一个“欢天喜地”的大环境背景下，便形成了这篇技术分享文章。本文意在结合Java+Vue技术栈，形成一个完整的CRUD的入门示例，已协助广大‘DotNeter’快速入门Java技术，早日投入“牛逼哄哄”的前后端分离的，高可用的，高并发的，微服务架构的软件技术大怀抱。

2、演示地址

废话不说，内网可以直接访问地址进行CRUD体验：
http://10.30.20.198:8686/user

列表演示

image

编辑演示

image

3、源码地址

后台Java代码地址：
https://gitee.com/BeautifulHao/unified-platform
前台Vue代码地址：
https://gitee.com/BeautifulHao/unified-platform-vue

4、配置运行

本地提前准备好开发和运行环境

开发工具：IDEA+VSCODE
后台依赖：JDK8+Node.js+Npm
源码管理工具：Git
数据库： Mysql

4.1 后端代码获取

git clone https://gitee.com/BeautifulHao/unified-platform.git

mysql新建数据库：Demo 、并且新建表up_user

CREATE TABLE `up_user` (
                           `id` INT (11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
                           `code` VARCHAR (36) NOT NULL,
                           `name` VARCHAR (60) NOT NULL,
                           `card_no` VARCHAR (100),
                           `email` VARCHAR (135),
                           `phone` VARCHAR (135),
                           `birthday` DATETIME ,
                           `gender` SMALLINT (6) DEFAULT 0,
                           `create_user` VARCHAR (36),
                           `create_time` DATETIME ,
                           `update_user` VARCHAR (36),
                           `update_time` DATETIME ,
                           `status` INT (2) DEFAULT 0,
                           `is_deleted` INT (2) DEFAULT 0,
                           `remark` VARCHAR(500) NULL
);

Idea打开源码，修改application.properties 配置数据库地址等

# 服务器端口
server.port=8686

# 数据库连接配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://10.30.20.198:3306/demo?serverTimezone=GMT%2b8&useUnicode=true&characterEncoding=utf8&useSSL=true
spring.datasource.username=root
spring.datasource.password=123456
....

配置完成直接运行即可，后台api服务地址默认为localhost:8686

4.2 前端代码获取和编译

git clone https://gitee.com/BeautifulHao/unified-platform-vue.git
##进入目录
cd unified-platform-vue
##安装依赖
npm install
##编译前端页面
npm run build

4.2.1前后端结合部署

以上步骤完成后会在项目文件夹unified-platform-vue下形成dist文件夹

vue.png
将static文件拷贝覆盖到后端项目resources/static/up文件夹下
将其他文件夹和文件拷贝覆盖到后端项目/resources/templates下
重新运行后端项目，即可在本地访问http://localhost:8686/user进行演示访问

4.2.2 前端mock部署

修改前端项目src/pages/user/user.js 取消注释import '@/mock'

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './user.vue'
import 'ant-design-vue/dist/antd.css'
import moment from 'moment'
import 'moment/locale/zh-cn'
import '@/mock' 
Vue.config.productionTip = false
Vue.use(Antd)
Vue.prototype.$moment = moment

本地node.js运行

npm run dev

运行后将以8585端口，本地模拟数据访问

=========================欢迎点评===============================