如何绑定前端的angular4和后端的python？

How do I bind the front end and back-end where angular 4 is at front-end and python is at back-end. I have attached the .ts file, html file as well as python .py file using the POST method...I am really stuck...please help...

如何绑定前端和后端,其中角4位于前端,而python位于后端。我已经使用POST方法附加了.ts文件,html文件以及python .py文件...我真的被卡住了......请帮助...

Angular frontend(HTML)

<div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">Add server info</h4>
          </div>
          <div class="modal-body">
              <form>
                  <div class="form-group">
                      <label for="txtDevice" class="control-label">Server URL:</label>
                      <input type="text" class="form-control" [(ngModel)]="info.device" id="txtDevice">
                  </div>
                  <div class="form-group">
                      <label for="txtIP" class="control-label">IP Address:</label>
                      <input type="text" class="form-control" [(ngModel)]="info.ip" id="txtIP">
                  </div>
                  <div class="form-group">
                      <label for="txtUsername" class="control-label">Username:</label>
                      <input type="text" class="form-control" [(ngModel)]="info.username" id="txtUsername">
                  </div>
                  <div class="form-group">
                      <label for="txtPassword" class="control-label">Password:</label>
                      <input type="text" class="form-control" [(ngModel)]="info.password" id="txtPassword">
                  </div>
                  <!-- <div class="form-group">
                      <label for="txtPort" class="control-label">Port:</label>
                      <input type="text" class="form-control" ng-model="info.port" id="txtPort">
                  </div> -->
              </form>
          </div>
          <div class="modal-footer">
              <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
              <!-- <button ng-show="showAdd" id="btnAdd" ng-click="addMachine()" type="button" class="btn btn-primary">Add machine</button> -->

              <button id="btnAdd" (click)="searchServer(serverDetails)" type="button" class="btn btn-primary">Search</button>
          </div>
      </div>
  </div>

Angular(.ts)

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';
import { ServerListingComponent } from '../server-listing/server-listing.component';
import { Http } from '@angular/http';
import { SessionStorage, LocalStorage, LocalStorageService } from 'ngx-webstorage';
import { URLSearchParams } from '@angular/http';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-enter-details',
  templateUrl: './enter-details.component.html',
  styleUrls: ['./enter-details.component.css']
})

export class EnterDetailsComponent implements OnInit {

  url;
  serverDetails = {
    URL:'',
    ipAddress:'',
    username:'',
    password:''
  };

  constructor( public http: Http,public router: Router, public storage: LocalStorageService) {
    this.url = this.storage.retrieve('url');

   }

  ngOnInit() {
  }

  searchServer(serverDetails){
   debugger
   this.http.get(this.url + "details?filter[where][URL]=" + this.serverDetails.URL.toString() + "&filter[where][ipAddress]=" 
                 + this.serverDetails.ipAddress.toString() + "&filter[where][username]=" + this.serverDetails.username.toString() 
                 + "&filter[where][password]=" + this.serverDetails.password.toString())
   .map(res => res.json())
   .subscribe(isPresent => {
     debugger
     this.router.navigate(['/serverListing']);
   });
}
}

Python API

import sys import paramiko import getpass import os import webbrowser from flask_api import FlaskAPI from flask import Flask from pymongo import MongoClient

ip=''
username=''
password=''
path=''

app = Flask(__name__)

@app.route('/')
def output():
  return ('/enter-details.html')

@app.route('/details', methods = ['POST'])
def showMachineList():
  remote_conn_pre=paramiko.SSHClient()
  remote_conn_pre.set_missing_host_key_policy(paramiko.AutoAddPolicy())
  remote_conn_pre.connect(ip, username=username, password=password, look_for_keys=False, allow_agent=False)
  print(remote_conn_pre)
# print()
  ftp = remote_conn_pre.open_sftp()
  ftp.get(path, 'create_user.js')
  ftp.close()
  webbrowser.open_new(os.getcwd()+"/create_user.js") 
  return (remote_conn_pre)

1 个解决方案

#1

You can't 'bind' the front-end to the back-end as Angular's sole purpose is to sit on the client side whilst your backend is server side. The two should be separate.

你不能将前端“绑定”到后端,因为Angular的唯一目的是坐在客户端,而你的后端是服务器端。这两者应该是分开的。

What you'll need to do to is run both servers at the same time, and use POST/GET requests to pass information to and from your backend.

您需要做的是同时运行两个服务器,并使用POST / GET请求向后端传递信息。

#1