XanaduCompany

1. Adopter des solutions techniques

Les principales technologies utilisées dans ce système sont les suivantes :

Vue3

1. Vue.js
2. Élément Plus
3. axios
4. nœud.js
5. Séquelle
6. Koa
7. Base de données MySQL

Mise à jour 2022.11.19

Nouvelle branche Vue3, déjà la branche par défaut développée par zerotower69 ;

• Mis à jour vers Vue3 + TS + Element Plus

Mise à jour du 15/03/2023

vue3 est la branche principale. Pour la version vue2, veuillez vous référer à la branche vue2. Cette branche présente actuellement de nombreux pièges. Pour certaines imperfections, veuillez vous référer à l'effet de la version vue2.

2. Environnement de développement

1. Système d'exploitation : Windows 10
2. Base de données : MySQL (v5.7.7)
3. Serveur Web : Nginx
4. Outils de développement : Webstorm
5. Environnement de base du système : Node.js
6. Navigateur : Google Chrome

3. Descriptif du catalogue

administrateur --- gestion back-end

Web --- affichage à la réception

serveur --- service back-end

4. Entrez le projet

Le système est en ligne pour l'affichage

1. Affichage du portail d'entreprise (https://xanadu.aerowang.cn/)

2. Gestion de l'arrière-plan du système (https://xanadu.aerowang.cn/admin)

   • Compte : youke, mot de passe : a123456

   • Administrateur : admin Mot de passe : 654321

     Vous pouvez également vous inscrire sur

5. Comment exécuter localement

S'il y a un problème, jetez un œil aux scripts dans package.json. Vous pouvez voir que les commandes de développement et d'exécution sont créées à partir de rien. Si la commande ne peut pas être exécutée, elle ne doit pas être définie !

1. Démarrez d'abord le backend (sous le répertoire du serveur)

npm install

npm run start(本地启动)

或者 npm run dev(实时监听改动重启，边改边跑) 需要全局安装 nodemon（任何说不是xxx命令的错误都是没有全局安装，请先安装后再运行）

2. Démarrer le front-end (répertoire web ou admin)

 # 1.安装
npm install
   #又或者
pnpm install
# 2.启动
npm run serve 
   #又或者
pnpm serve
# 3.打包
npm run build 
 #又或者
pnpm build
# 4.清除 node_modules
npm run clear 
  # 又或者
pnpm clear #由于rmdir 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

Veuillez installer la commande pnpm globalement à l'avance

npm i pnpm -g

6. docker

Déploiement automatique Docker en un clic

Commande

 # 主目录下
docker compose up -d

# 即可访问

Les fichiers suivants doivent être modifiés :

• ./admin/.env.production

  VUE_APP_BASE_API = '你自己的域名:3000/api/v1'

• ./admin/vue.config.js

  line.27 publicPath: '/', => publicPath: '/admin/',

• ./server/config/dbinfo.js

  host: "localhost", => host: "xanadu-db",

• ./web/.env.production

  VUE_APP_PRODURL = "你自己的域名/admin/#/login"

• ./web/src/utils/request.ts

  baseURL: '/api' =>你自己的域名:3000/api

Docker n'utilise pas la version Go

7. Instructions supplémentaires

Étant donné que ce système a optimisé les ressources de chargement CDN, vous devez vous connecter à un réseau relativement rapide et stable pour exécuter ce système, sinon des erreurs apparaîtront sur la page système !

Mise à jour 2022.11.19

Certaines références de ressources proviennent de cdn.jsdelivr.net. Actuellement (2022.11.19), l'accès peut être un peu lent. Si vous êtes intéressé, vous pouvez modifier vous-même le lien de référence.

Mise à jour du 15/03/2023

1. Assurez-vous d'accéder aux répertoires respectifs à exécuter. Pour être précis, ce système est divisé en trois projets : gestion front-end, back-end et front-end. Ce répertoire racine ne peut pas être exécuté directement.

2. Veuillez vérifier strictement la version de votre nœud. Compte tenu des problèmes découverts, dans l'environnement Windows, il est recommandé d'utiliser la version plus grande du nœud 14. De plus, le fichier de groupe du groupe QQ fournit un package compressé de packages dépendants, qui peut également être utilisé comme un essai ; les systèmes Mac 14 et 16 sont tous deux OK (fonctionnant sur APPLE au-dessus de M1).

