北京神州网站建设,做网站设计制作的公司,做瓷砖在什么网站上找素材好,建设部网站 干部学院 一级注册建筑师培训 2014年项目介绍#xff1a;主要将学习到的项目内容进行总结#xff08;有需要项目源码的可以私信我#xff09;
关于我的项目的配置如下#xff0c;请注意下载的每个版本不一样#xff0c;写的api也不一样 一、项目介绍
1.资料
1#xff09;短信接收M端演示#xff1a…项目介绍主要将学习到的项目内容进行总结有需要项目源码的可以私信我
关于我的项目的配置如下请注意下载的每个版本不一样写的api也不一样 一、项目介绍
1.资料
1短信接收M端演示极客园http://geek.itheima.net
2PC端接口文档极客园PChttp://geek.itheima.net/api-pc.html
2.项目介绍
1【极客园】对标CSDN、博客园等竞品致力成为更加贴近年轻IT从业者学员的科技资讯类应用
2产品关键词IT、极客、活力、科技、技术分享、前沿动态、内容社交
3产品用户特点年轻有活力对IT领域前沿科技信息充满探索欲和学习热情
4极客园PC端项目个人自媒体管理端
5项目演示
6项目功能
登录首页内容管理文章列表、发布文章、修改文章
3.技术栈
react v17.0.2 / react-dom v17.0.2ajax请求库axios路由react-router-dom以及history富文本编辑器react-quillCSS预编译器sassUI组件库antd v4项目搭建React官方脚手架 create-react-app
二、项目搭建
1.创建项目
使用React CLI搭建项目 npx create-react-app geek-pc进入项目根目录cd geek-pc启动项目 yarn start调整项目目录结构 2.使用git管理项目 3.配置基础路由
1安装路由yarn add react-router-dom
使用yarn add的时候可能会报上述错误报的话可以使用npm install react-router-dom来进行安装 2在pages目录中创建两个页面Login登录页面、Layout首页 3在App.js中配置路由
import React from react
import { BrowserRouter as Router, Route, Link, Routes } from react-router-dom
import Login from ./pages/Login
import Layout from ./pages/Layout
function App() {return (Routerdiv classNameApp{/* Link to/login登录/LinkLink to/home首页/Link */}{/* 配置路由的规则 */}RoutesRoute path/home element{Layout /}/Route{/* Route path/home component{Layout/Layout}/Route */}Route path/login element{Login/Login}/Route/Routes/div/Router)
}export default App
配置完路由就可以实现网页输入网址展示对应的页面的内容 此时需要注意的点是:
a.老版本用component {Layout/}来链接到页面新版本用这个无效得使用element
b:旧版本使用Switchl来添加多个路由,新版本使用Routes
SwitchRoute /RouteRoute/Route
/Switch
4.组件库---antd
1官方文档链接
Ant Design - 一套企业级 UI 设计语言和 React 组件库
2antd是基于Ant Design设计体系的React UI组件库主要用于研发企业级中后台产品
3开箱即用
a.安装npm install antd
b.使用
import { Button, DatePicker, Card } from antd
Button typeprimary我是一个按钮/Button// 导入antd的全局样式
import antd/dist/reset.css 三、项目功能------登录
功能如下
搭建登录页面结构登录表单校验登录逻辑封装处理token、axios的工具函数登录访问控制
1.Card组件的使用
export default class Login extends Component {render() {return (div classNamelogin{/* 登陆组件 */}{/* Button typeprimary我是一个按钮/Button */}{/* DatePicker/DatePicker */}{/* Card extra{a href#More/a} style{{ width: 300 }} */}Card classNamelogin-container{/* pCard content/ppCard content/ppCard content/p */}img src{logo} classNamelogin-logo //Card/div)}
}2.准备样式
.login {width: 100vw;height: 100vh;background-image: url(../../assets/login.png);position: relative;
}
.login-container {width: 440px;height: 360px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.login-logo {width: 200px;height: 40px;display: block;margin: 0 auto 20px;
}
3.使用绝对路径导入图片
我们使用相对路径../导入图片可能存在文件位置移动找不到图片的效果所以使用绝对路径来配置
Importing a Component | Create React App
1在项目根目录下创建jsconfig.json文件 {compilerOptions: {baseUrl: src},include: [src]
}2导入删除掉相对路径
import logo from assets/logo.png
4.使用sass文件修改掉css文件
1安装sass 2)将css文件后缀改为.sass 3使用sass以后就可以实现样式包裹但是里面如果使用绝对路径会进行报错所以需要使用来进行导入
.login {width: 100vw;height: 100vh;background-image: url(~assets/login.png);position: relative;.login-container {width: 440px;height: 360px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.login-logo {width: 200px;height: 40px;display: block;margin: 0 auto 20px;}
}5.
