monggodb项目操作
1、回顾
1、express + node
1.1 准备工作
前后端不分离开发 --- 前端负责写页面，后端负责渲染 --- admin-lte
1.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
1.3 集成前端的模板到express项目中
1、打开starter.html的源码部分，复制代码至 views/index.ejs
2、解决样式问题，index.ejs部分，将css和js开头处添加一个 /, 复制相应的文件夹到项目的public文件加内
1.4 分解页面
<%- include('')%>
header.ejs / menu.ejs / sildebar.ejs / footer.ejs
1、打开index.ejs页面，点击左侧的缩进代码，将每一部分代码复制到相应的ejs模板内容
2、使用 <%- include('')%> 在相应的位置引入 ejs 模板
1.5 设计菜单管理
打开menu.ejs，修改代码
------ 首页+用户管理+产品管理
1.6 设计页面的表格
打开starter.html，点击左上角的logo,选择左侧的tables,再选择Simple tables
右键选择第一个表格， 右键 -> copy -> copy outerhtml
回到index.ejs，在你的主体部分，提示语句（输入部分），直接粘贴进去
代码继续在day03/myapp，笔记在day04中
2、添加路由以及对应的页面 ---- 用户管理
2.1 新建页面 views/users.ejs ---- 复制index.ejs页面即可
2.2 修改路由 routes/users.js
router.get('/', function(req, res, next) {
// res.send('respond with a resource'); // ------------------------
res.render('users') // ++++++++++++++++++
});
浏览器访问 http://localhost:3000/users 查看效果
3、添加路由以及对应的页面 ---- 产品管理
3.1 新建页面 views/pro.ejs ---- 复制index.ejs页面即可
3.2 新建路由文件 routes/pro.js --- 复制 users.js 即可,修改对应的页面
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('pro')
});
module.exports = router;
3.3 配置路由 生效 ----- 修改 app.js 文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var proRouter = require('./routes/pro'); // +++++++++++++++++++++++++++
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/pro', proRouter); // ++++++++++++++++++++++++
修改app.js文件 一般 需要重新启动服务器，方可生效
4、将路由与左侧的菜单结合起来 --- 修改menu.ejs
- 分别给 a 加入 / /users /pro 即可
选中的样式如何跟随变化？？？
4.1 修改所有的路由文件，给前端渲染页面时传递一个选中的参数
// routes/index.js
res.render('index', {
activeIndex: 0
});
// routes/users.js
res.render('users', {
activeIndex: 1
})
// routes/pro.js
res.render('pro', {
activeIndex: 2
})
4.2 修改 menu.ejs 添加选中的样式
class="<%- activeIndex === 0 ? 'active' : '' %>"
<li class="<%- activeIndex === 0 ? 'active' : '' %>">
<a href="/">
<i class="fa fa-link"></i>
<span>首页</span>
</a>
</li>
5、后台管理系统渲染数据 ---- 查
5.1 配置数据库
cnpm i mongoose@4 -S
复制 collection文件 + sql.js + db.js 文件至 当前项目的sql文件夹内,修改sql.js为index.js
myapp
sql
collection
users.js
db.js
index.js
5.2 在routes/users.js用户管理中 操作数据库
var User = require('./../sql/collection/users');
// var sql = require('./../sql/index')
var sql = require('./../sql');
查询数据库之后渲染到 users.ejs 页面
router.get('/', function(req, res, next) {
// res.send('respond with a resource');
// res.render('users', {
// activeIndex: 1
// })
// 查询数据库之后渲染到 users.ejs 页面
sql.find(User, {}, {_id: 0}).then(data => {
res.render('users', {
activeIndex: 1,
list: data
})
})
});
5.3 users.ejs 利用 ejs 模板语法渲染页面
修改数据表格 字段
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
<th>公司</th>
<th>阶段</th>
<th>操作</th>
</tr>
<tr>
<td>1.</td>
<td>wudaxun</td>
<td>
18
</td>
<td>男</td>
<td>山西</td>
<td>千锋</td>
<td>三阶段</td>
<td>
<a class="btn">
<i class="fa fa-edit"></i>
</a>
<a class="btn">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
5.4 渲染数据库中的数据 ---- list -- 注意多重的三目运算符
<% for(var i = 0; i < list.length; i++) { %>
<tr>
<td><%= i + 1 %></td>
<td><%= list[i].username %></td>
<td>
<%= list[i].age %>
</td>
<td><%= list[i].sex === 1 ? '男' : '女' %></td>
<td><%= list[i].city %></td>
<td><%= list[i].company %></td>
<td><%= list[i].lesson === 1 ? '一阶段' : list[i].lesson === 2 ? '二阶段' : '三阶段' %></td>
<td>
<a class="btn">
<i class="fa fa-edit"></i>
</a>
<a class="btn">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
<% } %>
6、删除功能 --- 以用户名为 删除的条件 ---- （真实应该是以用户的id为条件）
6.1 设计删除的路由 routes/users.js 中添加代码
// /users/delete?username=***
router.get('/delete', function (req, res, next) {
// get req.query
// post req.body
// res.send(req.query) // { username: '***'} 删除的条件
sql.delete(User, req.query).then(() => {
// 删除完成之后回到路由 /users --- 重定向
res.redirect('/users')
})
})
6.2 配置前端的删除
<a class="btn" href="/users/delete?username=<%= list[i].username %>">
<i class="fa fa-trash"></i>
</a>
7、增加
7.1 修改数据库的字段，增加id选项 ---- 用户的唯一标识
必须体现唯一性 myapp/sql/collection/users.js
const userSchema = new Schema({ // 设计用户集合的字段以及数据类型
userid: {type: String }, // ++++++++++++++++++++
username: { type: String },
password: { type: String },
age: { type: Number },
lesson: { type: Number },
sex: { type: Number },
city: { type: String },
company: { type: String }
})
7.2 唯一性 UUID
cnpm i node-uuid -S
uuid.v1() 生成唯一码
7.3 创建添加用户的界面 views/users_add.ejs --- 复制index.ejs 删除主体部分（表格）
7.4 新增添加用户的路由 routes/users.js
// 添加用户的界面
router.get('/add', function (req, res, next) {
res.render('users_add', {
activeIndex: 1 // 一定要传，不传会报错 activeIndex 找不到
})
})
7.5 修改views/users.ejs 页面，新增 添加用户的 按钮以及链接
<h3 class="box-title">
<a href="/users/add">
<button class="btn btn-primary">添加用户</button>
</a>
</h3>
7.6 设计添加用户的表单
<div class="box box-info">
<div class="box-header with-border">
<!-- <h3 class="box-title">Horizontal Form</h3> -->
</div>
<!-- /.box-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="age" id="age" placeholder="年龄" min="18" max="30" step="1" value="18">
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">籍贯</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" id="city" placeholder="籍贯">
</div>
</div>
<div class="form-group">
<label for="company" class="col-sm-2 control-label">公司</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="company" id="company" placeholder="公司">
</div>
</div>
<div class="form-group">
<label for="lesson" class="col-sm-2 control-label">阶段</label>
<div class="col-sm-10">
<select class="form-control" name="lesson">
<option value="1">一阶段</option>
<option value="2">二阶段</option>
<option value="3">三阶段</option>
</select>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<div class="">
<div class="radio">
<label>
<input type="radio" name="sex" value="1" checked="">男
</label>
<label>
<input type="radio" name="sex" value="0">女
</label>
</div>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-info pull-right">Sign in</button>
</div>
<!-- /.box-footer -->
</form>
</div>
7.7 添加路由，获取表单的数据
给表单添加一个提交路由
<form class="form-horizontal" action="/users/addAction" method="POST"></Form>
** routes/users.js 添加路由 /users/addAction**
var uuid = require('node-uuid'); // ****************************
// 添加用户提交的事件 ---- post
router.post('/addAction', function (req, res, next) {
let insertData = req.body // 注意数据类型
insertData.age *= 1 // age 为 number类型
insertData.lesson *= 1
insertData.sex *= 1
// 添加用户的id
insertData.userid = 'user_' + uuid.v1()
// res.send(insertData)
// 插入查数据库，重定向列表页面
sql.insert(User, insertData).then(() => {
res.redirect('/users')
})
})
8、修改一下删除的条件
users.ejs
<a class="btn" href="/users/delete?userid=<%= list[i].userid %>">
<i class="fa fa-trash"></i>
</a>
9、修改数据
9.1 添加修改数据的页面 users_update.ejs ---- 复制users_add.ejs --- 添加一个字段用户id,设置id字段不可以更改（只读）
<div class="form-group">
<label for="userid" class="col-sm-2 control-label">用户id</label>
<div class="col-sm-10">
<input type="text" class="form-control" readonly name="userid" id="userid" placeholder="用户id">
</div>
</div>
9.2 添加修改的路由 routes/users.js
// 修改用户的界面
router.get('/update', function (req, res, next) {
res.render('users_update', {
activeIndex: 1
})
})
你要知道修改的是哪一个用户，需要前端传值 users.ejs 的编辑按钮
<a class="btn" href="/users/update?userid=<%= list[i].userid %>">
<i class="fa fa-edit"></i>
</a>
获取userid的值，然后查询该值对应的数据库，拿到需要修改的数据，渲染修改页面
router.get('/update', function (req, res, next) {
// 拿到userid的值，查询数据库，渲染页面
sql.find(User, req.query).then(data => {
res.render('users_update', {
activeIndex: 1,
userid: data[0].userid,
username: data[0].username,
password: data[0].password,
sex: data[0].sex,
lesson: data[0].lesson,
city: data[0].city,
company: data[0].company
})
})
})
**前端渲染数据 ----- users_update.ejs ---- value属性 **
添加 修改表单信息的路由 users.js
// 添加修改用户提交的事件 ---- post
router.post('/updateAction', function (req, res, next) {
let insertData = req.body // 注意数据类型
insertData.age *= 1 // age 为 number类型
insertData.lesson *= 1
insertData.sex *= 1
//更新查数据库，重定向列表页面
sql.update(User, { userid: insertData.userid }, { $set: insertData}).then(() => {
res.redirect('/users')
})
})
修改更新页面的form表单的提交地址，测试功能
<form class="form-horizontal" action="/users/updateAction" method="POST"></form>
长风破浪会有时，直挂云帆济沧海