3. Si une erreur de connexion à la base de données est signalée, veuillez d'abord vérifier si la configuration de dbinfo.js dans le répertoire de configuration sous le serveur (nœud backend) et votre propre configuration de base de données sont correctes.

4. Avant d'exécuter le projet, assurez-vous d'installer npm install pour installer les dépendances pertinentes, puis accédez au côté pcweb, au côté gestion et au backend pour consulter leurs fichiers package.json respectifs, consultez la section scripts et confirmez que la commande que vous souhaitez exécuter a été définie. Aucune commande dev n'est définie. Si vous souhaitez exécuter npm run dev , une erreur sera certainement signalée, et le premier message d'erreur signifie que dev n'est pas dans les scripts. Quoi qu'il en soit, vous verrez apparaître les deux mots-clés package.json et scripts. . La première ligne de votre rapport d'erreur doit indiquer qu'une commande non définie a été exécutée.

5. Pour le script de base de données (initial_data.sql), veuillez vous référer au groupe QQ : 434063310 (le propriétaire de ce groupe n'est pas l'auteur original, mais le maintient volontairement).

6. Node recommande d'utiliser l'outil de gestion de version nvm. Les utilisateurs Windows peuvent utiliser directement .exe pour installer sans souci. Les utilisateurs Mac peuvent utiliser Brew pour installer.

brew install nvm

Après avoir installé nvm, vous pouvez l'utiliser pour changer de version de nœud. nvm install xxx est la commande d'installation. N'oubliez pas d'utiliser nvm use xxx pour passer à la version que vous souhaitez utiliser à chaque changement.

7. Le projet Web utilise CDN. Si vous ne souhaitez pas l'utiliser, veuillez commenter la logique dans la configuration externe ; s'il est utilisé, veuillez vérifier si le lien CDN correspondant est accessible normalement. Collez-le directement dans le fichier. navigateur et vous pouvez le vérifier et le corriger. Configurez votre externe.

8. Concernant l'utilisation du proxy, assurez-vous de configurer le proxy inverse dans nginx dans l'environnement de production.

9. Il n'existe actuellement aucune solution de packaging appropriée pour le nœud back-end. Généralement, le serveur utilise directement pm2 pour démarrer le service de nœud. Veuillez installer pm2 sur le serveur et utiliser :

npm i pm2 -g

Si vous avez vraiment besoin de l'emballer, veuillez consulter l'article sur Zhihu. La qualité de Baidu n'est pas bonne. Mais le concept d'empaquetage ici est différent de celui de Java Même si vous utilisez webpack pour l'empaquetage, votre code est toujours js au lieu d'être converti en bytecode par le compilateur comme Java. L'essence de node est c++ (car node est à proprement parler. a Le runtime JavaScript n'est pas un nouveau langage. C'est juste que le noyau V8 écrit en C++ fournit ces API de nœud. Le véritable langage responsable de l'interaction avec le système est le C++. Le langage que vous utilisez est toujours JavaScript.

10. Les débutants doivent être conscients de l'objectif du packaging frontal. Le code que nous écrivons actuellement ne peut pas être exécuté directement par le navigateur. Nous devons essentiellement convertir notre code dans un format que le navigateur peut reconnaître et exécuter. est js vers un autre js. Le processus de standardisation est complètement différent de l'empaquetage au sens back-end.

11. Pour les problèmes de chemin d'image, essayez d'utiliser votre propre service CDN ou de placer les ressources sur votre propre serveur pour remplacer le chemin d'image qui existe déjà dans la base de données. Vous pouvez utiliser l'instruction SQL suivante :

 UPDATE [tablename] SET [fieldname] = REPLACE([fieldname], ' locolhost:3000 ' , ' [yourHOST] ' )

Les ressources d'image ne nécessitent pas de proxy inverse nginx. Vous pouvez vous référer à la configuration suivante :

 location ~ .*.(gif|jpg|jpeg|png|bmp|swf|webp|jfif)$
    {
        #图片在server/static里，改写root路径就可以了！
        root /www/wwwroot/zero/company/server/static;
        expires      30d ;
        error_log /dev/null;
        access_log /dev/null;
    }

