1，创建node框架，
2，在当前项目根目录创建一个js文件，在这个文件中写入连接数据库代码
代码如下：
var mongoose=require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017/student",{ useNewUrlParser: true },function(err){
if(err){
console.log('数据库连接失败')
}else{
console.log('数据库连接成功')
}
})
var Schema = mongoose.Schema;
// 创建一个模型
var UserSchema = new Schema({
name: String ,// 属性name，类型为String
num: Number ,
});
// 导出model模块
var User = mongoose.model('User', UserSchema);
module.exports = User;
3，在routes文件夹下配置路由
代码如下：
var express = require('express');
var router = express.Router();
var db = require('../db')
// 保存到数据库
router.post('/save', (req, res) => {
var dbs = new db({
name: req.body.name,
num: 1
});
dbs.save((err, data) => {
if (!err) {
res.send(data)
}
})
});
// 从数据库查询所有数据
router.get('/find', (req, res) => {
db.find({}, (err, data) => {
if (err) {
res.send('查询失败!')
} else {
res.send(data)
}
})
});
//点击改变num值为2 进入已完成
router.get('/update', (req, res) => {
var id = req.query.id
db.findByIdAndUpdate(id, {
num: 2
}, function (err, data) {
if (!err) {
res.send(data);
}
})
})
//点击改变num值为1 进入未完成
router.get('/update2', (req, res) => {
var id = req.query.id
db.findByIdAndUpdate(id, {
num: 1
}, function (err, data) {
if (!err) {
res.send(data);
}
})
})
//回车后保存
router.get('/update/gai', (req, res) => {
var id = req.query.id
var name = req.query.name
db.findByIdAndUpdate(id, {name}, function (err, data) {
if (!err) {
res.send(data);
}
})
})
//删除
router.get('/remove', (req, res) => {
db.remove({
_id: req.query.id
}, function (err) {
if (!err) {
console.log("删除成功！！！")
}
})
})
module.exports = router;
4，启动node项目
5，在vue中获取
代码如下：
<template>
<div style="gainsboro;height:640px">
<div class="top">
<h2>ToDoList</h2>
<!-- <form action="/mon/save" method="POST"> -->
<input type="text" v-model="kw" class="ipt" @keydown.enter="save" />
<!-- </form> -->
</div>
<div class="main">
<h3>正在进行({{wei}})</h3>
<div>
<div class="ys wei" v-for="(item,index) in list" :key="index" v-show="item.num==1">
<div>
<input class="check" type="checkbox" @click.prevent="towan(item._id)" />
<span>
<span v-if="ban!=index" @dblclick="update(index)">{{item.name}}</span>
<input class="text" focus type="text" v-model="item.name" @blur="enter(item)" @keydown.enter="enter(item)" v-if="ban==index" />
</span>
</div>
<div>
<span @click="del(item._id)" class="iconfont icon-cuowu-yuan-tianchong"></span>
</div>
</div>
</div>
<h3>已经完成({{yi}})</h3>
<div class="ys yi" v-for="(item,index) in list" :key="index" v-show="item.num==2">
<div>
<input type="checkbox" checked @click="towan2(item._id)" />
<span>
<span v-if="ban!=index" @dblclick="update(index)">{{item.name}}</span>
<input class="text" type="text" v-model="item.name" @blur="enter(item)" @keydown.enter="enter(item)" v-if="ban==index" />
</span>
</div>
<div>
<span @click="del(item._id)" class="iconfont icon-cuowu-yuan-tianchong"></span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
kw: "",
list: [],
show: true,
ban: -1
// wei:0,
};
},
//计算属性
computed: {
wei() {
let a = 0;
this.list.map(item => {
if (item.num == 1) {
a++;
}
});
return a;
},
yi() {
let a = 0;
this.list.map(item => {
if (item.num == 2) {
a++;
}
});
return a;
}
},
//初始化
created() {
this.$axios
.get("http://localhost:3001/users/find")
.then(res => {
console.log(res.data);
this.list = res.data;
})
.catch(err => {
console.error(err);
});
},
methods: {
//添加
save() {
this.$axios
.post("http://localhost:3001/users/save", {
name: this.kw,
num: 1
})
.then(res => {
console.log(res);
window.location.href = "/";
})
.catch(err => {
console.error(err);
});
},
//点击改变num值为2 进入已完成
towan(id) {
this.$axios
.get("http://localhost:3001/users/update", {
params: {
id
}
})
.then(res => {
console.log(res.data);
});
window.location.href = "/";
},
//点击改变num值为1 进入未完成
towan2(id) {
this.$axios
.get("http://localhost:3001/users/update2", {
params: {
id
}
})
.then(res => {
console.log(res.data);
});
window.location.href = "/";
},
//删除
del(id) {
this.$axios
.get("http://localhost:3001/users/remove", {
params: {
id
}
})
.then(res => {
console.log(res.data);
})
.catch(err => {
console.error(err);
});
window.location.href = "/";
},
//点击等于下标 输入框显示 内容消失
update(index) {
this.ban = index;
},
//回车后保存
enter(item) {
this.$axios
.get("http://localhost:3001/users/update/gai", {
params: {
id: item._id,
name: item.name
}
})
.then(res => {
console.log(res.data);
});
this.ban = -1;
}
}
};
</script>
<style scoped>
.top {
100%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(29, 29, 29);
color: gray;
}
.ys {
100%;
height: 30px;
list-style: 40px;
display: flex;
justify-content: space-between;
margin-top: 10px;
line-height: 30px;
padding: 5px;
}
.ys div span span {
margin-left: 10px;
}
.wei{
background-color: rgb(255, 72, 72);
}
.yi{
background-color: rgb(173, 250, 96);
}
.ipt {
320px;
height: 35px;
font-size: 20px;
margin-left: 10px;
border-radius: 50px;
padding-left: 15px;
border: none;
background-color: gainsboro;
}
.text{
320px;
height: 30px;
font-size: 20px;
margin-left: 10px;
border-radius: 5px;
padding-left: 10px;
border: none;
background-color: gainsboro;
line-height: 30px;
}
.main {
420px;
/* border: 1px solid red; */
margin: 0px auto;
}
</style>