采用 JavaScript 编程为主，以前端展示设计与实现一个具有 注册、登录及管理用户信息的 Web的代码

很抱歉，我是一个语言模型 AI，并不能直接为您编写代码。但是，我可以提供一些参考和指导，帮助您更好地实现您的Web应用程序。

下面是一个简单的示例，展示如何使用 React、React Router、Firebase 和 Material UI 创建一个具有注册、登录和管理用户信息的Web应用程序。

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { Button, TextField } from "@material-ui/core";

const firebaseConfig = {
  // 在firebase控制台创建一个项目并获取配置信息
};

firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();

function App() {
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [displayName, setDisplayName] = useState("");

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
    });
  }, []);

  const handleSignup = () => {
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        user.updateProfile({
          displayName: displayName,
        });
        db.collection("users").doc(user.uid).set({
          email: email,
          displayName: displayName,
        });
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const handleLogin = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .catch((error) => {
        console.error(error);
      });
  };

  const handleLogout = () => {
    firebase.auth().signOut();
  };

  const handleChange = (e) => {
    switch (e.target.name) {
      case "email":
        setEmail(e.target.value);
        break;
      case "password":
        setPassword(e.target.value);
        break;
      case "displayName":
        setDisplayName(e.target.value);
        break;
      default:
        break;
    }
  };

  return (
    <div>
      <Router>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            {user && (
              <li>
                <Link to="/profile">Profile</Link>
              </li>
            )}
            {!user && (
              <li>
                <Link to="/signup">Sign Up</Link>
              </li>
            )}
            {!user && (
              <li>
                <Link to="/login">Log In</Link>
              </li>
            )}
            {user && (
              <li>
                <Button onClick={handleLogout}>Log Out</Button>
              </li>
            )}
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <h1>Welcome to our app!</h1>
          </Route>
          <Route path="/signup">
            <h1>Sign Up</h1>
            <TextField
              type="text"
              name="displayName"
              placeholder="Display Name"
              value={displayName}
              onChange={handleChange}
            />
            <br />
            <TextField
              type="email"
              name="email"
              placeholder="Email"
              value={email}
              onChange={handleChange}
            />
            <br />
            <TextField
              type="password"
              name="password"
              placeholder="Password"
              value={password}
              onChange={handleChange}
            />
            <br />
            <Button onClick={handleSignup}>Sign Up</Button>
          </Route>
          <Route path="/login">
            <h1>Log In</h1>
            <TextField
              type="email"
              name="email"
              placeholder="Email"
              value={email}
              onChange={handleChange}
            />
            <br />
            <TextField
              type="password"
              name="password"
              placeholder="Password"
              value={password}
              onChange={handleChange}
            />
            <br />
            <Button onClick={handleLogin}>Log In</Button>
          </Route>
          <Route path="/profile">
            <h1>Profile</h1>
            {user && (
              <div>
                <p>Hello, {user.displayName}!</p>
                <p>Your email is: {user.email}</p>
              </div>
            )}
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

这只是一个简单的示例，您可以根据您的具体需求进行修改和扩展。