12. Lorsque vous rencontrez un message d'erreur, ne vous inquiétez pas si vous le voyez en anglais. Regardez la première et la dernière phrase. Par exemple, s'il y a une « clé étrangère » dans l'erreur backend, il doit y avoir un problème avec la clé étrangère. Veuillez vérifier la définition du modèle, la définition de la base de données ou les données. Front-end Vue n'est pas défini. Ce problème est principalement lié à une utilisation incorrecte de cdn. Commentez vue.config.js (vue3) pour être optimiste. Il existe déjà des instructions. S’il y a trop d’erreurs en anglais, ne les lisez pas. Il n’est pas difficile d’ouvrir Youdao (Google est plus recommandé) et de les traduire.

13. Il est recommandé de poser des questions spécifiques dans le groupe. Si vous souhaitez demander comment installer nginx, il est recommandé de consulter d'abord Google ou bing.com (si vous êtes trop ennuyé par nginx et que vous ne voulez pas vous en soucier, vous pouvez également utiliser le déploiement Pagoda Fool, mais il est toujours recommandé de jeter un œil à nginx après la configuration du déploiement, apprenez à apprendre). La raison pour laquelle Baidu ne le recommande pas est que la plupart du contenu récupéré est CSDN et que la qualité de son contenu est inégale, ce qui n'est pas bon pour les débutants. Les choses publiées sur le blog ne sont peut-être pas toutes correctes. Si vous êtes novice, il vaut mieux être patient et lire la documentation. Si vous ne le supportez pas, la station B est aussi un bon endroit pour apprendre. Les choses impliquées dans ce projet sont encore très simples, et la documentation et Bilibili peuvent réellement répondre à la plupart de vos questions. Peut-être que, à ce sujet, certaines personnes pensent que nous ne voulons pas que les gens posent des questions. Mais si votre question est trop grande et que vous ne pouvez même pas passer l'introduction à l'installation, la plupart des gens ne voudront pas y répondre, mais ils ne savent vraiment pas sous quel angle vous répondre. Il y a trop de choses à expliquer, il vaut donc mieux l'ignorer.

14. Si vous devez ajouter de nouvelles fonctions, il est recommandé de lire d'abord le code. En réalité, vous n'êtes pas familier avec le nouveau langage et vous commencez tout juste à en ressentir la douleur. La conception fonctionnelle n'a pas de particularités. Il est impossible de copier cette partie du code. Il ne peut s'agir que de votre propre création originale. Si vous ne comprenez pas la partie du code, vous pouvez poster une photo pour poser des questions ( assurez-vous de poster une photo ). Si vous ne regardez pas le code pendant un moment, vous en oublierez une partie. poser des questions peut garantir que votre confusion pourra être résolue à temps.

J'espère que tout le monde pourra non seulement savoir comment utiliser ce projet à partir de la documentation, mais également acquérir des compétences pertinentes afin de pouvoir progresser dans le front-end. Voyant ça, pourquoi ne me donnes-tu pas une étoile ? Laisse ton étoile à une autre prostituée (chien.)

7. Le dernier et le dernier

N'oubliez pas de donner l'étoile ღ(´･ᴗ･`)~ Nouveau groupe : 434063310. (la rapidité de réponse n'est pas garantie)

8. Description de la dernière mise à jour de Zerotower69

1. L'intention initiale du projet est de permettre à chacun d'avoir une comparaison syntaxique de la version vue3, afin que de nombreuses fonctions soient cohérentes avec la branche vue2. Les bugs étant inévitables en développement, veuillez vous référer à la branche vue2 ou déployer des modifications de version si nécessaire. 2. Je ne suis pas responsable de l’expérience de quelqu’un d’autre. Si vous rencontrez des bugs, n’hésitez pas à me poser des questions, mais je ne suis pas un enseignant. Le professeur dont vous avez besoin peut être :

• Tutoriel novice
• bing
• bilibili
• vue3 espère que vous lirez ce document en détail, que vous vous référerez à des ressources d'apprentissage de meilleure qualité et que vous lirez moins de csdn lorsque vous commencerez !