知乎日报项目前端+后端-React18 + React-Router6 + React-redux + redux/toolkit

已于 2023-04-03 22:02:36 修改
阅读量421 收藏 4
点赞数
分类专栏： react HTML typescript 文章标签： 前端 react.js javascript
于 2023-04-03 21:53:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014582342/article/details/129940687
版权
HTML 同时被 3 个专栏收录
76 篇文章 2 订阅
订阅专栏
react
6 篇文章 0 订阅
订阅专栏
typescript
5 篇文章 0 订阅
订阅专栏

地址

  • 前端:https://github.com/superBiuBiuMan/-zhuhu_daily
  • 后端:https://github.com/superBiuBiuMan/zhihu-daily-admin
  • 学习地址:Bilibili
    • https://www.bilibili.com/video/BV1wx4y157Gu

介绍

  • 技术栈使用React18 + React-Router6 + React-redux + redux/toolkit + craco(重写配置) + ( amfe-flexible + postcss-pxtorem 达到适配 ) + less

  • keep-alive效果没实现,找了几个库效果都不理想,就没去弄了

运行

前端运行

  • 1.安装依赖(node什么的自行安装)
yarn install
  • 2.运行
npm run start

后端运行

  • 1.安装依赖(node什么的自行安装)
yarn install
或者
npm install
  • 2.运行
node server.js

图片展示

首页

详情页面

个人中心页

修改个人信息页

收藏页

加载骨架屏

