SPA專案開發之登入

然後我們開啟dos命令建立以下

npm install axios -s

npm install qs -s

npm install vue-axios -s

注意一條一條的輸入不要著急

在專案中src目錄下找到main.js，並在指定位置新增三行**（main.js是入口檔案，所以在這裡引入就行，頁面就不用引入了）

import vue from 『vue』

import elementui from 'element-ui' //新新增1
import router from './router'
vue.use(elementui)   //新新增3
vue.config.productiontip = false

需要注意的問題

1、 ajax 跨域問題

2、 a xios 的 get/post 的區別（ qs ）

3、簡化axios 使用的書寫

4、 t his 指標帶來的變數汙染，需要利用箭頭函式來解決；

post

get分別傳送方式

//部分為post傳送方式

dologin() ).then((response) => );
} else );
}}).catch((response) => );

demo

提交使用者註冊忘記密碼

reg


提交使用者登入
忘記密碼
})

特別注意config的index.js不要跟後台埠號一樣會出現錯誤

api需要用到的js

action.js

/**
* 模組名_實體名_操作
* vue專案對axios的全域性配置
*/import axios from 'axios'
import qs from 'qs'
//引入action模組，並新增至axios的類屬性urls上
import action from '@/api/action'
axios.urls = action
// axios預設配置
axios.defaults.timeout = 10000; // 超時時間
// axios.defaults.baseurl = 'http://localhost:8080/j2ee15'; // 預設位址
axios.defaults.baseurl = action.server;
//整理資料
// 只適用於 post,put,patch，transformrequest` 允許在向伺服器傳送前，修改請求資料
axios.defaults.transformrequest = function(data) ;
// 請求***
axios.interceptors.request.use(function(config) , function(error) );
// 響應***
axios.interceptors.response.use(function(response) );
// }
return response;
}, function(error) );
// // 路由請求攔截
// // 路由響應攔截
export default axios;

路由的index.js

import vue from 'vue'
import router from 'vue-router'
import helloworld from '@/components/helloworld'
import login from '@/views/login'
import reg from '@/views/reg'
vue.use(router)
export default new router(,
,		]})

axios跨域問題會一直報錯：「' 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: #允許特定的網域名稱訪問注2：axios.get提交沒有問題，axios.post提交後台接收不到資料因為post提交的引數的格式是request payload，這樣後台取不到資料的解決方案：使用qs.js庫，將轉換成'a=b&c=d' 注3：為簡化axios使用，還可以使用axios全域性配置及***，詳情見資料「api/http.js」 axios.defaults.baseurl = '';

'authorization'] = auth_token;//自定義請求頭，新增認證令牌

區別

qs.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

這就是前台需要用到的**以及四個問題的處理辦法

後台**可以看我的文章

後台**

總結:1.建立專案

2.載入

npm install axios -s

npm install qs -s

npm install vue-axios -s

並在main.js新增

SPA專案開發之登入

SPA專案開發之登入

SPA專案開發之登入註冊

SPA專案開發之登入註冊

SPA專案開發之登入

SPA專案開發之登入

SPA專案開發之登入註冊

SPA專案開發之登入註冊

相關推薦