关于前端:Vue3-Typescript-Axios-全栈开发教程手把手教你写待办清单APP

本文完整版：《Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP》

Vue3 的源码应用 TypeScript 编写，而 TypeScript 是 JS 的一个超集，次要提供对 ES6 的反对，以及更棒的代码可读性和高维护性。Axios 是基于 Promise 的 HTTP 申请库，它用在 node.js 和浏览器里，在本教程中咱们应用 Vue3 Typescript 配合 Axios 通过 Get / Post / Put / Delete 申请与后端通信。

本文通过手把手教你写一个前端「待办清单」app，率领大家具体了解 Vue3 Typescript 与 Axios 如何配置及如何与后端通信，助你成为 Vue3 Typescript 与 Axios 全栈开发工程师。

本教程每段代码我都亲手测过，保障百分百没有谬误，请关上你的 terminal 追随本教程一起操作，从这里开始，成为一名全栈工程师。

如果你正在搭建后盾管理工具，又不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可疾速搭建属于你本人的后盾管理工具，一周工作量缩减至一天，详见本文文末。

「待办清单」app 实现概览

咱们搭建的「待办清单」app 蕴含以下几个性能/页面

1.首页：展现「待办清单」的列表，可点击查看清单具体及状态。

2.首页搜寻：首页有搜寻框，可搜寻清单。

3.新增清单：能够新建一个清单。

4.编辑清单：可对清单内容进行增删改查

「新增清单页」，提交新工作到数据库

「工作状态更新页」，批改待办工作的详情和状态并提交到数据库中

如果你追随本教程一步步来，最终你也能够把 Vue3 Typescript + Axios +Vue Router 跑起来并公布本人对「待办清单」app

前端局部 - Vue3 Typescript + Axios +Vue Router + 本人封装组件

我先来解说一下前端各局部的性能，如果你没看懂也没关系，追随教程一步一步走，全副实现后再回来看这个局部，你会恍然大悟。

App（利用自身）：最外层，用户可看到的前端，用户指令从这里进入。
Vue Router（路由）：路由依据用户指令抉择指向三个组件（Components）中的一个。
Components（组件）：组件是咱们写的性能页，本教程带大家一起写三个组件。
TodoDataService：用户在组件中 CRUD 数据，数据依据 TodoDataService 中的规定进行组装。
axios（API 调取）：axios 会依据 TodoDataService 中的规定与后端 API 通信替换数据。

前端 Vue3 Typescript 我的项目构造

简略讲一下各文件的作用，本教程后文将手把手教你写每一个配置文件及他们所有的源码

package.json 蕴含 5 个次要模块：Vue、typescript、Vue-router、axios、bootstrap。
有 3 个组件（性能页面）：TodoList、Todo、 AddTodo
router.js 为每个组件（性能页面）定义路由。
http-common.js 是 axios 初始化信息，标记了与后端 API 通信的地址
TodoDataService 具备向 API 发送 HTTP 申请的办法。
vue.config.js 设置 Vue 拜访端口

上面，咱们正式进入前后端搭建实战环节，肯定要追随本教程一起操作，本人亲手实际是学会的根底，关上你的 terminal ，咱们一起来。

Vue3 Typescript 装置教程及配置

本教程实用于 Win / Linux / MacOS

装置 Vue3 ，应用 npm 装置 Vue

sudo npm install -g @vue/cli

接着咱们创立一个 Vue 的我的项目，运行命令：

vue create vue3-ypescript-axios-todolist-kalacloud

运行起来，你会看到几个选项，抉择 Manually select features，咱们来自定义装置，这样能够抉择 Vue3 + Typescript 装置。

留神抉择 TypeScript，默认是 Vue3 装置

装置实现后，会生成一个「vue3-ypescript-axios-todolist-kalacloud」目录，咱们所有的前端代码都会存在这里。

cd vue-kalacloud-comroot@kalacloud.com:~/vue3-ypescript-axios-todolist-kalacloud$

cd 到这个目录下，接下来咱们要开始配置 Vue 的开发环境。

扩大浏览《顶级开源 vue 表单设计器测评举荐》

在 Vue3 Typescript 中装置应用 Bootstrap

