react, webpack4,json-server, 模拟前端数据(POST+自定义数据)

环境:react脚手架创建的目录,暴露的webpack

1 全局下载json-server,

npm i json-server -g
复制代码

2 在webpackDevServer.config.js中修改

    public: allowedHost,
-    proxy,
+    proxy: { //代理服务器
+      '/cgibin/vista': {
+          target: {
+              protocol: 'http',
+              host: 'localhost',
+              port: 9999
+          },
+          changeOrigin: true,
+          secure: true
+      }
+},
    before(app, server) {

复制代码

3 在src目录外创建一个mock文件夹

(1)创建一个json-server的服务:mock/server.js

let  handleCgid= require('./data.js')
const jsonServer = require('json-server')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
// Add custom routes before JSON Server router
server.post('/cgi-bin/vista_cgi.cgi', (req, res) => {
    //req.params, req.query ,req.body
    res.send(handleCgid(req.body))
})

server.listen(9999, () => {
  console.log('JSON Server is running')
})
复制代码

(2)创建要返回自定义的data数据

mock/data.js


module.exports = function (data) {
    switch(data.cgid){
        /**登陆页面 login */
        case 0:
            if((data.username==='admin')&&(data.password==='admin'))
                return {
                    restcode:2000,
                    errmsg:'success',
                    first_boot:0
                }
            else return{
                restcode:4001,
                errmsg:'unauthorized',
                first_boot:0
            }
        /** 登陆页面 auth */
        case 1:
            return {
                restcode:2000,
                errmsg:'success',
                first_boot:0
            }
        default:            
            return{
                'error':'the message you send is not defined!'
            }
    }
  };
  
复制代码

4 修改package.json

"scripts": {
  "start": "node scripts/start.js",
  "server": "node mock/server.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},
复制代码

开启服务: npm run server 注,这里还不能进行热更新,可以在评论告诉我怎么加哦

5 调用模拟数据 这个跟正常代码写法一样,模拟时打开模拟数据服务器, 不打开时不会被模拟

axios.post('/cgibin/vista',{cgid:1})
  .then((res) => {
    console.log(res)
      if(res.status == 200){
          that.setState({
              dataSource: res.data.data
          })
      }
  })
复制代码

注意,这里的post路径已经在webpackDevServer.config.js中写死了, 如果想要灵活变通路径可以参考json-server官网说明https://github.com/typicode/json-server, 或者参考上一编关于GET的文章。

6 总结 : 本地开发环境模拟: npm run start , npm run server 两个同时开启才会成功返回数据。 注意, 要全局安装json-server,不然提示命令找不到。 这样子模拟数据不会对生产环境造成任何影响。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React应用中使用`postcss-pxtorem`是为了将设计稿中的像素值转换为相对单位(如rem),这样可以在不同屏幕尺寸上保持良好的响应式设计。以下是一个简单的示例,展示如何在React项目中设置和使用`postcss-pxtorem`: 首先,你需要安装`postcss`, `postcss-loader`, 和 `postcss-pxtorem` 这些依赖。在你的项目目录下,打开命令行并运行: ```bash npm install --save-dev postcss postcss-loader postcss-pxtorem ``` 然后,在`webpack.config.js`或`.babelrc`文件中配置PostCSS和`postcss-pxtorem`: **webpack.config.js** ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-pxtorem plugins: () => [require('postcss-pxtorem')({ rootValue: 100, // 根元素的font-size,默认100px propList: ['*'], // 应用转换的CSS属性,默认除了user-select等 unitPrecision: 5, // 小数位数,默认5 minPixelValue: 1, // 像素值的最小值,默认1 })] } } ] } ] } }; ``` **.babelrc** (如果使用Babel) ```json { "plugins": ["postcss"], "presets": ["@babel/preset-env"] } ``` 以上配置会在处理`.css`文件时自动应用`postcss-pxtorem`插件。 接下来,你可以创建一个`.scss` 或 `.css` 文件,并使用像素单位(如`px`)编写样式: ```scss body { font-size: 16px; /* 这会被转换为 rem 格式 */ padding: 20px; } ``` 现在,当浏览器加载时,这些像素值会被转换成相对于根元素字体大小(通常设置为100px)的rem值。如果你有任何CSS文件中使用了px,它们也会被相应地转换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值