目录
前言：
- 资源已经上传，另一套电商后台管理项目点击跳转在我博客的资源中可以找到，用node.js+ node+express+vue+axios +elementUI +mongoDB独立完成`电商后台管理系统` 用户增删改查，用户的操作在MongoDB Compass数据可视化软件可以一目了然，软件可以在网上下载，教程一大把，绝对没法难到小伙伴，也可以在我的资源下载，我会整套包括用到的软件一起压缩上传
-
为什么 全栈学 MongoDB ？ 开源 高并发 处理高效 学习成本低 。
MongoDB 安装：
1.傻瓜式安装 下一步
2.注意 第三步 默认 install MongoDB compass 勾选去掉命令行启动MongoDB 指令：
mongo 127.0.0.1:27017启动mongodb 服务指令： net start mongodb
出现 请求的服务已经启动。 说明 MongoDB 服务器 已经启动可以使用了。net stop mongodb 指令 ： 停止 mongodb服务
安装 mongodb 数据库 可视化界面工具 Compass -
需要安装node MongoDB Compass 启动mongodb 服务指令： net start mongodb
加油哦
- 说有上辈子的人是在骗自我；说有下辈子的人是在骗别人
- 谁有历经千辛万苦的意志，谁就能达到任何目的
- 一个人只要强烈地坚持不懈地追求，他就能达到目的！加油
我写的项目别人怎么访问
- 创建服务器 --开启服务器 --必须联网 --网站地址栏搜索 --想要被人访问让你输入我的ipconfig的ip要在一个 局域网而且ipv4后加端口名--自己访问127.0.0.1：端口|| localhost:端口
- 默认端口http://localhost:3000/
还有其他事例就不一一展示了，说一下数据库
/*
model/db.js
*/
const mongoose = require('mongoose');
mongoose.connect("mongodb://127.0.0.1:27017/01", { useNewUrlParser: true, useUnifiedTopology: true }).then(() => {
console.log('数据连接成功');
}).catch(() => {
console.log('数据连接失败');
});
const shopSchema = mongoose.Schema({
username: String,
emial: String,
tel: String,
role: String,
status: String,
})
const shop = mongoose.model('shop', shopSchema);
module.exports = shop
后端路由
- 添加、分页、编辑、删除。。更新。。等都在这里
/*
router/index.js
*/
var express = require('express');
var router = express.Router();
var shop = require('../model/db');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Express'
});
});
// 展示 列表 路由 结合 搜索
router.get('/list', async(req, res) => {
console.log(req.query);
let keyword = req.query.keyword; // 前端发送过来的关键字
// 正则
let reg = new RegExp(keyword, 'g'); // /^\w$/g -- 不可以用变量
console.log(reg);
let sum = await shop.count({
username: reg
}); // 同步方式 执行异步函数 总条数
let limit = req.query.limit; // 每页限制 条数 默认 字符串
limit = Number(limit); // 强制转换
let page = req.query.page; // 页码
page = Number(page); // 强制转换
let skip = (page - 1) * limit; // 每页跳过的数据
shop.find({
username: reg
}).limit(limit).skip(skip).sort({
_id: -1
}).then(data => { // 展示 所有数据
if (data.length > 0) { // 有数据
res.send({
code: 1,
msg: '查询成功！',
data: data,
sum: sum
});
} else { // 没有数据
res.send({
code: 0,
msg: '查询失败，暂无数据！',
data: []
}); // data:[] 异常处理
}
})
})
// 添加 路由 /add
router.post('/add', (req, res) => {
let obj = req.body;
console.log(obj);
shop.find({
username: obj.username
}).then(data => {
if (data.length > 0) {
res.send({
code: 0,
msg: '此用户已经存在！'
});
} else {
// 不存在此用户 可以添加
shop.create(obj).then(() => {
res.send({
code: 1,
msg: '添加成功！'
})
})
}
})
})
// 删除接口 /del get
router.get('/del', (req, res) => {
shop.remove({
_id: req.query.id
}).then(() => {
res.send({
code: 1,
msg: '删除成功！'
}); // res.send({status:200,success:true})
}).catch(() => {
res.send({
code: 0,
msg: '删除失败！'
}); // res.send({status:404,success:false})
})
})
// 更新修改 接口 /update post1
router.post('/update', (req, res) => {
let obj = req.body;
console.log(obj);
shop.update({
_id: obj._id
}, {
$set: obj
}).then(() => { // obj {} --简写 前端的form对象
// $set:{
// username:req.body.username,
// email:req.body.email,
// tel:req.body.tel
// }
res.send({
code: 1,
msg: '更新成功！'
});
}).catch(() => {
res.send({
code: 0,
msg: '更新失败！！'
});
})
})
module.exports = router;前端操作逻辑源码
<script>
new Vue({
el: '#app',
data: {
total: 0, // 总数据条数
searchVal: '',
dialogVisible: false,
dialogTitle: '添加用户',
tableData: [{
username: '张三',
email: 'zs@163.com',
tel: '13696587458',
role: '管理员',
status: '启用'
}],
form: { // 添加模态框 表单的双向数据
username: '',
email: '',
tel: '',
role: '',
status: ''
},
findData: { // 查询数据参数
keyword: '',
limit: 3, // 每页限制条数
page: 1 // 当前页 默认是 第一页
}
},
methods: {
getData() { // 默认 渲染数据方法
axios.get('/list', {
params: this.findData // 传递 分页参数
}).then(res => {
console.log(res);
this.tableData = res.data.data;
this.searchVal = ''; // 清空搜索输入框
// total 赋值 数据总条数
this.total = res.data.sum;
this.searchVal = '' //搜索后将内容清空不然影响后续添加
})
},
changePage(page) { // 分页器 自带的事件
console.log(page);
this.findData.page = page; // 传递参数的赋值
this.getData(); // 得到不同页码 重新渲染 页面
},
// 点击取消关闭弹框清空form
cancelOk() {
this.dialogVisible = false;
this.form = {
username: '',
email: '',
tel: '',
role: '',
status: ''
}
},
add() { // 添加用户的事件函数
this.dialogVisible = true; // 控制模态框的显示的
this.dialogTitle = '添加用户'; // 模态框标题的切换
},
search() { // 搜索的事件函数
console.log(this.searchVal);
// console.log(1111);
this.findData.keyword = this.searchVal;
this.getData(); // 调用 函数 查询
},
del(val) { // 删除 逻辑
console.log(val);
let delId = val._id;
// 弹出框 === 模拟 模态框
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { // 确定按钮 生效的 情况
// 请求删除接口
axios.get('/del', {
params: {
id: delId
}
}).then(res => {
console.log(res); // 等待删除 接口的数据 响应
if (res.data.code == 1) {
this.getData(); // 删除成功 重新渲染数据
this.$message({
type: 'success',
message: '删除成功!'
});
}
})
}).catch(() => { // 取消按钮 的 情况
this.$message({
type: 'info',
message: '已取消删除'
});
});
// 发送删除 请求
},
edit(val) { // 修改 逻辑
// val ---- 表格一行的数据
// let editId = val._id;
// console.log(editId);
console.log(val); // scope.row
// 模态框 显示
this.dialogVisible = true;
// 回填数据 this.form = val;
this.form = val;
// 改变 编辑标题
this.dialogTitle = '编辑用户';
},
addOk() { // 提交或编辑 确定按钮 事件
this.dialogVisible = false;
// 写 添加逻辑 编辑保存 逻辑
// 根据模态框的标题 来判断 是添加用户还是编辑用户
if (this.dialogTitle == '添加用户') {
// 添加 请求
axios.post('/add', this.form).then(res => {
console.log(res);
if (res.data.code == 1) {
this.$message({ // 消息提示框
message: res.data.msg,
type: 'success'
});
this.getData(); // 重新渲染数据
} else {
// alert(res.data.msg);
this.$message.error(res.data.msg);
}
})
} else if (this.dialogTitle == '编辑用户') {
// 处理修改编辑的逻辑
axios.posnpmt('/update', this.form).then(res => {
console.log(res); // 等待 更新数据响应
if (res.data.code == 1) {
this.$message({
message: res.data.msg,
type: 'success'
})
// 重置 清空 this.form
this.form = {
username: '',
email: '',
tel: '',
role: '',
status: ''
}
this.getData(); // 更新 展示 渲染 页面
} else if (res.data.code == 0) {
this.$message.error(res.data.msg);
}
})
}
}
},
created() {
this.getData(); // 默认 一开始 就 请求数据 并渲染
}
})
</script>
完 ！
We must stay true to ourselves.
忠于自我，顺心而为。加油
