Node项目

Node项目

项目开发流程

• 项目需求

  自有产品 --> 产品部门 外包项目 --> 需求部门

  -->

  需求文档 -->

  产品经理：交互稿：原型设计 -->

  UI设计设：UI图：PSD图 -->

  前端：根据交互稿和PSD图 实现html和里面的特效 -->

  后端：实现数据库和后端功能和接口的实现 -->

  测试人员：测试功能是否正常，记录到bug反馈系统 -->

  项目发布到生成环境

搭建项目结构

• dist
• src
  • controller
  • views
  • model
  • route
  • www
  • app.js
• package.json
• README.md

glob 获取目录下的文件路径

• 安装

  • npm install glob --save

• 使用

var glob = require("glob")

glob("**/*.js",  function (er, files) {
  // files is an array of filenames.
})

加载所有路由模块

• 方式一：

//读取静态资源  访问路径 www/index.html
app.use("/www", express.static(path.join(__dirname,"www")));

//导入路由模块
const home = require("./route/home.js");
const sign = require("./route/sign.js");
app.use("/home",home);
app.use("/sign",sign);

• 方式二：

//加载所有路由模块

//const glob = require("glob");
let files =  glob.sync("./route/*.js");
//files文件的路径数组
//files.forEach((item)=>{
//    const route = require(item);
//    //获取文件的名字
//    let name =  path.basename(item, ".js");
//    app.use("/"+name,route);
//});


let files =  glob.sync("./route/*.js");
//files文件的路径数组
files.forEach((item)=>{
    const route = require(item);
    app.use(route.prefix, route);
});

错误处理

//处理错误--请求的文件不存在-404
app.use((req,res,next)=>{
    //res.status(404).send("4041111");
    res.status(404);
    res.redirect("/404/index.html");
});

//处理错误--服务器错误-500
app.use((err,req,res,next)=>{
    res.status(500);
    res.redirect("/www/500/index.html");
});

设置模板，加载首页

const xtpl = require("xtpl");
app.set('views','./views');
app.set('view engine', 'html');
app.engine('html',xtpl.renderFile);


//读取静态资源  访问路径 http://127.0.0.1:8888/404/index.html
app.use(express.static(path.join(__dirname,"www")));

//控制器中
const controller = module.exports;
controller.getindex = (req,res)=>{
    res.render('blog/index',{array: data},(err,html)=>{
       res.send(html);
    });
};

//路由中
const home = module.exports = express.Router();
home.prefix = "/home";
const controller = require("../controller/home");
home.get("/index",controller.getindex);

从数据库中加载数据

• 导入包 mysql和orm

  • npm install orm --save
  • npm install mysql --save

• model中创建对象和表的映射

module.exports = (db, models)=>{
    models.post = db.define("posts", {
        id: { type: 'serial', key: true },
        slug: String,
        title: String,
        excerpt: String,
        content: String,
        status: String,
        comment_status: String,
        comment_count: Number,
        view_count: Number,
        created: Date,
        user_id: Number,
        parent_id: Number,
        type: String
    });

    models.user = db.define("users",{
        id: { type: 'serial', key: true },
        slug: String,
        username: String,
        password: String,
        nickname: String,
        email: String,
        status: String,
        created: Date,
        role: String,
        token: String
    });

    models.comment = db.define("comments",{
        id: { type: 'serial', key: true },
        author: String,
        author_email: String,
        author_ip: String,
        content: String,
        status: String,
        support: Number,
        oppose: Number,
        created: Date,
        post_id:Number,
        parent_id: Number,
        user_id: Number
    });
}

• app.js中创建连接，导入映射

//设置orm
const orm = require("orm");
app.use(orm.express("mysql://root:@localhost:3306/myblog",{
    define: function(db, models, next){
        //
        let m = require("./model/model.js");
        m(db,models);
        next();
    }
}));

• 控制器中获取数据

controller.getindex = (req,res)=>{
    let where = {};
    req.models.post.find(where,(err,data)=>{
        if(err)throw err;
        //获取到所有post
        console.log(data);

        res.render('blog/index',{array: data},(err,html)=>{
            res.end(html);
        });
    });
};

