在Vue.js使用配置(SSH框架的附带使用下){其余代码同上}

Posted 谮包子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue.js使用配置(SSH框架的附带使用下){其余代码同上}相关的知识,希望对你有一定的参考价值。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

刷新:<img src="img/timg.jpg" onclick="javascript:getData()">
<br/>

<div id="myView2">
 <span>请输入书名:</span>
 <input v-model="bookName"/>
 <img src="img/se.png" v-on:click="queryBook">
</div>
 
<br/>
<table border="1px" id="myView">
 <tr>
  <th>ID</th>
  <th>书名</th>
  <th>价格</th>
 </tr>
 <tr v-for="book in bookList">
  <td>{{book.id}}</td>
  <td>{{book.name}}</td>
  <td>{{book.price}}</td>
 </tr>
</table>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//bookList不能为空,否则会跟view绑定失败
var clientInput = {bookName:‘‘};//此JSON目的用于提交给服务器查询用的
var myViewModel2 = new Vue({
 el:‘#myView2‘,
 data:clientInput,
 methods:{
  queryBook:function(){
   //把客户输入的内容 $(‘#bookName‘).val()
   //赋值给clientInput这个JSON
   //clientInput.bookName = $(‘#bookName‘).val();
   $.ajax({
    //url:‘44.jsp‘,
    url:‘bookAction_queryBook‘,
    type:‘GET‘,
    data:clientInput,
    dataType:‘json‘,
    timeout:2000,
    success:function(result){
     //alert(result.bookList);
     myModel.bookList = result.bookList;
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
     alert(‘服务器忙,请不要说脏话,理论上大家都是文明人‘);
     alert(textStatus+XMLHttpRequest.status);
    }
   });
  }
  
 }
});


var myModel = {bookList:[]};
var myViewModel = new Vue({
 el:‘#myView‘,
 data:myModel
});
//写成函数的目的,为了【复用】
function getData(){
 //alert(11);
 $.ajax({
  url:"bookAction_getAllBook",     //后端的API地址
        type:‘GET‘,                      //http:POST/GET
        //data:postData,                 //指客户端提交给后台的参数
        dataType:‘json‘,        //服务端返回类型text,json
        timeout:2000,
        success:function(result){
         myModel.bookList = result.bookList;
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
         alert(‘服务器忙,请不要说脏话,理论上大家都是文明人‘);
         alert(textStatus+XMLHttpRequest.status);
        }
 });  
}
getData();


</script>
</html>
























































































以上是关于在Vue.js使用配置(SSH框架的附带使用下){其余代码同上}的主要内容,如果未能解决你的问题,请参考以下文章

为啥 Laravel 附带 Vue? (SPA 与 MVC)

在不使用模板或框架的情况下使用 Phonegap 设置 Vue.js

前端vue.js环境配置以及实例运行简明教程

Vue.js 入门之路

使用VSCode配置简单的vue项目

Vue.js高效前端开发 • Ant Design of Vue框架进阶