前端调用后端的写法

最新推荐文章于 2026-07-24 21:30:48 发布

原创最新推荐文章于 2026-07-24 21:30:48 发布 · 3.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Java部分知识

这篇博客探讨了前端如何调用后端接口的方法，主要以Vue为例，讲解前端如何以（key, value）形式接收数据。后端采用Java接口，通过原生JDBC进行数据库操作，并使用了依赖注入技术。" 133302996,19673395,JavaScript源代码删除技巧,"['javascript', '编程', 'ecmascript']

前端代码：

<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;