Vue开发 提交后台，二维码，自定义

0. vue项目搭建

npm install 初始化

npm run dev 运行

导入axios模块，命令：npm install axios  然后再输入npm run dev 运行项目。

1. 修改title和图标

资源可以放在static下面，给一个小的：

直接再index里面改：

不生效，需要在 vue.config.js 中增加：

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: 'logo.png',
      favicon16: 'logo.png',
      appleTouchIcon: 'logo.png',
      maskIcon: 'logo.png',
      msTileImage: 'logo.png',
    },
  },
}

重启项目就可以了。

2. 二维码展示

首先，安装二维码控件：

npm i qrcodejs2

script:

    creatQrCode(qrCodeUrl) {
      let qrcodeEL = document.getElementById("qrcode");
      document.getElementById("qrcode").innerHTML = "";
      let qrcode = new QRCode(qrcodeEL, {
        text: qrCodeUrl, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      });
    }

html:

<div id="qrcode" class="qrcode" style="margin-top: 20px;" ></div>

这里有个问题：运行后每次调用，都会生成一个新的二维码。而我们希望只生成一个，只是变内容。

解决方案是需要在调用前，先清空数据。就是上面的：

document.getElementById('qrcode').innerHTML = '';

参考：Vue使用qrcodejs2实现二维码生成_会说法语的猪的博客-CSDN博客_qrcodejs2

vue中使用qrcode动态生成二维码，并解决点击按钮多次生成二维码的问题_星星上的程序媛的博客-CSDN博客

3. 提交后台表单的时候，获取 input 的值

构建表格form，直接提交 this.form。

4. 获取div，并显示后台返回信息

document.getElementById('result').innerHTML = response.message;

5. vue后台交互，拦截器

import axios from "axios";//原生的axios
//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//创建一个单例
const http = axios.create({
  baseURL: 'http://localhost:8080/',
  timeout: 5000,//响应时间
  // headers:{"Content-Type":"application/json;charset=utf-8"},
})
 
//拦截器  -请求拦截
http.interceptors.request.use(config => {
  //部分接口需要token
  let token = localStorage.getItem('token');
  if (token) {
    config.headers.token = token;
    // config.headers = {
    //   'token': token
    // }
  }
  return config;
}, err => {
  return Promise.reject(err)
})
 
//拦截器  -响应拦截
http.interceptors.response.use(res => {
  // if (res.data.code === 0) {
    return Promise.resolve(res.data)
    //这里可以根据服务器返回的数据去自行修改
  // } else {
  //   return Promise.reject(res.data)
  // }
}, err => {
  return Promise.reject(err)
});
 
//整体导出
export default http;
 

如果报 Uncaught (in promise)  错误，是返回了 Promise.reject(res.data) 。这里改一下。

参考：https://www.jb51.net/article/263063.htm

6. 打包

参考：vue项目npm run build报错npm ERR! missing script: build（已解决）_不忘初心Eternity的博客-CSDN博客

7. vue打包项目空白，报错找不到script文件

config文件夹，index.js文件，找到 build 下的 assetsPublicPath，路径改为 ./

参考：vue项目打包后放到服务器上是空白页面,vue项目打包后打开页面空白解决办法_汤哲东的博客-CSDN博客