工程級?React?注冊登錄全棧級流程分析
創(chuàng)建前端項目
npm install create-react-app -g create-react-app my-app-client
create-react-app 是創(chuàng)建單頁面程序的腳手架
前端目錄結構
創(chuàng)建好項目之后，刪掉 src 目錄下的文件，按照以下結構創(chuàng)建目錄，根據(jù)具體項目情況進行更改
引入 UI 組件庫
npm install antd -S
Ant Design 是企業(yè)級的 UI 設計語言和 React 組件庫
引入路由
npm install react-router-dom -S
使用路由進行不同頁面間的切換
使用示例：
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<div className="container">
<Switch>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</Switch>
</div>
</HashRouter>
</Provider>,
document.getElementById("root")
);在 routes/index.js 中，引入需要的組件并導出路由配置對象
import Register from "../pages/register/Register";
import Login from "../pages/login/Login";
import Main from "../pages/main/Main";
export const routes = [
{
path: "/register",
component: Register,
},
{
path: "/login",
component: Login,
},
{
path: "",
component: Main,
},
];引入 redux
npm install redux react-redux redux-thunk -S npm install redux-devtools-extension -D
注冊組件樣式
示例：
<Layout>
<Header>
<Logo />
</Header>
<Content>
<Input type="text"/>
</Content>
<Footer>
<Button type="primary">注冊</Button>
</Footer>
</Layout>在自己想要使用 antd 的組件中可使用 import {} from "antd" 即可引入組件樣式，任意使用
收集注冊數(shù)據(jù)
數(shù)據(jù)通過 state 儲存，通過綁定輸入框 onChange 事件更新數(shù)據(jù)
state = {
username: "",
password: "",
againPassword: "",
type: "",
};
handleChange = (name, value) => {
this.setState({
[name]: value,
});
};完成登錄組件
和注冊組件相同的方式完成登錄組件
注意：注冊和登錄組件中的路由跳轉使用 this.props.history 中的 replace() 或者 push() 方法實現(xiàn)，區(qū)別是 replace 不能回退，push 可以回退
創(chuàng)建后端項目
express myapp-server -e
修改 bin/www 中的端口號為 4000，避免與前端的監(jiān)聽端口號 3000 沖突
使用 Postman 測試接口
自動重啟后端工具
npm install nodemon -D
安裝之后將 package.json 中的 scripts.start 改為 nodemon ./bin/www，啟動之后每次修改代碼保存即可立即重啟
使用 mongodb
npm install mongoose blueimp-md5 -S
常見操作：save，find，findOne，findByIdAndUpdate，delete（remove 已經過時）
blueimp-md5 庫用來對密碼進行 md5 加密，庫導出的是函數(shù)，直接使用 blueimp-md5(password)即可返回加密結果
編寫數(shù)據(jù)庫操作模塊
使用操作 mongodb 數(shù)據(jù)庫的 mongoose 模塊向外暴露一個數(shù)據(jù)庫操作的類，這樣在路由中如果需要操作數(shù)據(jù)庫只需要引入類直接使用
const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost:27017/school-chat");
const connection = mongoose.connection;
connection.on("connected", () => {
console.log("數(shù)據(jù)庫連接成功");
});
const userSchema = mongoose.Schema({
username: { type: String, required: true },
password: { type: String, required: true },
type: { type: String, required: true },
...
});
const UserModel = mongoose.model("user", userSchema);
exports.UserModel = UserModel;后端注冊路由
在 routes/index.js 中編寫后端所有的路由，路由中返回的對象儲存在前端 ajax 請求的響應體中
注冊首先需要在數(shù)據(jù)庫中查找用戶是否存在，不存在才新建一條文檔
router.post("/register", (req, res) => {
const { username, password, type } = req.body;
UserModel.findOne({ username }, (err, user) => {
if (user) {
res.send({ code: 1, msg: `用戶“${username}”已存在` });
} else {
const userModel = new UserModel({ username, password: md5(password), type });
userModel.save((err, user) => {
res.cookie("userid", user._id, { maxAge: 1000 * 3600 * 24 * 7 });
res.send({ code: 0, data: { _id: user._id, username, type } });
});
}
});
});后端登錄路由
登錄首先需要在數(shù)據(jù)庫中查找用戶是否存在，存在才返回相應的信息
router.post("/login", (req, res) => {
const { username, password } = req.body;
UserModel.findOne({ username, password: md5(password) }, filter, (err, user) => {
if (user) {
res.cookie("userid", user._id, { maxAge: 1000 * 3600 * 24 * 7 });
res.send({ code: 0, data: user });
} else {
res.send({ code: 1, msg: "用戶名或密碼不正確" });
}
});
});前端請求函數(shù)封裝
npm install axios -S
主流請求分為 GET 請求和 POST 請求，GET 請求需要根據(jù) data 對象拼接出請求的 url
export default function ajax(url = "", data = {}, type = "GET") {
if (type === "GET") {
let queryStr = "";
for (let key in data) {
queryStr += `${key}=${data[key]}&`;
}
if (queryStr !== "") {
queryStr = queryStr.slice(0, -1);
return axios.get(`${url}?${queryStr}`);
}
} else {
return axios.post(url, data);
}
}前端接口請求模塊
通過前面封裝的請求函數(shù)，將項目中所有用到的請求都封裝成函數(shù)在 api/index.js 中
export const reqRegister = (user) => ajax("/register", user, "POST");
export const reqLogin = (username, password) => ajax("/login", { username, password }, "POST");
export const reqUpdate = (user) => ajax("/update", user, "POST");
...前端注冊的 redux
在 redux/actions.js 中編寫多個 action creator：同步 action，異步 action
export const register = (user) => {
const { username, password, againPassword, type } = user;
if (!username) {
return errorMsg("用戶名不能為空！");
}
if (password !== againPassword) {
return errorMsg("兩次密碼不一致！");
}
return async (dispatch) => {
const response = await reqRegister({ username, password, type });
const result = response.data;
if (result.code === 0) {
dispatch(authSuccess(result.data));
} else {
dispatch(errorMsg(result.msg));
}
};
};異步 action 分發(fā)授權成功的同步 action（請求），在分發(fā)之前進行前端驗證，如果失敗就不分發(fā)同步 action，直接返回對應的同步 action，因為請求返回的值的類型的 Promise，所以需要使用 es7 中的 async 和 await 關鍵詞，authSuccess 和 errorMsg 同步 action 返回包含 action type 的對象
在 redux/reducers.js 中編寫所有的 reducer 函數(shù)，然后使用 combineReducers 函數(shù)結合起來暴露出去
function user(state = initUser, action) {
switch (action.type) {
case AUTH_SUCCESS:
return { ...action.data, redirectTo: "/" };
case ERROR_MSG:
return { ...state, msg: action.data };
default:
return state;
}
}
export default combineReducers({
user,
});根據(jù)老的 user state 和指定的 action 返回新的 state
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import reducers from "./reducers";
export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk)));最后，在 redux/store.js 中暴露編寫 redux 最核心部分，向外暴露 store 對象，代碼比較固定，在大部分項目中幾乎不變
完善登錄和注冊組件
登錄和注冊點擊發(fā)送請求的時候會出現(xiàn)瀏覽器跨域報錯，意思是 3000 端口向 4000 端口發(fā)送請求
一個簡單的解決辦法是使用代理：在 package.json 中配置 "proxy": "http://localhost:4000"，意思是配置一個在 3000 端口可以向 4000 端口轉發(fā)請求的代理，瀏覽器識別不出代理
將 redux 作用在在注冊和登錄組件上：
export default connect(
(state) => ({
user: state.user,
}),
{ register }
)(Register);其中 user 中的狀態(tài)可以通過 this.props.user 獲取，比如 this.props.user.msg，然后就可以將 redux 中的狀態(tài)展現(xiàn)在組件中
注冊操作可使用 this.props.register(this.state) 進行登錄
到此這篇關于工程級 React 注冊登錄全棧級流程的文章就介紹到這了,更多相關 React 注冊登錄內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React項目中報錯:Parsing error: The keyword &a
ESLint 默認使用的是 ES5 語法,如果你想使用 ES6 或者更新的語法,你需要在 ESLint 的配置文件如：.eslintrc.js等中設置 parserOptions,這篇文章主要介紹了React項目中報錯:Parsing error: The keyword 'import' is reservedeslint的問題及解決方法,需要的朋友可以參考下2023-12-12
React實現(xiàn)一個支持動態(tài)插槽的Layout組件
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下2025-02-02
這篇文章主要介紹了React中的生命周期，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
在?React?高階組件中處理錯誤是確保應用程序健壯性和穩(wěn)定性的重要環(huán)節(jié),本文為大家整理了一些處理高階組件中錯誤的常見方法,需要的小伙伴可以參考下2025-02-02
這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進行綁定，節(jié)后實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
react?native?reanimated實現(xiàn)動畫示例詳解
這篇文章主要為大家介紹了react?native?reanimated實現(xiàn)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文主要介紹了react導出excel文件的四種方式,主要包括原生js導出,使用?js-export-excel,使用xlsx導出, 使用react-html-table-to-excel,感興趣的可以了解一下2023-11-11
react?component?function組件使用詳解
這篇文章主要為大家介紹了react?component?function組件的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文主要介紹了react腳手架配置代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
React實現(xiàn)createElement 和 cloneElement的區(qū)別
本文詳細介紹了React中React.createElement和React.cloneElement兩種方法的定義、用法、區(qū)別及適用場景,具有一定的參考價值,感興趣的可以了解一下2024-09-09