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' : '' %>"

  
    
    首页
  

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 模板语法渲染页面

修改数据表格 字段

  序号
  用户名
  年龄
  性别
  城市
  公司
  阶段
  操作



  1.
  wudaxun
  
    18
  
  男
  山西
  千锋
  三阶段
  
      
        
      
      
        
      
  

5.4 渲染数据库中的数据 ---- list -- 注意多重的三目运算符

<% for(var i = 0; i < list.length; i++) { %>
  
    <%= i + 1 %>
    <%= list[i].username %>
    
        <%= list[i].age %>
    
    <%= list[i].sex === 1 ? '男' : '女' %>
    <%= list[i].city %>
    <%= list[i].company %>
    <%= list[i].lesson === 1 ? '一阶段' : list[i].lesson === 2 ? '二阶段' : '三阶段' %>
    
        
          
        
        
          
        
    
  
<% } %>

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 配置前端的删除

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 页面，新增 添加用户的 按钮以及链接

  
    添加用户
  

7.6 设计添加用户的表单

 

  

    
  
  
  
  

    

      

        用户名
        

          
        
      
      

        密码
        

          
        
      
      

        年龄
        

          
        
      
      

        籍贯
        

          
        
      
      

        公司
        

          
        
      
      

        阶段
        

          
            一阶段
            二阶段
            三阶段
          
        
      
      

        性别
        

          

            

              
                男
              
              
                女
              
            
          
        
      
    
    
    

      Cancel
      Sign in
    
    
  

7.7 添加路由，获取表单的数据

给表单添加一个提交路由

** 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

9、修改数据

9.1 添加修改数据的页面 users_update.ejs ---- 复制users_add.ejs --- 添加一个字段用户id,设置id字段不可以更改（只读）

  用户id
  

    
  

9.2 添加修改的路由 routes/users.js

// 修改用户的界面
router.get('/update', function (req, res, next) {
  res.render('users_update', {
    activeIndex: 1
  })
})

你要知道修改的是哪一个用户，需要前端传值 users.ejs 的编辑按钮

获取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表单的提交地址，测试功能