V3.0.0版本使用 eip-admin-starter-views工程作为前端工程，V2.1.0版本及之前前使用 eip-admin-starter-ui 工程作为前端工程，这两个工程根据用户的实际使用需求只需要启动一个即可

eip-admin-starter-views 启动(springboot+thymeleaf)

打开工程

用idea单独打开 eip-admim-starrter-views 工程
单独运行views工程.png

引入依赖

导入工程需要的依赖
引入jar.png

修改配置文件

  1. 配置文件修改方法
    工程的配置文件位于 resources 根目录下，主配置文件为appliaction.yml，主要配置如下：

    1. 项目路径及端口配置
    2. # Tomcat
    3. server:
    4. tomcat:
    5.  uri-encoding: UTF-8
    6.  max-threads: 1000
    7.  min-spare-threads: 30
    8. #tomcat启动的端口
    9. port: 8082
    10. connection-timeout: 5000ms
    11. servlet:
    12.  #tomcat访问路径，类似tomcat/webapps下的项目名称
    13.  context-path: /eip-admin-starter-views
    15.  spring:
    16.    profiles:
    17.      # 运行环境 dev|test|prod,根据active动态加载application-active.yml配置文件
    18.      active: dev
    19.    # jackson时间格式化
    20.    jackson:
    21.      time-zone: GMT+8
    22.      date-format: yyyy-MM-dd HH:mm:ss
    24. # thymeleaf路径，即html跳转路径     
    25. thymeleaf:
    26.  cache: false
    27.  encoding: utf-8
    28.  mode: LEGACYHTML5
    29.  ## html页面访问前缀，类似于视图解析器，配置后缀 suffix决定跳转路径，如通过controller 中返回字符串决定最终跳转的页面，如返回字符串为 view/login,最终返回页面为 /templates/views/login.html
    30.  prefix: classpath:/templates/
    31.  servlet:
    32.    content-type: text/html
    33.  suffix: .html
    34. 项目的静态资源访问路径
    35. resources:
    36.  # 静态资源路径
    37.  static-locations: classpath:/static/**,classpath:templates/**,classpath:/**,classpath:/static,file:/eip-admin-starter-views/img
    38. #热部署工具
    39. devtools:
    40.  restart:
    41.    enabled: true  #设置开启热部署
    42.    additional-paths: src/main/java #重启目录
    43.    exclude: WEB-INF/**
    44. freemarker:
    45.  cache: false    #页面不加载缓存，修改即时生效
    47. #工程静态资源放置及访问路径，如项目前端用到的css/js/图片文件放置路径
    48. mvc:
    49.  throw-exception-if-no-handler-found: true
    50.  # 静态资源访问接口前缀，访问静态资源时需要加上前缀访问
    51.  static-path-pattern: /static/**
    52.  # 静态资源访问地址
    53.  view:
    54.    prefix: classpath:/static/
    55.    suffix: .html
    56. #swagger配置
    57. swagger:
    58. basic:
    59.  # 是否启用swagger接口文档登录功能，登录后才可以访问
    60.  enable: true
    61.  # 访问swagger接口文档的登录用户名
    62.  username: admin
    63.  # 访问swagger接口文档的登录密码
    64.  password: admin

application-dev/prod/test.yml 为开发、生产、测试环境配置的具体信息，具体使用根据实际环境选择一个即可，这里主要配置了前端UI工程具体的个性配置

  1. admin:
  2.   views:
  3.     # 后端地址访问前缀，如果项目前后端分开运行，需要配置单独的后台访问路径
  4.     baseUrl: http://localhost:8081/eip-admin-rest
  5.     # 登录、注册时是否使用验证码，false为不使用，其他为使用
  6.     captchaEnable: true
  7.     # 布局设置，left-right为左右布局,up-down为上下布局
  8.     layout: left-right
  9.     #版权信息
  10.     copyright:
  11.       ##版权描述
  12.       desc: 版权所有 © 2020~2023 版权所有方
  13.       ##公司
  14.       company: 科大国创云网科技有限公司
  15.       ##公司点击时跳转链接
  16.       link: http://www.gccloud.com/
  1. 配置文件修改效果
    布局设置——左右布局
    左右布局.png
    布局设置——上下布局
    上下布局.png
    使用验证码
    使用验证码.png
    不使用验证码
    不使用验证码.png
    不使用验证码需要同步在eip-admin-starter-rest的 application-dev/prod/test.yml 文件里同步配置：
  1. admin:
  2.   logger:
  3.     init-enable: true
  4.   captcha:
  5.     #    是否启用验证码
  6.     enable: false

版权信息配置内容为以上布局图片右下角版权声明部分文字

启动项目

启动项目，找到主类，右键点击运行项目
启动前端项目.png
访问项目，默认访问路径为：http://localhost:8082/eip-admin-starer-views/，成功访问后跳转至登录页面
成功启动项目.png

eip-admin-starter-ui启动

打开工程

用webstorm或idea等如软件打开 eip-admin-starter-ui 工程

安装依赖

在 eip-admin-starter-ui 目录安装ui需要的依赖包（下面的操作只需要操作一次即可）

  1. 第一步，使用cmd命令行 或 终端 进入 eip-admin-starter-ui 目录
  2. 第二步，执行 cnpm install 命令，如果你提供cnpm命令不存在，请自行百度安装 或 将上诉命令替换为
    npm install —registry=https://registry.npm.taobao.org

[!WARNING|label:注意] 其实使用webstorm工具可以直接打开 terminal(不会用的百度一下)

启动工程

  1. 第一步，上诉安装包安装成功后，在eip-admin-starter-ui目录下执行 npm run dev 命令

    也可以直接通过控制台启动项目，控制台启动工程步骤如下

  2. 第一步，使用cmd命令行 或 控制台 进入 eip-admin-starter-ui 目录

  3. 第二步，执行 npm run dev 命令
  4. 第三步，知道进度到 100% 后出现如下内容表示启动成功
  1. DONE Compiled successfully in 12984ms
  2. 程序访问地址为: http://localhost:8001/#/login

访问工程

输入http://localhost:8001/#/login地址到浏览器中打开

异常情况

如果正常出现登录页面，那么说明正常，否则请置后端接口访问地址，Web开发框架采用前后端分离模式开发，后端(eip-admin-starter-rest)负责提供接口给前端操作，前台(eip-admin-starter-ui)负责页面的
交互，需要将后端的接口地址告诉前台。
在 eip-admin-starter-ui/static/config/index.js 文件中修改 window.SITE_CONFIG[‘baseUrl’] 的值

  1. /**
  2. * 开发环境
  3. */
  4. ;(function () {
  5. window.SITE_CONFIG = {}
  7. // api接口请求地址
  8. window.SITE_CONFIG['baseUrl'] = 'http://localhost:8081/eip-admin-rest'
  10. // cdn地址 = 域名 + 版本号
  11. window.SITE_CONFIG['domain'] = './' // 域名
  12. window.SITE_CONFIG['version'] = '' // 版本号(年月日时分)
  13. window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version
  14. })()

后端的接口地址获取方式为

  1. http:// +
  2. 后端所在服务器的IP +
  3. 后端启动的端口(/eip-admin-starter-rest/src/main/resources/application.yml 中server.port值)+
  4. /eip-admin-starter-rest/src/main/resources/application.yml 中 servlet.context-path值