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调用的,如果你需要这些功能就需要安装 ...
随机推荐
- vs2013 命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”。是否缺少程序集引用?
参考博文: 解决办法:添加引用/com/Microsoft Office 11.0 Object Library 然后在程序中 C#代码 using Microsoft.Office.Interop. ...
- 启动eclipse出现JVM terminated. Exit code=127 错误解决办法
https://blog.csdn.net/wpzsidis/article/details/72954387 进去第二次又错
- 笔记43 Spring Security简介
基于Spittr应用 一.Spring Security简介 Spring Security是为基于Spring的应用程序提供声明式安全保护的安全 性框架.Spring Security提供了完整的安 ...
- 笔记30 视图解析 ——TilesViewResolver
Apache Tiles,定义适用于所有页面 的通用页面布局.Spring MVC以视图解析器的形式为Apache Tiles提 供了支持,这个视图解析器能够将逻辑视图名解析为Tile定义. 1.配 ...
- Centos Apache 80 代理Tomcat 8080端口
运行环境:Centos 6.5 Apache: 2.2.5 开启apache proxy的相应模块 编辑 /etc/httpd/conf/httpd.conf文件 sudo vim /etc/http ...
- sublime上插件的安装与使用
1.插件安装的方式 插件安装方式一:直接安装 下载插件安装包后,把安装包解压到packages目录(菜单->首选项->浏览插件目录)中,完成安装 插件安装方法二:使用package con ...
- bzoj1008题解
[题意分析] 求长度为n,元素大小在[1,m]∩N的序列中,有多少个序列中存在相同的相邻元素. [解题思路] 小学奥数题.. 总序列数:S=mn 不存在相同的相邻元素的序列数:T=m*(m-1)n-1 ...
- 一次Spring Transactional嵌套事务使用不同的rollbackFor的分析
起因: 项目期间由于一次异常回滚问题,发现自己在事务知识方面知识的遗漏,趁着这次机会,做了几次rollbackFor的测试. 测试: 现在有两个事务,事务oute包含事务Inner.事务A回滚规则 ...
- Go语言中new()和 make()的区别详解
概述 Go 语言中的 new 和 make 一直是新手比较容易混淆的东西,咋一看很相似.不过解释两者之间的不同也非常容易. new 的主要特性 首先 new 是内建函数,你可以从 http://gol ...
- IDea 工具debug模式详细使用说明
IDea 工具debug模式详细使用说明 IDEA中如何使用debug调试项目 一步一步详细教程 Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生 ...