如何更改 MySQL 本地登录时的默认端口？

Posted 2023-05-04

原来机子上有个 mysql 版本不明 密码不明 所以后来按照网友的办法新装了一个 MySQL 5.5.22 使用貌似是正常的 指定了监听 3307 端口 并且设置了独立的 basedir 和 my.cnf 但是比较讨厌的是现在在命令行输入 mysql -uroot -p 这样登录时默认是登录的 3307 的新 MySQL 而且如果要登录原来那个貌似必须要 mysql -uroot -p -h127.0.0.1 -P3306 非常麻烦（虽然不知道密码的我实际上也没登录进去过）所以……如题！

1.一般情况下都在安装目录下，如果不再的话，就找一下c:\\windows、c:\\windows\\system32下面或者使用windows的搜索功能找一下my.ini。
例如我的在：D:\\Program Files\\MySQL\\MySQL Server 5.1\\my.ini
如果是XAMPP安装方式的就在xampp\\mysql目录下的相关.ini文件。
2.修改下面这个地方：[client]
port=3306

3.如果提示修改不了可能需要把相关软件和服务先停掉，win7的可能要以管理员方式打开，修改后要重启服务才起作用。 参考技术A 修改你3307端口的my.cnf里面的sock文件位置，不要使用默认的/tmp/mysql.sock ， 因为你3306的数据库也是用的这个， 谁后启动就是谁的。
你平时直接mysql不使用IP地址的连接是走sock文件连接的，3307数据库是后启动的，所以你连接的是3307数据库。 参考技术B 1. 编辑 用户目录下的 .my.cnf 文件.
把my.cnf的client节的部分复制进去就可以了. 密码,帐号,端口都可以设置.
or
2. 使用别名. alias

如何在 React.JS 中更改登录/注销时的导航栏文本？

【中文标题】如何在 React.JS 中更改登录/注销时的导航栏文本？

【英文标题】：How to change NavBar text on login/logout in React.JS?

【发布时间】：2020-04-22 02:39:48

【问题描述】：

我的项目中有一个导航栏，我从App.js 内部调用它。根据我是否登录，我想呈现NavBar 的不同视图。如果已登录，我希望 NavBar 有一个注销按钮。如果注销，我希望NavBar 有登录按钮。我使用localStorage 中的令牌来检查我是否已登录。登录后，localStorage 中存在令牌。在注销/登录之前，localStorage 中没有令牌密钥。我将此令牌作为状态传递给NavBar，如下所示：

export default function App() 
   const [loggedIn, setLoggedIn] = useState(localStorage.getItem("token"));
   return (
      <div>
         <Router>
            <Navbar isAuth=loggedIn />
            <Route exact path="/" exact component=Home />
            <Route path="/login" component=Login />
            <PrivateRoute path="/dashboard" component=Dashboard />
         </Router>
      </div>
   );
 

现在从NavBar组件，我用这个prop来渲染NavBar的不同视图，如下图：

const NavBar = props => 
   const classes = useStyles();

   if (props.isAuth !== null) 
      return (
         <div className=classes.root>
            <AppBar position="static">
               <Toolbar>
                  <Typography variant="h6" className=classes.title>
                     <Link
                        href="/"
                        style= textDecoration: "none", color: "white" 
                     >
                        Timetracker
                     </Link>
                  </Typography>
                  <Link href="/" style= color: "white" >
                     <Button color="inherit" onClick=auth.logout>
                        Logout
                     </Button>
                  </Link>
               </Toolbar>
            </AppBar>
         </div>
      );
    else 
      return (
         <div className=classes.root>
            <AppBar position="static">
               <Toolbar>
                  <Typography variant="h6" className=classes.title>
                     <Link
                        href="/"
                        style= textDecoration: "none", color: "white" 
                     >
                        Timetracker
                     </Link>
                  </Typography>
                  <Link href="/login" style= color: "white" >
                     <Button color="inherit">Login</Button>
                  </Link>
               </Toolbar>
            </AppBar>
         </div>
      );
   
;

export default NavBar;

问题是，NavBar 在我登录后不会立即更新。我必须手动刷新页面才能呈现新的NavBar。同样在注销时，它不会自我更新，仅在手动刷新时更新。有什么问题以及如何解决这个问题？

【参考方案1】：

您还需要添加<Switch>。来自文档：

渲染第一个或与位置匹配的孩子。

<Switch> 的独特之处在于它专门呈现一条路线。相比之下，与该位置匹配的每个 <Route> 都会以包容性方式呈现。

就像下面这样：

<Router>
  <Switch>
     <Navbar isAuth=loggedIn />
     <Route exact path="/" exact component=Home />
     <Route path="/login" component=Login />
     <PrivateRoute path="/dashboard" component=Dashboard />
  </Switch>
