WindSnowLi / vue-ssr-blog

w-blog的前台部分,一个简单的nuxtJs的博客前台项目

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

  1. 一个简单的的个人博客项目,共分为了 前台后台api三个部分。

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

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

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

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

本地启动

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. 修改开发环境 application-dev.yml 和生产环境 application-prod.yml 中的数据库配置信息; knife4j 只在开发环境中激活。
  4. 创建数据库配置中指定名称的空数据库,UTF8编码
  5. mvn clean package -Dmaven.test.skip=true 跳过测试并生成 jar
  6. java -jar 生成的包名.jar 运行开发配置环境,初次运行会自动初始化数据库
  7. 访问 http://127.0.0.1:8888/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 )进行访问
  7. 默认账号:admin@163.com,密码:123456

界面展示

前台

首页


文章详情


友链


关于信息

后台

首页


创建文章


管理文章

文章列表


友链管理


关于信息

License

MIT

Copyright (c) 2021 WindSnowLi

About

w-blog的前台部分,一个简单的nuxtJs的博客前台项目

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

License:MIT License


Languages

Language:CSS 51.5%Language:Vue 43.2%Language:JavaScript 5.2%Language:Dockerfile 0.1%