Bootstrap 最后是由 Twitter 两名工程师开发的响应式开源框架，简洁优雅，自适应PC和挪动端。当初曾经是寰球应用最受欢迎的独立 CSS 框架之一。

咱们先来把它装置到 Vue 中，在「vue3-ypescript-axios-todolist-kalacloud」根目录执行装置命令：

npm install bootstrap jquery popper.js

而后关上 /src/main.ts 文件，导入 Bootstrap：

import { createApp } from 'vue'import App from './App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'

特地提醒：为了防止奇怪的谬误，请残缺复制本教程中的全副代码，应用齐全替换的形式将教程中的代码粘贴到对应的文件中。

解决前端问题太麻烦？

试试卡拉云，仅需拖拽组件连贯 API 和数据库间接生成后盾管理系统，将两个月的工期升高至两天

在 Vue3 Typescript 中装置应用 Vue Router

Vue Router 是 Vue 的官网路由，与 Vue 深度整合，让构建响应式单页面变得非常简单快捷。

在我的项目根目录执行装置 Vue Router 的命令：

而后在 /src 文件夹中新建一个文件 router.ts 并定义一下 Vue 的路由

（在 Terminal 里，你能够应用 nano router.ts 的形式新建 js 文件并关上编辑器粘贴代码）

import { createWebHistory, createRouter } from "vue-router";import { RouteRecordRaw } from "vue-router";const routes: Array<RouteRecordRaw> = [  {    path: "/",    alias: "/todo",    name: "todo",    component: () => import("./components/TodoList.vue")  },  {    path: "/todo/:id",    name: "todo-details",    component: () => import("./components/Todo.vue")  },  {    path: "/add",    name: "add",    component: () => import("./components/AddTodo.vue")  }];const router = createRouter({  history: createWebHistory(),  routes,});export default router;

在 router.ts 中咱们为每个页面创立一个路由：

path：路由指向的 URL 门路
name：路由指向这个页面时应用的名字
component：路由调用此页面时，要加在的组件（这个组件咱们马上一起入手写）

而后咱们关上 /src/main.ts，在这里加上 router 路由信息 (最初一行)：

import { createApp } from 'vue'import App from './App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'import router from './router'createApp(App).use(router).mount('#app')

最初一步，在/src目录下创立 shims-vue.d.ts

import VueRouter, { Route } from 'vue-router'/* eslint-disable */declare module '*.vue' {  import type { DefineComponent } from 'vue'  const component: DefineComponent<{}, {}, any>  export default component}declare module 'vue/types/vue' {  interface Vue {    $router: VueRouter  }}

当初，Vue 申明了 $router 这样就不会报错了。

扩大浏览《5款开源vue 挪动端 ui 组件库测评举荐》

在 Vue3 Typescript 中增加导航栏和 Router View

接下来，咱们关上 /src/App.vue 删掉外面全副代码，而后退出咱们本人我的项目的导航栏和 Router View ：

<template>  <div id="app">    <nav class="navbar navbar-expand navbar-dark bg-dark">      <router-link to="/" class="navbar-brand">卡拉云_kalacloud.com</router-link>      <div class="navbar-nav mr-auto">        <li class="nav-item">          <router-link to="/todo" class="nav-link">工作清单</router-link>        </li>        <li class="nav-item">          <router-link to="/add" class="nav-link">新增工作</router-link>        </li>      </div>    </nav>    <div class="container mt-3">      <router-view />    </div>  </div></template><script lang="ts">import { defineComponent } from "vue";export default defineComponent({  name: "App",});</script>

特地提醒：为了防止奇怪的谬误，请残缺复制本教程中的全副代码，应用齐全替换的形式将教程中的代码粘贴到对应的文件中。

扩大浏览《12款开源 vue ui 组件库框架测评举荐》

在 Vue3 Typescript 装置 Axios 并初始化 HTTP 客户端

Axios 是一个基于 Promise 的 HTTP 申请库，它用在 node.js 和浏览器里，在本教程中咱们应用 Axios 通过 Get / Post / Put / Delete 申请与后端进行交互。

咱们先来装置 Axios：

而后，在 /src 文件夹下，创立一个 http-common.ts 文件并复制以下代码进去：

