w blog

w-blog

describe

A personal blog that uses Spring Boot 2.x in the backend, nuxtJs in the frontend, and vue in the backend

Introduction

1. Link

   • Gitee link:
     • api: https://gitee.com/windsnowli/w-blog-api
     • Front desk: https://gitee.com/windsnowli/vue-ssr-blog
     • Backend: https://gitee.com/windsnowli/vue-admin-blog
   • GitHub link:
     • api: https://github.com/WindSnowLi/w-blog-api
     • Front desk: https://github.com/WindSnowLi/vue-ssr-blog
     • Backend: https://github.com/WindSnowLi/vue-admin-blog

2. A simple personal blog project is divided into three parts:前台,后台, and api .

   • api: The backend is based on SpringBoot . Mainly relies on Mybatis , Mybatis-Redis , Redis , fastjson , DruidDataSource , Lombok , java-jwt , aliyun-sdk-oss , knife4j , etc. The database uses MySQL8.0+

   • Front desk: The main style of the front desk comes from a BizBlog template on the Internet. I don’t know where it originally came from. It was rewritten into a nuxtJs project based on the original.

   • Backend: The vue-element-admin used in the backend UI is basically used directly. If you want to customize it yourself, the strength does not allow it.

3. Example: Green food - Cai Dog

Start locally

Start project by project

api: The api requested by the front and backend uses the same project

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git or git clone https://github.com/WindSnowLi/w-blog-api.git to clone the project locally

2. mvn clean install dependency:tree installation dependency

3. Create a database and set it to UTF8 encoding ( utf8mb4 )

4. Modify environment settings

   • Modify the database configuration information in the development environment application-dev.yml and the production environment application-prod.yml ;
   • Modify Redis related information in redis.properties ;
   • Note: knife4j is only activated in the development environment.

5. mvn clean package -Dmaven.test.skip=true skips tests and generates jar packages

6. java -jar 生成的包名.jar is used to run the development configuration environment. The database will be automatically initialized during the first run (the production environment can specify the configuration file to be loaded --spring.profiles.active="prod" )

7. Visit http://127.0.0.1:9000/doc.html to view the api documentation

8. It is recommended to use IDEA to open the project folder to automatically handle dependencies and facilitate operation.

front desk

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git or git clone https://github.com/WindSnowLi/vue-ssr-blog.git clone the project to local
2. npm install installation dependencies
3. The host address in the config/sitemap.xml file can be modified to generate an access map.
4. The port number in nuxt.config.js can be modified
5. You can modify BASE_URL in script in the package.json file to specify the backend api address.
6. npm run build
7. npm start run locally

Backstage

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git or git clone https://github.com/WindSnowLi/vue-admin-blog.git clone the project to local
2. npm install installation dependencies
3. npm run dev uses simulated data preview interface
4. Modify the VUE_APP_BASE_API address in the .env.production file to the address of the backend api
5. npm run build:prod compile
6. The compiled files in the dist folder can be placed under the http server (you can use npm to install http-server ) for access.

Docker integration started

1. git clone https://gitee.com/WindSnowLi/w-blog.git or git clone https://github.com/WindSnowLi/w-blog.git clone w-blog repository to local
2. cd w-blog to switch to the w-blog root directory
3. sh ./step-1-clone.sh clone w-blog-api , vue-ssr-blog , vue-admin-blog repository to the root directory
4. Modify configurations related to each project
   1. w-blog-api project
      1. Modify the database configuration information in the development environment application-dev.yml and the production environment application-prod.yml ;
      2. Modify Redis related information in redis.properties ;
      3. Note: knife4j is only activated in the development environment.
      4. redis可自行安装, or you can specify relevant settings docker-compose.yml
   2. vue-ssr-blog project
      1. The host address in the config/sitemap.xml file can be modified to generate an access map.
      2. The port number in nuxt.config.js can be modified
      3. You can modify BASE_URL in script in the package.json file to specify the backend api address.
   3. vue-admin-blog project
      1. Modify the VUE_APP_BASE_API address in the .env.production file to the address of the backend api
5. sh ./step-2-build.sh installs dependencies and generates related files
6. Modify the relevant port mapping and folder mapping of docker-compose.yml
7. docker-compose up -d generate docker镜像and run

Interface display

front desk

Backstage

License

MIT

Copyright (c) 2021 WindSnowLi