GithubHelp home page GithubHelp logo

tanbinh123 / w-blog Goto Github PK

View Code? Open in Web Editor NEW

This project forked from windsnowli/w-blog

1.0 1.0 0.0 3.11 MB

一个个人博客平台项目,后端主要基于 SpringBoot、 Mybatis 、 Mybatis-Redis 、 Redis 、 fastjson 、 DruidDataSource 、 Lombok 、 java-jwt 、 aliyun-sdk-oss 等技术实现,使用MySQL数据库并使用Redis二级缓存。前端主要基于nuxtJs、Vue等框架实现。主要使用docker/docker-compose进行部署。

Home Page: https://www.blog.hiyj.cn/article/detail/100

License: MIT License

Shell 100.00%

w-blog's Introduction

w-blog

描述

一个后端使用Spring Boot 2.x、前台使用nuxtJs、后台使用vue的个人博客

简介

  1. 链接

    • Gitee链接:
      • apihttps://gitee.com/windsnowli/w-blog-api
      • 前台https://gitee.com/windsnowli/vue-ssr-blog
      • 后台https://gitee.com/windsnowli/vue-admin-blog
    • GitHub链接:
      • apihttps://github.com/WindSnowLi/w-blog-api
      • 前台https://github.com/WindSnowLi/vue-ssr-blog
      • 后台https://github.com/WindSnowLi/vue-admin-blog
  2. 一个简单的的个人博客项目,共分为了 前台后台api三个部分。

    • api: 后端基于 SpringBoot 。主要依赖 MybatisMybatis-RedisRedisfastjsonDruidDataSourceLombokjava-jwtaliyun-sdk-ossknife4j 等,数据库使用的是 MySQL8.0+

    • 前台: 前台的主要样式是来源于网络上了一个 BizBlog 模板,最初来源于哪我不得而知,在原本的基础上改写成了 nuxtJs 项目。

    • 后台: 后台UI套用的vue-element-admin,基本是直接拿来用了,想自己定制着实实力不允许。

  3. 示例:绿色食品——菜狗

本地启动

逐个项目启动

api:前台后台请求的api使用的是同一个项目

  1. git clone https://gitee.com/WindSnowLi/w-blog-api.gitgit clone https://github.com/WindSnowLi/w-blog-api.git 克隆项目到本地

  2. mvn clean install dependency:tree 安装依赖

  3. 创建数据库,并设置为UTF8编码(utf8mb4

  4. 修改环境设置

    • 修改开发环境 application-dev.yml 和生产环境 application-prod.yml 中的数据库配置信息;
    • 修改 redis.properties 中的 Redis 相关信息;
    • 注: knife4j 只在开发环境中激活。
  5. mvn clean package -Dmaven.test.skip=true 跳过测试并生成 jar

  6. java -jar 生成的包名.jar 运行开发配置环境,初次运行会自动初始化数据库(生产环境可指定加载的配置文件--spring.profiles.active="prod"

  7. 访问 http://127.0.0.1:9000/doc.html 查看 api 文档

  8. 推荐使用IDEA打开项目文件夹自动处理依赖、方便运行

前台

  1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.gitgit clone https://github.com/WindSnowLi/vue-ssr-blog.git 克隆项目到本地
  2. npm install 安装依赖
  3. 可修改 config/sitemap.xml 文件中的 host 地址,用于生成访问地图
  4. 可修改 nuxt.config.js 中的端口号
  5. 可修改 package.json 文件中的 script 中的 BASE_URL 来指定后端 api 地址
  6. npm run build 编译
  7. npm start 本地运行

后台

  1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.gitgit clone https://github.com/WindSnowLi/vue-admin-blog.git 克隆项目到本地
  2. npm install 安装依赖
  3. npm run dev 使用模拟数据预览界面
  4. 修改 .env.production 文件中的 VUE_APP_BASE_API 地址为后端 api 的地址
  5. npm run build:prod 编译
  6. dist 文件夹下的为编译好的文件,可放到 http 服务器下(可以使用 npm 安装 http-server )进行访问

Docker集成启动

  1. git clone https://gitee.com/WindSnowLi/w-blog.gitgit clone https://github.com/WindSnowLi/w-blog.git克隆w-blog仓库至本地
  2. cd w-blog切换进w-blog根目录
  3. sh ./step-1-clone.sh克隆w-blog-apivue-ssr-blogvue-admin-blog仓库至根目录
  4. 修改各项目相关配置
    1. w-blog-api项目
      1. 修改开发环境 application-dev.yml 和生产环境 application-prod.yml 中的数据库配置信息;
      2. 修改 redis.properties 中的 Redis 相关信息;
      3. 注: knife4j 只在开发环境中激活。
      4. redis可自行安装,也可docker-compose.yml指定相关设置
    2. vue-ssr-blog项目
      1. 可修改 config/sitemap.xml 文件中的 host 地址,用于生成访问地图
      2. 可修改 nuxt.config.js 中的端口号
      3. 可修改 package.json 文件中的 script 中的 BASE_URL 来指定后端 api 地址
    3. vue-admin-blog项目
      1. 修改 .env.production 文件中的 VUE_APP_BASE_API 地址为后端 api 的地址
  5. sh ./step-2-build.sh安装依赖生成相关文件
  6. 修改docker-compose.yml的相关端口映射和文件夹映射
  7. docker-compose up -d生成docker镜像并运行

界面展示

前台

首页


文章详情


友链

后台

首页


创建文章


管理文章


文章列表


友链管理

License

MIT

Copyright (c) 2021 WindSnowLi

w-blog's People

Contributors

windsnowli avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.