npm install element-ui -s
npm install axios -s
npm install qs -s
npm install vue-axios -s
element-ui
新增頁面效果，元件
axios
axios是vue2提倡使用的輕量版的ajax。它是基於promise的http庫。它會從瀏覽器中建立xmlhttprequests，與vue配合使用非常好。
qsqs.js它是乙個url引數轉化的js庫。用法就兩個：
var obj = qs.parse(『a=b&c=d』); //將url解析成物件的形式：
var str = qs.stringify(obj); //將物件 序列化成url的形式，以&進行拼接：a=b&c=d』
vue-axios
vue-axios是在axios基礎上擴充套件的外掛程式，在vue.prototype原型上擴充套件了$http等屬性，可以更加方便的使用axios
"dependencies": ,修改helloworld.vue 新增 elementui 元件檢視效果
vue+elementui 設計登陸頁面
注1 ：相關樣式見資料「 css.txt 」
css.txt
注2：在vue元件中，在style標籤上新增scoped屬性，以表示它的樣式作用於當下的模組，很好的實現了樣式私有化的目的
注2：auto-complete=「off」
autocomplete 屬性是 html5 中的新屬性，off-----禁用自動完成
3. 後台互動(axios/qs/vue-axios)
3.1 axios
axios是vue2提倡使用的輕量版的ajax。它是基於promise的http庫。它會從瀏覽器中建立xmlhttprequests，與vue配合使用非常好。
login.vue
登入使用者註冊
忘記密碼
登入使用者登入
忘記密碼
/**
* 模組名_實體名_操作
*/export default
}
import vue from 'vue'
import router from 'vue-router'
import home from '@/components/home'
import login from '@/views/login'
import reg from '@/views/reg'
vue.use(router)
export default new router(,
, ]})
// the vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css' // 新新增 2 ，避免後期打包樣式
import router from './router'
import elementui from 'element-ui' // 新新增 1
new vue()
配置tomcat允許跨域訪問
public class corsfilter implements filter
// @override
// public void dofilter(servletrequest servletrequest, servletresponse
// servletresponse, filterchain filterchain)
// throws ioexception, servletexception
// //
// filterchain.dofilter(servletrequest, servletresponse);
// }
@override
public void dofilter(servletrequest servletrequest, servletresponse servletresponse, filterchain filterchain)
throws ioexception, servletexception
filterchain.dofilter(servletrequest, servletresponse);
} @override
public void destroy()
}
會一直報錯：「 has been blocked by cors policy: no 『access-control-allow-origin』 header」
因為使用了前後端分離開發，跨域訪問了，解決方案：需要配置tomcat允許跨域訪問，
tomcat跨域配置方法很多，但最簡單的方式是自己寫乙個過濾器corsfilter實現，新增乙個響應頭
access-control-allow-origin即可
httpresponse.addheader(「access-control-allow-origin」, 「*」);//*表示任何網域名稱
access-control-allow-origin:* #則允許所有網域名稱的指令碼訪問該資源。
access-control-allow-origin: #允許特定的網域名稱訪問
因為post提交的引數的格式是request payload，這樣後台取不到資料的(詳情見資料「05 vue中axios踩坑之路-post傳參 - rainsun - csdn部落格.mht」)，
解決方案：使用qs.js庫，將轉換成』a=b&c=d』
a xios 的 get/post 的區別（ qs ）
get提交
axios.get(』/user』,
}).then(function (response) ).catch(function (error) );
post提交
axios.post(』/user』, ).then(function (response) ).catch(function (error) );
SPA專案開發之登入註冊
1 使用vue cli腳手架工具建立乙個vue專案 vue init webpack pro01 2 npm安裝elementui cd pro01 進入新建專案的根目錄 npm install element ui s 安裝element ui模組 重要的事情說三遍 在指定位置 在指定位置 在指定...
SPA專案開發之登入
然後我們開啟dos命令建立以下 npm install axios s npm install qs s npm install vue axios s 注意一條一條的輸入不要著急 在專案中src目錄下找到main.js，並在指定位置新增三行 main.js是入口檔案，所以在這裡引入就行，頁面就不用...
SPA專案開發之登入
1.1 使用vue cli腳手架工具建立乙個vue專案 vue init webpack pro01 1.2 npm安裝elementui cd pro01 進入新建專案的根目錄 npm install element ui s 安裝element ui模組 重點 在指定位置 在指定位置 在指定位置...