使用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文件:
@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>
以上便是主要的前端代码实现,具体源码请关注【趣学程序】微信公众号,回复“国旗头像源码”获取。