1. 程式人生 > >前端呼叫後端的寫法

前端呼叫後端的寫法

前端程式碼:

<div v-if="vmCheckItem.installType === '自動安裝'">
                        <!--<FormItem :label="$t('使用者名稱:')" prop="email" >-->
                            <!--<Input v-model="vmCheckItem.username" placeholder="Enter something..." clearable/>-->
                        <!--</FormItem>-->
                        <FormItem :label="$t('密碼:')" prop="password" >
                            <Input v-model="vmCheckItem.password" placeholder="Enter something..." clearable/>
                        </FormItem>
                    </div>

js中的方法介紹:

this.$http.post("/ssa/java/asset/vm/getPwd", {vmIp: ip}).then(res => {
                     if(res.code == 0){ //已經找到密碼
                      //驗證探針是否啟動
                        this.vmCheckItem.password = res.sshPassword;
                        }else{
                        this.$Message.error('檢查不到 '+ip+'的對應的密碼 ,請先設定密碼');
                         //新增密碼
                                  }
                   });

controller層程式碼:


    //終端頁面密碼的回顯
     @RequestMapping("/getPwd")
        public ResponseTemplate getPwd(HttpServletRequest request, HttpServletResponse response){
            try {
                String vmIp = request.getParameter("vmIp");
                if(StringUtil.isNotEmpty(vmIp)){
                    List<Map<String,Object>> vmlist = assetVmService.getPwdByIp(vmIp);
                    if(vmlist !=null && vmlist.size()>0){
                        Map<String,Object> vm = vmlist.get(0);
                        if(vm.get("sshPassword") !=null ){
                            //成功獲取密碼

                            return new ResponseTemplate(0,vm.get("sshPassword").toString());
                        }else{
                            //獲取密碼失敗
                            return new ResponseTemplate(-1);
                        }
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
                logger.error("deleteGroup error message",e);
            }
            return new ResponseTemplate(-1);
   }

vue前端去接資料的時候,是按照(k,v)的格式去接的。使用的是map的方式。

在這個業務中,後臺呼叫的是Java介面。

service層程式碼:


    //終端頁面密碼回顯功能的實現
     List<Map<String,Object>> getPwdByIp(String vmIp);

serviceImpl層程式碼:

  //終端頁面,根據IP來回顯頁面的密碼
     @Override
        public List<Map<String, Object>> getPwdByIp(String vmIp) {
            return jdbcTemplate.queryForList(" SELECT * from asset_vm where vmIp = ? ",new Object[]{vmIp});
        }

SQL語句:

select  * from tb

在這一套中,後端大的框架中,其實還是使用原生的JDBC去操作資料庫的。

在這裡使用了注入的方式:

 @Autowired
    @Qualifier("mysqlJdbcTemplate")
    private JdbcTemplate jdbcTemplate;

    @Autowired
    @Qualifier("postgresJdbcTemplate")
    private JdbcTemplate jdbcTemplate1;