ToDoList

实战:构建纯前端存储的 ToDoList

实战项目的介绍,实战中使用到的技术,项目前端部分的构建等

2018-08-27侠课岛    初级拔高       

前端/前端/客户端存储 13     0     1643

在前面的章节中,我们介绍了客户端存储的相关技术并进行了简单的练习。不知道各位小伙伴掌握的怎么样了呢?这一章我们将把理论用到实践上来,来制作一个较为完整的项目。

7.1 项目介绍

ToDoList 在现在也经常被作为一个练手的例子,特别是 MVVM 框架(如 React、Vue)等。这一次我们也把 ToDoList 作为我们的实战内容。

在项目开始前,我们先梳理一下我们要做的功能。对于一个 ToDoList 来说,最基础的就是创建任务、修改任务、更新任务三个部分。还是老样子,我们画个图帮助我们理解。

7.2 使用技术

由于 ToDoList 的特性,我们使用 Vue 作为框架。在存储上,因为是实战为目的,所以我们使用 PouchDB 作为我们的前端存储。对于整个项目,我们使用 Vue-cli 来搭建一个脚手架。最后为了页面的美观(毕竟是实战项目),我们使用 iView 来做布局。

整个技术栈可以概括为下面三个部分。

  1. 前端:Vue + iView
  2. 存储:PouchDB
  3. 脚手架:Vue-cli

这样就是一个完整的项目,并且把存储放在了客户端(前端)来做。因此不光需要我们前端方面的基础也需要我们对原来后端的开发有一定的了解。

7.3 前端部分构建

环境搭建

前端部分的构建我们采用 vue-cli 作为脚手架,选择一个文件夹,输入 vue init webpack 然后根据提示选择需要安装的部分。对于这个项目我们只需要 Vue 本体就足够了,vue-router 我们可以忽略。另外 ESLint、测试库之类的我们可以根据自己的需要来安装。

安装完成后,vue-cli 会帮我们生成下面这样的目录结构。

搭建好环境后先别急着动手,在这个项目中 iView 和我们要用的 CSS 预处理器还需要我们自己搭建,下面我们分别安装一下。

# 安装 iView
npm install iview --save
# 安装 node-sass 和 sass-loader
npm install --save-dev node-sass sass-loader

安装完成后,我们在 main.js 里配置一下 iView。这样我们就可以在项目中自由地使用 iView 的组件了。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

当然,也别忘了在 webpack.base.conf.js 中配置一下 SCSS 的 loader,不然我们在使用 SCSS 语法时会报错。

...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      // 添加 scss loader
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

配置好之后,我们输入 npm run dev 启动项目,项目默认在 8080 端口。打开浏览器输入 localhost:8080 出现下面的页面,就代表配置成功了。

页面部分正式开发

配置完成之后,我们就准备正式开发了。由于引入了 iView 作为 UI 库,我们可以很方便地搭好页面的框架。主页我们采用左右布局的方式,左边为菜单栏。右边为显示的内容。 注:这一部分涉及到 vue 开发的相关知识,如果不熟悉的小伙伴可以先去 vue 的官网或者相关的课程了解一下。

因为项目简单,所以我们只需要再写一个任务的组件放在 App.vue 中就行。任务的组件我们就直接套用 iView 的 Card 组件。我们切换到项目的目录,直接输入 npm run dev 就可以启动一个本地服务器,然后输入 localhost:8080 就可以看到效果。

下面我们来看一下代码。首先是任务组件的代码,任务组件主要负责任务的展示以及状态更新和删除操作。

<template>
  <div class="card-wrapper">
    <Card>
      <div slot="title"
           class="task-title">
        <p class="title">{{taskNo}}. {{task.title}}</p>
        <div class="btn-wrapper">
          <div class="title-btn" v-if="mode === 'doing'">
            <Poptip confirm
                    :transfer="true"
                    title="确定完成此任务吗?"
                    @on-ok="completeTask">
              <Button type="primary"
                      size="small"
                      ghost
                      icon="md-create"></Button>
            </Poptip>
          </div>
          <div class="title-btn">
            <Poptip confirm
                    :transfer="true"
                    title="确定要删除此任务吗?"
                    @on-ok="deleteTask">
              <Button type="error"
                      size="small"
                      ghost
                      icon="md-trash"></Button>
            </Poptip>
          </div>
        </div>
      </div>
      <p class="task-content">
        {{task.content}}
      </p>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'TaskCard',
  components: {},
  props: {
    task: {
      type: Object,
      required: true
    },
    taskNo: {
      type: Number,
      required: true
    },
    mode: {
      type: String,
      default: 'doing'
    }
  },
  data () {
    return {
    }
  },
  watch: {},
  computed: {},
  methods: {
    completeTask: function () { },
    deleteTask: function () { }
  },
  created () { },
  mounted () { }
}
</script>
<style lang="scss" scoped>
.card-wrapper {
  .task-title {
    display: flex;
    justify-content: space-between;

    .btn-wrapper {
      display: flex;

      .title-btn {
        margin-left: 0.5rem;
      }
    }
  }
}
</style>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

13

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?