實戰mdblog記錄

介紹

別人都寫的那麼好了，爲何還要再寫一份？ 本身手打記錄，印象深入

代碼：github.com/MarkerHub/v…
視頻：www.bilibili.com/video/BV1PQ…
文檔：juejin.im/post/5ecfca…

準備

建立倉庫

項目clone到本地

git clone git@gitee.com:okokabcd/mdblog.git
複製代碼

建立springboot項目

start.spring.io/

下載後爲demo.zip
解壓到mdblog/mdblog-api
pom.xml更名爲mdblog-api

後端

數據庫準備

• m_user
• m_blog

基本配置

spring-boot-devtools

項目使用了spring-boot-devtools，追加配置文件 resources/META-INF/spring-devtools.properties

restart.include.shiro-redis=/shiro-[\\w-\\.]+jar
複製代碼

整合mybatis-plus

pom.xml

<!-- mp -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.2.0</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>
<!-- mp代碼生成器 -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.2.0</version>
</dependency>
複製代碼

application.properties

# DataSource Config
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mdblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 
mybatis-plus:
  mapper-locations: classpath*:/mapper/**Mapper.xml
複製代碼

MyBatis-Plus配置

com.example.mdblog.config.MyBatisPlusConfig.java

@Configuration
@EnableTransactionManagement
@MapperScan("com.example.mdblog.mapper")
public class MyBatisPlusConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        return paginationInterceptor;
    }
}
複製代碼

代碼生成工具，生成代碼

com.example.mdblog.CodeGenerator.java

測試一下，寫一個接口

com.example.mdblog.controller.UserController

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

    @GetMapping("/test")
    public ServerResponse<User> index() {
        return ServerResponse.success().setData(userService.getById(1L));
    }
}
複製代碼

公共模塊

統一結果封裝

com.example.mdblog.common.ResponseCode
org.springframework.http.HttpStatus
com.example.mdblog.common.ServerResponse

全局異常處理

com.example.mdblog.common.exception.GlobalExceptionHandler

實體校驗處理

注意：

• springboot 2.2.6中包含 hibernate-validator:jar:6.0.18.Final:compile，2.3.0就不包含了

解決跨域問題

com.example.mdblog.config.CorsConfig
com.example.mdblog.shiro.JwtFilter 追加以下方法

@Override
protected boolean preHandle(ServletRequest request, ServletResponse response) throws Exception {
    HttpServletRequest httpServletRequest = WebUtils.toHttp(request);
    HttpServletResponse httpServletResponse = WebUtils.toHttp(response);
    httpServletResponse.setHeader("Access-control-Allow-Origin", httpServletRequest.getHeader("Origin"));
    httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
    httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));
    // 跨域時會首先發送一個OPTIONS請求，這裏咱們給OPTIONS請求直接返回正常狀態
    if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
        httpServletResponse.setStatus(org.springframework.http.HttpStatus.OK.value());
        return false;
    }
    return super.preHandle(request, response);
}
複製代碼

日誌

整合shiro

jwt身份校驗

登陸邏輯

redis會話共享

github.com/alexxiyang/…

接口開發

登陸接口開發

博客接口開發

前端

前端環境

# node cnpm
node -v
npm -v
cnpm -v
 # vue-cli安裝依賴包
cnpm install -g vue-cli
複製代碼

新建項目

cli.vuejs.org/guide/

徒手建立項目

• 工做量大，不安全，效率不高，容易出錯

# 1. 安裝依賴 npm install xxx or cnpm install xxx
# 生成package-lock.json
# 2. 初始化 npm init -f or cnpm init -f
# 生成package.json
# 3. 安裝組件，並查看安裝後的內容

mkdir project1
cd project1
npm install
npm i vue-router -D
npm i es-lint -D
複製代碼

配置下鏡像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
複製代碼

使用模板建立

# 使用圖形界面 
# vue ui
 # 使用命令行
vue create mdblog-ui
選擇手動
組件選擇：只安裝Router和Vuex  
上下鍵在組件間移動，空格選中或不選中，回車下一步
Use history mode for router?   輸入 y
In package.json  選這個
Save this as a preset for future projects? (y/N) 輸入 n
複製代碼

安裝後

# 啓動，注意是serve
npm run serve
複製代碼

Vue整合element-ui + axios

安裝element-ui

element.eleme.cn/#/zh-CN/com…

# 安裝 element-ui
cnpm install element-ui --save
複製代碼

引入element-ui依賴，src/main.js中追加以下代碼

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

Vue.use(Element)
複製代碼

使用element-ui

安裝axios

# 安裝axios
cnpm install axios --save
複製代碼

引入axios依賴

import axios from 'axios'
Vue.prototype.$axios = axios
複製代碼

使用axios
組件中，咱們就能夠經過this.$axios.get()來發起咱們的請求了

前端開發

創建路由

<template>
  <div>
  </div>
</template>
複製代碼

模板頁面裏面只能有一個標籤
延遲加載

{
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  }
複製代碼

路由權限攔截

{
    path: '/blog/:blogId/edit',
    name: 'BlogEdit',
    component: BlogEdit,
    meta: {
      requireAuth: true
    }
  },
複製代碼

登陸頁面

多個組件同時訪問公共數據，store組件

博客列表

博客詳情

安裝mavon-editor

cnpm install mavon-editor --save
複製代碼

引入依賴

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)
複製代碼

安裝markdown-it

cnpm install markdown-it --save
cnpm install github-markdown-css --save
複製代碼

引入依賴

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
複製代碼

使用

<mavon-editor v-model="ruleForm.content"></mavon-editor> <div class="markdown-body" v-html="blog.content"></div> // 渲染 var MardownIt = require("markdown-it") var md = new MardownIt() var result = md.render(blog.content) _this.blog.content = result 複製代碼