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
+4 -1
View File
@@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>violin-home</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </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({ return request({
url: '/author/blog/createContent', url: '/author/blog/createContent',
method: 'post', method: 'post',
headers: { headers: {
'Content-Type': 'application/json;charsetset=UTF-8' '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> <template>
<div> <div class="4444">
<el-container> <el-container>
<el-aside width="150px"> <el-aside width="150px">
<SideBar></SideBar> <SideBar></SideBar>
</el-aside> </el-aside>
<el-container> <el-container>
<el-header <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> <NavBar></NavBar>
</el-header> </el-header>
<el-main> <el-main>
@@ -28,6 +27,8 @@
import MainApp from '../layout/MainApp.vue'; import MainApp from '../layout/MainApp.vue';
import NavBar from "../layout/NavBar.vue"; import NavBar from "../layout/NavBar.vue";
import SideBar from "../layout/SideBar.vue"; import SideBar from "../layout/SideBar.vue";
console.log(window.innerHeight)
</script> </script>
<style scoped> <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 = { type User = {
id: string, id: string,
username: string username: string
} }
export { Blog, BlogType, User } export { User }
src/view/blog/createBlog.vue
+90 -25
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="blog_editer" v-if="isReady"> <div class="blog_editer" v-if="isReady">
<div class="bt_section"> <div class="bt_section" :style="btWholeStyle">
<el-button>增加</el-button> <el-button @click="insertBlogType">增加</el-button>
<el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickBlogTab(value[0])"> <el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickTypeTab(value[0])">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-icon> <el-icon>
<edit /> <edit />
@@ -17,14 +17,16 @@
{{ value[1].btName }} {{ value[1].btName }}
</el-button> </el-button>
</div> </div>
<div class="b_section"> <div class="b_section" :style="bWholeStyle">
<el-button @click="insertBlogType">增加</el-button> <el-button @click="insertBlog">增加</el-button>
<el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickTypeTab(blog[0])"> <el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickBlogTab(blog[0])">
{{ blog[1].title }} {{ blog[1].title }}
</el-button> </el-button>
</div> </div>
<div> <div :style="cWholeStyle">
<md-editor theme="light" v-model="blog.content" @save="saveContent" /> <md-editor theme="light"
v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).content"
@save="saveContent" />
</div> </div>
<el-dialog v-model="dialogVisible" title="Tips" width="30%"> <el-dialog v-model="dialogVisible" title="Tips" width="30%">
<el-input v-model="(blogTypes.get(checkedBlogIndex) as BlogType).btName"></el-input> <el-input v-model="(blogTypes.get(checkedBlogIndex) as BlogType).btName"></el-input>
@@ -35,6 +37,16 @@
</span> </span>
</template> </template>
</el-dialog> </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> </div>
</template> </template>
@@ -43,26 +55,37 @@ import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
import MdEditor from 'md-editor-v3' import MdEditor from 'md-editor-v3'
import { Edit } from "@element-plus/icons-vue"; import { Edit } from "@element-plus/icons-vue";
import 'md-editor-v3/lib/style.css' import 'md-editor-v3/lib/style.css'
import { Blog, BlogType } from '../../entity/index' import { updateBtName, updateContent, listAll, insert_blog_type, getContent, newBlog } from '../../api/blog'
import { updateBtName, updateContent, listAll, insert_blog_type } from '../../api/blog' import $moment from "moment";
// const MD_SETTING = () => { // const MD_SETTING = () => {
// return { // return {
// tools: [{ title: 'bold' }] // 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 blogTypes = reactive<Map<string, BlogType>>(new Map())
const blog = reactive<Blog>({} as Blog)
let bid = ref("")
const dialogVisible = ref(false) const dialogVisible = ref(false)
const contentDialogVisible = ref(false)
let checkedIndex = ref<string>("") let checkedIndex = ref<string>("")
let checkedBlogIndex = ref<string>("") let checkedBlogIndex = ref<string>("")
let isReady = ref(false) let isReady = ref(false)
const getTestData = async () => { const getTestData = async () => {
await listAll().then(response => { await listAll().then(response => {
console.log(response)
response.data.forEach((element: any) => { response.data.forEach((element: any) => {
const blog_type: BlogType = { const blog_type: BlogType = {
btId: element.btId, btId: element.btId,
@@ -82,20 +105,27 @@ const getTestData = async () => {
blog_type.blogs.set(item.bid, blog) blog_type.blogs.set(item.bid, blog)
}) })
}) })
console.log(blogTypes)
}) })
isReady.value = true isReady.value = true
checkedBlogIndex.value = blogTypes.keys().next().value checkedBlogIndex.value = blogTypes.keys().next().value
checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
console.log(checkedIndex.value)
} }
getTestData() getTestData()
// watch(blogTypes, (newValue, oldValue) => { // watch(blogTypes, (newValue, oldValue) => {
// console.log(newValue, '新值', oldValue, '旧值') // console.log(newValue, '新值', oldValue, '旧值')
// }, { deep: true }) // }, { deep: true })
const onclickTypeTab = (key: string) => { 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) => { const onclickBlogTab = (key: string) => {
checkedBlogIndex.value = key checkedIndex.value = key
} }
const handleEditBtName = (bt: BlogType) => { const handleEditBtName = (bt: BlogType) => {
dialogVisible.value = true dialogVisible.value = true
@@ -111,19 +141,19 @@ const saveType = () => {
}) })
} }
const saveTitle = (params: any) => { const saveTitle = () => {
const query = { const query = {
bid: params.id, bid: checkedIndex.value,
title: params.name title: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).title
} }
updateContent(query).then(response => { updateContent(query).then(response => {
contentDialogVisible.value = false
}) })
} }
const saveContent = () => { const saveContent = () => {
const query = { const query = {
bid: bid.value, bid: checkedIndex.value,
content: blog.content content: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).content
} }
updateContent(query).then(response => { updateContent(query).then(response => {
@@ -132,14 +162,45 @@ const saveContent = () => {
const insertBlogType = () => { const insertBlogType = () => {
dialogVisible.value = true 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> </script>
<style scoped> <style scoped>
.b_section { .b_section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80px; width: 100px;
} }
.bts { .bts {
@@ -148,6 +209,10 @@ const insertBlogType = () => {
} }
.el-button {
font-size: 15px;
}
.el-dropdown { .el-dropdown {
margin-right: 5px; margin-right: 5px;
} }
@@ -156,7 +221,7 @@ const insertBlogType = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
width: 80px; width: 100px;
} }
.blog_editer { .blog_editer {