Question

如何绑定前端和后端，其中角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>

角（.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

导入系统进口paramiko import getpass 进口口导入webbrowser 来自flask_api导入FlaskAPI 来自flask进口烧瓶来自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)

Answer 1

你无法绑定＆＃39;作为Angular的唯一目的，前端到后端是坐在客户端，而后端是服务器端。这两者应该是分开的。

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

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

1 个答案: