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>