zoukankan      html  css  js  c++  java
  • 仿饿了么mock数据中的一点问题

    https://blog.csdn.net/wthfeng/article/details/53366169

    完成仿饿了么app后,又重新过了一遍从安装到目录设置,mock模拟,vue-router设置,发现在mock数据设置路由时的一点问题,视频教程是基于vue1.0的,起初在网上找了个别人的直接复制下来,由于时间问题没有仔细思考,今天找了上面连接的知识,终于发现了,哈哈。教程用的router设置多个规则的路由,但是现在基于vue2的版本在webpack.dev.conf.js中的derServer中添加before(app){},括号中设置路由,按教程内容中用的

    apiRoutes.get('/goods',(res)=>{

    res.json({
    errno:0,
    data:goods
    })

    })

    发现完全不行!!但是用单个路由规则设置app.get('/api/goods',回调函数)可以!试了几种写法发现要用apiRoutes写要把app.use('/api',apiRoutes)写进before函数里面才行!

    当然还有个最简单的,是教程老师github上的写法https://github.com/ustbhuangyi/vue-sell/blob/master/build/webpack.dev.conf.js

     总结接口设置

    1、单个路由规则设置,before函数里的回调函数不能用箭头函数(用箭头函数报错uncaught (in promise))

    const data=require('../data')
    const seller=data.seller
    const goods=data.goods
    const ratings=data.ratings
    before(app) {
    app.get('/api/seller', function (req, res) {
    res.json({
    errno: 0,
    data: seller
    })
    });
    app.get('/api/goods', function (req, res) {
    res.json({
    errno: 0,
    data: goods
    })
    });
    app.get('/api/ratings', function (req, res) {
    res.json({
    errno: 0,
    data: ratings
    })
    });

    2、express.Router设置中间件

    const express=require('express')
    const data=require('../data')
    const seller=data.seller
    const goods=data.goods
    const ratings=data.ratings
    const apiroutes=express.Router()
    const devWebpackConfig = merge(baseWebpackConfig, {
    module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
    },
    // cheap-module-eval-source-map is faster for development
    devtool: config.dev.devtool,

    // these devServer options should be customized in /config/index.js
    devServer: {
    before(app){
    apiroutes.get('/seller',(req,res)=>{
    res.json({
    error:0,
    data:seller
    })
    })
    apiroutes.get('/goods',(req,res)=>{
    res.json({
    error:0,
    data:goods
    })
    })
    apiroutes.get('/ratings',(req,res)=>{
    res.json({
    error:0,
    data:ratings
    })
    })
    app.use('/api',apiroutes)//在这里注册到实例上
    },
  • 相关阅读:
    codevs 4511 信息传递(NOIP2015 day1 T2)
    caption标签,为表格添加标题和摘要
    用css样式,为表格加入边框
    table标签,认识网页上的表格
    认识div在排版中的作用
    使用ol,添加图书销售排行榜
    使用ul添加列表
    使用<pre>标签为你的网页加入大段代码
    想加入一行代码吗?使用<code>标签
    <address>标签,为网页加入地址信息
  • 原文地址:https://www.cnblogs.com/sxly/p/9243718.html
Copyright © 2011-2022 走看看