simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md文件保存实现，修改bookmark的事务问题

Browse Source
This commit is contained in:
simple321vip
2022-04-28 09:25:40 +08:00
parent fff3ee0a3d
commit d24c4ab45d
6 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+8 -5
View File
@@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<title>violin-home</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</body>
</html>
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 189 KiB

src/api/blog.ts
+2 -2
View File
@@ -57,14 +57,14 @@ const getContent = (id: string) => {
})
}
const newBlog = (params: Object) => {
const newBlog = (postData: Object) => {
return request({
url: '/author/blog/createContent',
method: 'post',
headers: {
'Content-Type': 'application/json;charsetset=UTF-8'
},
data: params
data: postData
})
}
src/components/layout/Layout.vue
+4 -3
View File
@@ -1,13 +1,12 @@
<template>
<div>
<div class="4444">
<el-container>
<el-aside width="150px">
<SideBar></SideBar>
</el-aside>
<el-container>
<el-header
style="border-bottom-style:solid; border-bottom-width: 0.5px; border-bottom-color:rgba(151, 151, 151, 0.3);"
>
style="border-bottom-style:solid; border-bottom-width: 0.5px; border-bottom-color:rgba(151, 151, 151, 0.3);">
<NavBar></NavBar>
</el-header>
<el-main>
@@ -28,6 +27,8 @@
import MainApp from '../layout/MainApp.vue';
import NavBar from "../layout/NavBar.vue";
import SideBar from "../layout/SideBar.vue";
console.log(window.innerHeight)
</script>
<style scoped>
src/entity/index.ts
+1 -16
View File
@@ -1,21 +1,6 @@
type Blog = {
bid: string,
btId: string,
btName: string,
title: string,
blog_prex: string,
content: string
}
type BlogType = {
btId: string,
btName: string,
blogs: Map<string, Blog>
}
type User = {
id: string,
username: string
}
export { Blog, BlogType, User }
export { User }
src/view/blog/createBlog.vue
+90 -25
View File
@@ -1,8 +1,8 @@
<template>
<div class="blog_editer" v-if="isReady">
<div class="bt_section">
<el-button>增加</el-button>
<el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickBlogTab(value[0])">
<div class="bt_section" :style="btWholeStyle">
<el-button @click="insertBlogType">增加</el-button>
<el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickTypeTab(value[0])">
<el-dropdown trigger="click">
<el-icon>
<edit />
@@ -17,14 +17,16 @@
{{ value[1].btName }}
</el-button>
</div>
<div class="b_section">
<el-button @click="insertBlogType">增加</el-button>
<el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickTypeTab(blog[0])">
<div class="b_section" :style="bWholeStyle">
<el-button @click="insertBlog">增加</el-button>
<el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickBlogTab(blog[0])">
{{ blog[1].title }}
</el-button>
</div>
<div>
<md-editor theme="light" v-model="blog.content" @save="saveContent" />
<div :style="cWholeStyle">
<md-editor theme="light"
v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).content"
@save="saveContent" />
</div>
<el-dialog v-model="dialogVisible" title="Tips" width="30%">
<el-input v-model="(blogTypes.get(checkedBlogIndex) as BlogType).btName"></el-input>
@@ -35,6 +37,16 @@
</span>
</template>
</el-dialog>
<el-dialog v-model="contentDialogVisible" title="Tips" width="30%">
<el-input v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).title">
</el-input>
<template #footer>
<span class="dialog-footer">
<el-button @click="contentDialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="saveTitle">Confirm</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
@@ -43,26 +55,37 @@ import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
import MdEditor from 'md-editor-v3'
import { Edit } from "@element-plus/icons-vue";
import 'md-editor-v3/lib/style.css'
import { Blog, BlogType } from '../../entity/index'
import { updateBtName, updateContent, listAll, insert_blog_type } from '../../api/blog'
import { updateBtName, updateContent, listAll, insert_blog_type, getContent, newBlog } from '../../api/blog'
import $moment from "moment";
// const MD_SETTING = () => {
// return {
// tools: [{ title: 'bold' }]
// }
// }
type Blog = {
bid: string,
btId: string,
btName: string,
title: string,
blog_prex: string,
content: string
}
type BlogType = {
btId: string,
btName: string,
blogs: Map<string, Blog>
}
const blogTypes = reactive<Map<string, BlogType>>(new Map())
const blog = reactive<Blog>({} as Blog)
let bid = ref("")
const dialogVisible = ref(false)
const contentDialogVisible = ref(false)
let checkedIndex = ref<string>("")
let checkedBlogIndex = ref<string>("")
let isReady = ref(false)
const getTestData = async () => {
await listAll().then(response => {
console.log(response)
response.data.forEach((element: any) => {
const blog_type: BlogType = {
btId: element.btId,
@@ -82,20 +105,27 @@ const getTestData = async () => {
blog_type.blogs.set(item.bid, blog)
})
})
console.log(blogTypes)
})
isReady.value = true
checkedBlogIndex.value = blogTypes.keys().next().value
checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
console.log(checkedIndex.value)
}
getTestData()
// watch(blogTypes, (newValue, oldValue) => {
// console.log(newValue, '新值', oldValue, '旧值')
// }, { deep: true })
const onclickTypeTab = (key: string) => {
checkedIndex.value = key
const bid = <string>blogTypes.get(key)?.blogs.values().next().value.bid
getContent(bid).then(response => {
((blogTypes.get(key) as BlogType).blogs.get(bid) as Blog).content = response.data.content
checkedBlogIndex.value = key
checkedIndex.value = bid
})
}
const onclickBlogTab = (key: string) => {
checkedBlogIndex.value = key
checkedIndex.value = key
}
const handleEditBtName = (bt: BlogType) => {
dialogVisible.value = true
@@ -111,19 +141,19 @@ const saveType = () => {
})
}
const saveTitle = (params: any) => {
const saveTitle = () => {
const query = {
bid: params.id,
title: params.name
bid: checkedIndex.value,
title: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).title
}
updateContent(query).then(response => {
contentDialogVisible.value = false
})
}
const saveContent = () => {
const query = {
bid: bid.value,
content: blog.content
bid: checkedIndex.value,
content: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).content
}
updateContent(query).then(response => {
@@ -132,14 +162,45 @@ const saveContent = () => {
const insertBlogType = () => {
dialogVisible.value = true
}
const insertBlog = () => {
const data = {
btId: checkedBlogIndex.value,
title: $moment().format("YYYY-MM-DD")
}
newBlog(data).then(response => {
const { bid, title, content } = response.data
const blog = {
bid: bid,
btId: checkedBlogIndex.value,
btName: "",
title: title,
blog_prex: "",
content: content
} as Blog
(blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.set(bid, blog)
checkedIndex.value = bid
})
}
console.log(window.innerWidth)
type WholeStyle = {
width: string
}
const btWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let btWidth = 0.10 * window.innerWidth
btWholeStyle.width = btWidth + 'px'
const bWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let bWidth = 0.23 * window.innerWidth
bWholeStyle.width = bWidth + 'px'
const cWholeStyle = reactive<WholeStyle>({} as WholeStyle)
let contentWidth = 0.67 * window.innerWidth
cWholeStyle.width = contentWidth + 'px'
</script>
<style scoped>
.b_section {
display: flex;
flex-direction: column;
width: 80px;
width: 100px;
}
.bts {
@@ -148,6 +209,10 @@ const insertBlogType = () => {
}
.el-button {
font-size: 15px;
}
.el-dropdown {
margin-right: 5px;
}
@@ -156,7 +221,7 @@ const insertBlogType = () => {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 80px;
width: 100px;
}
.blog_editer {