node 設置了token,前端post請求一直髮不過去,500錯誤

<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">
            <!-- 個人信息 start -->
            <div style="width:280px;margin:0 auto;text-align:center;">
              <!-- 展示用戶信息,可以修改 start -->
              <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>
              <!-- 展示用戶信息,可以修改 end -->
              
              <!-- 修改用戶信息表單 start -->
              <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>
              <!-- 修改用戶信息表單 end -->
              {{this.info}}
              {{this.oldinfo}}

              
            </div>
            <!-- 個人信息 end -->

          </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,即後臺的req.body
          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)
          this.$axios.post('http://localhost:4444/uploadFile', formData, {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }).then((res) => {//res.data爲後臺返回的信息
            alert(res.data.msg);
            this.info.avatarurl = res.data.avatarurl;
            // 更新備份數據,否則cancelInfo()時還是發送請求之前的數據作爲備份數據
            this.oldinfo = Object.assign({}, this.info);            
          })
          .catch(err=>{
              alert('修改個人信息失敗!');
              //將緩存用戶信息賦值給用戶修改的原信息,防止導致視覺效果已經修改信息
              this.info = Object.assign({}, this.oldinfo);
              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中
          // 單純將頭像顯示
          var reader = new FileReader();//將文件內容讀入內存,訪問本地文件
          reader.onload = (data) => {//當讀取操作成功完成時調用
            let res = data.target || data.srcElement;//捕獲當前事件作用的對象
            this.info.avatarurl = res.result;//圖片被轉換成了二進制流(字符串類型),存儲在info的avatarurl中
          };
          reader.readAsDataURL(file);//將圖片內嵌在網頁之中--Base64
        },
        


    },//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>
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');


//頭像 接收,保存到服務端的配置---start
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
//頭像 接收,保存到服務端的配置---end

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/*  用於接收前端的用戶信息修改:頭像+文字
*/
router.post("/uploadFile", function(req, res, next) {
  //req.body:前端發送的數據即formData
  let formData = req.body;
  upload(req, res, function (err) {//upload-start
    if (err) {
      return res.end(err);
    }
    console.log("進入圖片解析--------req.body");
    console.log(req.body);
    console.log("打印 req.files------");
    console.log(req.files);

    // 頭像路徑filePath初始化爲默認頭像
    var filePath = "http://localhost:4444/public/images/uploads/default.png";
    req.files.forEach((item, index) => {
      filePath = `http://localhost:4444/public/images/uploads/${item.filename}`;
      console.log("數據庫中的路徑filePath------------");
      console.log(filePath);
    });

    res.json({
      avatarurl: filePath,
      msg: "修改個人信息成功!"
    });
  });//upload-end
});

//網絡查的 接收用戶信息
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);
    }
    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;
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;
    */
    if (req.query.token){
      console.log("從req.query中獲得token");
      var token = req.query.token;
    }
    if (req.headers.token) {
      console.log("從req.headers中獲得token");
      var token = req.headers.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;

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章