首页渲染数据

controller.getindex = (req, res)=>{
    let where = {};
    req.models.post.find(where,{limit:5},["id","A"],(err,data)=>{
        if(err)throw err;
        //获取到所有post

        //把日期转换一下
        data.forEach((item)=>{
            item.created = item.created.toDateString();
        });

        res.render('blog/index',{array: data},(err,html)=>{
            res.send(html);
        });
    });
};

获取帖子的详细内容

• 设置路由

post.get("/:userid/:id", controller.getpost);

• 设置控制器

//获取帖子
controller.getpost = (req, res)=>{

    //获取参数
    let userid = req.params.userid;

    //检查用户是否存在
    req.models.user.find({id:userid}, (err, user)=>{
        if(err)throw err;

        if(!user || user.length == 0) {
            res.status(404);
            res.redirect("/404/index.html");
        }
    });

    //获取帖子
    let id = req.params.id;
    req.models.post.find({user_id:userid,id:id},(err,post)=>{
        if(err)throw err;

        if(!post || post.length == 0) {
            res.status(404);
            res.redirect("/404/index.html");
            return;
        }

        post[0].created = post[0].created.toDateString();
        //输出页面
        res.render('blog/post',{post:post[0]},(err,html)=>{
            res.send(html);
        });
    });
}

• 设置模板

  • 模板中使用 {{{ }}} 不转移内容的html

获取评论列表

• 设置路由，传递帖子的id，新建comment.js路由

post.prefix = "/comment";
const controller = require("../controller/comment");
//id是帖子的id
post.get("/:id", controller.getcomment);

• 设置控制器

controller.getcomment = (req, res)=>{
    //根据帖子的id 查询该帖子下的所有评论
    let id = req.params.id;

    //查询某个帖子下的所有评论
    req.models.comment.find({post_id: id}, (err, datas) => {
        if(err)throw err;
        res.send(datas);
    });
}

• 页面，发送ajax请求，设置内容

支持、反对

• 设置路由
• 设置控制器
• 页面发送ajax请求
• 根据ip判断是否已经发过评论

controller.support = (req, res) => {
    //获取客户端的ip
    //console.log(req.socket.remoteAddress);
    req.models.comment.find({author_ip:req.socket.remoteAddress}, (err, data)=>{
        if(data && data.length>0) {
            let data = {d:-1};
            res.send(data);

        }else{
            //支持  id 是评论的id
            req.models.comment.get(req.params.id,(err,comment)=>{
                comment.support++;
                //保存
                comment.save();

                let data = {d:comment.support};
                res.send(data);
            })
        }
    });
}

发表评论

• 获取post过来的参数
  • 安装body-parser npm install body-parser --save

const bodyparser = require("body-parser");
//处理application/x-www-form-urlencoded的 parser
app.use(bodyparser.urlencoded({ extended: false }));

//获取post来的数据
req.body

• 路由
• 控制器

//发布评论
controller.create = (req, res) => {
    req.models.comment.create({
        author: req.body.name,
        author_email: req.body.email,
        content: req.body.comment,
        author_ip: req.socket.remoteAddress,
        post_id: req.body.id,
        support: 0,
        oppose: 0
    },(err, comment)=> {
        if(err) throw err;
        //查询某个帖子下的所有评论
        req.models.comment.find({post_id: req.body.id}, (err, datas) => {
            if(err)throw err;
            //修改时间的格式
            datas.forEach((item)=>{
                item.created = item.created.toDateString();
            });
            res.send(datas);
        });
    })
}

• 页面

//发布评论
      $(".btn").click(function () {
          var json = $("#f1").serialize();

          $.post("/comment/create",json, function (datas) {
              if(datas) {
                  //使用layer插件弹出层
                  //layer.alert("发表成功");
                  layer.msg("发布成功");
                  var html = template("tpl",{datas:datas});
                  $("#comment").html(html);
              }else{
                  layer.msg("发布失败");
              }

          });
          return false;
      });