1、回顾
2、node + mongodb
2.1 安装mongodb
项目中既可以使用mongodb,但是推荐使用mongoose
cnpm i mongoose@4 -S
2.2 连接数据库
一定要确保数据库连接池是打开的
创建db.js
const mongoose = require('mongoose'); // 引入模块
const DB_URL = 'mongodb://localhost:27017/sh1908'; // 数据库连接地址
// 连接数据库
// mongoose.connect(DB_URL);
mongoose.connect(DB_URL, { useNewUrlParser: true });
// 数据库连接成功
mongoose.connection.on('connected', () => {
console.log('数据库连接成功')
})
// 数据库断开或者连接失败
mongoose.connection.on('disconnected', () => {
console.log('数据库断开')
})
// 数据库连接异常
mongoose.connection.on('error', () => {
console.log('数据库连接异常')
})
2.3 将 db.js 封装成模块，供后续业务逻辑使用
const mongoose = require('mongoose');
const DB_URL = 'mongodb://localhost:27017/sh1908';
mongoose.connect(DB_URL, { useNewUrlParser: true });
mongoose.connection.on('connected', () => {
console.log('数据库连接成功')
})
mongoose.connection.on('disconnected', () => {
console.log('数据库断开')
})
mongoose.connection.on('error', () => {
console.log('数据库连接异常')
})
// 将此文件作为一个模块 暴露出去，供别人调用 ++++++++++++++++++++++++++++++++
module.exports = mongoose;
2.4 设计用户的集合 --- 设计表
const mongoose = require('./../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象
// 设计用户表的集合
const userSchema = new Schema({ // 设计用户集合的字段以及数据类型
username: { type: String },
password: { type: String },
age: { type: Number },
lesson: { type: Number },
sex: { type: Number },
city: { type: String },
company: { type: String }
})
// 无则创建数据库集合并且连接，有则连接，并且暴露出去\
// mongoose.model('User', userSchema); 创建出一个数据库集合 users
// mongoose.model('Test', userSchema); 创建出一个数据库集合 tests
module.exports = mongoose.model('User', userSchema);
3、数据的增删改查
3.1 查
// 1、拿到数据库的集合
const User = require('./collection/users.js');
// 第一个 {} 查询的条件
// 第二个 {} 显示的字段
// () => {} 回调函数显示查询的结果 ------ node中错误优先回调？？？？？（作业）
// User.find({}, {}, (err, data) => {
// if (err) {
// console.log(err)
// } else {
// console.log(data)
// }
// })
User.find({}, {_id: 0, username: 1, age: 1}).exec((err, data) => {
if (err) throw err // 抛出异常，代码不再继续往下执行
console.log(data)
})
3.2 增
// 找到用户表
const User = require('./collection/users'); // .js可以省略
// User.insert() xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// User.insertOne() xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// User.insertMany() √√√√√√√√√√√√√√√√√√√√√√√√√√√√
User.insertMany({
username: '美少女',
password: '971228',
age: 21,
sex: 1,
lesson: 3,
city: '安徽',
company: '千锋'
}, (err) => {
if (err) throw err;
console.log('插入成功')
})
3.3 删除数据
美少女
// 找到用户集合
const User = require('./collection/users');
// User.deleteOne({username: '美少女'}, (err) => {
// if (err) throw err;
// console.log('删除成功')
// })
User.deleteMany({username: /美少女/}, (err) => {
if (err) throw err;
console.log('删除成功')
})
3.4 改
const User = require('./collection/users');
// User.updateOne({username: '美少女1'}, { $set: {age: 25} }, (err) => {
// if (err) throw err;
// console.log('修改成功')
// })
User.updateMany({}, { $inc: {age: 1} }, (err) => {
if (err) throw err;
console.log('修改成功')
})
4、封装增删改查的操作
sql.js
const sql = {
insert () {
},
delete () {
},
update () {
},
find () {
}
}
module.exports = sql
4.1 封装插入方法
insert (CollectionName, insertData) {
// 数据库的操作属于异步操作，后续的业务逻辑会交给执行的那个单位
// A 调用了B B包含异步操作,操作完毕 A继续执行业务逻辑
// 异步操作 --- 回调函数 / promise / generator + yeild / async + await
// User.insertMany(insertData, (err) => {
// if (err) throw err;
// console.log('插入成功')
// })
// promise的写法
// return new Promise((resolve, reject) => {
// })
return new Promise((resolve, reject) => {
CollectionName.insertMany(insertData, (err) => {
if (err) throw err;
resolve()
})
})
}
如何调用 sql_insert.js
const User = require('./collection/users');
const sql = require('./sql')
sql.insert(User, {
username: '美少女3',
password: '123456',
age: 20,
lesson: 2,
sex: 0,
city: '上海',
company: '千锋'
}).then(() => {
console.log('插入数据成功')
})
4.2 封装删除模块
delete (CollectionName, deleteData, deleteType) {
// User.deleteOne(deleteData, (err) => {})
// User.deleteMany(deleteData, (err) => {})
// style.display = "none" <===> style['display'] = "none"
// style.animation = "test" 兼容性
// 对象后的属性不可以是变量，如果有变量，写成 对象[属性] 形式
deleteType = deleteType || 'deleteOne' // 默认为删除单条数据
return new Promise((resolve, reject) => {
CollectionName[deleteType](deleteData, (err) => {
if (err) throw err;
resolve()
})
})
}
测试删除模块 sql_delete.js
const User = require('./collection/users');
const sql = require('./sql');
// sql.delete(User, { username: '美少女3'}).then(() => {
// console.log('删除成功')
// })
sql.delete(User, { username: /美少女/}, 'deleteMany').then(() => {
console.log('删除成功')
})
4.3 封装修改模块
update (CollectionName, whereObj, updateObj, updateType) {
updateType = updateType || 'updateOne'
return new Promise((resolve, reject) => {
CollectionName[updateType](whereObj, updateObj, (err) => {
if (err) throw err;
resolve()
})
})
}
测试修改模块 sql_update.js
const User = require('./collection/users');
const sql = require('./sql');
// sql.update(User, { username: '操鑫' }, { $set: { age: 28 }}).then(() => {
// console.log('修改成功')
// })
sql.update(User, {}, { $inc: { age: 1 }}, 'updateMany').then(() => {
console.log('修改成功')
})
4.4 封装查询数据模块
find (CollectionName, whereObj, showObj) {
return new Promise((resolve, reject) => {
CollectionName.find(whereObj, showObj).exec((err, data) => {
if (err) throw err;
resolve(data)
})
})
}
测试查询模块 sql_find.js
const User = require('./collection/users');
const sql = require('./sql');
sql.find(User, {}, {_id:0, username: 1, age: 1, sex: 1}).then(data => {
console.log(data)
})
5、express + node
5.1 准备工作
前后端不分离开发 --- 前端负责写页面，后端负责渲染 --- admin-lte
5.2 创建express项目
express myapp --view=ejs
cd myapp
cnpm i
cnpm run start
服务器的代码修改，需要重新启动服务器，感觉很麻烦
cnpm i supervisor -g // 可以修改代码只有不用一直重新启动服务器
- 修改package.json文件的scripts选项
"scripts": {
"start": "node ./bin/www",
"dev": "supervisor ./bin/www"
},
cnpm run dev
5.3 集成前端的模板到express项目中
1、打开starter.html的源码部分，复制代码至 views/index.ejs
2、解决样式问题，index.ejs部分，将css和js开头处添加一个 /, 复制相应的文件夹到项目的public文件加内
5.4 分解页面
<%- include('')%>
header.ejs / menu.ejs / sildebar.ejs / footer.ejs
1、打开index.ejs页面，点击左侧的缩进代码，将每一部分代码复制到相应的ejs模板内容
2、使用 <%- include('')%> 在相应的位置引入 ejs 模板
5.5 设计菜单管理
打开menu.ejs，修改代码
------ 首页+用户管理+产品管理
5.6 设计页面的表格
打开starter.html，点击左上角的logo,选择左侧的tables,再选择Simple tables
右键选择第一个表格， 右键 -> copy -> copy outerhtml
回到index.ejs，在你的主体部分，提示语句（输入部分），直接粘贴进去