1.初始化node 项目

2.安装需要部件

3.编写简单代码

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

根目录 index.js

  1. var express=require('express');
  2. var app=express();
  3. var consign=require('consign');
  4. var bodyparser = require('body-parser');
  5.  
  6. app.use(bodyparser.urlencoded({extende:true}));
  7. app.use(bodyparser.json());
  8.  
  9. //设置跨域
  10. app.all('*', function(req, res, next) {
  11.    res.header("Access-Control-Allow-Origin", "*");
  12.    res.header("Access-Control-Allow-Headers", "X-Requested-With");
  13.    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  14.    res.header("X-Powered-By",' 3.2.1');
  15.    res.header("Content-Type", "application/json;charset=utf-8");
  16.    next();
  17. });
  18.  
  19. consign({verbose: false})
  20. .include("./config.js")
  21. .then("./routers")
  22. .into(app);
  23.  
  24. //配置服务端口
  25.  
  26. var server = app.listen(3000, function () {
  27.  
  28. var host = server.address().address;
  29.  
  30. var port = server.address().port;
  31.  
  32.     console.log('vue api listening at http://%s:%s', host, port);
  33. })

根目录config.js

  1. module.exports ={
  2. users:[
  3. {
  4. username:'admin', pwd:'U2FsdGVkX18RavhpxcS6QkHK1Je08MQf7pmNqF41Mug=',id:1
  5. },
  6. {
  7. username:'test', pwd:'U2FsdGVkX18RavhpxcS6QkHK1Je08MQf7pmNqF41Mug=',id:2
  8. }
  9. ],
  10. aeskey:'lin.su',
  11. jwtSecret: "lin.su",
  12. jwtSession: {session: false}
  13. };

routers:index.js

  1. module.exports = app => {
  2. app.get("/", (req, res) => {
  3. res.json({code: "200",msg:'vue 数据接口正常启动'});
  4. });
  5. };

routers:login.js

  1. var jwt = require('jwt-simple');
  2.  
  3. const tokenExpiresTime = 1000 * 60 * 60 * 24
  4.  
  5. module.exports = app => {
  6.  
  7. var jstSecret=app.config.jwtSecret;
  8. app.post("/login", (req, res) => {
  9. var username=req.body.username;
  10. var upwd=req.body.password;
  11. var result=false;
  12. var uinfo;
  13. for(var i=0;i<app.config.users.length;i++){
  14. if(app.config.users[i].username == username){
  15. result=true;
  16. uinfo=app.config.users[i];
  17. break;
  18. }
  19. }
  20. const payload = {
  21. user:uinfo.username,
  22. environment:'web',
  23. expires: Date.now() + tokenExpiresTime
  24. };
  25. if(result && uinfo.pwd == upwd){
  26. delete uinfo.pwd;
  27. res.json({
  28. code:200, token: jwt.encode(payload, jstSecret),userinfo:uinfo
  29. });
  30. }
  31. else{
  32. res.json({
  33. code:500,msg: '用户名密码错误'
  34. });
  35. }
  36. });
  37. };

routers:users.js

  1. module.exports = app => {
  2. app.get("/user",(req, res) => {
  3. res.json({code: "200",msg:'success'});
  4. });
  5.  
  6. app.get("/user/info",(req,res) => {
  7. res.json({code: "200",msg:'success'});
  8. });
  9. app.post("/users", (req, res) => {
  10. var result=req.body;
  11. res.json({code: "200",msg:JSON.stringify(result)});
  12. });
  13. };

4.运行效果

Vue+Iview+Node 搭建数据模拟接口的更多相关文章

  1. Vue+Iview+Node 登录demo

    1.相关组件安装 axios  iview  js-cookie  crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ...

  2. Vue+Iview+Node 项目结构和配置

    1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件  config:项目相关配置  driective:指令   router:路由   store:状态管 ...

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

    1.运行环境及设置 备注:建议设置 npm config set registry https://registry.npm.taobao.org 2.全局安装vue/cli 3.创建vue 项目 v ...

  4. Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  5. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  6. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  7. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  8. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  9. 四、VueJs 填坑日记之搭建Axios接口请求工具

    上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了.今天我们来搭建api接口调用工具Axios.Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装 ...

随机推荐

  1. 3306端口被占用导致MySQL无法启动

    报错:mysql服务无法启动1067 发现WINDOWS下面没有MYSQL的服务在MYSQL的安装目录bin下面安装MYSQL服务:C:\Program Files\MySQL\MySQL Serve ...

  2. vt-is-UTF8 - check whether current VT is in UTF8- or byte-mode. 检查当前VT是否处于VTF8模式或是字节模式.

    总览 vt-is-UTF8 [-h|--help] [-V|--version] [-q|--quiet] 描述 vt-is-UTF8 checks whether the current VT is ...

  3. Ubuntu's Software

    (1)indicator-sysmonitor & acpi (2)nvidia-prime (3)sogou (4)wps (5)ubuntu-tweak

  4. photoshop钢笔工具简单记录

    1. 移动锚点 Ctrl + 左键 2. 增加.删除锚点 左键(显示+.-) 3. 直线曲线相互转换 Alt + 左键(注意提示) 默认情况下为直线,按住Alt鼠标左键点击目标锚点,目标锚点两边的直线 ...

  5. 百度网盘Mac版如何分享链接?创建百度网盘 for Mac分享链接的方法

    想把自己百度网盘里的数据分享给朋友,该怎么操作呢?有很多朋友使用百度网盘,可以很轻松的自己的文件上传到网盘上,并可跨终端随时随地查看和分享.下面Mac down小编就给大家介绍一下创建百度网盘 for ...

  6. 关于使用vue时的个人规范

    js文件: 公共功能文件:common_功能名.js 例:common_ajax.js 页面级功能文件(在不同页面复用):page_功能名.js 放置在html文件中加载的js文件命名:app_htm ...

  7. J2SE基础-环境配置

    学习资料:毕向东视频 1.为何配置Path? 使用javac编译文件时,先找path里设置的java路径. 如果不配置Path,在命令提示行中,则只能进入bin目录后,才能执行javac,jar等命令 ...

  8. sublime 分屏 实现代码整体前后移

    view->layout->column2 或者快捷键 command+alt+n (mac) "Tab"键整体后移,"Shift+Tab"整体前移

  9. docker 环境搭建步骤

    配置CA: zhaoweipeng@bogon:~$ ls106 baseos.tar fabric-sdk fabric-sdk (1).tar fixture_106zhaoweipeng@bog ...

  10. Dll注入技术之输入法注入

    DLL注入技术之输入法注入 输入法注入原理是利用Windows系统中在切换输入法需要输入字符时,系统就会把这个输入法需要的ime文件装载到当前进程中,而由于这个Ime文件本质上只是个存放在C:\WIN ...