express 的三大功能:靜態資源、路由、模板引擎
app.use(express.static('www')); 只要是創建這個靜態的目錄,這個 www 的靜態目錄里面的文件就可以被訪問
數據的請求方式 axios
get 的 請求方式
axios.get('url地址').then(function(success){ // 請求成功的回調函數
console.log(success)
}).catch(function(error){ // 請求失敗的回調函數
console.log(error)
})
post 的方式請求則與 get 的方式類似
在 vue-cli 中,使用 axios 時,遇到跨域問題怎么辦? 使用 proxyTable 服務代理來進行處理
我們可以在 config 的文件中的 index.js 的配置文件中
代碼如下 vue-cli2 中的寫法
module.exports = {
dev: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable:{
'/api':{
target:'http://localhost:3000/', // 當你要請求什么地址,這里改成什么地址即可
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
}
}
vue-cli3 中跨域的寫法,要在根目錄下面創建 vue.config.js 文件
module.exports = {
publicPath: '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8088/',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
在 vue-cli3 中 我們需要通過 vue.config.js 文件來寫以上代碼,之后重啟服務器即可
然后我們在使用 axios 的時候,處理跨域的寫法
這樣我們便可以拿到后台的數據了
還有,當我們通過 axios 來拿到后台的數據,我們在組件中的書寫位置,以及在頁面中的表現形式
我們的請求數據是在 created(){} 中完成的 當我們在 created 中完成 axios 的請求操作,我們還需要在 data 中 定義一個變量 去 等於我們的 請求到的數據
之后,我們就可以在頁面中去使用 data 的變量了,這個變量就是我們請求到的數據了,但是注意:如果我們需要操作請求到的數據,我們只能在 updated(){}
函數中完成,一定不允許在 mounted(){} 函數中 完成 操作,
原因:
ajax 是異步操作,而生命周期是同步操作,也就是說,我們請求完數據,說不定生命周期的一系列操作都都完了,其中包括了 mounted(){} 函數
但是,我們在請求完數據后,一定會使用 data 對象中的屬性 = 我們請求到的數據,來方便我們的操作,這就是一個數據改變的過程,所以,vue
就會執行 beforeUpdate(){} 及 updated(){} 的函數,所以,我們在請求完數據后,還需要進行操作,就在 updated(){} 中來完成吧
nodejs 中的頁面的重定向
這里的 Location 是設置的前端的路由,后端返回的東西,是沒有跨域的限制的,並且需要 res.end()
否則,前端的頁面沒有響應,(301,302 都可以)