若依Vue多模块版本学习

1、前端部署（Windows版本）

     下载Nginx，启动Nginx，start Nginx

通过命令tasklist /fi "imagename eq nginx.exe"可以查看Nginx启动情况。

2、编译vue，在ui目录下执行npm run build:prod,打包后在UI目录下生成dist目录文件。

3、将dist目录下的所有文件拷贝到Nginx下html文件夹下。

4、修改Nginx配置文件

location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }

目前主要是添加上方代码，其中proxy_pass http://localhost:8080/;就是指的当前后台的地址。

 配置完成后启动后台，启动Nginx。便可以正常访问。

5、启动Nginx后可以正常访问，但是发现每次手动刷新就直接报404错误，每次重新输入链接后才可以正常访问。经过查询发现还需要在Nginx配置文件中location的位置添加如下代码，

try_files $uri $uri/ /index.html;添加完成后重新启动Nginx系统可以正常刷新页面。

6、遇到饼图数据不显示问题（数据从后台正常传回来，跟踪前台可以看到数据就是不显示）

先在页面中输出后台传回的数据也未发现问题，在跟踪饼图组件里面的数据时发现，渲染时还是用的默认数据，说明后台传回的数据未进行渲染，在组件中增加了watch相关代码后饼图能正常显示。

  watch: {

    legendData: {

      deep: true,

      handler(val) {

        this.initChart();

      }

    }

  },

7、使用icon库，当前若依使用的icon如果满足不了需求，那么可以到

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1网站里面下载要使用的图标，拷贝到src/assets/icons/svg下。

8、前端如果采用post请求json数据，那么Java后台得使用对象或者是

getSchedule(@RequestBody HashMap<String, String> map)的参数来进行获取请求参数。

9、因业务需求，需要在一个列表中，点击ID号打开新页面查看详情页面。

首先在前端添加一个新的页面用来显示详情，点击ID号的代码如下：

/** 详细按钮操作 */

    handleView(row) {

      const params = { processName: 'aaa' };

      this.$tab.openPage("工艺[" + row.processName + "]详情", '/spinning/process/detail/'+row.processId,params);

    },

此处row.processId在新页面可通过this.$route.params.processId进行获取。而params里面的参数需要通过this.$route.query.processName获取。此处需要了解this.$route.params和this.$route.query的区别。

因此页面不需要在菜单中体现，需要在router里面增加相应代码如下：

  {

    path: '/spinning/process',

    component: Layout,

    hidden: true,

    permissions: ['spinning:process:query'],

    children: [

      {

        path: 'detail/:processId(\\d+)',

        component: () => import('@/views/spinning/process/viewProcess'),

        name: 'viewProcess',

        meta: { title: '修改生成配置',  }

      }

    ]

  },

10、使用时间区间选择控件时，发现数据提交时数据是带有T、Z等字母格式的数据，需要设置下

value-format="yyyy-MM-dd HH:mm:ss"

format="yyyy-MM-dd HH:mm:ss"

格式限制后，数据提交正常。

11、在列表查询使用时间控件时，发现数据提交时时间参数带不上。需要设置

value-format="yyyy-MM-dd HH:mm:ss"后发现时间就可带到参数里面。