import axios from "axios";export default axios.create({  baseURL: "http://localhost:8080/api",  headers: {    "Content-type": "application/json"  }});

这里的 baseURL 是后端的 REST API url ，记得改成你的服务器配置。

如果你是萌新，没看懂，也没有关系，这里不必改。咱们将在本教程的「后端」局部，教你配置后端服务器。

让 Vue3 Typescript 能够通过 Axios 发送 HTTP 申请

咱们要给 Axios 建设一套与后端服务器沟通的规定，通知 Axios 应用这套规定去后端拿那数据。

咱们要在 /src/services/ 创立一个TodoDataService.ts

如果没有 services 文件夹，先建一个，而后在文件夹里新建TodoDataService.ts 并复制以下代码。

（文件地位：/src/services/TodoDataService.ts ）

import http from "@/http-common";class TodoDataService {  getAll(): Promise<any> {    return http.get("/todos");  }  get(id: any): Promise<any> {    return http.get(`/todos/${id}`);  }  create(data: any): Promise<any> {    return http.post("/todos", data);  }  update(id: any, data: any): Promise<any> {    return http.put(`/todos/${id}`, data);  }  delete(id: any): Promise<any> {    return http.delete(`/todos/${id}`);  }  deleteAll(): Promise<any>{    return http.delete(`/todos`);  }  findByTitle(title: string): Promise<any> {    return http.get(`/todos?title=${title}`);  }}export default new TodoDataService();

最初一步，创立「待办事宜」界面和相应数据接口

新建 types/todo.ts 并定义 Todo 接口

export default interface Todo {  id: null;  title: string;  description: string;  published: boolean;}

新建 types/ResponseData.ts 并定义 ResponseData 接口

export default interface ResponseData {  data: any;}

扩大浏览《如何在 vue 中退出图表 - vue echarts 应用教程》

创立 Vue3 Typescript 组件

Vue3 Typescript 与旧版本不同，须要给 ts 调配 lang 属性标签。

Vue 个别是这么来定义组件：

而当初，咱们这么定义，这种模式，大家应该在前文曾经看到了。

import { defineComponent } from 'vue'export default defineComponent({ ... })

接着咱们来写 Vue Router 中定义的三个组件，也就是咱们 app 页面上会显示的三个响应页。

「新增 ToDo 组件」 - AddTodo.vue

上图为「AddTodo.vue」最终款式

这个组件用于向数据库中新增 ToDo 数据，它蕴含 2 个字段：title 和 description 。

用它来调用咱们前一节写的 TodoDataService.create()

在 components 文件夹下创立 AddTodo.vue ，填入以下代码：

文件地位：/src/components/AddTodo.vue

<template>  <div class="submit-form">    <div v-if="!submitted">      <div class="form-group">        <label for="title">工作</label>        <input          type="text"          class="form-control"          id="title"          required          v-model="todo.title"          name="title"        />      </div>      <div class="form-group">        <label for="description">详情</label>        <input          class="form-control"          id="todo"          required          v-model="todo.description"          name="description"        />      </div>      <button @click="saveTodo" class="btn btn-success">提交</button>    </div>    <div v-else>      <h4>提交胜利</h4>      <button class="btn btn-success" @click="newtodo">增加</button>    </div>  </div></template><script lang="ts">import { defineComponent } from "vue";import TodoDataService from "@/services/TodoDataService";import Todo from "@/types/Todo";import ResponseData from "@/types/ResponseData";export default defineComponent({  name: "add-todo",  data() {    return {      todo: {        id: null,        title: "",        description: "",        published: false,      } as Todo,      submitted: false,    };  },  methods: {    saveTodo() {      let data = {        title: this.todo.title,        description: this.todo.description,      };      TodoDataService.create(data)        .then((response: ResponseData) => {          this.todo.id = response.data.id;          console.log(response.data);          this.submitted = true;        })        .catch((e: Error) => {          console.log(e);        });    },    newTodo() {      this.submitted = false;      this.todo = {} as Todo;    },  },});</script><style>.submit-form {  max-width: 300px;  margin: auto;}</style>

扩大浏览《5款开源 vue table 表格组件举荐》

