2022年总结
- 前言
- 技能的变迁
- 工作变化
- 生活变化
- 环境变化
- 结尾
- 结束
前言
大家好，我是yma16，本文分享2022年的回忆录
技能的变迁
vue2框架使用、sql、js编写-> vue3框架使用，antdesign的ui框架使用
自学了微信小程序，优化了个人博客，自学webpack打包优化。
博客：https://yongma16.xyz/#/ 博客网站优化部分：
- 新增邮件发送
- 打包优化
- 优化滚动条缓动
- 修复聊天室redis的连接异常（nginx配置）
- 新增ssl协议
新增的前端服务
vue3测试平台：http://yongma16.xyz/emoji_api/ 技术框架：vue3+echarts
疫情可视化：https://yongma16.xyz/fund-web/ setup语法糖的使用
技术框架：vue3+vite+echarts
小程序：yma16
关联网站博客，
微信公众号的开发，止步于个人开发者权限未继续升入，
后续继续投入微信小程序和app的开发
工作变化
自研前端- > 外包前端
生活变化
告别单身，找到了生活的另一半
环境变化
离开大贵州去到了深圳，第一次接触互联网大环境下的快节奏工作
结尾
海阔天空
以前的代码：
不太规范
/* eslint-disable vue/no-duplicate-attributes */
<template>
<div class="article" style="text-align: left; with: 100%; height: 100%">
<!-- 左侧 -->
<div class="leftclass">
<el-card
shadow="always"
cellpadding="1px"
style="position: static; line-height: 20px"
>
<div class="article_box">
<h1>{{ slogan }}</h1>
<ul v-for="(item, index) in md_title" :key="item" class="ul_style">
<div
v-bind:class="[
{ li_active: index === article_loc },
li_errorClass,
]"
>
<li @click="getArticles(index)">{{ item }}</li>
</div>
</ul>
</div>
<!-- 分页 -->
<div class="pagenation-block">
<!-- <span class="demonstration">完整功能</span> -->
<el-pagination
:current-page="currentPage"
:page-sizes="pageArray"
background
:page-count="pageCount"
:page-size="pageSize"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</el-card>
<!-- 评论 -->
<el-card
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ commmentSlogan }}</h1>
<ArticleComment
v-bind:articleId="postcomment.articleId"
ref="commentRef"
>
</ArticleComment>
</el-card>
<!-- 挑战榜 -->
<el-card
class="challenge_title1"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ day_challenge }}</h1>
<ul
v-for="(item, index) in challengeConfig"
:key="index"
class="ul_style"
>
<div
v-bind:class="[
{ li_active: index === activeChallengeIndex },
li_errorClass,
]"
>
<li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<el-card
class="weather_class1"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%;text-align: center"
>
<span style="line-height: 30px;" class="uni-font">未来天气</span>
<div style="positon: relative; width: 100%; height: 100%">
<EchartWeather> </EchartWeather>
</div>
</el-card>
<!-- cs头像 -->
<el-card
class="user_img1"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
>
<span style="line-height: 30px;" class="uni-font">小程序</span>
<img class="image" src="https://yongma16.xyz/staticFile/common/logo/wxProgram.jpg"
/>
</el-card>
<el-card
class="user_img1"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
>
<span style="line-height: 30px;" class="uni-font">点击图片前往cs</span>
<a href="">
<img class="image" src="@/assets/img/cs.jpg"
/></a>
</el-card>
</div>
<!-- 中间 markdown-->
<div class="midclass" ref="mark-down-ref">
<a name="home" id="homeTitleId" style="transition: 1s"></a>
<el-card shadow="hover" style="line-height: 10px">
<div class="block" style="line-height: 20px">
<h1>{{ the_title }}</h1>
<div class="markdown-body" style="text-align: left">
<DesignMarkdown
:contentSource="md_data[index_page]"
v-highlight
style="width: 100%; text-align: left"
></DesignMarkdown>
</div>
</div>
</el-card>
<div class="commitCard">
<!-- -->
</div>
<!-- 挑战榜 -->
<el-card
class="challenge_title2"
cellpadding="1px"
shadow="always"
style="position: static; margin-top: 2%"
>
<h1>{{ day_challenge }}</h1>
<ul
v-for="(item, index) in challengeConfig"
:key="index"
class="ul_style"
>
<div
v-bind:class="[
{ li_active: index === activeChallengeIndex },
li_errorClass,
]"
>
<li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
</div>
</ul>
</el-card>
<!-- 爬虫天气接口 -->
<!-- <el-card class="weather_class2"
cellpadding="1px"
shadow="always"
style="position: myblog_static; margin-top: 2%"
>
</el-card> -->
<el-card
class="user_img2"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
> <span style="line-height: 30px;" class="uni-font">小程序</span>
<img class="image" src="https://yongma16.xyz/staticFile/common/logo/wxProgram.jpg"
/>
</el-card>
<!-- cs头像 -->
<el-card
class="user_img2"
style="
position: static;
margin: 2% auto auto auto;
line-height: 10px;
text-align: center;
"
>
<span style="line-height: 30px;" class="uni-font">点击图片前往cs</span>
<a href="">
<img class="image" src="@/assets/img/cs.jpg"
/></a>
</el-card>
</div>
<!-- 上滑滚动图标 -->
<div class="rightclass">
<div class="righticon">
<el-card
shadow="never"
style="
align-content: center;
background-color: rgba(0, 0, 0, 0);
border: rgba(0, 0, 0, 0);
"
>
<div v-if="topShow">
<el-button
@click="toTop"
type="info"
icon="el-icon-top"
style="
transition: 1s;
background: rgb(255, 94, 0);
border: none;
color: #fff;
"
circle
></el-button>
</div>
<br /><br />
<div>
<el-button
type="info"
icon="el-icon-message"
circle
@click="openDraw"
style="background: rgb(255, 94, 0); border: none"
>
</el-button>
</div>
<br /><br />
</el-card>
</div>
</div>
<template>
<Email :drawObj="drawObj"></Email>
</template>
</div>
</template>
<script>
import Email from '@/components/email/Email'
import DesignMarkdown from '@/components/markdown/DesignMarkdown'
import ArticleComment from '@/components/comment/ArticleComment'
import EchartWeather from '@/components/weather/EchartWeather'
export default {
components: {
DesignMarkdown, // 显示markdown的组件
ArticleComment, // 子组件评论
EchartWeather, // 天气
Email
},
name: 'Article',
data () {
return {
pageCount: 3,
msgDrawTitle: '~邮件沟通~',
direction: 'rtl',
drawObj: {
show: false
},
// baseurl: '/api/',
baseurl: '/api/',
// baseurl: "http://yongma16.xyz/",
msg: '内容',
commmentSlogan: '评论区',
day_challenge: '训练营',
challengeConfig: [
{
title: 'css挑战',
order: 1,
isJumpPath: true,
isJumpUrl: false,
path: '/css'
},
{
title: 'websocket聊天',
order: 2,
isJumpPath: true,
isJumpUrl: false,
path: '/onlinewebsocket'
},
{
title: 'echarts地图配置',
order: 3,
isJumpPath: true,
isJumpUrl: false,
path: '/home'
},
{
title: 'vue3测试平台',
order: 4,
isJumpPath: false,
isJumpUrl: true,
url: 'http://yongma16.xyz/emoji_api/',
path: ''
},
{
title: '数据可视化平台',
order: 5,
isJumpPath: false,
isJumpUrl: true,
url: 'https://yongma16.xyz/fund-web',
path: ''
},
{
title: '更新中',
order: 6,
isJumpPath: false,
isJumpUrl: false,
path: ''
}
],
md_data: [],
md_title: [],
the_title: '',
sear_page: 0,
index_page: 0,
data: ['threejs加载模型'],
slogan: '记忆碎片',
tabPosition: 'left',
weather_title: [],
weather_high: [],
weather_low: [],
toTopIsShow: false,
article_loc: 0,
activeChallengeIndex: -1,
topShow: false,
userImg: '',
username: '匿名',
articleCommit: '评论区',
// 分页实现 page1 page2 指向数组
pageAnalys: {},
currentPage: 1,
splitLength: 6, // 划分条数
total: 0,
pageSize: 4,
pageArray: [6, 8, 10],
postcomment: {
articleId: undefined,
articleCommit: null
},
articleId: [] // 文章的id
}
},
watch: {
topShow: {
handler (newValue) {
if (newValue) {
console.warn(newValue)
}
},
immediate: true
}
},
beforeDestroy () {
// window.removeEventListener('onload', this.topVisible())
this.articleScrollListen('remove')
},
mounted () {
this.articleScrollListen('add')
this.initPageSpliteFun()
this.getChallengeDict()
// window.addEventListener('onload', this.topVisible())
},
methods: {
getChallengeDict () {
const that = this
that.$axios
.post(that.baseurl + 'dictModel/index/', {
kind: 'challenge'
// 传入索引
})
.then((res) => {
that.challengeConfig = res.data.data.map(item => {
return JSON.parse(item.option)
})
})
.catch((error) => {
throw Error(error)
})
},
/**
* dom的滚动事件监听
*/
articleScrollListen (key) {
const dom = this.$refs['mark-down-ref']
const that = this
if (dom && key === 'add') {
dom.addEventListener('scroll', function (e) {
that.topShow = Math.ceil(e.target.scrollTop) !== 0
})
} else if (dom && key === 'remove') {
dom.removeEventListener('scroll', function (e) {
that.topShow = e.target.scrollTop === 0
})
}
},
initPageSpliteFun () {
this.splitLength = this.pageArray[0]
},
handleSizeChange (val) {
// 转到第一页md_title
let that = this
that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
},
handleCurrentChange (val) {
let that = this
// 触发md_title的修改
that.currentPage = val
that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
},
pageAnalysFun (allTitleArray, selectListLength) {
let that = this
that.total = allTitleArray.length // 总数
let splitLength = that.splitLength
if (selectListLength) {
this.currentPage = 1
that.splitLength = selectListLength // 划分长度
}
splitLength = that.splitLength
let splitNum = Math.ceil(that.total / splitLength) // 向上取整
that.pageAnalys.childNum = splitNum // 子数组个数
that.pageAnalys.allTitle = allTitleArray // 所有标题
that.pageAnalys.titleArray = [] // 子数组个数
let locSplit = 0
let locLength = splitLength // 每一页的条数
while (splitNum--) {
// 循环获取子数组
if (splitNum >= 1) {
let childArray = []
for (
let temp = locSplit;
temp < locLength && temp < that.total;
++temp, ++locSplit
) {
childArray.push(that.pageAnalys.allTitle[temp])
}
that.pageAnalys.titleArray.push(childArray)
locLength += splitLength // 分割数组长度后移
} else {
// 最后一个数组
let childArray = []
for (let temp = locSplit; temp < that.total; ++temp) {
childArray.push(that.pageAnalys.allTitle[temp])
}
that.pageAnalys.titleArray.push(childArray)
break
}
}
try {
that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
} catch (e) {
throw Error(e)
}
},
increment: function () {
this.$store.commit('increment')
},
topVisible: function () {
// let dom = document.getElementById('homeTitleId')
// this.topShow = this.elementIsVisibleInViewport(dom)
// setTimeout(this.topVisible)
},
elementIsVisibleInViewport: function (el, partiallyVisible = false) {
try {
if (el && el.getBoundingClientRect instanceof Function) {
const { top, left, bottom, right } = el.getBoundingClientRect()
return partiallyVisible
? ((top > 0 && top < innerHeight) ||
(bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) ||
(right > 0 && right < innerWidth))
: top >= 0 &&
left >= 0 &&
bottom <= innerHeight &&
right <= innerWidth
}
} catch (r) {
throw Error(r)
}
},
li_errorClass: function () {},
clickChallengeEvent: function (item, index) {
this.activeChallengeIndex = index
if (item.isJumpPath) {
this.$router
.push({
path: item.path
})
.catch((error) => {
throw Error(error)
})
} else if (item.isJumpUrl) {
window.open(item.url)
}
},
open_message: function () {
// this.$notify({
// title: '欢迎合作',
// message: '邮箱：1432448610@qq.com',
// position: 'bottom-right'
// })
},
openDraw () {
this.drawObj.show = true
},
toTop: function () {
const dom = this.$refs['mark-down-ref']
if (!dom) {
return 0
}
const speedValue = Math.floor(dom.scrollTop / 20)
const second = 20
const diffTop = function (speed, time) {
let top = Math.ceil(dom.scrollTop)
if (top > 0) {
dom.scrollTop = top - speed > 0 ? top - speed : 0
}
if (dom.scrollTop > 0) {
setTimeout(() => {
return diffTop(speed, time)
}, 10)
}
}
diffTop(speedValue, second)
if (document.getElementById('mainappid') && document.getElementById('mainappid').scrollTop > 0) {
document.getElementById('mainappid').scrollTop = 0
}
}, // 返回天气相当于返回顶部
getCommentsFromArticle (id) {
this.$refs.commentRef.getComments(id) // 触发子组件的方法
},
getArticles: function (page) {
let that = this // this指向转化
that.article_loc = page
// 查找文章id 从1开始
that.postcomment.articleId =
that.articleId[
parseInt(page + (that.currentPage - 1) * that.splitLength)
]
// 提交数据 page从0开始
that.$axios
.post(that.baseurl + 'article/index/', {
value: page + (that.currentPage - 1) * that.splitLength
// 传入索引
})
.then((res) => {
if (res.data.code === 1) {
let respdata = res.data
let content = respdata.article
that.md_data = [] // 清空
content.map((o) => {
that.md_data.push(o) // 传入一个文章
})
that.the_title = respdata.the_title
} else if (res.data.code === 0) {
// alter("失败！")
that.$message.error('失败')
}
})
.catch((error) => {
throw Error(error)
})
that.getCommentsFromArticle(that.postcomment.articleId)
}
},
created: function () {
// 初始化
let that = this
that.$axios
.get(that.baseurl + 'article/index/')
.then((res) => {
let resdata = res.data
let content = resdata.article // 传递过来的文章 进行处理
let title = resdata.title
that.articleId = resdata.articleObjectId
that.postcomment.articleId = resdata.articleId
this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
content.map((o) => {
that.md_data.push(o)
})
let titleAllArray = title.map((o) => {
return o
})
that.the_title = resdata.the_title
this.pageAnalysFun(titleAllArray) // 分页
})
.catch((r) => {
throw Error(r)
}) // get log
}
}
</script>
<style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #b0b3b6;
background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}
.text {
/* align-content: center; */
display: flex;
margin: 0 auto;
font-size: 14px;
}
.item {
display: inline-block;
/* margin: 0 auto; */
width: 900px;
}
.box-card {
align-self: center;
align-content: center;
display: inline-block;
width: 80%;
/* padding-left:25%; */
margin: 0 auto;
/* opacity: 0.95; */
margin-top: 0px;
background-color: #ffffff;
}
.box-cardtext {
align-self: center;
align-content: center;
display: inline-block;
width: 20%;
/* padding-left:25%; */
margin: 0 auto;
opacity: 0.9;
margin-top: 80px;
background-color: #ffffff;
}
.article {
opacity: 1;
/* background-color: aliceblue; */
align-content: inherit;
display: flex;
margin: 5px;
padding: 5px;
}
/* 取消滚动并且隐藏 */
el-col::-webkit-scrollbar {
display: none;
}
.leftclass {
position: relative;
width: 30%;
height: 100%;
overflow: auto;
margin: 5px;
}
.leftclass::-webkit-scrollbar {
display: none;
}
.midclass {
position: relative;
width: 65%;
height: 100%;
overflow: auto;
margin: 5px;
/* scrollbar-face-color: coral; */
/* scrollbar-track-color: darkslategrey; */
}
.pagenation-block{
overflow: auto;
}
.midclass::-webkit-scrollbar {
width: 10px;
/* height:5px; */
/* display: none; */
}
.midclass::-webkit-scrollbar-track {
background: rgba(226, 247, 255, 0.5);
border-radius: 2px;
/* display: none; */
}
.midclass::-webkit-scrollbar-track-piece {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
/* display: none; */
}
.uni-font{
color: #ff995e;
font-weight: bolder;
}
.midclass::-webkit-scrollbar-thumb {
background: #ff995e;
height: 2px;
border-radius: 2px;
/* display: none; */
}
/* 评论区 */
.commitCard {
position: relative;
width: 100%;
height: 80px;
margin-top: 10px;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-left: 0;
margin-right: 0;
}
.rightclass {
position: relative;
width: 5%;
height: 100%;
overflow: hidden;
}
.rightclass::-webkit-scrollbar {
display: none;
}
.righticon {
position: relative;
width: 100%;
height: 100%;
top: 70%;
}
.image {
width: 100%;
display: block;
}
.li_active li {
color: rgb(255, 94, 0);
}
li:active {
color: rgb(245, 182, 10);
}
li:link {
color: rgb(255, 94, 0);
}
li:visited {
color: gold;
}
li:hover {
color: rgb(255, 72, 0);
cursor: pointer;
}
h1 {
color: rgb(255, 102, 0);
text-align: center;
}
h1:hover {
font-weight: bolder;
color: rgb(255, 72, 0);
/* color: gold; */
cursor: pointer;
}
.article_box {
position: relative;
width: 100%;
height: 100%;
}
.ul_style {
position: relative;
width: 100%;
height: 100%;
}
.weather_class2 {
display: none;
}
.user_img2 {
display: none;
}
.challenge_title2 {
display: none;
}
.weather_class1 {
display: block;
}
.user_img1 {
display: block;
}
.challenge_title1 {
display: block;
}
@media screen and (max-width: 450px) {
.article {
display: inline-block;
max-width: 350px;
}
.leftclass {
width: 100%;
height: 50%;
max-width: 350px;
}
.midclass {
width: 100%;
max-width: 350px;
}
.rightclass {
width: 80px;
position: fixed;
float: right;
bottom: 20px;
right: -10px;
}
.weather_class2 {
display: block;
}
.user_img2 {
display: block;
}
.challenge_title2 {
display: block;
}
.weather_class1 {
display: none;
}
.user_img1 {
display: none;
}
.challenge_title1 {
display: none;
}
}
</style>结束
本文分享到这结束，感谢大家的阅读！
