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+Iview+Node 登录demo
		1.相关组件安装 axios iview js-cookie crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ... 
- Vue+Iview+Node 项目结构和配置
		1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件 config:项目相关配置 driective:指令 router:路由 store:状态管 ... 
- Vue+Iview+Node 安装环境 运行测试Vue
		1.运行环境及设置 备注:建议设置 npm config set registry https://registry.npm.taobao.org 2.全局安装vue/cli 3.创建vue 项目 v ... 
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及
		Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ... 
- 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建
		node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ... 
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
		例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ... 
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
		前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ... 
- vue开发环境搭建及热更新
		写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ... 
- 四、VueJs 填坑日记之搭建Axios接口请求工具
		上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了.今天我们来搭建api接口调用工具Axios.Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装 ... 
随机推荐
- jsonp的实现原理
			jsonp的实现原理 由于浏览器的安全性(同源策略)限制,不允许AJAX访问协议不同或域名不同或端口号不同的数据接口: 可以通过动态创建script标签的方式,把script标签的src属性指向数据接 ... 
- 2018-2-13-win10-uwp-如何拖动一个TextBlock的文字到另一个TextBlock-
			title author date CreateTime categories win10 uwp 如何拖动一个TextBlock的文字到另一个TextBlock lindexi 2018-2-13 ... 
- linux7查看时间同步服务器的匹配源
			当服务器时间与设定好的同步时间源的时间有差异的时候,一般都需要先查看本机的时间同步服务功能是否在正常的运转,以及同步的时间源是哪里,在这里为大家提供一个检查时间用的命令. linux/centos 7 ... 
- SOLID设计原则
			SOLID设计原则 Single Responsibility Principle单一职责原则 单一职责原则(SRP)表明一个类有且只有一个职责. 一个类就像容器一样,它能添加任意数量的属性.方法等. ... 
- 微信小程序--跳转页面常用的两种方法
			一.bindtap="onProductsItemTap"绑定点击跳转事件 在.wxml文件中绑定 在.js文件中实现绑定事件函数 二.navigator标签配合URL跳转法 在w ... 
- 转-pycharm建立项目
			转自:https://blog.csdn.net/m0_37544464/article/details/79171913 本文针对环境已经配置好的Pycharm建立新项目 1.第一步 2.第二步 在 ... 
- jquery preventDefault()事件
			定义和用法 preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交). 语法 event.preventDefault() 参数 描述 event 必需. ... 
- Java 网络编程(1):使用 NetworkInterface 获得本机在局域网内的 IP 地址
			原文地址:https://segmentfault.com/a/1190000007462741 1.问题提出 在使用 Java 开发网络程序时,有时候我们需要知道本机在局域网中的 IP 地址.很常见 ... 
- ADIS16405BMLZ
			GND,VCC,CS,DOUT,SCLK,DIN 
- Spring AOP之xml 配置实现
			首先这个配置模式估计现在已经不用了,因为我在我们公司的项目里面并没有看到这么配置AOP相关的东西.不过,这个就和学习spring的控制反转(IOC)和依赖注入(DI)一样,刚刚开始的时候,都是从简单的 ... 
