使用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请求

getthis.axios.get('/admin').then(res => {console.log(res.data)}).catch(res => {console.log(res.data)})postthis.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.fileslet 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>

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

【源码来袭】使用vue编写国旗头像项目相关推荐

c++ gdb 绑定源码_【Vue原理】VNode 源码版
↑点击上方 "神仙朱" 一起研究Vue源码吧专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版 ...
老李推荐：第3章3节《MonkeyRunner源码剖析》脚本编写示例: MonkeyImage API使用示例 1...
老李推荐:第3章3节<MonkeyRunner源码剖析>脚本编写示例: MonkeyImage API使用示例在上一节的第一个"增加日记"的示例中,我们并没有看到日记 ...
源码来袭：bind手写实现
JavaScript中的this指向规则源码来袭:call.apply手写实现与应用理解建议:如果对this指向规则不了解的话,建议先了解this指向规则,最好还能对call和apply的使用和内 ...
老李推荐：第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例 1...
老李推荐: 第3章2节<MonkeyRunner源码剖析>脚本编写示例: MonkeyDevice API使用示例上一节我们学习了如何通过MonkeyRunner这个类的静态方法wait ...
单片机 stm32 差分升级增量升级算法源码，纯c编写跨平因为是程序源码
单片机 stm32 差分升级增量升级算法源码, 纯c编写跨平因为是程序源码 IAP升级 OTA升级物联网车联网适用 YID:83500653978935134Deflag
单片机 stm32 差分升级增量升级算法源码，纯c编写跨平因为是程序源码
单片机 stm32 差分升级增量升级算法源码,纯c编写跨平因为是程序源码 IAP升级 OTA升级物联网车联网适用现有:69500653978935134Deflag
独家一比一精仿火萤动态壁纸全套微信小程序源码下载-支持动静态和头像
独家一比一精仿火萤动态壁纸全套微信小程序源码下载-支持动静态和头像这是一款完美还原火萤动态壁纸小程序支持的功能有如下动态壁纸(独家采集) 静态壁纸(独家采集) 精选头像(独家采集) 每一个功能里 ...
小程序源码：独家一比一精仿火萤动态壁纸全套微信小程序源码下载-支持动静态和头像
这是一款完美还原火萤动态壁纸小程序支持的功能有如下动态壁纸(独家采集) 静态壁纸(独家采集) 精选头像(独家采集) 每一个功能里面都包含了多个分类支持搜索,再也不怕找不到自己想要的关键词的壁纸或 ...
小程序源码：2022虎年全新姓氏头像制作多模板-多玩法安装简单
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西小编也有在运营那么一款,不做宣传,每天靠自然搜索流量都有几百个人访问所以说,大家可以抓住这个热点,来上升一波姓氏头像不管的短视频 ...
【小程序源码】2022虎年全新姓氏头像制作多模板
这是一款姓氏头像小程序源码姓氏头像可以说是一个比较热门的一个东西姓氏头像这个小程序,支持全修改姓氏,另外部分模板还支持修改里面的标语等等好了废话也不多说了,下面来看看小编的测试演示图小程序源码 ...

【源码来袭】使用vue编写国旗头像项目