Vue+Iview+Node 搭建数据模拟接口

Posted linsu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+Iview+Node 搭建数据模拟接口相关的知识,希望对你有一定的参考价值。

1.初始化node 项目

技术图片

2.安装需要部件

技术图片

技术图片

技术图片

 技术图片

3.编写简单代码

技术图片

 routers=>:index.js  login.js  users.js

根目录 index.js

var express=require(‘express‘);
var app=express();
var  consign=require(‘consign‘);
var bodyparser = require(‘body-parser‘);

app.use(bodyparser.urlencoded(extende:true));
app.use(bodyparser.json());

//设置跨域
app.all(‘*‘, function(req, res, next) 
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   res.header("X-Powered-By",‘ 3.2.1‘);
   res.header("Content-Type", "application/json;charset=utf-8");
   next();
);


consign(verbose: false)
    .include("./config.js")
    .then("./routers")
    .into(app);



//配置服务端口

var server = app.listen(3000, function () 
 
    var host = server.address().address;
 
    var port = server.address().port;
 
    console.log(‘vue api listening at http://%s:%s‘, host, port);
)

根目录config.js

module.exports =
    users:[
        
         username:‘admin‘, pwd:‘U2FsdGVkX18RavhpxcS6QkHK1Je08MQf7pmNqF41Mug=‘,id:1
        ,
        
         username:‘test‘, pwd:‘U2FsdGVkX18RavhpxcS6QkHK1Je08MQf7pmNqF41Mug=‘,id:2
        
    ],
    aeskey:‘lin.su‘,
    jwtSecret: "lin.su",
    jwtSession: session: false
;

routers:index.js

module.exports = app => 
    app.get("/", (req, res) => 
       res.json(code: "200",msg:‘vue 数据接口正常启动‘);
    );
;

routers:login.js

var jwt = require(‘jwt-simple‘);
 
const tokenExpiresTime = 1000 * 60 * 60 * 24 


module.exports = app => 
    
var jstSecret=app.config.jwtSecret;
    app.post("/login", (req, res) => 
        var username=req.body.username;
        var upwd=req.body.password;
        var result=false;
        var uinfo;
        for(var i=0;i<app.config.users.length;i++)
            if(app.config.users[i].username == username)
                result=true;
                uinfo=app.config.users[i];
                break;
            
        
        const payload = 
        user:uinfo.username,
        environment:‘web‘,
        expires: Date.now() + tokenExpiresTime
        ;
        if(result && uinfo.pwd == upwd)
             delete uinfo.pwd;
             res.json(
                          code:200, token: jwt.encode(payload, jstSecret),userinfo:uinfo
                        );
        
        else
             res.json(
                            code:500,msg: ‘用户名密码错误‘
                        );
        
    );
;

routers:users.js

module.exports = app => 
    app.get("/user",(req, res) => 
            res.json(code: "200",msg:‘success‘);
        );
    

    app.get("/user/info",(req,res) => 
          res.json(code: "200",msg:‘success‘);
     );
    app.post("/users", (req, res) => 
        var  result=req.body;
       res.json(code: "200",msg:JSON.stringify(result));
    );
;

4.运行效果

技术图片

技术图片

技术图片

 

以上是关于Vue+Iview+Node 搭建数据模拟接口的主要内容,如果未能解决你的问题,请参考以下文章

vue.js+iview+node.js 前端快速开发框架搭建实战

vue3.0脚手架为啥一引入iview就报错

vue-element-admin从mock数据过渡到使用后台接口

vue.js开发环境搭建

vue.js开发环境搭建

Vue+Iview+Node 安装环境 运行测试Vue