vue+element UI 学习总结笔记（十九)_工程与部署

原创已于 2023-02-20 19:13:09 修改 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-05-07 15:48:27 首次发布

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

10 篇文章

订阅专栏

本文详细介绍了一套从前端到后端的部署流程，包括Tomcat作为后端服务容器的设置，SpringBoot项目的配置，以及解决跨域问题的Nginx配置。同时，介绍了前端项目在VSCode中的搭建，依赖包的管理，以及使用Echarts和Element-UI等工具的实践。

后端服务准备：

以tomcat 为后端服务容器：

我们后端有2层服务，服务层、接口层，后端准备：

我们后端服务项目部署好了后,测试一把：

出现这个说明后端ws服务都是好的。

组件接口层（spring boot项目）:

查看一下服务配置的端口：（重点看如下三个要素：服务端口及及后端服务调用地址、数据库访问地址配置）

启动项目后，测试一把：

前端准备：

1、下项目

2、vscode 打开项目

3、npm i --修改package.json 文件的内容

4、 npm run start //npm run dev

（包的依赖）

package.json 记录包的依赖，npm i 会更新这个文件

服务地址配置在：config目录下的index.js当中。

为解决跨域问题，用了nginx-1.14.2

前端需要访问接口层，为解决跨域问题，用了nginx-1.14.2

其配置项如下：

    server {
        listen       8899;
        location / {
            proxy_pass   http://127.0.0.1:9527;
          
        }
        location /webapi { #添加访问目录为/login的代理配置
    #        proxy_pass   http://lx.lixinn.xyz:17088/;
			 proxy_pass   http://127.0.0.1:81/;
        }
        location /resources/ { #静态资源
            root   /work;
            rewrite  ^/resource/(.*)$ \$1 break;
        }
        location /ReportService { #报表
            proxy_pass   http://lx.lixinn.xyz:17068/;
        }
		
		location /webapi/olap { #分析
            proxy_pass   http://127.0.0.1:8881/;
        }
    }

npm run build 打包命令生成dist下的内容

生产环境部署我们用ngnix作为web服务

从后端到前端依次启动，录入用户名 8043/111111 ，启动项目测试通过。

ajax请求通过request.js 封装，节省代码？

request.js 调用方式：

import request from '@/utils/request'

export function codesByKey(key) {
  // http://10.2.1.123/sys/sysDatadictionary/codesByKey?key=D112
  return request({
    url: `/sys/sysDatadictionary/codesByKey?key=${key}`,
    method: 'get'
  })
}

main.js 作用：程序朱入口全局性的引用都在这

element-ui引用：

use后，各个页面直接使用。

如何引入echart

var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

具体看官方文档

ps:

import、export es6导入、导出方式，我们开发自己写的组件，一般都用这个。

require、export 是node方式；

配置文件中，require用的多，（项目代码之外配置文件中？）

App.vue是主页面。

弹出层组件？如何传递参数

如何调试前端代码?

常用工具？

常用群、网站?

ps:

SCSS: css的样式文件

scss官网

eslint

语法规则和代码风格的检查工具

规范：

Iconfont：

字库

下载： zip

解压zip,

添加到项目中

项目中如何引用，有三种方式：我们用的事font class方式。

我们是在index.scss中引入，其他页面都可以直接使用

主入口文件中，我们引入这个index,scss,所以所有页面都可以使用

lodop:

安装： copy

为了保持提示信息和vue风格一致，我们引入了vue的messagebox,

导出：为vue使用，导出这个函数

组件：

插槽：

工具条的实现：

1、样式

2、判断是否能点击（store）

1、置灰

2、通过事件判断的

是否能用按钮，由服务端传递过来，放到this.$route.meta.butns 当中

(computed 属性)

（hasbutton 方法）

工具条中的对账事件，

具体这个方式其实就是fire一个事情：（automatic: fnToolBar.automatic）,

 automatic() {
    Bus.$emit('automatic')
  },

这里通过bus 传递事件或者监听事件

bus 代码很简单：

其实 Bus就是个vue 对象，这里，主要是解决跨父子间多对多的情况。

Bus的使用：

用了代理报表打不开，报表地址都是127.0.0.1: 原理还没搞懂

解决办法：

nginx加一笔：

proxy_set_header   Host             $host;
proxy_set_header   X-Real-IP        $remote_addr;
proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

ps:nginx中proxy_set_header 的作用_kissbike148的博客-优快云博客_proxy_set_header作用

nginx代理，客户端获取ip为127.0.0.1处理方法_不一样的大海的博客-优快云博客