vue admin 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 .

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

4. 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.

5. The vue-element-admin used in the background UI is basically used directly. If you want to customize it yourself, your strength does not allow it.

6. Example: Green food - Cai Dog

Start locally

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. Modify the database configuration information in the development environment application-dev.yml and the production environment application-prod.yml ; knife4j is only activated in the development environment.
4. Create an empty database with the name specified in the database configuration, UTF8 encoding
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.
7. Visit http://127.0.0.1:8888/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.
7. Default account: [email protected] , password: 123456

Interface display

front desk

Backstage

License

MIT

Copyright (c) 2021 WindSnowLi