在infocenter.vue中發送修改的用戶信息,在得到res後,向data中賦值改變,
會報錯說data中的東西未定義!第一次碰到這種情況,也不知道怎麼解決。
vue中159行開始
<template>
<div id="infocenter">
<!-- 頭部標題欄 -->
<HeadTop title="個人信息中心">
<span slot="left">
<div @click="routerback">
<Icon type="md-arrow-round-back" size="20" /><span>返回</span>
</div>
</span>
<span slot="right"></span>
</HeadTop>
<!-- 內容 -->
<div>
<div class="upload">
<!-- 個人信息 -->
<div style="width:280px;margin:0 auto;text-align:center;">
<!-- 展示用戶信息,可以修改 -->
<div v-if="showInfo">
<Form :model="info" label-position="right" :label-width="100">
<img :src="this.info.avatarurl" width="60" height="60"/>
<FormItem label="暱稱:" style="text-align:left;">
{{this.info.username}}
</FormItem>
<FormItem label="簡介:" style="text-align:left;">
{{this.info.disc}}
</FormItem>
</Form>
<Button type="warning" @click="changeInfo" ghost>修改</Button>
</div>
<!-- 修改用戶信息表單 -->
<div v-if="showForm">
<Form :model="info" label-position="left" :label-width="100">
<div>
<img @click.stop="uploadHeadImg" :src="this.info.avatarurl" width="60" height="60"/>
<input type="file" accept="image/*" @change="handleFile" id="hiddenInput" />
</div>
<FormItem label="暱稱">
<Input v-model="info.username" />
</FormItem>
<FormItem label="簡介">
<Input type="textarea" v-model="info.disc" :autosize="{minRows: 2,maxRows: 5}" />
</FormItem>
</Form>
<Button type="success" @click="sureInfo" ghost>確定</Button>
<Button type="info" @click="cancelInfo" ghost>取消</Button>
</div>
{{this.info}}
{{this.oldinfo}}
</div>
<!-- 上傳圖片 -->
<div v-if="true">
<!--圖片上傳-->
<div class="weui-gallery" id="gallery">
<span class="weui-gallery__img" id="galleryImg"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" v-model="content" placeholder="你想說啥" rows="3"></textarea>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li ref="files" class="weui-uploader__file" v-for="(image,index) in images" :key="index"
:style="'backgroundImage:url(' + image +' )'"><span @click="deleteimg(index)" class="x">×</span></li>
</ul>
<div v-show="images.length < maxCount" class="weui-uploader__input-box">
<input @change="change" id="uploaderInput" class="weui-uploader__input " type="file"
multiple accept="image/*">
</div>
</div>
</div>
</div>
</div>
</div>
<a class="weui-btn weui-btn_primary btn-put" style="margin: 20px " @click.prevent.once="put">發送</a>
</div>
</div>
</div>
</div>
</template>
<script>
import store from '../../vuex/store'
import HeadTop from '../components/HeadTop/HeadTop'
import axios from 'axios'
export default {
name:"Infocenter",
data(){
return {
//用戶框,修改框 展示與否
showInfo:true,
showForm:false,
//用戶信息(來接受路由傳遞過來的query),並且在界面上動態改變,如果用戶確定則向後臺提交
info:{},
//緩存用戶信息,防止取消修改信息後原信息丟失
oldinfo:{},
//待上傳的圖片文件
pic_file:{},
//上傳頭像相關
content: '',//分享動態的文字內容
maxSize: 10240000 / 2,//圖片的最大大小
maxCount: 8,//最大數量
filesArr: [],//保存要上傳圖片的數組
images: []//轉成base64後的圖片的數組
}
},
//引入vuex
store,
//引入子組件
components: {
HeadTop,
},
//方法
methods:{
//後退:返回上一個頁面
routerback(){
this.$router.back(-1);
},
changeInfo(){
// 用戶信息框消失,修改信息框展示
this.showInfo = false;
this.showForm = true;
},
sureInfo(){//確定修改用戶信息,並提交給後臺
// 用戶信息框展示,修改信息框消息
this.showInfo = true;
this.showForm = false;
//添加接口所需的數據file--頭像,username--用戶名,disc--簡介,_id--唯一標識
var formData=new FormData();// 創建form對象:接口所需的所有數據formData
formData.append('file',this.pic_file);
formData.append('username', this.info.username);
formData.append('disc', this.info.disc);
formData.append('_id', this.info._id);
console.log('打印formData')
console.log(formData)
axios.post('http://localhost:4444/shangchuan', formData, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (res) {
alert('修改個人信息成功!!!');
console.log(res)
console.log(this.oldinfo)
console.log(this.info)
this.info.avatarurl = res.data.avatarurl;
console.log(res.data);
this.$router.push({path: '/me'});
})
.catch(err=>{
alert('修改個人信息失敗!');
console.log(err);
})
},
cancelInfo(){ //取消 修改用戶信息
// 用戶信息框展示,修改信息框消息
this.showInfo = true;
this.showForm = false;
//緩存用戶信息,防止取消修改信息後原信息丟失
this.info = Object.assign({}, this.oldinfo);
},
//頭像上傳
// 打開圖片上傳
uploadHeadImg: function () {
this.$el.querySelector('#hiddenInput').click();
},
//點擊圖片觸發 將頭像顯示(不涉及上傳圖片)
handleFile: function (e) {
let $target = e.target || e.srcElement;//找到input節點
let file = $target.files[0];//找到上傳的圖片
this.pic_file = $target.files[0];//存入data中
//初始化this.formData
this.formData = new FormData();
// 單純將頭像顯示
var reader = new FileReader();//將文件內容讀入內存,訪問本地文件
reader.onload = (data) => {//當讀取操作成功完成時調用
let res = data.target || data.srcElement;//捕獲當前事件作用的對象
this.info.avatarurl = res.result;//圖片被轉換成了二進制流(字符串類型),存儲在info的avatarurl中
};
reader.readAsDataURL(file);//將圖片內嵌在網頁之中--Base64
},
// 上傳頭像相關的所有方法--開始
//刪除圖片
deleteimg(index) {
this.filesArr.splice(index, 1);
this.images.splice(index, 1);
},
//改變圖片
change(e) {
let files = e.target.files;
// 如果沒有選中文件,直接返回
if (files.length === 0) {
return;
}
if (this.images.length + files.length > this.maxCount) {
Toast('最多隻能上傳' + this.maxCount + '張圖片!');
return;
}
let reader;
let file;
let images = this.images;
for (let i = 0; i < files.length; i++) {
file = files[i];
this.filesArr.push(file);
reader = new FileReader();
if (file.size > self.maxSize) {
Toast('圖片太大,不允許上傳!');
continue;
}
reader.onload = (e) => {
let img = new Image();
img.onload = function () {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let w = img.width;
let h = img.height;
// 設置 canvas 的寬度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
let base64 = canvas.toDataURL('image/png');
images.push(base64);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
},
//發送方法
put() {
let self = this;
let content = this.content;
let param = new FormData();
param.append('content', content);
param.append('username', 'wofsfsdf');
this.filesArr.forEach((file) => {
param.append('file2', file);
});
axios.post('http://localhost:4444/uploadFile', param, {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(function (result) {
console.log(result.data);
this.$router.push({path: '/world'});
Toast(result.data.msg)
})
},// 上傳頭像相關的所有方法--結束
},//methods-end
//beforeCreate 將路由中的 用戶信息 賦值到 data(){} 中
beforeCreate(){
//防止token已經過期
var localtoken = localStorage.getItem("token");
var localusername = localStorage.getItem("user_name");
var localparams = {
token:localtoken,
user_name:localusername
};
this.$axios({
url:"http://localhost:4444/users/islogin",
method:"get",
params:localparams
})
.then(res=>{
console.log('這裏是vue初始化生命週期:');
if(res.data.status == 200){
this.info = res.data.info;
//對象賦值,分配一塊新的內存空間
this.oldinfo = Object.assign({}, this.info);
console.log(res.data.info);
}
})
.catch(err=>{
console.log(err)
})
},//beforreCreate-end
}
</script>
<style scoped>
#hiddenInput{
display: none;
}
</style>
index.js
var express = require('express');
var router = express.Router();
var path = require("path");
var User = require("../models/User");
var Info = require("../models/Info");
//圖片上傳模塊
var multer = require('multer');
let OSS = require('ali-oss');
//阿里雲oss配置自己去官網瞧
let client = new OSS({
region: 'oss-cn-shanghai',
accessKeyId: '****',
accessKeySecret: '******'
});
client.useBucket('******');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
async function put(fileName, filePath, cb) {
try {
let result = await client.put(fileName, filePath);
fs.unlinkSync("public/images/uploads/" + result.name);
cb(result)
} catch (err) {
console.log(err);
}
}
let filePath;
let fileName;
let Storage = multer.diskStorage({
destination: function (req, file, cb) {//計算圖片存放地址
cb(null, './public/images/uploads');
},
filename: function (req, file, cb) {//圖片文件名
fileName = Date.now() + '_' + parseInt(Math.random() * 1000000) + '.png';
filePath = '/public/images/uploads/' + fileName;
cb(null, fileName)
}
});
let upload = multer({ storage: Storage }).any();//file2表示圖片上傳文件的key
//自己寫的用戶信息接收
router.post('/shangchuan', function (req, res, next) {
upload(req, res, function (err) {
let content = req.body.content || "";
let username = req.body.username;
let imgs = []; //要保存到數據庫的圖片地址數組
if (err) {
return res.end(err);
}
console.log('進入圖片解析--------req.body')
console.log(req.body)
console.log('打印 req.files------')
console.log(req.files)
// console.log("打印 req.files[0].path------");
// console.log(req.files[0].path);
// console.log(content)
// console.log(content)
// console.log(username)
req.files.forEach((item, index) => {
var filePath = `http://localhost:4444/public/images/uploads/${item.filename}`;
console.log('數據庫中的路徑filePath------------')
console.log(filePath)
});
res.json({
avatarurl: filePath,
mag: "修改個人信息成功"
});
});
});
//網絡查的 接收用戶信息
router.post('/uploadFile', function (req, res, next) {
upload(req, res, function (err) {
let content = req.body.content || '';
let username = req.body.username;
let imgs = [];//要保存到數據庫的圖片地址數組
if (err) {
return res.end(err);
}
if (req.files.length === 0) {
new Pyq({
writer: username,
content: content
}).save().then((result) => {
res.json({
result: result,
code: '0',
msg: '上傳成功'
});
})
}
/*client.delete('public/img/1.png', function (err) {
console.log(err)
});*/
let i = 0;
req.files.forEach((item, index) => {
let filePath = `./public/images/uploads/${item.filename}`;
put(item.filename, filePath, (result) => {
imgs.push(result.url);
i++;
if (i === req.files.length) {
//forEach循環是同步的,但上傳圖片是異步的,所以用一個i去標記圖片是否全部上傳成功
//這時才把數據保存到數據庫
new Pyq({
content: content,
writer: username,
pimg: imgs
}).save().then(() => {
res.json({
code: '0',
msg: '發佈成功'
});
})
}
})
})
})
});
module.exports = router;
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
//加載數據庫模塊
var mongoose = require("mongoose");
// 引入jwt token工具
const JwtUtil = require('./public/utils/jwt');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
//解決跨域
app.all('*', function (req, res, next) {
//將外源設爲指定的域,比如:http://localhost:8080
res.header("Access-Control-Allow-Origin", "*");
//將Access-Control-Allow-Credentials設爲true 允許攜帶cookie
res.header('Access-Control-Allow-Credentials', true);
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
//配置options的請求返回,解決axios的post自定義頭部字段問題
// if (res.getMethod().equals("OPTIONS")) {
// HttpUtil.setResponse(response, HttpStatus.OK.value(), null);
// return;
// }
//返回數據格式爲json字符串
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/public', express.static('public'));//將文件設置成靜態
// app.use(express.static(path.join(__dirname, 'public')));
/* 請求攔截器
*/
// app.use(function (req, res, next) {
// var url = req.url;
// // 正則表達式匹配 匹配api '?' 前的路徑,去除query參數
// url = url.match(/(\S*)\?/)[1];
// // console.log('匹配正則後');
// // console.log(url);
// // 把登陸和註冊請求去掉了,其他的多有請求都需要進行token校驗
// if (url != "/users/login" && url != "/users/register") {
// console.log("進入app.js攔截器,打印result");
// /*沒有弄明白怎麼在headers中設置token
// let token = req.headers.token;
// */
// let token = req.query.token;
// let jwt = new JwtUtil(token);
// let result = jwt.verifyToken();
// // 如果考驗通過就next,否則就返回登陸信息不正確(與jwt.js返回有關)
// if (result == 'err') {
// console.log('token已過期,被攔截器攔截');
// console.log(result);
// res.send({ status: 403, msg: "尚未登錄(登錄已過期),請重新登錄!" });
// } else {
// console.log('token沒過期,進入對應的路由')
// next();
// }
// } else {
// //放過 登錄 和 註冊 請求
// next();
// }
// });
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
//連接數據庫
mongoose.connect('mongodb://localhost:27222/blog', function (err) {
if (err) {
console.log(err);
console.log('數據庫連接失敗!');
} else {
console.log("數據庫連接成功!");
}
});
module.exports = app;