TodoList：适合初学者的vue+node小项目

lovXin 发布于2019-06-26 17:59 / 1164人阅读

摘要：一个简单的项目，前端由实现，后端由，数据库采用。路由项目启动项目进入项目，安装依赖安装客户端依赖安装服务器端依赖启动项目启动服务器启动客户端开发模式浏览器访问完整代码点我，有用的话给个哦，谢谢

TodoList

一个简单的vue + nodejs项目，前端由vue实现，后端由nodejs(express)，数据库采用mongodb。

github项目地址

在线效果展示

前端

使用vue-cli脚手架， vue+axio

实现的功能

(1) 单条添加todo

(2) 单条删除todo

(3) 双击编辑todo

(4) 单条todo已完成相应样式状态改变

(5) 全部todo是已完成相应样式状态改变

(6) 清除全部已完成todos

(7) 待办todos数量显示

(8) 所有todos，已完成todos，未完成todos筛选

接口展示

    import axios from "axios"
    
    const baseUrl =
    process.env.NODE_ENV === "development" ?
    "https://nei.netease.com/api/apimock/f3e5d93d5eaceda5a624378374ad5cd7"
    : "http://148.70.150.147:8080"
    
    export const getAllTask = params => { return axios.get(`${baseUrl}/api/all`, {params: params}) }
    export const addTask = params => { return axios.post(`${baseUrl}/api/add`, params).then(res => res.data) }
    export const deleteTask = params => { return axios.post(`${baseUrl}/api/deletes`, params).then(res => res.data) }
    export const updateTask = params => { return axios.post(`${baseUrl}/api/update`, params).then(res => res.data) }
    export const updateManyTask = params => { return axios.post(`${baseUrl}/api/updateMany`, params).then(res => res.data) }
    export const deleteCompletedTask = params => { return axios.post(`${baseUrl}/api/deletemany`, params) }

后端

1.后台由express + mongoodb构建。

2.路由

     module.exports = function(app) {
         app.get("/api/all", TodoController.getAll);
         app.post("/api/add", TodoController.newTodo);
         app.post("/api/deletes", TodoController.deleteOne);
         app.post("/api/deletemany", TodoController.deleteAllCompleted);
         app.post("/api/update", TodoController.updateOne);
         app.post("/api/updateMany", TodoController.updateMany);
             ....

项目启动

clone 项目

git clone https://github.com/chengbo199...

进入项目，安装依赖

// 安装客户端依赖
cd client
npm install

// 安装服务器端依赖
cd server
npm install

启动项目

 启动服务器：npm start
 启动客户端：npm run dev(开发模式)
 浏览器访问 [http://localhost:8080](http://localhost:8080)

完整代码点我，有用的话给个star哦，谢谢！！

GPU云服务器云服务器适合初学者的linux 适合初学者大数据适合初学者 linux适合初学者

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19488.html

todolist--初学者练习使用vuejs方法

摘要：我们都知道，现在的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用写的一个的整个过程。我们都知道，现在Vuejs的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用vue写的一个todolist的整个过程。 1.新建一个文件夹，配置环境变量安装的命令行有： npm init -y npm i -S tod...

NSFish 2019-08-21 17:37 评论0 收藏0
Vue中如何使用方法、计算属性或观察者

摘要：如何实现一个查看在线在中我们放置了一些事件处理方法，我们可以在事件绑定中直接应用，不会依赖于任何的属性。例如计算属性依赖于属性，只要属性发生变化，我们的也会发生变化，从而筛选出我们需要的数据。熟悉 Vue 的都知道方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的，但是...

zhaot 2019-08-23 12:37 评论0 收藏0
应用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其实这里还是有漏洞的，坐等高手指出来微笑脸后台没有用生成一个完整的架构。来自不同视图的行为需要变更同一状态。最近对vue很感兴趣，趁闲暇时间，模仿了wunderlist里面的部分功能，编写了前后端分离的基于vue技术栈和express的todolist小项目。写这篇博文来总结思考下。项目所在github,可以自行参考克隆。本人博客总体概览整个项目最终做成的样子如下： showI...

voidking 2019-08-20 16:09 评论0 收藏0
用mpvue写个玩意儿玩玩

摘要：微信开发工具仅用于调试。下面可以配置一个微信小程序的参数，文件就是我们要编辑的页面了。补充一下，调用之后获取了经纬度之后，还可以玩玩微信的组件。试着用微信写一个组件。下周公司要搞黑客马拉松了，组里可能会做个小程序。然后看到了mpvue感觉还不错，于是就打算试试水。用vue写小程序听上去美滋滋。那么先开始吧！全局安装 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 评论0 收藏0