VueJS入門
1、VueJS概述與快速入門
1.1 介紹
一個構建數據驅動的web界面的漸進式其框架，Vue.js的目標提供儘量簡單的API就能夠知足咱們的平常開發，官網：https://cn.vuejs.org/。學習此框架須要有HTML、CSS和JavaScript的一些基礎。css
1.2 MVVM模式
MVVM是Modle-View-ViewModel的簡寫，是MVC的改進版。MVVM就是將其中View的狀態和行爲抽象化，讓咱們將視圖（html和dom元素）和業務邏輯分開，分開後咱們直接曹組模型數據就等同於html的dom元素。html
MVVM模式和MVC模式同樣，主要目的是分離視圖（View）和模型（Model）。前端
Vue.js是一個提供了MVVM風格的雙向數據綁定的JavaScript庫，專一於View層。它的核心是MVVM中的VM，也就是ViewModle。ViewModel負責鏈接View和Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。vue
1.3 VueJS快速入門
首先須要在官網上下載一個vuejs的文件，這個本身操做一下，接着建立一個html文件java
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue入門</title> 6 <script src = "js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}} 11 </div> 12 <script> 13 new Vue({ 14 el:'#app', //表示當前vue對象接管了div區域 15 data:{ 16 message:'hello vue' //注意不要寫分號結尾 17 } 18 }); 19 </script>
在瀏覽器中打開node
1.4 插值表達式
數據綁定最多見的形式就是使用"Mustache"語法（雙大括號）的文本插值，Mustache標籤會被替代爲對應數據對象上的屬性的值。當綁定對象上屬性發生變化是，插值處的內容都會更新。mysql
Vue.js都提供了徹底的對JavaScript表達式的支持。jquery
{{ number + 1}}
{{ true ? 'YES' : 'NO'}}
這些表達式會在所屬Vue實例的數據做用域下做爲JavaScript被解析。有個限制是每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。ios
1 <!-- 這是語句，不是表達式 --> 2 {{ var a = 1}} 3 <!-- 流控制也不會生效，請使用三元表達式 --> 4 {{ if (ok) { return message } }}
示例：git
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>vue插值表達式</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!--Vue的插值表達式，把data中定義的數據顯示到此處--> 11 {{message}}<br> 12 <!-- 三元運算符 --> 13 {{ true ? "OK" : "No" }}<br> 14 <!-- 數學運算--> 15 {{number*3.14}}<br> 16 </div> 17 </body> 18 <script> 19 // 建立Vue對象 20 new Vue({ 21 el: "#app",// 由vue接管id爲app區域 22 data: { 23 message: "Hello Vue!",//注意：此處不要加分號 24 number: 100 25 } 26 }); 27 </script> 28 </html>
2、VueJS經常使用系統指令
2.1 v-on
使用v-on指令監聽DOM時間，並在觸發時運行一些JavaScript代碼
1. v-on:click
1 <!DOCTYPE html> 2 <html xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-on:click</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}} 11 <button v-on:click="fun1('Vue v-on')">vue的onclick</button> 12 </div> 13 </body> 14 <script> 15 new Vue({ 16 el:"#app", 17 data:{ 18 message:"Hello Vue!" 19 }, 20 methods:{ 21 fun1:function(msg){ 22 alert("Hello"); 23 this.message = msg; 24 } 25 } 26 }); 27 </script> 28 </html>
2.v-on:keydown
1 <!DOCTYPE html> 2 <html xmlns:v-on="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8"/> 5 <title>v-on:keydown</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 9 <body> 10 <div id="app"> 11 Vue:<input type="text" v-on:keydown="fun($event)"> 12 <hr/> 13 傳統JS：<input type="text" onkeydown="showKeyCode()"/> 14 </div> 15 </body> 16 <script> 17 new Vue({ 18 el: "#app", 19 methods: { 20 /* $event 它是vue中的事件對象 和咱們傳統js的event對象是同樣的 */ 21 fun: function (event) { 22 var keyCode = event.keyCode; 23 if (keyCode < 48 || keyCode > 57) {// 48是字符0對應的ASCII值，57是字符9對應的ASCII值 24 // 不讓鍵盤的按鍵起做用 25 event.preventDefault(); 26 } 27 } 28 } 29 }); 30 31 // 傳統js的鍵盤按下事件 32 function showKeyCode() { 33 // event對象和咱們的document對象以及window對象是同樣的，能夠不用定義直接使用 34 var keyCode = event.keyCode; 35 if (keyCode < 48 || keyCode > 57) { 36 //不讓鍵盤的按鍵起做用 37 event.preventDefault(); 38 } 39 } 40 </script> 41 </html>
發現一個小問題，當咱們使用中文輸入法的時候文本框內是能夠填充進咱們輸入的漢字或英文字符，可是在英文輸入法的狀況下則不會，有人補充的話能夠留言。
3.v-on:mouseover
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-on:mouseover</title> 6 <style> 7 #div { 8 background-color: green; 9 width:300px; 10 height:64px; 11 } 12 </style> 13 <script src="js/vuejs-2.5.16.js"></script> 14 </head> 15 16 <body> 17 <div id="app"> 18 <div @mouseover="fun1" id="div"> 19 <textarea @mouseover="fun2($event)">這是一個文本域</textarea> 20 </div> 21 </div> 22 </body> 23 <script> 24 /** 25 * @事件名稱 就是 v-on:事件名稱的簡寫方式 26 * @mouseover它就等同於v-on:mouseover 27 */ 28 new Vue({ 29 el:"#app", 30 methods:{ 31 fun1:function(){ 32 alert("鼠標懸停在div上了"); 33 }, 34 fun2:function(event){ 35 alert("鼠標懸停在textarea上了"); 36 event.stopPropagation(); 37 } 38 } 39 }); 40 //傳統的js方式 41 function divmouseover(){ 42 alert("鼠標移動到了div上了"); 43 } 44 function textareamouseover(){ 45 alert("鼠標移動到了textarea上了"); 46 event.stopPropagation(); 47 } 48 </script> 49 50 </html>
4.事件修飾符
Vue.js爲v-on提供了時間修飾符來處理DOM事件細節，如event。preventDefault()或event.stopPropagation().
Vue.js經過有點（.）表示指令後綴來調用修飾符。
- .stop
- .prevent
- capture
- .self
- .once
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-on:事件修飾符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <form @submit.prevent action="https://www.cnblogs.com" method="post"> <input type="submit" value="提交"> </form> </div> </body> </html>
5.按鍵修飾符
Vue容許爲v-on在監聽鍵盤事件時添加按鍵修飾符
所有的按鍵別名：
- .enter
- .tab
- .delete(捕獲「刪除」和「退格」鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>v-on:按鍵修飾符</title> 7 8 <script src="js/vuejs-2.5.16.js"></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 Vue:<input type="text" @keydown.enter="fun1"> 14 </div> 15 </body> 16 <script> 17 //view model 18 new Vue({ 19 el:"#app", 20 methods:{ 21 fun1:function(){ 22 alert("按下的是回車"); 23 } 24 } 25 }); 26 </script> 27 28 </html>
v-on簡寫方式
1 <!-- 完整與法 --> 2 <a v-on:click = "doSomething">...</a> 3 <!-- 簡寫 --> 4 <a @click = "doSomething">...</a>
2.2 v-text與v-html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-text與v-html</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div v-text="message"></div> 11 <div v-html="message"></div> 12 </div> 13 </body> 14 <script> 15 new Vue({ 16 el:"#app", 17 data:{ 18 message:"<h1>Hello Vue</h1>" 19 } 20 }); 21 // 傳統js的innerText和innerHTML 22 window.onload = function(){ 23 document.getElementById("div1").innerHTML="<h1>Hello</h1>"; 24 document.getElementById("div2").innerText="<h1>Hello</h1>"; 25 } 26 </script> 27 </html>
2.3 v-bind
插值語法不能做用在HTML特性上，遇到這種狀況須要使用到v-bind指令
1 <!DOCTYPE html> 2 <html xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>v-bind的使用</title> 7 <script src="js/vuejs-2.5.16.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <font size="5" v-bind:color="ys1">不爲</font><br> 13 <font size="5" :color="ys2">不爲</font> 14 </div> 15 </body> 16 <script> 17 // 插值表達式不能用於html標籤的屬性取值 18 // 要想給html標籤的屬性設置變量的值,須要使用v-bind 19 // v-bind也能夠簡化寫法,直接使用: 20 new Vue({ 21 el:"#app", 22 data:{ 23 ys1:"red", 24 ys2:"green" 25 } 26 }) 27 </script> 28 29 </html>
v-bind的兩種寫法
1 <!-- 完整寫法 --> 2 <a v-bind:href = "url">這是一個超連接</a> 3 <!-- 簡寫 --> 4 <a :href = "url">這也是一個超連接</a>
2.4 v-model
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-model</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <form action="" method="post"> 11 用戶名：<input type="text" name="username" v-model="user.username"><br/> 12 密碼：<input type="text" name="password" v-model="user.password"><br/> 13 </form> 14 </div> 15 </body> 16 <script> 17 new Vue({ 18 el:"#app", 19 data:{ 20 user:{ 21 username:"buwei", 22 password:"1234" 23 } 24 } 25 }) 26 </script> 27 </html>
2.5 v-for
- 操做array
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-for遍歷數組</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="(item,index) in arr ">{{item}}={{index}} </li> 12 </ul> 13 </div> 14 </body> 15 <script> 16 new Vue({ 17 el:"#app", 18 data:{ 19 arr:[1,2,3,4,5] 20 } 21 }) 22 </script> 23 </html>
- 操做對象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-for遍歷對象</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="(key,value) in product ">{{value}}:{{key}}</li> 12 </ul> 13 </div> 14 </body> 15 <script> 16 new Vue({ 17 el:"#app", 18 data:{ 19 product:{ 20 id:1, 21 name:"筆記本電腦", 22 price:5000 23 } 24 } 25 }) 26 </script> 27 </html>
- 操做對象數組
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>v-for遍歷對象</title> 7 <script src="js/vuejs-2.5.16.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <table border="1"> 13 <tr> 14 <td>序號</td> 15 <td>id</td> 16 <td>名稱</td> 17 <td>價格</td> 18 </tr> 19 <tr v-for="(product,index) in products "> 20 <td>{{index}}</td> 21 <td>{{product.id}}</td> 22 <td>{{product.name}}</td> 23 <td>{{product.price}}</td> 24 </tr> 25 </table> 26 </div> 27 </body> 28 <script> 29 new Vue({ 30 el:"#app", 31 data:{ 32 products:[ 33 { id:1,name:"筆記本",price:5000 }, 34 { id:2,name:"手機",price:3000 }, 35 { id:3,name:"電視",price:4000 } 36 ] 37 } 38 }) 39 </script> 40 </html>
2.6 v-if與v-show
v-if是根據表達式的值來決定是否渲染元素
v-show是根據表達式的值來切換元素的display css屬性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>v-if與v-show</title> 6 <script src="js/vuejs-2.5.16.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <span v-if="flag">你看不到我</span><br> 11 <span v-show="flag">you can't see me</span><br> 12 <button @click="toggle">切換</button> 13 </div> 14 </body> 15 <script> 16 //view model 17 new Vue({ 18 el:"#app", 19 data:{ 20 flag:true 21 }, 22 methods:{ 23 toggle:function(){ 24 this.flag = !this.flag; 25 } 26 } 27 }) 28 </script> 29 </html>
3、VueJS的生命週期
每一個Vue實例在被建立以前都要通過一系列的初始化過程。
vue在生命週期中有如下八種狀態：
beforCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。Vue在實例化的過程當中，會調用這些生命週期的鉤子，給咱們提供執行自定義邏輯的機會。經過下面的例子，咱們能夠看下vue實例執行了哪些操做。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>vuejs生命週期</title> 7 <script src="js/vuejs-2.5.16.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 {{message}} 13 </div> 14 </body> 15 <script> 16 var vm = new Vue({ 17 el: "#app", 18 data: { 19 message: 'hello world' 20 }, 21 beforeCreate: function() { 22 console.log(this); 23 showData('建立vue實例前', this); 24 }, 25 created: function() { 26 showData('建立vue實例後', this); 27 }, 28 beforeMount: function() { 29 showData('掛載到dom前', this); 30 }, 31 mounted: function() { 32 showData('掛載到dom後', this); 33 }, 34 beforeUpdate: function() { 35 showData('數據變化更新前', this); 36 }, 37 updated: function() { 38 showData('數據變化更新後', this); 39 }, 40 beforeDestroy: function() { 41 vm.test = "3333"; 42 showData('vue實例銷燬前', this); 43 }, 44 destroyed: function() { 45 showData('vue實例銷燬後', this); 46 } 47 }); 48 49 function realDom() { 50 console.log('真實dom結構：' + document.getElementById('app').innerHTML); 51 } 52 53 function showData(process, obj) { 54 console.log(process); 55 console.log('data 數據：' + obj.message) 56 console.log('掛載的對象：') 57 console.log(obj.$el) 58 realDom(); 59 console.log('------------------') 60 console.log('------------------') 61 } 62 // vm.message = "hello cnblog"; 63 // vm.$destroy(); 64 </script> 65 66 </html>
vue對象在初始化過程當中，會執行到beforeCreate、created、beforeMount、mounted 等幾個狀態。 -- 須要在瀏覽器的console控制檯中查看，代碼62，63行後面步驟中解開繼續查看。
- beforeCreate：數據尚未監聽，沒有綁定到Vue實例對象，同時也沒有掛載對象
- created：數據已經綁定到了對象實例，可是尚未掛載對象
- beforeMount：模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的el屬性，el屬性是一個HTMLElement對象，就是這個階段，vue實例經過對原生的createElement等方法來建立一個HTML片斷，準備注入到咱們的vue實例知名此時的el屬性所對應的掛載點
- mounted：將el的內容掛載到了el，至關於咱們在jQuery執行了(el).html(el)，生成頁面上真正的dom，上面咱們就會發現dom的元素和咱們el的元素是一致的，在此以後，咱們可以用方法來獲取到el元素下的dom對象，並進行各類操做
- 當咱們的data發生改變時，會調用beforeUpdate和updated
- beforeUpdate：數據更新到dom以前，咱們能夠看到$el對象已經修改，可是咱們頁面上的dom數據還沒喲發生改變
- updated：dom的結構會經過虛擬dom的原則，找到須要更新頁面dom結構的最小路徑，將改變動新到dom上面，完成更新
- beforeDestroy、destroyed：實例的銷燬，vue實例仍是存在的，只是解綁了事件的監聽還要watcher對象數據與view的綁定，即數據驅動。
4、VueJS ajax
4.1 vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進行Web請求和處理響應的服務。當vue更新到了2.0以後，vue-resource中止更新，使用axios，因此這裏僅作了解。
vue-resource的github：https://github.com/pagekit/vue-resource
4.2 axios
Axios是一個基於promise的Http庫，能夠用在瀏覽器和node.js中
axios的github:https://github.com/axios/axios，上面有咱們使用時須要的請求格式
1.引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.get請求
1 //經過給定的ID來發送請求 2 axios.get('/user?ID=12345') 3 .then(function (response) { 4 console.log(response); 5 }) 6 .catch(function (err) { 7 console.log(err); 8 }); 9 //以上請求也能夠經過這種方式來發送 10 axios.get('/user', { 11 params: { 12 ID: 12345 13 } 14 }) 15 .then(function (response) { 16 console.log(response); 17 }) 18 .catch(function (err) { 19 console.log(err); 20 });
3.post請求
1 axios.post('/user', { 2 firstName: 'Fred', 3 lastName: 'Flintstone' 4 }) 5 .then(function (res) { 6 console.log(res); 7 }) 8 .catch(function (err) { 9 console.log(err); 10 });
爲方便起見，爲全部支持的請求方法提供了別名
1 axios.request（配置） 2 axios.get（url [，config]） 3 axios.delete（url [，config]） 4 axios.head（url [，config]） 5 axios.options（url [，config]） 6 axios.post（url [，data [，config]]） 7 axios.put（url [，data [，config]]） 8 axios.patch（url [，data [，config]]） 9 使用別名方法時url，不須要在config中指定method和data屬性。
以上均摘自官網，你們能夠自行上官網查看。。。。
5、綜合案例
5.1 案例需求
使用SpringBoot結合vuejs完成信息的查詢與修改操做
5.2 數據庫的設計與表結構
1 CREATE DATABASE vuejsdemo; 2 USE vuejsdemo; 3 CREATE TABLE USER( 4 id INT PRIMARY KEY AUTO_INCREMENT, 5 age INT, 6 username VARCHAR(20), 7 PASSWORD VARCHAR(50), 8 email VARCHAR(50), 9 sex VARCHAR(20) 10 )
這裏手動填充一些數據到表裏面
5.3 使用idea快速生成一個SpringBoot框架的工程
自動生成SpringBootVue.js類
1 @SpringBootApplication 2 public class SpringBootVuejsApplication { 3 4 public static void main(String[] args) { 5 SpringApplication.run(SpringbootVuejsApplication.class, args); 6 } 7 }
建立User類，對應數據庫中的表字段
1 public class User { 2 3 private Integer id; 4 5 private String username; 6 7 private String password; 8 9 private String sex; 10 11 private int age; 12 13 private String email; 14 15 // 省略getter/setter 16 }
持久層使用mybatis，pom.xml中引入mybatis與數據庫鏈接依賴座標
1 <!--mybatis起步依賴--> 2 <dependency> 3 <groupId>org.mybatis.spring.boot</groupId> 4 <artifactId>mybatis-spring-boot-starter</artifactId> 5 <version>1.1.1</version> 6 </dependency> 7 8 <!-- MySQL鏈接驅動 --> 9 <dependency> 10 <groupId>mysql</groupId> 11 <artifactId>mysql-connector-java</artifactId> 12 </dependency>
application.properties配置文件
1 #DB Configuration: 2 spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver 3 spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vuejsdemo?serverTimezone=UTC 4 useUnicode=true&characterEncoding=utf8 5 spring.datasource.username=root 6 spring.datasource.password=root 7 8 #spring集成Mybatis環境 9 #pojo別名掃描包 10 mybatis.type-aliases-package=com.buwei.entity 11 #加載Mybatis映射文件 12 mybatis.mapper-locations=classpath:com/buwei/mapper/*Mapper.xml
UserMapper接口
1 @Mapper 2 public interface UserMapper { 3 /** 4 * 查詢全部 5 * @return 6 */ 7 public List<User> findAll(); 8 9 /** 10 * 根據id查詢一個 11 * @return 12 * @param i 13 */ 14 public User findById(Integer userId); 15 16 /** 17 * 修改信息 18 */ 19 public void updateUserInfo(User user); 20 }
userMapper.xml文件
1 <?xml version="1.0" encoding="utf-8" ?> 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 3 "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > 4 <mapper namespace="com.buwei.mapper.UserMapper"> 5 <select id="findAll" resultType="user"> 6 select * from user 7 </select> 8 <select id="findById" parameterType="int" resultType="user"> 9 select * from user where id = #{id} 10 </select> 11 <update id="updateUserInfo" parameterType="user"> 12 update user set username=#{username},password=#{password}, 13 sex=#{sex},age=#{age},email=#{email} where id=#{id} 14 </update> 15 </mapper>
--------------------------------------------------此部分完成後記得測試一下--------------------------------------------------
- 測試類可使用idea快速生成將光標定位到寫的UserMapper接口中
- 而後點擊導航欄navigate——>test——>create new test——>填寫測試類的一些信息
- 而後就神奇的發生了，咱們在接口中定義的方法對應的測試方法已經生成，你們稍微補充一下就能夠了
UserService接口
1 public interface UserService { 2 /** 3 * 查詢全部 4 * @return 5 */ 6 public List<User> findAll(); 7 8 /** 9 * 根據id查詢一個 10 * @return 11 * @param userId 12 */ 13 public User findById(Integer userId); 14 15 /** 16 * 修改信息 17 */ 18 public void updateUserInfo(User user); 19 }
實現類userServiceImpl
1 @Service 2 public class UserServiceImpl implements UserService { 3 4 @Autowired 5 private UserMapper userMapper; 6 @Override 7 public List<User> findAll() { 8 return userMapper.findAll(); 9 } 10 11 @Override 12 public User findById(Integer userId) { 13 return userMapper.findById(userId); 14 } 15 16 @Override 17 public void updateUserInfo(User user) { 18 userMapper.updateUserInfo(user); 19 } 20 }
UserController
1 @RestController 2 @RequestMapping("/user") 3 public class UserController { 4 5 @Autowired 6 private UserService userService; 7 8 /** 9 * 查詢全部用戶信息 10 * @return 11 */ 12 @RequestMapping("/findAll") 13 public List<User> findAll() { 14 return userService.findAll(); 15 } 16 17 /** 18 * 查詢一個用戶信息 19 * @param id 20 * @return 21 */ 22 @RequestMapping("/findById") 23 public User findById(Integer id) { 24 User user = userService.findById(id); 25 System.out.println(user.getUsername()); 26 return userService.findById(id); 27 } 28 29 /** 30 * 修改用戶信息 31 * @param user 32 */ 33 @RequestMapping("/updateUserInfo") 34 public void updateUserInfo(@RequestBody User user) { 35 userService.updateUserInfo(user); 36 } 37 38 }
靜態頁面user.html -- 其中的模態窗口使用的是Bootstrap 模態框（Modal）插件完成的
除了上面的BootStrap模態框插件，同時需引入vuejs-2.5.16.js和axios-0.18.0.js以及後面定義的user.js文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>VueJS測試案例</title> 6 <!-- 模態框插件 --> 7 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 <!-- 模態框插件結束 --> 11 </head> 12 <body> 13 <div id="app"> 14 <table id="dataList"> 15 <thead> 16 <tr> 17 <th>ID</th> 18 <th>用戶名</th> 19 <th>密碼</th> 20 <th>性別</th> 21 <th>年齡</th> 22 <th>郵箱</th> 23 <th>操做</th> 24 </tr> 25 </thead> 26 <tbody> 27 <tr v-for="u in userList"> 28 <td>{{u.id}}</td> 29 <td>{{u.username}}</td> 30 <td>{{u.password}}</td> 31 <td>{{u.sex}}</td> 32 <td>{{u.age}}</td> 33 <td>{{u.email}}</td> 34 <td> 35 <button data-toggle="modal" data-target="#myModal" 36 @click="findById(u.id)">編輯 37 </button> 38 </td> 39 </tr> 40 </tbody> 41 42 <!-- 模態窗口 --> 43 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 44 aria-hidden="true"> 45 <div class="modal-dialog"> 46 <div class="modal-content"> 47 <div class="modal-header"> 48 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 49 × 50 </button> 51 <h4 class="modal-title" id="myModalLabel">用戶信息</h4> 52 </div> 53 <div class="modal-body"> 54 <label>用戶名:</label> 55 <div> 56 <input type="text" v-model="user.username"> 57 </div> 58 </div> 59 <div class="modal-body"> 60 <label>密碼:</label> 61 <div> 62 <input type="text" v-model="user.password"> 63 </div> 64 </div> 65 <div class="modal-body"> 66 <label>性別:</label> 67 <div> 68 <input type="text" v-model="user.sex"> 69 </div> 70 </div> 71 <div class="modal-body"> 72 <label>年齡:</label> 73 <div> 74 <input type="text" v-model="user.age"> 75 </div> 76 </div> 77 <div class="modal-body"> 78 <label>郵箱:</label> 79 <div> 80 <input type="text" v-model="user.email"> 81 </div> 82 </div> 83 <div class="modal-footer"> 84 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> 85 <button type="button" class="btn btn-primary" data-dismiss="modal" @click="update">修改</button> 86 </div> 87 </div><!-- /.modal-content --> 88 </div><!-- /.modal --> 89 </div> 90 <!-- 模態窗口結束 --> 91 </table> 92 </div> 93 <script src="js/vuejs-2.5.16.js"></script> 94 <script src="js/axios-0.18.0.js"></script> 95 <script src="js/user.js"></script> 96 </body> 97 98 </html>
js文件user.js
1 new Vue({ 2 el:"#app", 3 data:{ 4 user:{ 5 id:"", 6 username:"", 7 password:"", 8 email:"", 9 age:"", 10 sex:"" 11 }, 12 userList:[], 13 isShow:false 14 15 }, 16 methods:{ 17 /** 18 * 查詢全部 19 */ 20 findAll:function(){ 21 //在當前方法中定義一個變量，代表是vue對象 22 var _this = this; 23 axios.get('/user/findAll') 24 .then(function (response) { 25 _this.userList = response.data;// 響應數據給userList賦值 26 console.log(response); 27 }) 28 .catch(function (error) { 29 console.log(error); 30 }) 31 }, 32 /** 33 * 根據id查詢 34 * @param userid 35 */ 36 findById:function (userid) { 37 //在當前方法中定義一個變量，代表是vue對象 38 var _this = this; 39 axios.get('/user/findById',{params:{id:userid}}) 40 .then(function (response) { 41 _this.user = response.data;// 響應數據給userList賦值 42 // $("#myModal").modal("show"); 43 _this.isShow = !_this.isShow; 44 }) 45 .catch(function (error) { 46 console.log(error); 47 }) 48 }, 49 /** 50 * 更新 51 */ 52 update:function () {//post請求 53 //在當前方法中定義一個變量，代表是vue對象 54 var _this = this; 55 axios.post('/user/updateUserInfo', _this.user) 56 .then(function (response) { 57 _this.findAll(); 58 _this.isShow = !_this.isShow; 59 }) 60 .catch(function (error) { 61 console.log(error); 62 }); 63 }, 64 notShow:function () { 65 this.isShow = !this.isShow 66 } 67 }, 68 created:function() {//當咱們頁面加載的時候觸發請求，查詢全部 69 this.findAll(); 70 } 71 });
- 執行SpringBootVueJSApplication的main方法
- 訪問http://localhost:8080/user.html
這裏我就不一一演示了，有興趣能夠拷貝以上代碼查看一下，發現問題：
- 使用火狐瀏覽器的時候編輯用戶信息的時候頁面信息會刷新
- 可是使用Chrome瀏覽器則不會，數據庫中的信息有改變，執行更新操做以後也有執行查詢全部的方法，而且執行成功
- 火狐瀏覽器下方會有一個報錯
1 XML 解析錯誤：找不到根元素 2 <html> 3 <body> 4 <h1>Whitelabel Error Page</h1> 5 <p>This application has no explicit mapping for /error, so you are seeing this as a fallback.</p> 6 <div id='created'>Fri Nov 23 14:19:00 CST 2018</div> 7 <div>There was an unexpected error (type=Bad Request, status=400).</div> 8 <div>Required request body is missing: public void com.buwei.controller.UserController.updateUserInfo(com.buwei.entity.User) 9 </div> 10 </body> 11 </html>
此一次遇到這個問題，暫時還沒想到解決的方法
根據提示在UserController中的updateUserInfo方法中的請求參數中@RequestBody（required=false）依舊是沒有解決問題。：（
------------------------------------------------------分割線------------------------------------------------------
查詢了一下，參考https://www.cnblogs.com/net064/p/7735832.html解決了問題，controller中的updateUserInfo沒有返回值報這個錯誤，先用上
發現谷歌執行不刷新數據的問題與瀏覽器有關，我使用的是版本 69.0.3497.100（正式版本）（64 位），換了版本 70.0.3538.102（正式版本） （64 位）就沒問題了
相關文章
- 1. Vuejs入門
- 2. vuejs 入門
- 3. vuejs小白入門
- 4. VUEJS入門學習
- 5. VueJs入門練習
- 6. Vuejs 入門 - 1. Hello World
- 7. vuejs最簡單入門
- 8. MVC4使用VueJS入門
- 9. 【Vue 學習】- VueJS 簡單入門
- 10. vuejs+webpack技術棧（入門篇）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vuejs入門
- 2. vuejs 入門
- 3. vuejs小白入門
- 4. VUEJS入門學習
- 5. VueJs入門練習
- 6. Vuejs 入門 - 1. Hello World
- 7. vuejs最簡單入門
- 8. MVC4使用VueJS入門
- 9. 【Vue 學習】- VueJS 簡單入門
- 10. vuejs+webpack技術棧（入門篇）