node.js+vue+elementui前端+springboot后端的前后分离框架搭建记录(附git地址)

前端使用nodejs+vue+elementui 后端使用springboot+swagger

后端项目结构如图:

简要介绍:

开发结构:
1.业务写在business中,common中写通用类
2.访问controller前后在com.lance.business.aop.ControllerSign中添加校验,日志MDC等
3.若controller中添加了使用缓存注解,则可以对请求信息进行简要缓存,加入报文缓存的原因是防止对方瞬时发送频繁相同请求给服务器造成压力,添加缓存注解后若未在缓存中查询到相同报文的请求,则将处理中的报文描述存储于缓存中,若业务未处理完成但接受到相同的请求,则返回缓存中处理中的报文。处理完成后将缓存中的返回报文更新为处理之后的报文,维持时间为expire毫秒。超时缓存清空可以接受相同的报文继续进行业务处理
4.dao层有一些访问数据库的示例,新建dao层需继承basedao可以获取jBaseDao(即jdbcTempletDao),通过获取的JBaseDao进行数据库交互,具体的方法有:
查询:
 QueryForString 查询返回String
 QueryForInt 查询返回int
 QueryForLong 查询返回long
 QueryForMap 查询返回map
 QueryForList 查询返回list<Map>
 QueryForBaseList 查询返回list<String>之类,非List<Map>
 QueryForModel 查询返回对象
 QueryForModelList 查询返回对象列表
 增删改:
 使用executeUpdate 返回int,即返回影响的行数
ps:没有封装insertMode,deleteModel与 updateModel等是因为引入了jpa去操作,后续会改,通过注解的方式关联表,参考hibernate实现crudModel
同时有封装了hibernateTemplet的HBaseDao,使用方法见其注释
ps:HBaseDao有缺陷,Springboot版本不能太高,建议2.0.4,2.1.x等新版本出出现循环引用的问题,暂无解决方案,查阅官方文档无解,水平有限,只能降级hibernate…具体降级方式参考druidConfig.java.Doc
使用myBatis版本的接口使用方式参加ApiMapper相关
5.线程池/异步使用方式,除Async注解外,还可引入AsyncServiceProvider,可参见com.lance.business.aop.ControllerSign
6.http请求引入RestTemplate,使用方式见官方文档

注意事项:
1.项目使用lamda表达式,故jdk版本不能低于1.8
2.项目使用Lombok,若getset等报错请安装lombok插件
3.因为demo中有使用oracle的package,远程maven库不提供gav,所以需引入oracle的驱动包,可以删除pom.xml中的依赖与apidao的代码
或者注册一下oracle的jar到maven仓库中,注册示例:
mvn install:install-file -Dfile=C:\DevelopmentEnvironment\ApacheGroup\Maven\regJar\framework-1.0.0.jar  -DgroupId=com.lance -DartifactId=framework  -Dversion=1.0.0 -Dpackaging=jar
Dfile为jar的存放路径,DgroupId即G(groupId),DartifactId即A(artifactId),Dversion即V(version)

移植做新的接口时,需要更改的名称:
 1.项目文件夹名称
 2.pom.xml中的名称,主要有 name description finalName artifactId
 3.application.yaml中的项目名称与请求路径  application-display-name & context-path
 4.application.yaml中的folderPath日志存储的文件夹路径
项目部署:
 方式一.安装jdk的情况:
 直接使用java启动,项目会在后台运行,将没有窗口显示系统的运行状态
 关闭命令如下:
 例如项目是8080 端口 ,执行【 netstat -ano | findstr "8080"】查询进程的pid

 根据PID 杀死进程  : 【 taskkill /f /pid 查询出来的pid】
 方式二.未安装jdk的情况

backUp为:每次部署的时候将之前的jar包丢进去,把新jar替换一下,防止出现意外可以进行回滚,大的改动最好能够在文件夹中建立相应的文件夹,将原始的jar丢进去并说明修改原因。
jre为:jar包运行所需的对应版本的jre,如1.8的jre
lib:若使用cxf等,因为需要jdk的tools.jar,仅用jre是不行的,需要额外将tools.jar放置于lib中,其他同理
logs:此处为空白文件夹,应为日志文件存储的超链接,方便查询日志
readme.txt为一些项目信息
start.bat为项目启动,启动会弹出一个cmd窗口,关闭窗口后即关闭项目

start.bat内容为:

前端项目结构如图:

前端创建流程
1.node.js官网下载安装node.js
2.安装cnpm 或 切换 npm仓库地址,加快下载速度,甚至关乎到项目构建成败
npm install -g cnpm --registry=http://registry.npm.taobao.org
或 npm config set registry  https://registry.npm.taobao.org
3.安装vue cnpm install -g vue-cli
4.新建项目demo git init webpack 项目名,然后按照提示来就ok
5.安装依赖库 npm install
6.运行项目 npm run dev
如何在导航栏添加一个新的模块?
1.在src\pages\manager下新建一个模块文件夹
2.创建(从别的模块复制)一个main.vue以及相关子模块的文件夹,编写简要的功能组件,如src\pages\manager\msg_center\mobile\msg_list.vue
3.在src\pages\common\menu下新建一个[left_menu_模块名称.vue],添加子模块访问组件
4.在src\router\commponent_view.js中引入[left_menu_模块名称.vue]
5.在新建的main.vue下更改v-复制的原模块名称-left-menu为commponent_view.js中新注册的标签
6.在src\router下新建一个相关的[模块名称_view.js]来注册一级菜单/二级菜单的路由,如src\router\message_center_view.js
7.src\router\index.js中引入[模块名称_view.js]
8.在src\pages\common\menu\header_menu.vue中添加[模块名称_view.js]中的模块访问地址

至此,新模块添加完成,运行一下就可以了
ps:前端分页信息后端并未处理,so...是不好用的,可以改动后端达到分页效果
GitHub地址:
后端:
    springboot + springJdbc + jpa :https://github.com/lance2038/httpDataApiDemo.git
    springboot + mybatis          :https://github.com/lance2038/httpDataApiByMybatis.git
前端:
    node.js + vue + elementUI     :https://github.com/lance2038/WebFrameWork.git

写的不好欢迎指正。

猜你喜欢

转载自blog.csdn.net/sinat_30637097/article/details/87920779