# 快速部署

# 环境要求

# 基础安装

  • Node 安装

此项目为前后端分离项目,前端运行依赖Node进行依赖包管理,因此需要安装Node依赖包管理工具,官网下载地址https://nodejs.org/en/,下载后直接双击安装即可;

  • yarn 安装

前端项目使用yarn进行依赖管理,因为安装Node之后需进行yarn安装,全局安装命令为:npm install -g yarn;yarn安装之后需在前端项目跟目录进行依赖安装,安装命令为:yarn install

警告

安装需以 管理员权限 进行安装,否则会安装失败

  • VSCode 安装

前端UI开发工具推微软的开源工具VSCode,官网下载地址https://code.visualstudio.com/,下载后自动双击安装即可;

  • Redis 安装

项目中使用了 Shiro 进行权限访问控制,Shiro 中依赖Redis缓存服务,因此框架需要Redis服务的支持,如果本地没有安装Redis服务,需自行下载安装即可(一般情况下可以不设置密码),框架中默认是没有密码的,如果设置了密码,请自行前往框架的 ShiroConfig 配置文件中加上 Redis服务密码配置,具体位置如下所示:

mixureSecure

# 项目部署

# 前端项目

上述 基础软件 安装完毕后,我们即可使用命令运行前端项目:

  1. 运行命令为:npm run dev,运行成功后会自动出现可访问地址,将地址拷贝值浏览器即可实现在线浏览;

  2. 打包命令为:npm run build,如果项目实现线上部署,可以使用打包命令打包,成功打包后项目根目录会自动生成dist目录文件夹,如果在线访问,配置nginxapache指向dist目录下的index.html入口文件即可;

# 后端项目

# IDEA安装

以前大家比较熟悉使用Eclipse开发工具做JAVA开发,随着科学技术的进步,目前市场上使用频率比较高的开发工具是IntelliJ IDEA,这里我们也建议大家使用IntelliJ IDEA,此工具体验非常友好,打开项目后会自动安装程序所需的依赖,使用非常便捷,如果需要的朋友可以直接《官网下载》,本网站提供一个原始版本的下载通道《ideaIU-2019.1.3》,下载后进行安装,如有不熟悉安装步骤的可以自行查询安装教程;

安装好IntelliJ IDEA开发工具后,直接打开工具,呈现在眼前的如下下图所示:

mixureSecure

至此,说明您的开发工具已经成功安装并可以正常使用;

# 工具使用

如果有JAVA开发经验的话就容易上手多了,安装好本地MYSQL服务数据库可视化工具(Navicat)并导入数据库脚本文件,打开开发工具IntelliJ IDEA直接导入项目,修改下数据库连接账号直接运行即可,下面我们分步骤详细的介绍下:

  • 解压项目

解压项目框架包如JavaWeb_Vue_Pro旗舰版v1.5.0.zip,数据库脚本文件javaweb.vue.pro.sql在下图中的doc目录下,解压后如下图所示:

mixureSecure

  • 脚本文件

    mixureSecure

  • 导入脚本

  1. 安装本地MYSQL数据库服务请启动本地服务,平台下载通道《MYSQL服务》
  2. 安装MYSQL数据库安装可视化工具Navicat,平台下载通道《MYSQL可视化工具》;
  3. 创建数据库javaweb.vue.pro后导入项目解压包中的sql脚本javaweb.vue.pro.sql,如下图所示:

    mixureSecure

  • 导入项目

以上我们详细的介绍了项目运行所需要的必备条件以及解决方案,一切准备就绪,下面就是最重要的一步了,使用工具导入项目并安装Maven依赖,工具本身已经集成了Maven依赖,打开项目后工具会自动帮你下载项目所属的依赖,等待所有依赖都下载好之后便可运行项目(本地数据库配置信息需自行修改,配置文件application-dev.yml);

  1. 打开工具

mixureSecure

  1. 选择项目

mixureSecure

  1. 导入项目

mixureSecure

附录:

如果不想使用工具自带的依赖,也可以使用本地的Maven依赖管理,平台下载通道《Maven依赖》,下载后解压,打开工具并配置本地Maven路径,如下图所示:

mixureSecure

# 运行效果

后端服务成功启动之后,在命令行工具输入命令 npm run dev 启动前端后,如下图所示:

mixureSecure

将浏览地址 http://localhost:8080/ 直接拷贝到浏览器中进行预览,如上述一切成功就绪之后,实际运行效果如下:

mixureSecure

mixureSecure

# Nginx配置

项目开发完毕之后都会部署到服务器上,此时我们需要配置 Nginx 或者 Apache 进行项目部署,这里我们以Nginx为例讲述详细的Nginx参数配置

server
{
    listen 80;
    server_name manage.vue.pro.javaweb.vip;
    root /www/webroot/javaweb/javaweb_vue_pro/javaweb_ui/dist;

    location /{
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router{
        rewrite ^.*$ /index.html last;
    }

    location /api {
        proxy_pass http://127.0.0.1:9031/api;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen       80;
    server_name  images.vue.pro.javaweb.vip;
    root    /www/webroot/javaweb/javaweb_vue_pro/javaweb_vue/uploads;
    index   index.php;
    charset utf-8;

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp)$
    {
            expires         365d;
            if ( !-e $request_filename ) {
                    rewrite ^/(.+)$ /cut.php?path=$1 last;
            }
    }

    # deny access to .htaccess files, if Apache's document root
    location ~ /\.ht {
        deny  all;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

如上述所示是配置了两个 Nginx 服务,一个是指向前端UI的 dist 目录,一个是图片域名指向附件目录的配置,实际部署配置时以你们自己的相关 域名参数实际项目路径 进行正确部署,上述参数作为参考;

# 常见问题

在项目部署还之后,个别用户反馈无法上传图片的问题或者上传的图片无法正确访问,这里主要有两个问题:

  • 图片无法上传
  1. 无法上传的问题,前提需要保证JAVA后端的上传文件配置路径是否正确,相关的配置在 application-dev.yml 文件中,如下所示:
file:
  #上传的服务器上的映射文件夹
  accessPath: /uploads/
  #静态资源对外暴露的访问路径
  staticAccessPath: /**
  #静态资源实际存储路径
  uploadFolder: E:\JavaWeb_Vue_Pro\uploads\
1
2
3
4
5
6
7

请将此处的上传附件路径改成你本地项目的正确附件目录; 2. 如果是Mac或者Linux服务器,请查看您的 uploads 附件目录权限是否足够,不够请赋予读写权限,如chmod -R 0777 uploads;

  • 图片无法不显示

图片正确上传却无法正常访问,并且附件中是可以看到所上传的图片,此时需检查您配置的图片域名是否正确,如果所配置的图片域名确实正确,请检查您的YML配置文件中是否同时替换了正确的图片域名,如下所示:

# 端口配置
server:
  port: 9031
  servlet:
    # 项目的前缀名
    context-path: /api
  IMAGE_URL: http://images.vue.pro.javaweb.vip/
1
2
3
4
5
6
7

切记

请将参数 IMAGE_URL 中的参数替换成您服务器上所配置的那个图片域名,保持一直即可;