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>