当前位置：首页 > wzjs >正文

企业网站建设免费网站搭建一般要多少钱

wzjs 2025/8/2 13:45:37

企业网站建设免费,网站搭建一般要多少钱,新闻专业为啥学网页制作,做网站没有学历的人会吗1.前端页面文件夹路由功能前端web目录下创建pages 文件夹创建Home.jsx 首页 SignUpPage 注册 LoginPage 登录 ProfilePage 个人资料 SettingPage 各个页面简单实现一下内容如下 const HomePage () > {return (<div>HomePage</div>)}export defaul…

1.前端页面文件夹路由功能

前端web目录下创建pages 文件夹创建Home.jsx 首页 SignUpPage 注册 LoginPage 登录

ProfilePage 个人资料 SettingPage

各个页面简单实现一下内容如下

const HomePage = () => {return (<div>HomePage</div>)}export default HomePage

在main.js 引入 BrowserRouter

import { BrowserRouter } from 'react-router-dom'

用BrowserRouter 把App 组件包裹提供给全局路由功能

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'import { BrowserRouter } from 'react-router-dom'
createRoot(document.getElementById('root')).render(<StrictMode><BrowserRouter><App /></BrowserRouter></StrictMode>,
)

App.jsx 内容如下


import HomePage from '@/pages/HomePage'
import SignUpPage from './pages/SignUpPage'
import ProfilePage from './pages/ProfilePage'
import LoginPage from './pages/LoginPage'
import SettingsPage from './pages/SettingPage'import { Routes, Route} from 'react-router-dom'
const App = () => {return (<div><Routes><Route path="/" element={<HomePage />} /> <Route path="/signup" element={<SignUpPage />} /> <Route path="/login" element={<LoginPage /> } /> <Route path="/settings" element={<SettingsPage /> } /> <Route path="/profile" element={<ProfilePage />} /> </Routes></div>)
}export default App

1.测试路由功能首页跳转到注册再从注册跳转到首页

HomePage.jsx 内容如下


import {Link} from "react-router-dom"
const HomePage = () => {return (<div><p className="text-red-500">首页</p><Link to="/signup">跳转注册页面</Link></div>)}export default HomePage

注册页面类似点击跳转可以实现路由切换

2.注册页面

注册页面分2部分我们先实现左侧功能

import { useState } from "react";
import { MessageSquare,User,Mail,Lock,Eye, EyeOff,Loader2} from "lucide-react";
import {Link} from "react-router-dom"const SignUpPage = () => {const [showPassword, setShowPassword] = useState(false);const [formData, setFormData] = useState({userName: "",email: "",password: "",})const {signup,isSigningUp} = useAuthStore();const validateForm = () => {}const handleSubmit = (e) => {console.log(e)e.preventDefault();}return (<div className="min-h-screen grid lg:grid-cols-2">{/*left side*/}<div className="flex flex-col justify-center items-center p-6 sm:p-12"><div className="w-full mt-10">{/* logo */}<div className="text-center mb-8"><div className="flex flex-col items-center gap-2 group"><div className="size-12 rounded-xl bg-primary/10 flex items-center justify-centergroup-hover:bg-primary/20 transition-colors"><MessageSquare className="size-6 text-primary"></MessageSquare></div><h1 className="text-2xl font-bold mt-2">账号注册</h1><p className="text-base-content/60">从免费创建账号开始</p></div></div>{/* form */}<form onSubmit={handleSubmit} className="space-y-6"><div className="form-control"><label className="label"><span className="label-text font-medium">用户名</span></label>{/* 输入框 */}<div className="relative"><div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><User className="size-5 text-base-content/40" /></div><input type="text"className={`input input-bordered w-full pl-10`}placeholder="请输入用户名"value={formData.userName}onChange={(e)=> setFormData({...formData,userName:e.target.value})}></input></div></div><div className="form-control"><label className="label"><span className="label-text font-medium">邮箱</span></label>{/* 输入框 */}<div className="relative"><div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Mail className="size-5 text-base-content/40" /></div><input type="text"className={`input input-bordered w-full pl-10`}placeholder="请输入邮箱地址"value={formData.email}onChange={(e)=> setFormData({...formData,email:e.target.value})}></input></div></div><div className="form-control"><label className="label"><span className="label-text font-medium">密码</span></label>{/* 输入框 */}<div className="relative"><div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Lock className="size-5 text-base-content/40" /></div><input type={showPassword ? "text" : "password"}className={`input input-bordered w-full pl-10`}placeholder="请输入密码"value={formData.password}onChange={(e)=> setFormData({...formData,password:e.target.value})}></input><buttontype="button"className="absolute inset-y-0 right-0 pr-3 flex items-center"onClick={()=> setShowPassword(!showPassword)}>{showPassword ? (<EyeOff className="size-5 text-base-content/40" />) : (<Eye className="size-5 text-base-content/40" />)}</button></div></div><button type="submit"className="btn btn-primary w-full"disabled={isSigningUp}>{isSigningUp ? (<><Loader2 className="size-5 animate-spin"/>Loading...</>):("创建账户")}</button></form><div className="text-center"><p className="text-base-content/60">已有账号?{""}<Link to="/login" className="link link-primary">去登录</Link></p></div></div></div>{/* right side */}</div>)
}export default SignUpPage

效果

1.引入axios

前端http请求我们通axios实现新建lib文件夹创建axios.js

import axios from 'axios';const axiosInstance = axios.create({baseURL: 'http://localhost:3000/api',  //后端服务地址withCredentials: true,
})export default axiosInstance;

2.引入zustand

我们全局所有接口请求状态数据都用zustand管理类似 pinia vuex redux等

新建store文件夹创建userAuthStore.js 主要实现用户登录注册认证功能

import {create} from 'zustand'
import axiosInstance from '../lib/axios'
import toast from 'react-hot-toast'// 创建一个auth store
export const useAuthStore = create((set,get) => ({authUser:null, // 用户信息isSigningUp: false, // 是否登录isLoginningIn: false, // 是否登录中signup: async(data) => {set({isSigningUp: true})try {const res = await axiosInstance.post('/auth/signup', data)toast.success("注册成功")set({authUser: res.data})} catch (error) {console.log("useAuthStore signup error",error.message)set({isSigningUp: true})} finally {set({isSigningUp: false})}},login: async(data) => {set({isLoginningIn: true})try {const res = await axiosInstance.post('/auth/login', data)set({authUser: res.data})toast.success("登录成功")} catch (error) {toast.error(error.response.data.message)} finally{set({isLoginningIn: false})}},logout: async() => {try {await axiosInstance.post('/auth/logout')set({authUser: null})toast.success("退出成功")} catch (error) {console.log("useAuthStore logout error",error.message)}}
}))

在signupPage 引入useAuthStore 更新如下代码

const {signup,isSigningUp} = useAuthStore();const validateForm = () => {if(!formData.userName.trim()) return toast.error("请输入用户名");// 邮箱正则验证if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(formData.email)) return toast.error("请输入正确的邮箱");if(formData.password.length < 6) return toast.error("请输入至少6位的密码");return true}const handleSubmit = (e) => {console.log(e)e.preventDefault();const success = validateForm();if(success) signup(formData);}

注册按钮加个loading的状态

<button type="submit"className="btn btn-primary w-full"disabled={isSigningUp}>{isSigningUp ? (<><Loader2 className="size-5 animate-spin"/>Loading...</>):("创建账户")}</button>