目录
致看此篇的读者
各位不管是新的朋友还是粉丝，大家好！很荣幸大家能在茫茫的C站博文世界中浏览我这一篇博文，在这里由衷的感谢大家！！！然后借着这一次C站举办的这一个“猿创征文”的活动，向大家分享一个我的web前端的技术成长之路。
作为今年刚刚步入社会的99后的电子信息工程的学生，我在学校接触到的第一门编程语言科目虽不是前端，（我第一次接触到的编程语言是C语言），也大家一样，第一次入大学的校门的那一刻起，我们都是怀着好奇心、满满的期待我们的大学生活的，和大家一样，我打出的第一段代码也是“Hello World！！！”。接触前端这一门技术都是很晚的，那应该来说是大三的时候，我加入了毕设导师的项目，我成为了前端的小组成员，一步步的看着组内的成员一个个学不下去，我坚持了下来，到当上了当时项目开发前端小组的组长，我很开心，当然压力也很大！！！
因为导师是一个啥都懂一点的工程师，但是唯独不懂web前端，所以给到我指导也只有推荐的网课视频学习以及书籍经费的支持，这一些支持当然也是很开心的！但是给我推荐的是哔站上面的一个黑马程序员跟着一起码起来的“基于vue的电商管理系统”，这算是我第一个码完成的前后端分离的系统了！当在暑假假期码完成的那一刻起，觉得成就感满满！因为学着学着，你知道了什么是vue、什么是vue-router、什么是webpack......等等！
当然很多时候自己码起来的vue项目是渲染不出来的，有很多报错的东西！当时一度想放弃，因为找bug的过程太痛苦了，不小心还会出现更多的bug! 但是庆幸的是自己还是坚持下来了！
这里是完成了电商管理系统的作品文件夹，这里就不打开了，卖个关子，因为文章下面还会展示一个更好的、自己的毕设作品的前端的管理系统。
初识vue
我记得第一次接触vue的时候，什么也不懂，毫不夸张的说，我连看着教程搭建vue cli脚手架都花上了大半天的时间，当时还买了一本书《vue.js实战》，当时看的真的是头大，因为那本书里面全都是理论，对于我这个刚入门来说，是很难看懂的。因为你是不知道什么是父子组件、什么是事件、什么是修饰符......,为此查阅了大量的资料和上了不知道多上次C站，当然最终还是成功的小小入门了！
当第一次码起一个对我来说很庞大的工程的时候，那个成就感现在还是觉得满满的，就像自己创造了一个“孩子”的感觉！
分享毕设系统作品
当时加入导师的项目组的时候，有两个初衷，第一个是为了学习新的知识，因为我一直觉得笨鸟先飞，只要逼自己一把，会有无限的可能；第二个，当然是想着，能在导师的指导下，能提前完成自己的毕业设计，那也是极好的。
跟着视频、书籍等等的资源，我大四上学期提交了我毕设的方向，那就是完成一个“基于vue前端开发的智能农业管理系统”的网站，这系统能含有很多的模块的功能，运用了很多对于我来说没接触过的知识，比如，我不知道居然还可以使用element-ui快速编写组件、GitHub有很多工程模板、ECharts视图结合等等，通过这一些前端的工具，完成了我的系统，大家对我的系统的话，可以去看我往期的博客，好吧，那我直接把我的博客链接发到这里好了：电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统_丘比特惩罚陆的博客-CSDN博客_智能农业系统设计方案毕业设计，Vue+websocket+服务器的农业智能系统
https://blog.csdn.net/Lushengshi/article/details/126084648展示结果：
登录界面
主体部分
运用到地图功能
摄像头WebSocket远程操控
这里就简单的展示了部分功能，大家感兴趣的可以到我上面发的博客去浏览，谢谢大家了！
分享七夕情人节码源（仅登录部分码源）
这里放的仅仅是登录部分的代码，感兴趣的朋友可以看我往期的博客，链接在这里给大家奉上：【七夕节】html+css+JavaScript+服务器 给女朋友的七夕过节网站_丘比特惩罚陆的博客-CSDN博客七夕情人节，给自家小公主安排一个小型的情侣网站，节日快乐！https://blog.csdn.net/Lushengshi/article/details/126148500
qixi.vue
<template>
<div class="login_container">
<!-- 登录模块盒子 -->
<div class="login-box">
<!-- 图片盒子 -->
<div class="avatar_box">
<img src="../assets/1234.png" alt="">
<h3 class="text">云 </h3>
</div>
<!-- 登陆表单区域 -->
<el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
<!-- :model数据绑定对象，绑定到login from这个表单中,rules表单的验证规则对象 -->
<!-- 用户登录 -->
<el-form-item prop="username">
<el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" size="mini" ></el-input>
<!-- v-model双向绑定，绑定到用户名 -->
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" size="mini" ></el-input>
<!-- v-model双向绑定，绑定到用户登录密码,type="password可以使得密码隐藏"-->
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" size="mini" ></el-button>
<!-- 为登录绑定一个单击事件，名为login -->
<el-button type="info" @click="resetLoginForm" size="mini"></el-button>
<!-- click绑定单击事件，名为resetloginfrom -->
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {Login} from '../network/login'
export default {
data () {
return {
// 登录表单的数据绑定对象
loginForm: {
username: '',
password: ''
},
// 表单的验证规则对象
loginFormRules: {
// 验证用户名是否合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
// trigger便是失去焦点后出发这一次验证
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
]
}
}
},
methods: {
// 点击重置按钮，重置表单
resetLoginForm () {
this.$refs.loginFormRef.resetFields()
},
login () {
this.$refs.loginFormRef.validate( valid => {
if (!valid) {return this.$message.error('用户名密码不正确')}
Login(this.loginForm).then( res => {
console.log(res);
if (res.code !== 0)
{return this.$message.error('登录失败')}
this.$message.success('登陆成功')
window.sessionStorage.setItem('token', res.token)
this.$router.push('/home')
}).catch( error => {
console.log(error);
})
// const { data: res } = await this..post('login', this.loginForm)
// if (res.meta.status !== 200) return this.$message.error('登录失败')
// this.$message.success('登陆成功')
// // console.log(res)
// window.sessionStorage.setItem('token', res.data.token)
// this.$router.push('/home')
// validate回调函数，完成登录表单前的预校验
// 将登陆成功以后的token,保存到客户端的sessionstorage中
// 项目中除了登陆之外的其他api接口，必须将token保存到客户端
// this.$router.push('/home)是通过编程式导航跳转到后台，路由地址为/home
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
background-image: url(../assets/logo.png);
height: 100%;
}
.login-box {
width: 360px;
height: 240px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%; //距离左侧50%
top: 50%; // 距离顶部505
transform: translate(-50%, -50%); //横轴上移动50%，纵移动50%
}
.avatar_box {
height: 100px;
width: 100px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #eee;
position: absolute;
left: 50%;
top:-40%;
transform: translate(-50%);
background-color: rgb(32, 181, 201);
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
.text {
text-align: center;
margin-top: 10px;
font-size: 20px;
font-family: 宋体;
}
</style>因为码源太多了，大家可以去我的博文查看，有好胜心的男同志们，可以跟我一样，把自己学到的知识，以自己领域学到的知识给自己的心爱之人弄一个惊喜的礼物！加油，同志们！
下图就展示七夕网站的小小功能，大家喜欢的话，码源我会放现在资源栏，大家下载就好了！
学习路线
学习嘛！没有人会觉得学习是真的使我快乐的，那些觉得是使我快乐的都是骗人的，我的方法很笨，没有捷径，代码的话，对于一个真正的程序猿来说，那是没有成千上万行来说，都不好意思说自己真的喜欢代码，带目前位置，我对我自己来说，走上代码程序猿这一条路，都是不后悔的，只要你找对了目标，你每走一步，都是离目标越近；当然，你找错了目标，那你的就会理你的目标越来越远！
我的学习方法我后面会写上一篇我的vue学习的思维导图，供大家参考学习！大家喜欢的到时候可以问我要思维导图，当然我也会将思维导图编程笔迹化，喜欢读笔记的读者可以参考一下！
祝福语
我只是一个正在上山的人，都是在前辈们的知识光环下才学习到这个地步的，自己还需要学的东西还有很多，我坚信的是：少看多写多练，少猜多问多学！我是丘比特惩罚陆，希望能和大家一起在代码的世界一起遨游！谢谢看过这篇文章的读友！
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
