目录
各位不管是新的朋友还是粉丝,大家好!很荣幸大家能在茫茫的C站博文世界中浏览我这一篇博文,在这里由衷的感谢大家!!!然后借着这一次C站举办的这一个“猿创征文”的活动,向大家分享一个我的web前端的技术成长之路。
作为今年刚刚步入社会的99后的电子信息工程的学生,我在学校接触到的第一门编程语言科目虽不是前端,(我第一次接触到的编程语言是C语言),也大家一样,第一次入大学的校门的那一刻起,我们都是怀着好奇心、满满的期待我们的大学生活的,和大家一样,我打出的第一段代码也是“Hello World!!!”。接触前端这一门技术都是很晚的,那应该来说是大三的时候,我加入了毕设导师的项目,我成为了前端的小组成员,一步步的看着组内的成员一个个学不下去,我坚持了下来,到当上了当时项目开发前端小组的组长,我很开心,当然压力也很大!!!


因为导师是一个啥都懂一点的工程师,但是唯独不懂web前端,所以给到我指导也只有推荐的网课视频学习以及书籍经费的支持,这一些支持当然也是很开心的!但是给我推荐的是哔站上面的一个黑马程序员跟着一起码起来的“基于vue的电商管理系统”,这算是我第一个码完成的前后端分离的系统了!当在暑假假期码完成的那一刻起,觉得成就感满满!因为学着学着,你知道了什么是vue、什么是vue-router、什么是webpack......等等!

当然很多时候自己码起来的vue项目是渲染不出来的,有很多报错的东西!当时一度想放弃,因为找bug的过程太痛苦了,不小心还会出现更多的bug! 但是庆幸的是自己还是坚持下来了!

这里是完成了电商管理系统的作品文件夹,这里就不打开了,卖个关子,因为文章下面还会展示一个更好的、自己的毕设作品的前端的管理系统。
我记得第一次接触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
- <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">
-
-
- <el-form-item prop="username">
- <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" size="mini" >el-input>
-
- 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>
-
- el-form-item>
-
- <el-form-item class="btns">
- <el-button type="primary" @click="login" size="mini" >el-button>
-
- <el-button type="info" @click="resetLoginForm" size="mini">el-button>
-
- 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学习的思维导图,供大家参考学习!大家喜欢的到时候可以问我要思维导图,当然我也会将思维导图编程笔迹化,喜欢读笔记的读者可以参考一下!

我只是一个正在上山的人,都是在前辈们的知识光环下才学习到这个地步的,自己还需要学的东西还有很多,我坚信的是:少看多写多练,少猜多问多学!我是丘比特惩罚陆,希望能和大家一起在代码的世界一起遨游!谢谢看过这篇文章的读友!