概述

一个Spring-boot + Vue.js的web应用,用于展示一些通用的ElasticSearch使用场景. 这是一个相对比较激进的项目,使用了很多当下最流行的前后端技术. 前端: ES6/Typescript+WebPack+EsLint+vuejs2+vue-router 2+axios+element-ui 后端: Spring-boot+ElasticSearch+MySql+Spark esDataExplorer

优势

语法糖 -- 更易读的代码,更安全的代码

  • ES2015/TypeScript:异步编程promise,类结构，变量作用域，模块化，函数默认参数， 箭头函数与this，字符串模板，静态类型检查(TS)
  • Less:嵌套，变量，方法

工程化构建 -- 让机器帮你优化代码

  • 多源构建:支持多种代(ES2015/TS/Less)码编写,忽略编译/预处理过程
  • 错误检查:使用EsLint等工具检查低级语法错误,让程序猿集中精力处理业务逻辑
  • 代码风格统一:自动格式化代码,保证团队代码风格统一,提高可读性和可维护性
  • 自动性能优化:让工具帮你打包,合并文件,优化图片,处理模块加载
  • 热加载:自动编译代码,并刷新浏览器,保护你的F5键!
  • IDE支持:让js也能自动完成代码提示,并且更准确. 更方便地阅读和重构代码

规范化编写 -- 限制你的程序猿天马行空的coding

  • 框架结构清晰,层次分明:
    • 使用Vue.js把代码进行分类编写(data,props,computed,methods)
    • 使用vue文件编写组件,一个文件就是一个组件,代码在物理上进行隔离
    • 使用js模块编写代码,保证命名和变量作用域冲突问题,并保证代码复用性
    • 正统的js class编写风格,远离prototype的恶心写法
  • EsLint检查代码风格:
    • 代码样式统一
    • 自动格式化代码
    • 自动检查低级语法错误

前后端分离

  • 加速原型界面开发:前后端并行开发，缩短开发周期
  • 降低耦合度,简化逻辑:
    • 封装常用业务组件
    • 模块化代码,提高代码重用
    • MVVM思想:UI模版绑定与业务逻辑处理数据分离
  • 更容易的单元测试: action与UI代码分离,方便单元测试
  • 为后端微服务化打下基础:前端完全从后端获取JSON数据进行界面展示逻辑处理,后端专注业务逻辑,接收和返回数据都只是JSON,简化后端与前端的耦合度

快速构建部署

  • 前端: 与后端完全分离,使用webpack等构建工具打包生成静态Html,js,css文件.直接在Nginx中同步静态文件
  • 后端: 使用Spring-boot单jar应用,节省war构建和tomcat等web容器构建, 直接java -jar xx.jar在Docker容器中运行
  • 自动化构建脚本: 使用nodejs自动化部署脚本执行发布更新任务,减少人工操作,避免人工低级运维错误,并且任何人都能操作发布更新系统
  • 服务器配置统一管理: 方便运维人员动态分配服务器资源,也使程序员发布更新时不需要接触敏感服务器密码

一次学习，多端应用

  • 基础UI组件迁移成本低: 开发人员可以根据实际需要快速切换到其他UI组件
  • 方便支持多端App混合应用: vue.js与weex完全类似,学习后迁移应用支持weex非常方便快速

环境搭建

前端部分

  1. 安装nodejs, 去官网下载v7.x版本NodeJs,并安装;
  2. 在命令行下安装cnpm:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 进入web目录,安装相关全局工具和相关依赖:
    cd web
cnpm install -g vue-cli webpack eslint gulp cooking-cli
cnpm install
  4. 运行dev开发模式
    npm run dev
  5. 运行lint检查代码文件(注:dev模式自动检查,build是也检查,lint一般只是快速检查时使用)
    npm run lint
  6. 运行build工具编译生成静态文件(发布时使用)
    npm run build

后端部分

  1. 安装gradle, 去官网下载v3.x版本,并安装;
  2. 启动你的es服务器, 检查配置文件/wES-demo/src/main/resources/application.yml中的es服务器配置;
  3. 在命令行中进入wES-demo目录下执行命令启动开发模式:
    • 开发模式:
      cd wES-demo
gradle bootrun
    • 生产模式:
      cd wES-demo
gradle bootrepackage
java -jar .\build\libs\wES-demo-0.2.jar

results matching ""

    No results matching ""