分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

购物车结合单页web应用

发布时间:2023-09-06 02:06责任编辑:彭小芳关键词:web应用

reg.js中

import React, { Component } from "react"class Reg extends Component{ ???render(){ ???????return( ???????????<div> ???????????????<ul> ???????????????????<li><label>用户名:</label><input /></li> ???????????????????<li><label>密码:</label><input /></li> ???????????????????<li><label>邮箱:</label><input /></li> ???????????????????<li><label>手机:</label><input /></li> ???????????????????<li><button>注册</button></li> ???????????????????<li><button onClick={this.toLogin.bind(this)}>前往登录</button></li> ???????????????</ul> ???????????</div> ???????) ???} ???// controller ???toLogin(){ ???????this.props.history.push("/login") ???}}export default Reg;

login.js文件中

import React, { Component } from "react"import { Link } from ‘react-router-dom‘;class Login extends Component{ ???render(){ ???????return( ???????????<div> ???????????????<ul> ???????????????????<li><label>用户名:</label><input /></li> ???????????????????<li><label>密码:</label><input /></li> ???????????????????<li><button onClick={this.toMain.bind(this)}>登录</button></li> ???????????????????<li><Link to="/reg">前往注册</Link></li> ???????????????????{/* <li><button ?onClick={this.toReg.bind(this)}>前往注册</button></li> */} ???????????????</ul> ???????????</div> ???????) ???} ???// controller ???toMain(){ ???????this.props.history.push("/main") ???} ???toReg(){ ???????this.props.history.push("/reg") ???}}export default Login;

main.js中

import React, { Component } from "react"import Quest from ‘./quest/stwo‘import Goods from ‘./shop/shopT‘;import { HashRouter as Router, Route,Link } from ‘react-router-dom‘;class Main extends Component{ ???render(){ ???????return( ???????????<div> ???????????????<div> ???????????????????<ul> ???????????????????????<li><Link to="/main/a1">满减</Link></li> ???????????????????????<li><Link to="/main/a2">五折</Link></li> ???????????????????</ul> ???????????????</div> ???????????????<Router> ???????????????????<div> ???????????????????????<Route path=‘/main/a1‘ component={Quest} /> ???????????????????????<Route path=‘/main/a2‘ component={Goods} /> ???????????????????</div> ???????????????</Router> ???????????</div> ???????) ???}}export default Main;

index.js中

import React from ‘react‘;import ReactDOM from ‘react-dom‘;import Main from ‘./main‘;import Reg from ‘./reg‘;import Login from ‘./login‘;import { ???HashRouter as Router, ???Route} from ‘react-router-dom‘;// 登陆注册ReactDOM.render(( ???<Router> ???????<div> ???????????<Route path=‘/reg‘ component={Reg} /> ???????????<Route path=‘/login‘ component={Login} /> ???????????<Route path=‘/main‘ component={Main} /> ???????</div> ???</Router>), document.getElementById(‘root‘));

购物车结合单页web应用

原文地址:https://www.cnblogs.com/cj-18/p/9378979.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved