真正实现前后端分离架构，通过SpringBoot整合Jpa做构建后端服务器，前端通过Vue结合Element-UI和axios进行数据请求，解决了跨域请求问题、用户登录验证、百度地图根据坐标标记。
附有完整源码，下载地址见文末。
一、后端实现
采用 idea 作为编译器，构建maven项目。只需要简单配置数据库的用户帐号、密码、数据库名称即可。不需要额外的Tomcat，可以直接运行，项目运行之后，会自动在数据库中创建数据表，不需要手动建表。
二、RESTful风格后台接口
结构采用Post、Get、Put、Delete等注解实现面向资源的增删改查功能。使用Jpa做数据连接，不需要额外的mapper文件，使用更加简洁、高效，在中小型项目中明显可以提升开发效率。
三、在数据表中添加数据
在数据库对应的数据表中添加一条如下的记录进行测试。
四、前端实现
通过Vue进行前端编写，需要使用NodeJs进行管理和支持。安装完成NodeJs之后，需要安装以下的相关依赖：
1、安装 vue-cli ，通过 ：npm install vue-cli -s ；
2、新建项目，通过：vue init webpack 项目名称 ；或者 vue init webpack-simple 项目名称 ；
3、进入到项目的目录，安装模块依赖包，通过：npm install ，或者 cnpm install ；
4、启动项目，通过：cnpm run dev ，或者 npm run dev ;
5、生成打包上线文件，通过：npm run build ，或者 cnpm run build ；
6、一般关闭语法验证，useEslint: false ；
依赖包安装：
cnpm install element-ui --save
cnpm install element-theme -g (使用全局安装，后面使用少坑)
cnpm install element-theme-chalk -D
cnpm install file-loader --save
cnpm install vue-baidu-map --save
百度地图的使用：
//引入组件
import BaiduMap from ‘vue-baidu-map/components/map/Map.vue’
import BmScale from ‘vue-baidu-map/components/controls/Scale’
import BmNavigation from ‘vue-baidu-map/components/controls/Navigation’
import BmMarkerClusterer from ‘vue-baidu-map/components/extra/MarkerClusterer’
import BmMarker from ‘vue-baidu-map/components/overlays/Marker’
import BmInfoWindow from ‘vue-baidu-map/components/overlays/InfoWindow’
//注册组件
export default {
name: “pm-distribution”,
components: {
BaiduMap,
BmScale,
BmNavigation,
BmMarkerClusterer,
BmMarker,
BmInfoWindow
},
}
五、启动前端
通过在命令行输入：npm run dev 。进行启动，在浏览器输入以下地址进行访问：
http://localhost:8080/
登录界面：
http://localhost:8080/#/login
登录界面出错提示：
登录成功之后：
http://localhost:8080/#/map
进入百度地图页面。
六、源码下载
源码地址：https://github.com/YouAreOnlyOne/JavaWebAndVue
点击下载
七、其它技术
其他快速项目开发集成jar包：
地址：https://blog.csdn.net/u014374009/article/details/96151202
点击查看
相关快速开发技术：
地址：https://blog.csdn.net/u014374009
点击查看
作者主页：https://github.com/YouAreOnlyOne/
点击进入
