Skip to content

A-FE/express

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
peng
Nov 26, 2016
6dc06f9 · Nov 26, 2016

History

29 Commits
Nov 24, 2016
Nov 22, 2016
Nov 24, 2016
Nov 24, 2016
Nov 24, 2016
Nov 17, 2016
Nov 22, 2016
Nov 26, 2016
Nov 24, 2016
Nov 22, 2016

Repository files navigation

使用node.js + express开发简易后台

开发环境node.js + express

项目预览

复制项目

# 将项目克隆到本地
    git clone https://github.com/peng1992/express.git
# 安装项目依赖
    cnpm install
# 启动项目
    cnpm start

然后在浏览器中打开http://localhost:3000/ 网址就可以看到这个应用了

项目目录

  • bin/
    • www -------------------------项目入口文件
  • node_modules/ -------------------项目依赖文件夹,cnpm intall后生成
  • public/
    • data/ ------------------------json数据
    • images/ ---------------------图片
    • js/ -------------------------js文件
    • stylesheets/ -----------------css文件
  • routes/ -------------------------路由配置文件夹
    • data.js
    • index.js
  • views/ -------------------------模板文件
    • edit.ejs
    • error.ejs
    • index.ejs
    • login.ejs
    • tujian.ejs
  • app.js --------------------------存放的Express项目中最基本的配置信息
  • package.json --------------------项目依赖文件

文件解析

app.js

// 引入资源文件
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');  ---------------------------引入index.js路由配置文件
var data = require('./routes/data');    ---------------------------引入data.js路由配置文件

var app = express();    -------------------------------------------用express创建一个app应用

// 视图引擎设置
app.set('views', path.join(__dirname, 'views'));    ---------------指定视图文件夹 views/
app.set('view engine', 'ejs');  -----------------------------------指定视图引擎 ejs

// 使用刚刚加载的资源
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());    --------------------------------------- 使用cookie
app.use(express.static(path.join(__dirname, 'public')));    -----------指定公共资源文件夹 为public/

app.use('/', index);    ----------------------------当路径为'/',即'http://localhost:3000/'时,匹配index.js
app.use('/data', data);     ------------------------当路径为'/data',即'http://localhost:3000/data'时,匹配data.js
// 匹配404,即路径未匹配时
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// 当路径匹配错误时
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js页面定义的接口如下:(全部为get请求)

  • / -----------------------首页
  • /edit?type=it -----------------------------互联网
  • /edit?type=cookies ---------------------笑料
  • /edit?type=manager --------------------管理
  • /edit?type=sanwen ----------------------散文
  • /tuijian -------------------------------------推荐

index.js是怎样定义这些接口呢?

router.get('/edit', function(req, res, next) {...}

以'/edit'为url的ajax请求,就会执行上面的回调函数,让我们来看一下回调函数里面都写了些什么?

router.get('/edit', function(req, res, next) {
      if(!req.cookies.user){    ---------------------------判断用户是否已登录
          return res.render('login',{});
      }
      var type = req.query.type;    ----------------------获取查询参数type的值
      if(type){ ---------------------------如果查询参数存在
        var obj = {};
        switch(type){   ---------------------------------根据不同的type,返回不同的值
          case 'sanwen':
            obj = {};
            break;
          case 'it':
            obj = {};
            break;
          case 'manager':
            obj = {};
            break;
          case 'cookies':
            obj = {};
            break;
          default :
                return res.send({
                  status:0,
                  info:'参数错误'
                });
          break;
        }
        fs.readFile(PATH + type + '.json', (err, data) => { ------------------------------ 读取文件,并执行回调函数              if (err) {
          if (err) {    ---------------------------------如果读取失败
            return res.send({
              status:0, ---------------------------------返回错误状态码0
              info: 'fail.....'
            });
          }

          var obj = JSON.parse(data.toString());
          return res.render('edit', {   ----------否则,如果读取成功,渲染模板edit.jsp,返回数据obj
            data: obj
          });
        });
      }else {   -------------------------------------------如果查询参数不存在
        return res.send({
          status:0,
          info: '参数错误'
        });
      }
    });

打开http://localhost:3000/edit?type=it,会提示需要登录,

####用户登录接口/login,在data.js中设置,账号admin密码12345,登录成功后,会出现如下界面

data.js定义的接口

  • 读数据接口---get请求

    • /write?type=it ------------------------------------读取it.json中的数据
    • /write?type=cookies
    • /write?type=manager
    • /write?type=sanwen
    • /write?type=tuijian
  • 写入数据接口----post请求

    • /write?type=it ------------------------------------向it.json写入数据
    • /write?type=cookies
    • /write?type=manager
    • /write?type=sanwen
    • /write?type=tuijian
  • 阅读模块写入数据接口----post请求

    • /write_config
  • 登录接口----post请求

    • /login

以写入数据接口为例,'/write?type=it'会执行下面的代码

	router.post('/write',function(req, res, next){
        if(!req.cookies.user){  ------------------------判断是否已登录
            return res.render('login',{});
        }
        // 文件名
        var type = req.param('type') || ""; -------------------------获取请求参数type的值
        // 关键字段
        var url = req.param('url') || '';   -------------------------获取请求参数url的值
        var title = req.param('title') || '';   ---------------------获取请求参数title的值            var img = req.param('img') || '';
        if(!type || !url || !title || !img){    ---------------------如果这些请求参数有一个不存在
            return res.send({
                status:0,
                info:'提交的字段不全'
            });
        }
        //1)读取文件
        var filePath = PATH + type + '.json';   --------------------否则,会读取对应的json文件
        fs.readFile(filePath, function(err, data){
            if(err){    --------------------------如果读取数据失败
                return res.send({   --------------返回错误状态信息
                    status:0,
                    info: '读取数据失败'
                });
            }
                        ------------------------如果读取数据成功,则继续执行
            var arr = JSON.parse(data.toString());  ----------------------将json文件中的数据取出来,以便待会写入
            //代表每一条记录
            var obj = {     ----------------------待写入的数据
                img: img,
                url: url,
                title: title,
                id: guidGenerate(), ---------------------数据的id
                time: new Date()    ---------------------时间戳
            };
            arr.splice(0, 0, obj);  ------------------------在arr数组中插入数据
            //2)写入文件
            var newData = JSON.stringify(arr);
            fs.writeFile(filePath, newData, function(err){  -------------------------将newData写入filePath对应的文件
                if(err){    -----------------如果写入文件失败
                    return res.send({   --------------------返回错误状态信息
                        status:0,
                        info: '写入文件失败'
                    });
                }
                return res.send({   ------------------------如果成功,返回正确状态信息
                    status:1,
                    info: obj
                });
            });
        });
    });

测试一下,这个接口是否正确

  $.ajax({
       type: 'POST',
       url: '/data/write',
       data: {
            type: 'it',
            title: '测试标题',
            url: 'www.xxx.com',
            img: 'www.xxx.com/images/xxx.png'
       },
       success: function(data){
           if(data.status){
               alert('添加数据成功');
           }else{
               alert('添加失败');
           }
       },
       error: function(){
           alert('添加失败');
       },
       dataType: 'json'
  });

打开public/data/it.json,会发现多了一条数据,说明数据输入接口是ok的

it.json
  [
    {
      "img": "www.xxx.com",
      "url": "www.xxx.com/images/xxx.png",
      "title": "测试标题",
      "id": "25478B43-C814-4499-9AF5-2BB010F98099",
      "time": "2016-11-24T14:17:23.659Z"
    }
  ]

至此,一个简单的后台接口就完成了

About

用node.js+express搭建简易后台

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published