tuowang使用者中心專案

vast_joy發表於2024-07-26

tuowang使用者中心專案

小作文

​ 2024.7.26，紀念成為個人站長的第一天，秉持著先上後測，先寫後走的原則，晚上熬夜把耗時10天的專案幹完就直接上線了。小測一波bug非常多，不過無所謂以後慢慢再改吧。其實凌晨2點30分寫下這些文字心裡確實還是很開心的，從頭到尾跑通專案全棧從搭建環境一直到專案上線的完整流程，真的能給人很大的滿足感，其中的難受估計也只有自己做過一遍才能知道。所有操作都是第一次摸索，包括無數次遇到逆天bug一小時都解決不了，用自己2小時速通的前端基礎在網上尋找怎麼用typescript實現頁面巢狀子元件功能，到上線功能時發現之前打包好的前端檔案中要改api地址，以及買伺服器，買資料庫，連線資料庫，申請域名，域名解析，跨域連線，配置寶塔linux等等一系列操作。本人只有javaweb後端基礎，但是為了專案完整性，前端專案我還是得跟著敲，看著22年的影片用著24年的環境，這種感覺實操一下就能感同身受，所有版本更新引發的問題都要自己上網搜，問題是還很難搜的到，舉個例子別人用的maven 3.5.3+jdk1.8，但是現在idea得用maven 3.6.3+jdk17了，包括idea裡的compile配置，命令列環境變數，java版本全都得修改，byd idea改配置還玄學搞人搞完不生效，真的搞人心態。再多的也不說了，總之每天上班還要學習，下班還要做專案，確實下了不少功夫。最近也是刷到雷總的影片，”我在圖書館裡看了一本書 矽谷之火，從那個時候開始有了夢想，要做一個偉大的人，要辦一家偉大的公司，要為全球大多數人服務。”“科技不再是高高再上，而是服務於人民 ”真的很感慨。（不知道以後我會不會覺得這很矯情呢）

專案介紹

介紹：tuowang使用者中心專案是一款用於使用者註冊，登入以及管理員進行賬號管理的專案，目前實現的功能是使用者可以根據唯一的星球編號註冊賬號以及登入，管理員可以在後臺管理使用者許可權，刪除賬號等功能

後續todo：

​ 1.管理員建立使用者，修改使用者資訊，刪除使用者

​ 2.上傳頭像

​ 3.根據更多的條件查詢使用者

​ 4.修改bug

專案地址：https://github.com/haoleliu/user-center-backend（後端，前端後面再上傳）

專案訪問網址：http://user.tuowang123.fun/

專案概覽：image-20240726030056256

技術選型

前端:三件套 + React + 元件庫 Ant Design + Umi+ Ant Design Pro(現成的管理系統)

後端:

  • java
  • spring(依賴注入框架，幫助你管理 Java 物件，整合一些其他的內容)·springmvc(web 框架，提供介面訪問、restful介面等能力)·mybatis(ava 運算元據庫的框架，持久層框架，對idbc 的封裝)mybatis-plus(對 mybatis 的增強，不用寫 sql 也能實現增刪改查)
  • springboot (快速啟動/快速整合專案。不用自己管理 spring 配置，不用自己整合各種框架)
  • junit 單元測試庫
  • mysql 資料庫
  • 部署:伺服器/容器(平臺)

專案製作流程

前期寫程式碼

寫程式碼主要有以下幾步

1.前端構建

使用開箱即用的ant-design腳手架，快速開始參考https://pro.ant.design/zh-CN/docs/getting-started/

刪掉一些不用的元件，保留核心元件

2.後端構建

使用springboot+mysql+mybatis

3.編寫前後端程式碼

前端包括根據ant-design的框架寫一些介面，後端也是寫介面，使用者註冊登入邏輯。

4.建立資料庫

本地先建表，然後後端寫增刪改查語句。

5.本地前後端聯調

在本地前後端要加上api代理，除錯到本地能正常執行

後期部署上線

部署需要以下幾個步驟

1.打包

前端打包出一個dist資料夾，後端打包成jar包

2.部署

騰訊雲免費開一個月的雲伺服器，以及一個月的雲資料庫，用寶塔linux一鍵部署，dist放在與雲服務公網ip相同的資料夾下，jar放在user-backend資料夾裡。注意部署之前前端的globalRequests要改自己的雲伺服器地址

const request = extend({
  credentials: 'include', // 預設請求是否帶上cookie
  prefix: process.env.NODE_ENV === 'production' ? 'http://user-backend.tuowang123.fun' : undefined
  // requestType: 'form',
});

3.申請域名

我是申請的阿里域名，一年10塊錢。申請完域名解析，然後在寶塔網站上新增。

這個時候寶塔應該是以下這樣

image-20240726032200704

image-20240726032210493

4.處理跨域問題

backend的配置檔案加上程式碼

location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    add_header 'Access-Control-Allow-Origin' $http_origin;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers '*';
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

至此專案部署上線完畢。

相關文章