实战：使用 Lumen 和 Vue 构建个人清单应用（五）前端篇

这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

使用 Vue-Cli3.x 创建前端项目

上面我们完成了用户模块和清单模块的后台接口开发以及测试，那么我们接下来开始前端项目的创建以及部分组件的开发，样式部分我会简单略过，尽可能的让你看懂。安装 Vue-Cli3：

npm install -g @vue/cli

创建项目：todo

vue create todo

第一步它会提示你是否选用默认的配置（babel，eslint），我们选择第二个自定义的配置（方向键选择）然后勾选所需要的扩展，方向键移动，空格选择下一步会提示是否启用 history 模式，我们输入 Y 下一步选择 CSS 预处理器，这里我选择 less，你可以选择一个自己喜欢的选择 package.json 最后一步会提示是否保存当前配置为模板，你们自己决定吧创建完成后进入项目目录，执行 npm run serve 运行项目，打开浏览器输入地址即可访问

Axios 封装和前端 API 管理

我们采用简单的封装 http 请求，比如响应和请求的拦截，以及请求时长等等，并在此之上进行 API 的统一管理，而不是每次请求都要写一遍接口地址。 http.js

// 创建axios实例
var instance = axios.create({
  timeout: 1000 * 12
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    const token = Cookies.get('token');
    token && (config.headers.Authorization = 'Bearer ' + token);
    return config;
  },
  error => Promise.error(error))

// 响应拦截器
instance.interceptors.response.use(
  // 请求成功
  res =>
  res.status == 200 ? Promise.resolve(res.data) : errorHandle(res.status, res.data),
  // 请求失败
  error => {
    const {
      response
    } = error;
    if (response) {
      errorHandle(response.status, response);
      return Promise.reject(response);
    } else {
      // 断网处理
    }
  }
);

然后在 api.js 中去封转各个 API 的方法

import axios from "../request/http";
import {
  cfg
} from "@/utils/config";

const api = {
  login(params) {
    return axios.post(`${cfg.DOMAIN}/user/login`, params);
  },
  register(params) {
    return axios.post(`${cfg.DOMAIN}/user/register`, params);
  },
  logout(params) {
    return axios.post(`${cfg.DOMAIN}/user/logout`, params);
  },
  updateUserInfo(params) {
    return axios.post(`${cfg.DOMAIN}/user/updateUserInfo`, params);
  },
  resetPassword(params) {
    return axios.post(`${cfg.DOMAIN}/user/resetPassword`, params);
  },
  getTodoList() {
    return axios.get(`${cfg.DOMAIN}/todo/getTodoList`);
  },
  addTodo(params) {
    return axios.post(`${cfg.DOMAIN}/todo/addTodo`, params);
  },
  updateTodo(params) {
    return axios.post(`${cfg.DOMAIN}/todo/updateTodo`, params);
  },
  delTodo(params) {
    return axios.post(`${cfg.DOMAIN}/todo/delTodo`, params);
  },
}

export default api;

清单组件的封装

<template>
  <div :class="[todo_info.status==1?'item':'item check']">
    <!-- 左侧CHECKBOX和内容 -->
    <div class="left">
      <p>
        <span class="checkbox" @click="updateTodo"></span>
        <span class="content">{{todo_info.content}}</span>
      </p>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <p @click="delTodo" v-if="todo_info.status==1">删除</p>
      <span v-else>已完成</span>
    </div>
  </div>
</template>

<script>
import common from "../mixins/common";
export default {
  name: "todo-list",
  mixins: [common],
  props: {
    todo_info: null // 代办内容信息
  },
  methods: {
    // 删除TODO
    delTodo() {
      this.$emit("del", this.todo_info.todo_id);
    },
    // 更新TODO状态
    updateTodo(todo_id) {
      this.$emit("udpate", {
        todo_id: this.todo_info.todo_id,
        status: this.todo_info.status == 1 ? 2 : 1
      });
    }
  }
};
</script>

<template v-for="(item,index) in todo_list">
  <todo-list :key="index" :todo_info="item" @del="delTodo" @udpate="udpateTodo"></todo-list>
</template>

项目上线和总结

我们已经准备好了前端和后端的项目，如果我们要部署到服务器，需要注意些什么？ Lumen 的项目，我们用 .env 文件去配置如数据库信息的一些变量，如果你用了Git或其它版本管理工具，这个文件肯定是不能提交上去的，否则你的数据库信息就泄露了。所以我们要将 .env 文件和 vendor（依赖包）目录加入忽略文件，以防被提交上去。同理，前端采用 npm 安装的依赖包 node_modules 也不能提交上去，毕竟这玩意体积还不小，我们只需要提交核心代码即可，然后在服务器去进行配置和安装依赖。

写在最后

你可以发现这确实很简单，但也存在很多需要优化的地方，比如接口返回是有时长的，操作不顺手，需要等待接口回来页面才有更新，这是一个点。此外，当数据多的时候，还需要一个加载更多的按钮，虽然接口有了分页，但是前端要怎么实现？过于简单，肯定是没人会用的，我们能不能找个方向去更新迭代？比如像自动同步、多人协同、清单文件夹等迫切的需求，或者做一些足够差异化的亮点，比如日程提醒、倒计时、纪念日等等。我们已经有了接口，我们还可以利用跨平台的框架，去用一份工作，实现 iOS、Android、桌面端等多端的应用，覆盖更多的用户。这些事情，已经有很多人，很多公司去实现了，并且做的非常好，我只是提供一个思路，再小的东西，也经不住更新迭代，会变得越来越强大。一个产品刚出来都是不被人看好的，谁知道它会遇到什么样的产品经理和程序员呢？你肯定不想每天都待在写字楼里写代码，程序员是极具创造性的人群，那还不如去经营一款自己的产品，找好方向，不断的去更新迭代。加油吧，孩~