VUE学习

1.运行命令 node proxy.js
2.数据绑定aboutUS.html

aboutUS.html

<!-- 数据绑定 -->
								<b-card   v-for="(job,index) in jobslist" no-body class="">
									<b-card-header header-tag="header" class="p-1" role="tab">
										<b-button block v-b-toggle="'accordion-'+(index+1)" variant="info">
											<div class="container">
												<div class="row">
													<div class="col job-title">
															{{job.zw}}
													</div>
													<div class="col hidden-sm-down">
															{{job.bm}}
													</div>
													<div class="col hidden-sm-down">
															{{job.cs}}
													</div>
													<div class="col hidden-sm-down">
															{{job.xz}}
													</div>
													<div class="col hidden-sm-down">
															{{job.fbrj}}
													</div>
													<div class="col-4">
														<span class="expand-btn">查看详情</span>
													</div>
												</div>
											</div>
										</b-button>
									</b-card-header>

									<b-collapse  v-bind:id="'accordion-'+(index+1)" visible accordion="my-accordion" role="tabpanel">
										<b-card-body class='body-text-grey-2' style="background: #F3F3F3; line-height: 25px;">
											<div style="font-size: 16px; font-weight: bold; margin-top: 20px;">职位信息</div>
											<div  v-html="job.zwxx" >  </div>

											<div style="font-size: 16px; font-weight: bold; margin-top: 20px;">任职要求</div>
											<div v-html="job.rzyq">  </div>
											<b>HR邮箱</b> ：<a style="color: #1A8DE7">{{job.yx}}</a> (可以将您的简历直接发送至HR邮箱，我们看到会及时与您联系的哦~）

										</b-card-body>
									</b-collapse>

								</b-card>


								<!-- 数据绑定 -->

3.接口掉用aboutUS.html

<script src="js/api.js"></script>
// 页面加载触发函数
		$(document).ready(() => {

			// 上分界线-----------------------------------------------------------------

			new Vue({
				el: '#app',
				data: {
					jobslist:[]
				},
				created() {

			     this.job_temporary = [];		
           
					load_data_recursively(1, this);

					function load_data_recursively(page_number,that){
						//console.log("page number ", page_number);
						let params = {
					   "sqm":{
						"option": "getaboutus",
						"vid": "cpjlvz76bgq",
						"ps":5,
						"pn":page_number||1,
						"lang": "zh"
					   }
					}
					window.apipost(params).then((reply) => {
						//console.log("my jobs", reply);

						if (reply && reply.pl && reply.pl.rows) {
							let jobs = reply.pl.rows;
							for(var i=0; i<jobs.length; i++){
								let job = {
									zw: jobs[i].rdt.en.zw,
									bm: jobs[i].rdt.en.bm,
									cs: jobs[i].rdt.en.cs,
									xz: jobs[i].rdt.en.xz,
									zwxx: jobs[i].rdt.en.zwxx,
									rzyq: jobs[i].rdt.en.rzyq,
									yx:  jobs[i].rdt.en.yx,
									fbrj: jobs[i].rdt.en.fbrj,
									ufid: jobs[i].ufid

								};
								that.job_temporary.push(job);
							  }
							  
							  if(jobs.length==params.sqm.ps){
								load_data_recursively(page_number+1, that);  
							  }
							  else {
                                that.jobslist = that.job_temporary
							  }
						  }
						  
						  //console.log("My jobs list", that.jobslist);
					})
					}
		

				},
				watch: {
					show(newVal) {
						console.log('Alert is now ' + (newVal ? 'visible' : 'hidden'))
					}
				},
				methods: {
					toggle() {
						console.log('Toggle button clicked')
						this.show = !this.show
					},
					dismissed() {
						console.log('Alert dismissed')
					}
				}
			})


			// 下分界线---------------------------------------------------------------
	
}

4.api.js

let envdev= true;

// 各种后台接口 
// 1.读取后台数据通用数据接口,传入参数params
function  apipost(params) {
    // POST request using fetch with error handling
    var postbody = {
       "m":{
        "co": "sbos_osi_shop_main_operation",
        "sqm": params.sqm,
        "cl": {
            "row":{
                "rdt":{
                    "en":{}
                }
            }
         }
       }
    };
    if(params.sqm){
        postbody.sqm = params.sqm; 
    }
    if(params.rdata){
        postbody.cl.row.rdt.en  = params.rdata; 
    }
    postbody = JSON.stringify(postbody);

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },  //{ 'Content-Type': 'application/json' },
        body: postbody
    };


    var api_url = "/api/shopdata.cjson";
    //let base_url = "https://www.sbos.vip";
    let base_url = "http://localhost:4200";

    if(envdev){
        api_url = base_url + api_url;
    }
 
     //console.log("Fetching ", api_url, requestOptions);
     
    return fetch(api_url, requestOptions)
        .then((response) => {


            // check for error response
            if (!response.ok) {
                // get error message from body or default to response status
                return Promise.reject(response.status);
            }

            return response.json();
        
        })
        .then((json)=>{

            //console.log("Response json", json);

            return Promise.resolve(json)

        })
        .catch(error => {
            // this.errorMessage = error;
            console.error('There was an error!', error);
        });
  }


  window.apipost = apipost;

5.proxy.js

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const fs = require('fs');

var path = require('path');

 
const app = express();
// 切换中英文  cn/en
app.use(express.static('cn'));

  http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar
app.use('/api', createProxyMiddleware({ target: 'https://www.sbos.vip', changeOrigin: true }));


app.listen(4200)


function serve_static_files(request, response){

    //console.log('request ', request);

    var filePath = '.' + request.url;
    if (filePath == './') {
        filePath = './cn/index.html';
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',
        '.gif': 'image/gif',
        '.svg': 'image/svg+xml',
        '.wav': 'audio/wav',
        '.mp4': 'video/mp4',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.wasm': 'application/wasm'
    };

    var contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT') {
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(404, { 'Content-Type': 'text/html' });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });

}