XanaduCompany

1. Adopt technical solutions

The main technologies used in this system are as follows:

Vue3

1. Vue.js
2. Element Plus
3. axios
4. node.js
5. Sequelize
6. Koa
7. MySQL database

2022.11.19 Update

Vue3 new branch, already the default branch; developed by zerotower69

• Updated to Vue3 + TS + Element Plus

2023.03.15 Update

vue3 is the main branch. For the vue2 version, please refer to the vue2 branch. This branch currently has many pitfalls. For some imperfections, please refer to the effect of the vue2 version.

2. Development environment

1. Operating system: Windows 10
2. Database: MySQL (v5.7.7)
3. Web server: Nginx
4. Development tools: Webstorm
5. System basic environment: Node.js
6. Browser: Google Chrome

3. Catalog description

admin---backend management

web---front desk display

server---backend service

4. Enter the project

The system is online for display

1. Enterprise portal display (https://xanadu.aerowang.cn/)

2. System background management (https://xanadu.aerowang.cn/admin)

   • Account: youke, password: a123456

   • Administrator: admin Password: 654321

     You can also register at

5. How to run locally

If there is a problem, take a look at the scripts in package.json. You can see that dev and running commands are created out of nothing. If the command cannot be executed, it must not be defined!

1. Start the backend first (under the server directory)

npm install

npm run start(本地启动)

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

2. Start the front end (web or admin directory)

 # 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 安装在这里，它也会清掉，就是自己干了自己
#会有一条报错出现，请无视它

Please install the pnpm command globally in advance

npm i pnpm -g

6. docker

Docker one-click automatic deployment

Order

 # 主目录下
docker compose up -d

# 即可访问

The following files need to be changed:

• ./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 is not using the go version

7. Supplementary instructions

Since this system has optimized CDN loading resources, you must connect to a relatively fast and stable network to run this system, otherwise some errors will appear on the system page!

2022.11.19 Update

Some resource references come from cdn.jsdelivr.net. Currently (2022.11.19) access may be a bit slow. If you are interested, you can modify the reference link yourself.

2023.03.15 Update

1. Be sure to cd to the respective directories to run. To be precise, this system is divided into three projects: front-end, back-end, and front-end management. This root directory cannot be run directly.

2. Please strictly check your node version. In view of the problems that have been discovered, in the Windows environment, it is recommended to use the larger version of node 14; in addition, the group file of QQ group provides a compressed package of dependent packages, which can also be used as a try; mac systems 14 and 16 are both OK (running on APPLE above M1).

3. If the database connection error is reported, please first check whether the configuration of dbinfo.js in the config directory under the server (backend node) and your own database configuration are correct.

4. Before running the project, please be sure to npm install to install the relevant dependencies, and go to the pcweb end, management end, and backend to look at their respective package.json files, look at the scripts section, and confirm that the command you want to run has been defined. of. There is no dev command defined. If you want to execute npm run dev , an error will definitely be reported, and the first error message means that dev is not in scripts. Anyway, you will see the two keywords package.json and scripts appearing. The first line in your error report must be that an undefined command was executed.

5. For the database script (initial_data.sql), please refer to the QQ group: 434063310 (the owner of this group is not the original author, but maintains it voluntarily).

6. Node recommends using the nvm version management tool. Windows users can directly use .exe to install without worry. Mac users can use brew to install.

brew install nvm

After installing nvm, you can use it to switch node versions. nvm install xxx is the installation command. Remember to use nvm use xxx to switch to the version you want to use every time you switch.

7. The web project uses CDN. If you don’t want to use it, please comment out the logic in the external configuration; if it is used, please check whether the relevant CDN link can be accessed normally. Paste it directly into the browser and you can check it and make it correct. Configure your external.

8. Regarding using proxy, please be sure to configure the reverse proxy in nginx in the production environment.

9. There is currently no suitable packaging solution for the back-end node. Generally, the server directly uses pm2 to start the node service. Please install pm2 on the server and use:

npm i pm2 -g

If you really need to package it, please check the article on Zhihu. The quality of Baidu is not good. But the concept of packaging here is different from that of java. Even if you use webpack for packaging, your code is still js instead of being converted to bytecode by the compiler like java. The essence of node is c++ (because node is strictly speaking a The JavaScript runtime is not a new language. It is just that the V8 kernel written in C++ provides these APIs of node. The real language responsible for interacting with the system is C++. The language you use is still JavaScript.

10. Newbies please be aware of the purpose of front-end packaging. The code we are currently writing cannot be run directly by the browser. We need to convert our code into a format that the browser can recognize and execute. In essence, it is js to another js. The standardization process is completely different from packaging in the back-end sense.

11. For image path issues, please try to use your own CDN service or put the resources on your own server to replace the image path that already exists in the database. You can use the following SQL statement:

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

Image resources do not require nginx reverse proxy. You can refer to the following configuration:

 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. When you encounter an error message, don’t be upset if you see it in English. Look at the first and last sentence. For example, if there is "foreign key" in the backend error, there must be a problem with the foreign key. Please check the model definition or database definition or data. Front-end Vue is undefined. This problem is mostly related to incorrect use of cdn. Comment vue.config.js (vue3) to be optimistic. There are already instructions. If there are too many errors in English, don’t read them. It’s not difficult to open Youdao (Google is more recommended) and translate them.

13. It is recommended to ask specific questions in the group. If you want to ask how to install nginx, it is recommended to google or bing.com first. (If you are too annoyed with nginx and don’t want to bother with it, you can also use the pagoda fool deployment, but it is still recommended that you take a look at the nginx after deployment. configuration, learn to learn). The reason why Baidu does not recommend it is that most of the content retrieved is CSDN, and the quality of its content is uneven, which is not good for beginners. The things posted on the blog may not be all correct. If you are a novice, it is best to be patient and read the documentation. If you can’t stand it, station B is also a good place to learn. The things involved in this project are still very simple, and the documentation and Bilibili can actually answer most of your questions. Maybe when it comes to this, some people feel that we don't want people to ask questions. But if your question is too big and you can't even pass the installation introduction, most people won't want to answer it, but they really don't know from which angle to answer you. There are too many things to explain, so it's better to just ignore it.

14. If you need to add new functions, it is recommended to read the code first. The code is actually not difficult. You are just not familiar with the new language and are just starting to feel the pain. The functional design has no special features. It is impossible to copy this part of the code. It can only be your own original creation. If you don’t understand the code part, you can post a picture to ask questions ( be sure to post a picture ). If you don’t look at the code for a while, you will forget some of it. Posting a picture to ask questions can ensure that your confusion can be answered in time.

I hope that everyone can not only know how to use this project from the documentation, but also gain relevant skills so that they can make progress in the front-end. Seeing this, why don’t you give me a star? Leave your star for another prostitute (dog.)

7. The last and the last

Remember to give star ღ(´･ᴗ･`)~ New group: 434063310. (Reply timeliness is not guaranteed)

8. Zerotower69 last update description

1. The original intention of the project is to let everyone have a syntax comparison of the vue3 version, so many functions are consistent with the vue2 branch. Since bugs are inevitable in development, please refer to the vue2 branch or deploy version modifications if necessary. 2. I am not responsible for anyone else’s experience. If you have any bugs, you are welcome to ask me questions, but I am not a teacher. The teacher you need may be:

• Novice Tutorial
• bing
• bilibili
• vue3 hopes that you will read this document in detail, refer to higher-quality learning resources, and read less csdn when getting started!