猿创征文 | 初见乍惊欢,久处亦怦然--我web前端的技术成长之路

37 篇文章 4 订阅
9 篇文章 0 订阅

目录

致看此篇的读者

初识vue

分享毕设系统作品

分享七夕情人节码源(仅登录部分码源)

学习路线

祝福语


致看此篇的读者

    各位不管是新的朋友还是粉丝,大家好!很荣幸大家能在茫茫的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学习的思维导图,供大家参考学习!大家喜欢的到时候可以问我要思维导图,当然我也会将思维导图编程笔迹化,喜欢读笔记的读者可以参考一下!


祝福语

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丘比特惩罚陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值