「ToDO 列表组件」 - TodoList.vue

上图为「TodoList.vue」最终成果

该组件调用 3 个 TodoDataService 办法：

getAll()
deleteAll()
findByTitle()

在 components 文件夹下创立 TodoList.vue，填入以下代码：

文件地位：/src/components/TodoList.vue

<template>  <div class="list row">    <div class="col-md-8">      <div class="input-group mb-3">        <input          type="text"          class="form-control"          placeholder="搜寻待办清单"          v-model="title"        />        <div class="input-group-append">          <button            class="btn btn-outline-secondary"            type="button"            @click="searchTitle"          >            Search          </button>        </div>      </div>    </div>    <div class="col-md-6">      <h4>待办清单</h4>      <ul class="list-group">        <li          class="list-group-item"          :class="{ active: index == currentIndex }"          v-for="(todo, index) in todos"          :key="index"          @click="setActiveTodo(todo, index)"        >          {{ todo.title }}        </li>      </ul>      <button class="m-3 btn btn-sm btn-danger" @click="removeAllTodos">         删除所有清单      </button>    </div>    <div class="col-md-6">      <div v-if="currentTodo.id">        <h4>待办详情</h4>        <div>          <label><strong>工作:</strong></label> {{ currentTodo.title }}        </div>        <div>          <label><strong>详情:</strong></label>          {{ currentTodo.description }}        </div>        <div>          <label><strong>状态:</strong></label>          {{ currentTodo.published ? "Published" : "Pending" }}        </div>        <router-link          :to="'/todos/' + currentTodo.id"          class="badge badge-warning"          >编辑</router-link        >      </div>      <div v-else>        <br />        <p>点击右侧列表查看详情</p>      </div>    </div>  </div></template><script lang="ts">import { defineComponent } from "vue";import TodoDataService from "@/services/TodoDataService";import Todo from "@/types/Todo";import ResponseData from "@/types/ResponseData";export default defineComponent({  name: "todos-list",  data() {    return {      todos: [] as Todo[],      currentTodo: {} as Todo,      currentIndex: -1,      title: "",    };  },  methods: {    retrieveTodos() {      TodoDataService.getAll()        .then((response: ResponseData) => {          this.todos = response.data;          console.log(response.data);        })        .catch((e: Error) => {          console.log(e);        });    },    refreshList() {      this.retrieveTodos();      this.currentTodo = {} as Todo;      this.currentIndex = -1;    },    setActiveTodo(todo: Todo, index = -1) {      this.currentTodo = todo;      this.currentIndex = index;    },    removeAllTodos() {      TodoDataService.deleteAll()        .then((response: ResponseData) => {          console.log(response.data);          this.refreshList();        })        .catch((e: Error) => {          console.log(e);        });    },    searchTitle() {      TodoDataService.findByTitle(this.title)        .then((response: ResponseData) => {          this.todos = response.data;          this.setActiveTodo({} as Todo);          console.log(response.data);        })        .catch((e: Error) => {          console.log(e);        });    },  },  mounted() {    this.retrieveTodos();  },});</script><style>.list {  text-align: left;  max-width: 750px;  margin: auto;}</style>

扩大浏览《7款开源 vue admin 后盾治理框架举荐》

「 ToDo 内容更新组件」 - Todo.vue

上图为「Todo.vue」最终实现成果

在 components 文件夹下创立 Todo.vue，填入以下代码：

文件地位：/src/components/Todo.vue