未成年梦想
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
React知乎日报项目（一）
lqiqil的博客
05-09 174
。
react-router v6
Sapling
11-05 429
React Router 6x比5x有哪些改动？内置组件将改为等语法变化改为等。
React----函数组件路由React-Router（V6）
王延朕的博客
04-07 2018
安装react-router yarn install --save react-router index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {BrowserRouter} from "react-router-dom"; ReactDOM.render( <React.StrictMode
react普通类组件-在react-router6中使用编程式导航
qq_52179917的博客
03-03 481
难点： 在类组件中使用 hook: useLocation, useNavigate, useParams。之前在v5 中使用的时 withRouter 但是这个方法在 6中废弃。
react18+react-router-dom v6实现路由鉴权
baidu_41601048的博客
10-24 2388
react-router-dom v6实现路由鉴权
zhihudaily-react：知乎日报React版--- react + redux + react-router
02-06
知乎每日React react.js项目 声明 本项目所有文字图片等稿件内容均由提供，获取与共享之行为或有侵犯知乎产权的嫌疑人。若被告知需停止共享与使用，本人会及时删除整个项目。 请您了解相关情况，并遵守知乎协议。 同...
小程序源码 知乎日报 (代码+截图)
06-19
小程序源码 知乎日报 (代码+截图)小程序源码 知乎日报 (代码+截图)小程序源码 知乎日报 (代码+截图)小程序源码 知乎日报 (代码+截图)小程序源码 知乎日报 (代码+截图)小程序源码 知乎日报 (代码+截图)小程序源码 ...
react-native-redux-zhihudaily：使用react-native，redux，codepush重构的知乎日报客户端
02-05
使用react-native和redux插入的知乎日报，本项目兼容的iOS版本，但界面只遵循知乎日报Android端编写 预习 Android预览 iOS预览 黑暗主题 使用redux 入门 yarn install # recommend use yarn, also you can use npm ...
zhihuDaily：知乎日报，使用vue + vuex + vue-router + swiper制作完成
02-06
知乎日报 本项目主要使用vue的全家桶进行开发，项目中使用的API来自 ，通过完成此项目，加深了对vue全家桶的学习和理解。 API在使用的过程中遇到了跨域的问题，通过构建节点http服务，进行转发API请求，解决跨域问题...
知乎-微信小程序源码+截图
05-26
知乎-微信小程序源码+截图
react-知乎问答界面react实现
08-14
知乎问答界面react实现
在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
m0_61083409的博客
03-02 490
react-router-dom 编程式路由导航 (v5) 1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`); 2.push跳转+携带search参数 props.history.push(`/b/child1?id=${id}&title=${title}`); 3.push跳转+携带state参数 props.history.push(`/b/child1`, { id, title }); 4.repl
React路由基础、路由基本使用、组件说明、执行过程、编程式导航、默认路由
七七的博客
11-14 1189
现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件。
React嵌套路由、路由懒加载、编程式导航、withRouter、路由封装
爱敲代码的狼仔
11-15 1277
嵌套路由 1、嵌套路由的地址必须在父路由的基础上编写，不可以独立编写 2、Route的定义位置，决定了嵌套组件内容渲染的位置 就是在子组件当中添加路由占位和路由连接部分 import React, { Component } from 'react' import {Route,Link} from 'react-router-dom'​ import PENews from './PENews' import HappyNews from './HappyNews' import ChinaNe
react18+router6
m0_48170657的博客
03-15 396
1.安装路由 npm i react-router-dom。3.创建react-router文件夹并配置。4.创建相关文件并在app.jsx中引入。5.npm run dev 运行项目。2.在main.jsx中引入。
从0到1，运用React开发迷你版知乎系统！
前端劝退师
04-13 321
大厂用React，小厂用VueReact 起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻...
vue3项目实战---知乎日报----项目搭建
每天都要努力学习哦~~
04-24 1887
目录 基础框架和响应式布局 项目介绍 接口文档 vue.config pagejson 初始化公共样式 vuex模块 路由模块 utils公共类库 axios 二次封装 响应式处理 && vant ui组件库 基础框架和响应式布局 项目介绍 知乎日报 @1 技术栈：@vue/cli、vue3、vuex4、vue-router4、vant3、axios(qs)... + postcss-pxtorem & amfe-flexible 基于这两个模块..
最新版本react 18 react-router-dom6 reduxjs/toolkit redux-perseist 以及中间件配置
jichunhui1992的博客
08-18 746
最新版本react 18 react-router-dom6 reduxjs/toolkit redux-perseist 以及中间件配置
React-Native知乎日报
大灰狼的小绵羊哥哥的博客
02-16 375
https://github.com/race604/ZhiHuDaily-React-Native The drawer The content page
手把手django+vue前后端分离开发入门(附demo) - 知乎
最新发布
08-31
手把手进行Django Vue前后端分离开发的入门，可以通过以下步骤实现： 1. 首先，确保已经安装了Python和Node.js，以及相应的开发环境。 2. 创建一个Django项目，可以使用命令`django-admin startproject project_name`来创建项目。 3. 进入项目目录，创建一个Django应用，可以使用命令`python manage.py startapp app_name`来创建应用。 4. 在Django中配置应用，包括数据库连接、URL路由等，可在`settings.py`中进行配置。 5. 创建数据库模型，可以在应用目录下的`models.py`中定义模型类，表示数据表结构。 6. 执行迁移命令，将模型映射到数据库中，可使用命令`python manage.py makemigrations`和`python manage.py migrate`执行。 7. 在应用目录下创建视图函数，用于处理客户端的请求，其中可以包括接收和发送JSON数据。 8. 在`urls.py`中配置URL路由，将请求的URL与对应的视图函数进行关联。 9. 使用Vue CLI创建Vue项目，可以使用命令`vue create frontend`来创建项目。 10. 在Vue项目中安装axios，用于发送HTTP请求，可以使用命令`npm install axios`进行安装。 11. 按照需求，在Vue组件中编写前端代码，可以使用axios与后端进行数据交互，获取数据并展示。 12. 运行Django项目，可以使用命令`python manage.py runserver`来启动Django服务器。 13. 运行Vue项目，可以使用命令`npm run serve`来启动Vue开发服务器。 通过以上步骤，即可实现Django Vue前后端分离开发入门。在实践中，可以进一步学习和了解Django和Vue的相关文档和教程，通过不断实践和探索，提升开发技能。相关的示例代码和项目实例可以参考知乎上的文章。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未成年梦想

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值