1.(webpack)vue-cli构建的项目如何设置每个页面的title
在路由里每个都添加一个meta
[{
path:'/login',
meta: {
title: '登录页面'
},
component:'login'
}]钩子函数：
在main.js中添加如下代码
router.beforeEach((to, from, next) => {
window.document.title = to.meta.title;
next()
})2.vue项目中使用axios上传图片等文件
首先安装axios：
1.利用npm安装npm install axios –save
2.利用bower安装bower install axios –save
3.直接利用cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>一般情况上传照片有两种方式：
1.本地图片转换成base64，然后通过普通的post请求发送到服务端。
操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法
2.通过form表单提交。
form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。
这里只讲解一下第二种方式：
html代码：
<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>js代码：
import axios from 'axios'
// 添加请求头
update (e) { // 上传照片
var self = this
let file = e.target.files[0]
/* eslint-disable no-undef */
let param = new FormData() // 创建form对象
param.append('file', file) // 通过append向form对象添加数据
param.append('chunk', '0') // 添加form表单中其他数据
console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
// 添加请求头
axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)
.then(response => {
if (response.data.code === 0) {
self.ImgUrl = response.data.data
}
console.log(response.data)
})
}3.qs.stringify() 和JSON.stringify()的区别以及在vux中使用post提交表单数据需要qs库序列化
qs库的npm地址：https://www.npmjs.com/package/qs
功能虽然都是序列化。假设我要提交的数据如下
var a = {name:'hehe',age:10};qs.stringify序列化结果如下name=hehe&age=10
而JSON.stringify序列化结果如下："{"a":"hehe","age":10}"
vux中使用post提交表单数据：
this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({
"phone":this.phoneNumber,
"vCode":this.loginCode,
"smsCode":this.phoneCode
})
)
.then(response=>{
console.log(response.data);
if(response.data.httpCode == 200){
}else{
}
}) 在firebug中可以看到传递的参数：phone=15210275239&vCode=8vsd&smsCode=1534
在vue中使用axios：
this.$axios.post(loginUrl, {
"email": this.email,
"password": this.password
}, {
transformRequest: (data) => {
return this.$qs.stringify(data)
},
}).then(res => {
if(res.data.resultCode == RESULT_CODE_SUCCESS){
console.log('登录成功');
this.$router.push({name:"home"})
}else{
console.log('登录失败');
}
}).catch(err => {
console.log('登登录出现错误');
})4.vue中实现全局的setCookie，getCookie以及delCookie方法笔记
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import App from '../component/App.vue'
import Login from '../component/Login.vue'
import UserInfo from '../component/UserInfo.vue'
//状态管理
Vue.use(Vuex)
//路由
Vue.use(VueRouter)
//路由配置
//如果需要加菜单，就在这里添加路由，并在UserMenu.vue添加入口router-link
const router = new VueRouter({
routes: [{
path: '/login',
component: Login
}, {
path: '/user_info',
component: UserInfo
}]
})
//Vuex配置
const store = new Vuex.Store({
state: {
domain:'http://test.example.com', //保存后台请求的地址，修改时方便（比方说从测试服改成正式服域名）
userInfo: { //保存用户信息
nick: null,
ulevel: null,
uid: null,
portrait: null
}
},
mutations: {
//更新用户信息
updateUserInfo(state, newUserInfo) {
state.userInfo = newUserInfo;
}
}
})
//设置cookie,增加到vue实例方便全局调用
Vue.prototype.setCookie = (c_name, value, expiredays) => {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}
//获取cookie
Vue.prototype.getCookie = (name) => {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//删除cookie
Vue.prototype.delCookie =(name) => {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//vue实例
var app = new Vue({
data: {},
el: '#app',
render: h => h(App),
router,
store,
watch:{
"$route" : 'checkLogin'
},
created() {
this.checkLogin();
},
methods:{
checkLogin(){
//检查是否存在session
if(!this.getCookie('session')){
this.$router.push('/login');
}else{
this.$router.push('/user_info');
}
}
}
})5.webpack中alias配置中的“@”是什么意思？
如题所示，build文件夹下的webpack.base.conf.js
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
}其中的@的意思是：
只是一个别名而已。这里设置别名是为了让后续引用的地方减少路径的复杂度。
//例如
src
- components
- a.vue
- router
- home
- index.vue
index.vue 里，正常引用 A 组件：
import A from '../../components/a.vue'
如果设置了 alias 后。
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
引用的地方路径就可以这样了
import A from '@/components/a.vue'
这里的 @ 就起到了【resolve('src')】路径的作用。6.webpack proxyTable 代理跨域
webpack 开发环境可以使用proxyTable 来代理跨域，生产环境的话可以根据各自的服务器进行配置代理跨域就行了。在我们的项目config/index.js 文件下可以看到有一个proxyTable的属性，我们对其简单的改写
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}这样当我们访问localhost:8080/api/movie的时候 其实我们访问的是http://api.douban.com/v2/movi...。
当然我们也可以根据具体的接口的后缀来匹配代理，如后缀为.shtml，代码如下：
proxyTable: {
'**/*.shtml': {
target: 'http://192.168.198.111:8080/abc',
changeOrigin: true
}
}可参考地址：
webpack 前后端分离开发接口调试解决方案，proxyTable解决方案
http-proxy-middleware
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。