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端口，本地模拟数据访问
=========================欢迎点评===============================
网友评论