React+Ant.design 从零开始搭建个人博客实战教程05 ——— 生成随机数据 mockjs的使用

最新推荐文章于 2024-07-23 18:03:01 发布
置顶 最新推荐文章于 2024-07-23 18:03:01 发布
阅读量9.4k 收藏 8
点赞数 5
分类专栏： js html+css react ant-design mockjs React+Ant design 从零开始搭建个人博客实战教程 文章标签： react ant-design mockjs 建站教程 js框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/div_ma/article/details/80592996
版权
js 同时被 3 个专栏收录
22 篇文章 1 订阅
订阅专栏
html+css
10 篇文章 0 订阅
订阅专栏
react
6 篇文章 1 订阅
订阅专栏

简介： 刚入手一个服务器 打算搭个个站， 平时工作都是用vue ；为了扩展自己的实战能力 来从头开始实战用用react吧；结合ant-design一起开发，然后后台nodejs来写； 编写我的第一个教程文章，从头到尾记录整个过程 因为是实战项目；部分基础的创建react的和基本语法什么的话各位就自便了 如果有需要的话 我是可以开篇博客的；需要的留言— —
ღ( ´･ᴗ･` )比心
因为并不是很熟悉这两个框架 所以如果有做的不好的 请各位大神指导下小弟 谢谢了

作者：webmxj
csdn博客名:div_ma
联系方式：webmxj@163.com
微信：webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

相关链接：
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

上一篇 我们用json-server做了假数据 但是那些数据需要自己手动生成 有没有更方便的方法更快捷的生成呢 ？
答案是有的，很方便的模块 mockjs 可以根据自己需求生成想要的虚拟数据 接下来我们就来结合json-server来用用看

一 . 引入mockjs模块

在根目录引入mockjs模块；

 npm install mockjs -save

二.在mock文件夹中新建db.js文件

mockjs的api可以到官网http://mockjs.com/看一下
然后写入代码

let Mock=require('mockjs');//引入mockjs模块
let Random = Mock.Random;

module.exports = function() {
    var data = {//定义等下要返回的json数据
        news: []
    };

    var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6))); //随机成长3个图片信息 尺寸 颜色 和随机字母的数组

    for (var i = 0; i < 100; i++) {

        var content = Random.cparagraph(0,10);//随机生成0到10段句子

        data.news.push({
            id: i,//固有id
            title: Random.cword(8,20),//随机长度为在8到20内的汉字字符串
            desc: content,
            tag: Random.cword(2,6),//随机长度为2 到 6 的汉字
            views: Random.integer(100,5000),//100到5000的随机整数
            images: images.slice(0,Random.integer(1,3)),//截取随机一到三个图片
            time:Random.date()
        })
    }
    return data //返回json数据
}

然后我们在根目录运行一下json-server

json-server mock/db.js --port 3003

然后访问 http://localhost:3003/news 就可以看到我们生成的一百条虚拟数据了 是不是很方便
这里写图片描述
最后我们修改package.js的json_server 把db.json 改为db.js

 "json_server": "json-server mock/db.js --port 3003",

大功告成 后面我们生成虚拟数据就很方便了 要多少条有多少条要什么类型有什么类型

相关链接：
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用

webmxj
关注
专栏目录
django-antd-tyadmin：类似的Xadmin的基于模型的快速生成前后台管理增删改查，筛选，搜索的后台管理自动化工具。Antd界面好看现代化！前分离！无损二次开发！由Django Restful Framework和Ant Design Pro V4驱动
02-04
TyAdmin：Django基于模型的，无需代码零代码零学习成本管理后台前生成工具，由Django Restful Framework和Ant Design Pro V4驱动 :clapper_board:在线体验演示 账号：tyadmin密码：tyadmin 演示地址： : 没有代码！！！一行代码都不写，能够拥有的现代化后台管理，动动小手， star一下，感谢！！ TyAdmin：只需要花五分钟阅读README即可快速上手，无额外文档，无框架学习成本，不用自己写一行代码，自动的后台，你值得拥有！ :sparkles:特性 自动生成前预算管理后台，页面接口神奇自动对接。登录验证，修改密码，仪表盘数据统计。 一次拥有增删改改查，
博文业务代码实现和Antd组件--Django播客系统(十一)
兰枫
10-17 1096
文章目录导航菜单页面布局博文业务业务层发布组件富文本编辑器业务层改进详情页组件文章列表页组件List组件分页功能国际化 导航菜单 菜单网址，https://ant.design/components/menu-cn/ Menu 菜单组件 mode有水平、垂直、内嵌 Menu.Item 菜单项 key菜单项item的唯一标识 修改src/index.js导航菜单 import React from 'react'; import ReactDom from 'react-dom';
react中如何mock数据
最新发布
kanno的博客
07-23 686
react中如何mock数据
Vue+Ant Design Vue+Mockjs----mock篇
小疯子的博客
12-10 2512
Mock 文章目录Mockmock 介绍目的优点缺点comment安装mock 实现 mock 介绍 mockjs官方使用文档 目的 方便生成随机数据，拦截Ajax请求。   偶尔会写一些前端的项目，参考一些比较知名的UI框架，里面很多例子都会把数据直接写在里面，作为参考，因此很多项目里面也会这样手写数据，直接写死在前端，将代码与mock数据紧密结合在一起，每次需要修改数据，都需要直接改动到代码层...
Django+Vue+AntDesign框架基本使用和搭建教程
一米阳光的博客
03-25 409
一款 Python 语言基于Django、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
[转]react集成mock
jiaoqi6132的博客
07-17 262
前后端分离已经是软件开发的主流,在开发的过程中,会有很多前端兄弟在想后台大佬接口写好没啊,我要调接口了，这里有时候是会影响到我们的开发效率的,当然有的同志会提出可以自己写本地JSON文件,自己伪造假数据,说实话这个方法确实可以解决问题,但是还是有弊端的,第一数据比较多的时候,一般大家都不乐意去写了,第二后台写好之后,还是要去改代码的,这个就更不舒服了!本文就是解决这个痛点的!我们可以使用Mock来造假数据,这样我们就可以直接脱离后台来写代码了,下面就简单描述一下在react中如何使用mock 1. ...
管理系统系列--基于react + ant-design + dva + Mock 企业级后台管理系统最佳实践.zip
02-26
总的来说，这个项目提供了从零开始构建企业级后台管理系统的一套完整流程，涵盖了前端开发的多个重要环节，对于学习和掌握现代前端技术栈有着很高的参考价值。通过这个实践，开发者不仅可以深化对React、Ant Design...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
通过实际操作，你将掌握完整的前端开发流程，能够独立地从零开始创建一个高质量的React组件库。 总的来说，这个课程旨在提供全面的React和TypeScript实战经验，结合AntD的最佳实践，帮助你提升开发技能，构建出具有...
react系列从零开始_简单谈谈react
08-30
5. **Ant Design**: 是一个流行的React UI框架，提供丰富的预设样式和组件，便于快速搭建美观且响应式的应用。 **React Router** React Router是React生态中的路由库，负责管理应用的导航和页面间的数据传递。它...
react-AntDesignPro开箱即用的中台前端设计解决方案
08-14
React-AntDesignPro的“开箱即用”特性意味着开发者无需从零开始搭建项目结构，可以快速启动开发工作。它通常包含了基本的路由配置、权限管理、登录注销等功能，大大减少了前期准备时间。 ### 主题定制 AntDesign...
React-生成随机数和日期格式化
weixin_46479909的博客
05-30 423
【代码】React-生成随机数和日期格式化。
Vue2.x + Antd + mock 项目实战
Wang_Si_D的博客
04-24 719
项目说明 介绍 环境 "vue-cli": 3.0 涉及主要插件 "ant-design-vue": "^1.7.2", "axios": "^0.21.1", "core-js": "^3.6.5", "crypto-js": "^4.0.0", "echarts": "^5.0.2", "lodash": "^4.17.21", "moment": "^2.29.1", "nprogress": "^0.2.0", "resize-o
create-react-app 使用代理做 mock
王乐平 技术博客
03-04 1096
1. 背景 很多情况下，为了测试需要一些接口的 mock 场景，基于 create-react-app 生产的项目好处在于它内置了这块代理的能力，给用户提供了很大的方便。 2. 代理方式 create-react-app 默认提供了两种方式，关联到 webpack-dev-server 中： 简单方式：在 package.json 中添加 proxy 字段，指定你的 mock server 地址就可以。 高级方式：在 src 下创建 setupProxy.js 文件，使用 http-proxy-middl
Django+Vue+ElementUI管理后台源码
一米阳光的博客
03-15 996
一款 Python 语言基于Django、Vue2.x、ElementUI、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
Django+Vue+AntDesign框架使用搭建教程
一米阳光的博客
03-26 241
一款 Python 语言基于Django、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
基于React+Django+Antd-design的学生成绩信息管理系统
WwLK123的博客
07-21 66
基于React+Django的前后端分离的学生成绩信息管理系统。
基于Django+Vue+AntDesign后台项目管理系统
一米阳光的博客
03-23 222
一款 Python 语言基于Django、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
Django+Vue+AntDesign搭建的系统后台框架
一米阳光的博客
03-23 157
一款 Python 语言基于Django、Vue3.x、AntDesign、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
react+ant.design 登陆模版左右响应式布局 示例
06-01
好的，我可以为您提供一个左右响应式布局的示例代码。 首先，我们需要安装 `antd` 和 `react-router-dom` 依赖。 ```bash npm install antd react-router-dom ``` 然后，我们可以创建一个 `Login` 组件，作为登录界面。在这个组件中，我们可以使用 `antd` 的 `Layout` ， `Row` 和 `Col` 组件来创建一个响应式布局。 ```jsx import React from 'react'; import { Layout, Row, Col, Form, Input, Button } from 'antd'; const { Header, Content } = Layout; const Login = () => { const onFinish = (values) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; return ( <Layout> <Header> <h1 style={{ color: '#fff' }}>Logo</h1> </Header> <Content> <Row justify="center"> <Col xs={24} sm={16} md={12} lg={8} xl={6}> <Form name="basic" initialValues={{ remember: true, }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[ { required: true, message: 'Please input your username!', }, ]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: 'Please input your password!', }, ]} > <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Col> </Row> </Content> </Layout> ); }; export default Login; ``` 在这个示例中，`Header` 组件用于放置 Logo ， `Content` 组件用于放置登录表单。使用 `Row` 和 `Col` 组件来实现响应式布局。 最后，我们可以将应用程序渲染到页面上。 ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ``` 这是一个简单的 React + Ant Design 登录界面的左右响应式布局示例代码。希望能对您有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值