宝盾系统前端文档

环境配置

说明

针对不同开发人群，可以使用不同的方案，如果你只需要运行而不是修改前端代码，只需要参考part1的内容， 如果你需要修改前端项目和发布，请参考part2的内容。

part1 只配置运行环境

注：测试环境和正式环境采用的此模式。

本项目的页面打包后将所有文件压缩成source.zip，并会被拷贝到 qianxiang-v1-rms\webcontent\spa目录下, 然后经过上传下载后，其他人员来解压这个source.zip文件而运行新的代码。

由于老项目是jsp（本地是8806端口）页面，本项目是单页面，两种模式都存在，我们采用了nginx来做转发。

具体原理是： 1.nginx启动一个服务器，客户端访问该路径。 2.nginx判断特定的请求1，会认定请求为访问单页面，将请求识别并返回静态资源。` 3.nginx判断特定的请求2，会认定请求为单页面访问的api，将请求代理到jsp项目（localhost:8806）。 4.nginx判断特定的请求3，会认定请求为一般请求，直接转发到jsp项目（localhost:8806）。

因此本地需要装一个nginx软件，这里推荐 Visual Nmp软件。推荐版本>7.0, 64位。

安装好之后，使用该软件来建立一个网站，添加一段nginx.conf的配置如下:

 server {
        ##SiteName   dev.rms.com  # 下面配置的域名
        listen       *:80;
        server_name  dev.rms.com;

        #open gzip
        gzip on;
        gzip_types   text/xml text/css text/plain text/javascript application/javascript application/x-javascript;
        
         location / {
            proxy_pass   http://127.0.0.1:8806/; 
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
        
        location =/ {  
            proxy_pass http://127.0.0.1:8806/home/index;  
        }
        location  ~ /spa/static/(.*) {  #识别spa/static前缀的路径,是spa项目的资源路径
           alias H:/qianxiang/web/qianxiang-v1-rms/WebContent/page/static/$1;
        }
        
        location /spa  #识别spa前缀的路径
        {
            root "H:/qianxiang/web/qianxiang-v1-rms/WebContent/page"; 
            try_files $uri $uri/ /index.html last;
        }    
        location ^~ /api/ {  #识别api前缀api，并代理，spa项目专用
             add_header 'Access-Control-Allow-Origin' '*';
             proxy_pass http://127.0.0.1:8806/;
        }
       }
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

我们还需要像host文件添加一个host规则：

127.0.0.1  dev.rms.com
1

重新启动nginx, 然后启动jsp项目，解压source.zip。 在浏览器输入下面的链接即可：

http://dev.rms.com/home/index
1

part2 配置开发环境

part1部分的环境运行的是打包后的文件，是没办法修改单页面的，如果你需要开发和修改单页面，你需要安装开发环境。

开发环境只需要启动单页面的开发环境，使用开发代理api到jsp项目。 目前单页面开发端口是8033， jsp接口的端口是8806。

具体原理是：

  1. 启动jsp项目（端口8806）和单页面（端口8033）项目。
  2. 使用fiddler软件，将部分8806端口请求代理到8033端口，这样浏览器只用输入8806端口，浏览器会认定是一个网站，共享存储。
  3. 具体的识别规则是： 1）请求连接含spa的就转到8033. 2) 请求连接含api或者newApi是单页面的请求，也转发到8003, 走单页面服务器的代理。

按照如上步骤，需要安装fiddler软件, 安装好之后，在AutoResponder 一栏添加一个rule，分别是：

regex:^http://localhost:8806/(spa|api|newApi)/(.*)$

对应：

http://localhost:8033/$1/$2

然后勾选： Enable rules 和 Unmatched requests passthrough 两个项目。

启动jsp项目和单页面项目，打开fiddler软件。

在浏览器输入下面的链接即可：

http://localhost:8806/home/index
1

← 常见错误 →