如何一晚上学会并应用vue

如何一晚上学会vue？对于有编程基础但是vue啥也不懂的小白来说看起来似乎是一件不可思议事情——其实一开始我也是这么想的。

已知目前需求是写出一个学校新闻的vue项目，要求有美观的前端以及完备的后端还有可以交互的数据库。deadline是第二天上午九点，目前是下午的五点，自己两手空空，摆在面前的仅有学姐写的一个究极缝合且bug奇多的企业新闻。

手里的这个项目能有多离谱呢？一开始我拿到他的时候是这样子的：

这个是主页，虽然谈不上美观，但也还看得过去：

当我按照数据库里定义的用户密码来“游客登录”的时候，诡异的一幕来了：

我点击了一下“游客登录”，没有反应，我又点击了一下，他居然给我报错了！还提示我账号或者密码错误。哎我就寻思，这不是你在数据库里定义的账号密码吗怎么这都登录不进去？

但是当我点击弹窗中的确定按钮的时候，他居然奇迹般地登录进去了=-=

 好嘛，看来这是应用了新型密码技术，输入正确密码你第一次点击登录我不理你，第二次点击账号密码对了我一样给你报错，只有真正了解这个系统的人才登得进去，真行！不管怎么说，能登录进去就行。

不过， 咱也不明白人为啥一个页面会有五个滚动条...

你以为这就完了？更离谱的还在后面，但我点击“退出系统”的时候，他会是这个样子的：

好了，我已经大概能猜测到第二天老师会是拿什么样的眼神看我了...

抬头看看时间，现在是下午六点，我只好硬着头皮去改。可是，我对web开发这方面的认识仍然只存在于基础的H5、css以及少量的JavaScript代码，vue也只是听说过基本原理。

在这里我不得不强烈感谢一下建筑大学中某一位自从大一就迫不及待跑路转专业到软工的土木老哥对我的帮助，有一说一土木人改起代码来一点也不比软件人差，三下五除二通过一个if判定语句就轻松解决了登录弹窗问题。

首先是定义一个

var flag = false

然后再在if语句里遍历数据库，挨个判断是否与用户输入的一致，如果有，则设flag为true，然后break跳出循环直接登录，否则弹窗提示，真是秒极。具体实现方法如下：

this.axios.get('http://127.0.0.1:3000/api/user/queryWorker').then((response) => {
  this.worker = response.data
  console.log(this.worker[0].name)
  console.log(this.worker.length)
  for (let i = 0; i <= this.worker.length - 1; i++) {
    console.log(this.worker.length)
    var flag = false
    if (this.form.name === this.worker[i].name && this.form.password === this.worker[i].password) {
      this.$emit('Wfrontshow', this.wfrontshow)
      flag = true
      alert('登录成功！')
      break
    }
  } if (flag) {
  } else alert('账号或密码错误')
})

登录界面搞完了，然后就是那个神奇的主界面，再次感谢土木老哥给我的指导方法，让我知道vue该改哪些文件，也知道了vue其实改起来跟H5也差不多。我先是改了头部布局以及底部，但是发现底部总会有一条诡异的灰棒贯穿左右，怎么去也去不掉，我恼了直接把原本定义的<el-footer /el-footer>改成了<footer /footer>，这样做的好处就是可以全部清除他自带的样式，事实证明这很有用，原本烦人的灰条不见了。

接下来就是退出登录问题，我期期艾艾去问土木老哥该如何改，土木老哥黑着脸问我：“你以为我是神啊，我又不熟悉这个项目”，我哭着求他帮我想想办法，只见他稍作沉吟，大手一挥将“退出登录”四字绑定的login()方法重构为如下代码：

login () {
  window.location.href = 'http://localhost:8080/'
},

 然后尝试点击，果然正常地退回了登录界面。

我颤颤巍巍地问他：“这丫的真行吗？”他笑着对我说：“能运行不就没事了”

嗯，土木老哥笑起来也挺好看的，洋溢着不畏困难积极向上的心态。

然后就是想办法把那个新闻展示界面也弄好看一点，在这里我借鉴了湖南大学的新闻网系统，大概是这个样子的：

 

我原本的系统丑是丑了点，但好歹也是小卡片形式的！

我灵机一动有样学样地重构了小卡片的展示方法，具体细节就不明说了，因为时间有限，css样式直接照抄的，我坦白了，但是方法是我自己改的：

<el-container>
    <el-main  style="height: 850px; margin-left: 60px">
      <div class="allnews_title_img">综合要闻</div>
    <el-row v-if="show == true" style="height: 700px">
      <ul class="newsList">
        <li v-for="item in items" v-bind:key="item.id">
          <div class="img" @click="getdetail(item.id)">
            <img :src="require('../assets/' + item.src)" alt="" />
          </div>
          <div class="newsList_title">
            {{ item.title }}
          </div>
          <div class="sendtime">
            <div class="sendTime">
              {{ item.date }}
            </div>
            <div class="newList_more">
              <div class="img2"  @click = "getdetail(item.id)">查看</div>
            </div>
          </div>
        </li>
      </ul>
    </el-row>
    </el-main>
  <el-main>
    <router-view></router-view>
  </el-main>
</el-container>

也可以自定义每行容纳的小卡片个数：

<el-col :span="12" v-for="item in items" v-bind:key="item.id" >
<!-- 屏幕共分为24等份，span=12表示每个card占12份，每行共可以放12个card-->

 点击进入“关于我们”页面进入后是这样子的：

这完全就是一堆毫无样式的汉字的堆叠啊喂...

我没办法，只好将自己之前仿写过得我们学校的青年报扔了进去，登录界面我也换成了我们学校自己的背景图片，改了改按钮样式，经过我的不懈努力，这个项目最终的样子是这样的：

而且不管登录成功与否都会弹窗提示（再也不用思考他提示的到底是密码错误的登录失败还是密码正确的登录失败了....）

然后就是新闻展示的主页了：

别问我为啥打码，我怕被那位土木老哥认出来揍我

然后就是之前提到的我写的我们学校的青年报界面了：

主页面底部跟后台就不展示了，没啥好说的。期间又出现了各种各样莫名其妙的bug，但我都一一改完了，虽说都是小问题，答辩的时候也可以故意不展示蒙混过关，但这究竟是骗人的事情，我坚持改到最后一个bug消失。

现在抬头一看，已然夜半四点，我从前一天的晚上六点，经过十个小时的不懈努力，改出了一个虽然算不上美观但是最起码功能完善、没有bug的系统，想了想今天白天九点的答辩，我感觉 vue真特么简单。