zoukankan      html  css  js  c++  java
  • 工作日记(九):完整项目开发之编写前端vue代码

    2020.7.17

    今天上午领导开例行站会,组长大概汇报了下任务进度,暂时没有遇到开发上的问题。

    由于本人的接口已经开发完了,因此准备找点新活;后台一人一个接口,暂时不需要帮他们,就让组长问了下前端开发的进度。

    不问不知道,一问吓一跳,前端伙伴还没有开始编写前端页面。

    -------------------------------------------------------------------------------------------

    本人所在的小组需要2个前端页面(细分的话需要4个前端页面,不过有3个页面都类似),看起来页面数量少,不过单个页面的功能都不少。

    -------------------------------------------------------------------------------------------

    好吧,前端伙伴是新调来的(2人),不熟悉需求,并且还有之前的项目需要优先处理。

    -------------------------------------------------------------------------------------------

    结果,就是本人开始了开发前端vue页面的工作。

    已做好准备,本人的代码是保险措施,优先采用专业前端开发的页面;本人的代码如果到时候白写了就白写了吧,就当学习了。

    -------------------------------------------------------------------------------------------

    正式开始编写前端vue页面

    1.首先,本人想搞清楚vue框架启动时的加载顺序;百度了不少文章,终于整明白了,简要记录如下:

    (1) 执行:项目/public/index.html文件(这个页面的title标签可修改)

    (2) 执行:项目/src/main.js文件

    (3) 加载:项目/src/App.vue文件,用app.vue的templete替换index.html中的<div id="app"></div>  

          PS:App.vue文件内容很简单,如下:

    <template>
      <div id="app">
        <router-view />
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>

    请注意这个【<router-view />】标签,下一步会提到。

    (4) main.js中注入了路由文件,将对应的组件渲染到router-view中。

    (5) 路由文件:项目/src/router/index.js中,有一个【redirect: '/mylogin'】参数,这个参数决定了vue项目启动时显示的第一个页面是什么(例如mylogin页面),url具体对应的后缀为vue的页面也在这里配置。

    PS:刚下载好的项目包中已包含src/router/index.js文件,本人发现同事将原本的文件重命名为index000.js用来备份,又新建了一个index.js文件。

    2.找到项目/src/views目录,新建一个文件夹task,准备开发页面。这个文件夹即是本小组专用的。

    3.创建文件:项目/src/views/task/index.vue,编写本小组的index页面。

    4.创建文件夹与文件:项目/src/views/task/componets/other.vue,编写本小组需要的相关子页面。

    后记

    使用一下午时间将两个基本页面的布局大体实现了(html、css,虽然都堆到了一个vue文件中,不过还是可以分成这几部分),不过相关的js还没有实现。

    自我感觉效率还可以,由于对vue框架不是很熟悉(之前用过angular框架,类似但还是不太一样),感觉好多标签甚至不如原生的好用。

    今日已到下班时间,剩下的下周再说。

  • 相关阅读:
    JDBC事务处理
    JDBC之LOB数据类型
    使用JDBC驱动程序处理元数据
    JDBC之PreparedStatement
    JDBC主要API学习总结
    JDBC简介
    ForkJoinPool 分支/合并框架
    线程池
    线程八锁
    jQuery中的事件冒泡
  • 原文地址:https://www.cnblogs.com/codeToSuccess/p/13906229.html
Copyright © 2011-2022 走看看