<template>  <div v-if="currentTodo.id" class="edit-form">    <h4>待办事宜</h4>    <form>      <div class="form-group">        <label for="title">工作:</label>        <input          type="text"          class="form-control"          id="title"          v-model="currentTodo.title"        />      </div>      <div class="form-group">        <label for="description">详情:</label>        <input          type="text"          class="form-control"          id="description"          v-model="currentTodo.description"        />      </div>      <div class="form-group">        <label><strong>状态:</strong></label>        {{ currentTodo.published ? "Published" : "Pending" }}      </div>    </form>    <button      class="badge badge-primary mr-2"      v-if="currentTodo.published"      @click="updatePublished(false)"    >      未实现    </button>    <button      v-else      class="badge badge-primary mr-2"      @click="updatePublished(true)"    >      实现    </button>    <button class="badge badge-danger mr-2" @click="deleteTodo">      删除    </button>    <button type="submit" class="badge badge-success" @click="updateTodo">      更新    </button>    <p>{{ message }}</p>  </div>  <div v-else>    <br />    <p>Please click on a Todo...</p>  </div></template><script lang="ts">import { defineComponent } from "vue";import TodoDataService from "@/services/TodoDataService";import Todo from "@/types/Todo";import ResponseData from "@/types/ResponseData";export default defineComponent({  name: "todo",  data() {    return {      currentTodo: {} as Todo,      message: "",    };  },  methods: {    getTodo(id: any) {      TodoDataService.get(id)        .then((response: ResponseData) => {          this.currentTodo = response.data;          console.log(response.data);        })        .catch((e: Error) => {          console.log(e);        });    },    updatePublished(status: boolean) {      let data = {        id: this.currentTodo.id,        title: this.currentTodo.title,        description: this.currentTodo.description,        published: status,      };      TodoDataService.update(this.currentTodo.id, data)        .then((response: ResponseData) => {          console.log(response.data);          this.currentTodo.published = status;          this.message = "状态批改胜利";        })        .catch((e: Error) => {          console.log(e);        });    },    updateTodo() {      TodoDataService.update(this.currentTodo.id, this.currentTodo)        .then((response: ResponseData) => {          console.log(response.data);          this.message = "信息更新胜利";        })        .catch((e: Error) => {          console.log(e);        });    },    deleteTodo() {      TodoDataService.delete(this.currentTodo.id)        .then((response: ResponseData) => {          console.log(response.data);          this.$router.push({ name: "todos" });        })        .catch((e: Error) => {          console.log(e);        });    },  },  mounted() {    this.message = "";    this.getTodo(this.$route.params.id);  },});</script><style>.edit-form {  max-width: 300px;  margin: auto;}</style>

设置 Vue3 Typescript 我的项目拜访端口

在 Vue3 我的项目根目录创立 vue.config.js 文件，代码如下：

文件地位：根目录/vue.config.js

module.exports = {  devServer: {    port: 8081  }}

咱们曾经设置了咱们的应用程序在端口上运行 8081。

扩大浏览《Element Plus for Vue 3 入门教程》

运行 Vue3 Typescript 并在浏览器里查看成果

至此，前端局部就全副实现了，咱们来运行一下刚刚搭建的 Vue 前端代码，在浏览器里观赏一下你本人的开发成绩。

在我的项目根目录执行：npm run serve 而后关上浏览器，输出http://localhost:8081/，在浏览器中咱们能够看到前端页面曾经显示进去了。

如果你也看到和下图相似的界面，这阐明你的 Vue3 Typescript 曾经搭建实现，祝贺。

因为咱们的后端还没有搭建，前端界面还没有连贯数据，所以只有轮廓没有数据。

我将在下一篇文章中解说如何应用 node.js + Express + Sequelize + MySQL 搭建后端框架，使前后端联通，最终实现「待办事宜」ap

Vue3 Typescript + Axios 教程总结

本文具体解说新版 Vue3 Typescript 与旧版 Vue 有什么区别及代码上的不同，以及 Axios 怎么与后端通信。其实如果你基本不想解决简单的前端问题，齐全能够应用卡拉云来搭建前端工具，卡拉云内置多种罕用组件，无需懂任何前端，仅需拖拽即可疾速生成。不须要配置 Axios ，一键连贯后端数据源。

卡拉云可帮你疾速搭建企业外部工具，下图为应用卡拉云搭建的外部广告投放监测零碎，无需懂前端，仅需拖拽组件，10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具，理解更多。

卡拉云是新一代低代码开发平台，与前端框架 Vue、React等相比，卡拉云的劣势在于不必首先搭建开发环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。立刻收费试用卡拉云。

扩大浏览：

Vue form 表单异步验证终极教程
最好用的 6 款 MongoDB GUI 管理工具横向测评
手把手教你 Vue + Node.js + express 搭建「文件上传」治理后盾
7 款顶级开源 laravel admin 后盾框架测评举荐