</Router>

在此处进一步阅读：Router

希望对你有帮助！

【讨论】：

使用 switch 会停止渲染我的其他组件，例如 Home、Login 在访问它们的 URL 时。我认为问题在于 App 和 NavBar 之间的传递状态。

【参考方案2】：

如果您更改 localStorage 中 token 的值，您的应用程序状态将不会更新。

您需要确保更新状态，如果有帮助，我已添加 sandbox。

【讨论】：

按钮在导航栏内部，而不是在您的代码演示的外部。

然后你需要有一个从父级作为道具发送的函数，当你点击按钮时你会调用它。这样您就可以控制父类中的状态。请参阅lifting state up，它应该会有所帮助。

【参考方案3】：

我找到了一个简单的解决方案： 使用 componentDidMount() 或 useEffect() 函数，该函数将在加载 NavBar 页面时自动呈现。 在此函数中，使用 setInterval() 函数不断检索身份验证状态（例如，5000 的间隔）。这将不断刷新 NavBar，并立即更改按钮。 我想您必须将身份验证检查放在 NavBar 组件本身中，而不是使用道具。我将想要更改的特定按钮放在名为 NavBarUser 的单独组件中，该组件更改了“登录 |注册”到“注销”并包含用户头像。然后我将此组件插入到 NavBar 本身的适当位置。 这就是我的代码的样子： ``` 导入反应， useState，useEffect from 'react'; 从'./Avatar'导入头像； 从 'react-router-dom' 导入 BrowserRouter as Router, Link ;

const NavBarUser = () => 

    const [user, setUser] = useState();
    useEffect(() => 
     /*
        setInterval was used in order to refresh the page constantly
    in order to have the "logout" button show immediately in place of
    "login", as soon as user logs out.
    */
        setInterval(() => 
            const userString = localStorage.getItem("user");
            const user = JSON.parse(userString);
            setUser(user);
            , [])
    , 5000);


    const logout = () => 
        return localStorage.removeItem("user");
    

    if (!user) 
        return (
            <div className="navbar-nav ml-auto">
                <Link to="/login" className="nav-item nav-link">Login</Link> <span 
className="nav-item nav-link">|</span> <Link to="/SignUp" className="nav-item nav- 
link">Sign Up</Link>
            </div>
        )
    
    if (user) 
       return (
         <div className="navbar-nav ml-auto">
            <Link to="/" className="nav-item nav-link" onClick=logout>Logout</Link>
                    <Avatar img="/images/Eat-healthy.jpg" />
            </div>
        )
    





export default NavBarUser;

```

【参考方案4】：

我是这样解决这个问题的：

首先，我在App 类中创建了一个isLoggedIn 状态。我给了它一个componentDidMount() 方法，它会在应用程序启动时从cookie 中获取登录状态。然后我创建了globalLogin 和globalLogout 方法作为箭头函数，它们将isLoggedIn 状态相应地设置为true 或false。我将Nav 组件作为道具传递给isLoggedIn 状态，并通过Login 和Nav 路由globalLogin 和globalLogout 方法。然后可以使用this.props.globalLogout(); 或this.props.globalLogin(); 从Login 或Nav 调用这些方法。

这是我的App.js 的简化版。

class App extends Component 
  constructor(props)
    super(props);
    this.state = 
      isLoggedIn: false,
    
  
  componentDidMount() 
    const token = Cookie.get("token") ? Cookie.get("token") : null;
    if (token) 
      this.setState( "isLoggedIn": true );
    
  
  globalLogin = () => 
    this.setState( "isLoggedIn": true );
  
  globalLogout = () => 
    this.setState( "isLoggedIn": false );
  

  render() 
    return (
      <Router>
        <div className="App">
          <Nav isLoggedIn=this.state.isLoggedIn globalLogout=this.globalLogout/>
          <Switch>
            <Route path="/" exact component=Home />
            <Route path="/login" exact>
              <Login globalLogin=this.globalLogin/>
            </Route>
          </Switch>
        </div>
      </Router>
    );
  

编辑：使用 history.push 在上面的登录模块中不起作用，所以我添加了一个中间件来处理道具

render() 
    const LoginIntermediate = (props) => 
      return (
        <Login ...props globalLogin=this.globalLogin/>
      )
    
    return (
      <Router>
        <div className="App">
          <Nav isLoggedIn=this.state.isLoggedIn globalLogout=this.globalLogout/>
          <Switch>
            <Route path="/" exact component=Home />
            <Route path="/login" exact component=LoginIntermediate />
          </Switch>
        </div>
      </Router>
    );