zoukankan      html  css  js  c++  java
  • VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器。
    在NodeJs环境下,通过配置express可访问的静态资源,实现模拟数据请求
    由于对NodeJS还不是很熟悉,所以,文中可能有不少错误的地方,请谅解,欢迎批评和指正

    服务开发运行环境文件配置

    目录结构说明

    整个vue.js项目的一般目录结构如下:

    • build 编译打包和开发模式下运行的主要文件
    • config 编译打包和开发模式下相关的配置文件
    • node_modules 项目依赖的模块如:vue.js、vue-router、vuex、bootstrap等,可以在package.json中配置依赖的模块
    • src 项目主要代码源文件放在
    • static 静态资源文件
    • cms 存放模拟Ajax请求所返回的json数据,cms为请求的项目名

    修改配置文件

    一般情况下,网站部署很多时候都会部署在某个项目下,例如,我们的系统为管理系统,则部署在 /cms中,本地访问后台相关的接口,基本都是以下访问127.0.0.1:8080/cms开头的路径
    通过在NodeJs中,添加可访问的静态资源的文件夹 cms,存放相应请求接口返回json数据,模拟请求后台数据

    修改build下的dev-server.js文件,添加以下代码:

    //添加可访问的静态资源路径(./cms)
        app.use(staticPath, express.static('./cms'))
    
        /**
         * 拦截 带有.do后缀的请求,读取对应名称的.json文件,返回给前端
         * 例如:前端登录时,Ajax请求为 127.0.0.1:8080/cms/mgr/auth/mgrAdminLogin.do,
         * 则读取 cms/mgr/auth 目录下的mgrAdminLogin.json,并将数据返回给前端,mgrAdminLogin.json为前端希望得到的数据(具体格式与后台开发人员协商)
         */
    app.post('*.do',dummyData );
    function dummyData(paramRequest, paramResponse){
    	var path = './' + paramRequest.url.slice(0, -2) + 'json';
    	fs.readFile(
    	    path,
    	    function (err, contents) {
    	        if (!err) {
    	          contents = contents.toString('utf8');
    	          paramResponse.writeHead(200, { "Content-Type": "application/json" });
    	          paramResponse.end(contents);
    	        } else {
    	          paramResponse.writeHead(404, {"Content-Type": "text/plain"});
    	          paramResponse.end("404 Not found");
    	        }
    	    }
    	);
    }
    

    其中app.use(staticPath, express.static('./cms'))./cms为请求的根目录,设置为与后台请求的路径一致,这样在正式发布时就不需要再改代码

    在main.js中配置请求根目录

    使用vue-resource进行Ajax数据请求,配置请求的根目录为cms

    以登录为例,登录的请求代码如下:

    this.$http.post('mgr/auth/mgrAdminLogin.do', params).then(response => {
    	    this.tip = ''
    	let result = response.data
    	if (result.resultCode === '10000' || result.resultCode === 10000) {
        	let data = result.data || {}
        	let userInfo = {
            	account: data.account || '',
            	id: data.id || -1
          	}
          	this.$route.router.go({path: '/MainPanel'})
            } else {
              this.tip = result.resultMsg
            }
    }, response => {
    	    this.tip = '登录失败!错误码:' + response.status
    })
    

    模拟请求响应的json数据如下:

  • 相关阅读:
    任务框架--Quartz 配置文件
    地址和值
    线性基学习笔记
    S07
    如何在实际项目中使用PageHelper分页插件
    设计模式:原型模式
    常用JS代码片段
    Thomson Plaza里面的三家店以及水果大会
    13.搜索过滤
    07-多线程
  • 原文地址:https://www.cnblogs.com/qingbin-bai/p/6069396.html
Copyright © 2011-2022 走看看