福建做网站公司,微信上怎么做网站,青岛网站制作seo,网站售后服务模板1.需求说明
因为前后端分离开发项目#xff0c;就会存在前端静态页面写好了#xff0c;后端数据接口还没写好#xff1b;这时候前端就需要自己定义数据来使用。
定义数据有三种方式#xff1a;直接写死数据、使用mock软件、json-server工具
这里讲解通过json-server工具…1.需求说明
因为前后端分离开发项目就会存在前端静态页面写好了后端数据接口还没写好这时候前端就需要自己定义数据来使用。
定义数据有三种方式直接写死数据、使用mock软件、json-server工具
这里讲解通过json-server工具来获取数据
2.安装插件
npm i -D json-server
3.新建数据文件
在根目录下新建server文件该文件夹下新建data.json文件用于存储数据 4.更改项目配置文件
package.json
更改前
scripts: {start: react-scripts start,build: react-scripts build,test: react-scripts test,eject: react-scripts eject},
更改后
scripts: {start: react-scripts start npm run server,build: react-scripts build,test: react-scripts test,eject: react-scripts eject,server: json-server ./server/data.json --port 8888},
说明
1.需要同时启动项目和工具工具启动命令是npm run server项目启动命令是npm run start
2.server: json-server ./server/data.json --port 8888代码意思是server是启动命令、json-server是工具、./server/data.json是数据源位置、--port 8888是设置端口号
3.start: react-scripts start npm run server的意思是start是启动命令、react-scripts start不知道是什么、 npm run server是代表同时启动server工具整行代码就是通过npm run start就同时启动项目和启动server工具
4.启动项目和工具可以分开在两个终端控制台启动分别在两个终端控制台输入各自的命令就行了也可以在一个控制终端上通过npm run start,前提是有写react-scripts start npm run server
5.测试
import axios from axios
function Home() {async function shower() {// await axios.get(http://localhost:8888/kanno).then(res{// console.log(res:, res.data);// }) // 通过axios来请求数据const response await fetch(http://localhost:8888/kanno); // 通过fetch来请求数据const data await response.json();console.log(Data:, data);}return (divdiv我是home/divbutton onClick{shower}点击请求数据/button/div)
}export default Home
说明接口地址来源于使用npm run server启动server工具时 6.最终效果
