本文链接： https://blog.csdn.net/pyfysf/article/details/101679557

使用vue编写国旗头像项目

预览

本文使用到muse-ui，vue axios,vue

muse-UI 官网地址
https://cn.vuejs.org/
vue axios 官网地址
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
vue 官网地址
https://cn.vuejs.org/

如何使用vue-cli创建vue项目？具体信息详见>> 《使用vue-cli创建vue项目》

需求思路

用户上传头像逻辑（有条件的可以修改为自动获取微信头像），
将图片作为底图进行修改，使用已有国旗的边框作为第二层图片进行覆盖。
最后，将两张图片进行合并为一张图片反馈给用户。

编写代码

添加muse-ui 支持

安装muse-ui

cnpm i muse-ui -S

在main.js中使用

import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'

Vue.use(MuseUI)

引入icon图标文件

在这里插入图片描述

如果图标不能正常显示请参考下方解决方法

下载文件：

(将名字改成icon.woff2)
woff2下载

CSS文件下载

修改CSS文件：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(icon.woff2) format('woff2');
}

main.js导入

import './assets/font/material-icons.css'

引入vue请求网络的模块axios

cnpm install axios

main.js导入

import axios from 'axios'
import VueAxios from 'vue-axios'

// 设置API的根路径
var axiosInstance = axios.create({
  baseURL: 'http://wintp.top'
})

Vue.use(VueAxios, axiosInstance)

常用Get/Post请求

get
    this.axios.get('/admin')
      .then(res => {
        console.log(res.data)
      })
      .catch(res => {
        console.log(res.data)
      })

post
    this.axios.post('admin/login', {
      'user_name': 'admin',
      'user_pwd': 'admin'
    }).then(res => {
      //res.data do something right
    }).catch(res => {
      //do something wrong
    })

首页代码编写

<template>
  <div id="home_div">
    <div class="top_img_div">
      <img :src="logo">
      <img :src="topImg">
    </div>

    <mu-flex align-items="center">
      <mu-flex justify-content="center" fill>
        <mu-chip>
          使用方式:上传头像之后,长按头像即可保存到手机。
        </mu-chip>
      </mu-flex>
    </mu-flex>

    <div id="carousel_div">


      <mu-carousel
        :cycle="false"
        :hide-indicators="true"
        :hide-controls="false"
        @change="changeTemplate">

        <mu-icon value="first_page" size="30" color="while" slot="left"></mu-icon>
        <mu-icon value="last_page" size="30" color="while" slot="right"></mu-icon>

        <mu-carousel-item>
          <img class="item-img" :src="template1">
        </mu-carousel-item>
        <mu-carousel-item>
          <img class="item-img" :src="template2">
        </mu-carousel-item>
        <mu-carousel-item>
          <img class="item-img" :src="template3">
        </mu-carousel-item>
      </mu-carousel>
    </div>


    <mu-flex align-items="center">
      <mu-flex justify-content="center" fill>
        <mu-button @click="selectImg" color="primary">
          <mu-icon left value="add_photo_alternate"></mu-icon>
          上传头像
        </mu-button>
      </mu-flex>

      <input ref="filElem" id="uploadFile" type="file" multiple @change='uploadFile($event)' style="display: none;"/>
    </mu-flex>
    <br>

    <div class="happy_img_div">
      <img :src="happyImg">
      <img :src="logo">
    </div>

  </div>
</template>

<script>

  import template1 from '../assets/template_1.png'
  import template2 from '../assets/template_2.png'
  import template3 from '../assets/template_3.png'

  import topImg from '../assets/topImg.png'
  import happyImg from '../assets/happy.png'
  import logo from '../assets/logo.png'

  export default {
    name: 'HelloWorld',
    data () {
      return {
        template1,
        template2,
        template3,
        topImg,
        happyImg,
        logo,
      }
    },
    methods: {
      changeTemplate: function (index) {
        // this.$toast.error({'message': index, 'close': false, 'infoIcon': ''})
      },
      selectImg: function () {
        this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
      },
      uploadFile: function (event) {
        let fileList = event.target.files
        let file = fileList[0]

        console.log(file)

        let param = new FormData() //创建form对象
        param.append('file', file)//通过append向form对象添加数据

        let config = {
          // headers: {'Content-Type': 'multipart/form-data'}
        }

        this.axios.post('/front/uploadFile', param, config).then(res => {
          console.log(res)
          this.template1 = res.data['template1']
          this.template2 = res.data['template2']
          this.template3 = res.data['template3']
        }).catch(res => {
          console.log(res)
        })

      },

    },
    watch: {
      changeTemplate (n, o) {
        console.log(n)
      }
    },
    mounted () {
    }
  }
</script>

<style scoped>

  #home_div {
    background-image: url("../assets/backage.png");
  }

  .item-img {
    width: 250px;
    height: 250px;
  }


  .mu-carousel-item > img {
    min-width: 0px;
  }

  .top_img_div, .happy_img_div {
    text-align: center;
  }

  .top_img_div > img, .happy_img_div > img {
    margin-top: 0px;
    width: 300px;
  }


  .mu-carousel-item, #carousel_div, .mu-carousel {
    height: 300px;
  }

</style>

以上便是主要的前端代码实现，具体源码请关注【趣学程序】微信公众号，回复“国旗头像源码”获取。