网站建设与推广是什么意思,江苏企业网站建设公司,友情链接网站源码,网络营销价格策略有哪些没有数据的前端#xff0c;是没有灵魂的。明明标题是vue3 rust #xff0c;但日记撰写至今#xff0c;似乎只有第一篇提及了Rust#xff0c;这可不行。是时候一股作气#xff0c;完成大部分页面绘制工作了#xff01; 最后再说一次#xff0c;时间要加速了。 ——普奇神…没有数据的前端是没有灵魂的。明明标题是vue3 rust 但日记撰写至今似乎只有第一篇提及了Rust这可不行。是时候一股作气完成大部分页面绘制工作了 最后再说一次时间要加速了。 ——普奇神父 文章目录内容主页文章列表页列表组件封装用户文章列表页预览管理员列表页文章内容页封装文章内容组件编辑文章内容页管理员文章内容页管理员登陆页面封装登陆组件编写登陆界面流转图内容主页
src/views/BlogsView.vue
script setupimport { NLayout,NMenu,NLayoutSider} from naive-ui;import { RouterView } from vue-router;import { ref } from vue;
import router from ../router;const menuSelect ref(all)const menuOptions ref(null)menuOptions.value [{label:全部,key:all,},{label: 关于,key:about-me},]function handleUpdateValue(key, item) {switch (key) {case all:router.push(/articles/all)breakcase about-me:router.push(about)break}}
/script
templaten-layout has-sider styleheight: 100%;n-layout-sider:borderedtrueshow-triggercollapse-modewidth:collapsed-width64:width120:native-scrollbarfalse n-menu:collapsed-width64:collapsed-icon-size22:valuemenuSelect:optionsmenuOptionsupdate:valuehandleUpdateValue//n-layout-sidern-layoutrouter-view //n-layout/n-layout/template文章列表页
文章列表页和管理员列表页类似的界面所以我们封装一个列表组件以方便复用。
列表组件封装
列表组件要考虑普通用户和管理员两种情况。 src/components/BlogsList.vue
script setupimport { NList,NListItem,NSpace,NButton } from naive-ui;import {ref} from vueimport router from ../router;const showModal ref(false)const props defineProps([values,isAdmin])const emits defineEmits([jump-to-article])function jumpToArticle(key){emits(jump-to-article,key)}function jumpToEdit(){router.push(/edit)}
/scripttemplaten-list hoverable n-list-item v-foritem in props.values n-thing :titleitem.title content-stylemargin-top: 10px;pointer-events: none;template #header-extra v-ifprops.isAdminn-button stylemargin-right: 3px; strong secondary typeinfosizesmallclickjumpToArticle预览/n-buttonn-button stylemargin-right: 3px; strong secondary typewarningsizesmallclickjumpToEdit编辑/n-buttonn-button strong secondary typeerrorsizesmall clickshowModal true删除/n-buttonn-modalv-model:showshowModalpresetdialogtitle确认content确认删除文章positive-text确认negative-text算了positive-clickonPositiveClicknegative-clickonNegativeClick//templatetemplate #descriptionn-space sizesmall stylemargin-top: 4pxn-tag v-fortag in item.tags :borderedfalse typeinfo sizesmall{{ tag }}/n-tag/n-space/template{{ item.details }}/n-thing/n-list-item/n-list
/template用户文章列表页预览
src/views/BlogsListView.vue
script setupimport BlogsList from ../components/BlogsList.vue;import {ref} from vueimport router from ../router;const list ref(null)list.value[{title:相见恨晚,tags:[暑夜,晚春],details:奋勇呀然后休息呀,完成你伟大的人生},{title:他在时间门外,tags:[环形公路,潜水艇司机],details:最新的打印机\n复制着彩色傀儡\n早上好我的罐头先生\n让他带你去被工厂敲击}]function jumpToArticle(key){router.push(1)}
/scripttemplateblogs-list :valueslist jump-to-articlejumpToArticle/
/template管理员列表页
src/views/AdminBlogsListView.vue
script setupimport BlogsList from ../components/BlogsList.vue;import {ref} from vueimport router from ../router;const list ref(null)list.value[{title:相见恨晚,tags:[暑夜,晚春],details:奋勇呀然后休息呀,完成你伟大的人生},{title:他在时间门外,tags:[环形公路,潜水艇司机],details:最新的打印机\n复制着彩色傀儡\n早上好我的罐头先生\n让他带你去被工厂敲击}]function jumpToArticle(key){router.push(1)}
/scripttemplateblogs-list :valueslist :is-admintrue jump-to-articlejumpToArticle/
/template文章内容页
封装文章内容组件
srccomponentsBlogContent.vue
script setupimport MarkDownRead from ./MarkDownRead.vue;import { NSpace,NCard,NTag,NIcon,NButton } from naive-ui;import { useThemeSwitch } from ../stores/themeSwitch;import {GitBranch,Eye} from vicons/ionicons5const themeSwitcher useThemeSwitch()const props defineProps([blogInfo,isAdmin])/script
templaten-space styleheight: 100%; sizelargeverticaltrueclassblog-read-previewdiv classtitle stylemargin-top: 20px;{{ blogInfo.title }}/divn-cardn-thingn-space aligncenter justifyspace-betweendiv classflex-boxn-icon size20 :componentGitBranch/div stylemargin-right: 15px;已于 {{ blogInfo.changeTime }} 修改 /divn-icon size20 :componentEye/{{ blogInfo.readCount }} /divn-button v-ifisAdmintext typeinfo 编辑 /n-button/n-spacetemplate #actionn-space aligncenter分类专栏:n-tag typeinfo{{ blogInfo.blogType }} /n-tag文章标签:n-tagv-fortag in blogInfo.tags typeinfo{{ tag }}/n-tag/n-space/template/n-thing/n-cardmark-down-read :keythemeSwitcher.active :activethemeSwitcher.active/mark-down-read/n-space/templatestyle
.flex-box{display: flex;align-items: center;
}
.blog-read-preview{margin-inline: 15vw;max-width: 900px;
}
.title{font-size: 28px;font-weight: 600;width: 100%;
}
/style编辑文章内容页
srcviewBlogReadView.vue
script setupimport BlogContent from ../components/BlogContent.vue;import { useThemeSwitch } from ../stores/themeSwitch;const themeSwitcher useThemeSwitch()const testData {title:预览就是帮其他人先看看,changeTime:2023-02-27 09:43:26,readCount:234,blogType:1块钱,tags:[5块钱,10块钱,50块钱],}/script
templateblog-content :blog-infotestData /
/templatestyle
.blog-read-preview{margin-inline: 15vw;max-width: 900px;
}
/style管理员文章内容页
管理员文章内容页就非常简单只需要对组件isAdmin参数设置为true即可。
script setupimport BlogsList from ../components/BlogsList.vue;import {ref} from vueimport router from ../router;const list ref(null)list.value[{title:相见恨晚,tags:[暑夜,晚春],details:奋勇呀然后休息呀,完成你伟大的人生},{title:他在时间门外,tags:[环形公路,潜水艇司机],details:最新的打印机\n复制着彩色傀儡\n早上好我的罐头先生\n让他带你去被工厂敲击}]function jumpToArticle(key){router.push(1)}
/scripttemplateblogs-list :valueslist :is-admintrue jump-to-articlejumpToArticle/
/template管理员登陆页面
封装登陆组件
src/components/LoginCard.vue
script setup
import { NForm,NButton,NInput,NFormItem } from naive-ui;
/script
templaten-card classloginCard title登陆 n-formn-form-item label用户名n-input placeholderusername//n-form-itemn-form-item label密码n-input typepassword show-password-onclick placeholderpassword//n-form-item/n-formn-button typeprimary block secondary strong登录/n-button/n-card
/templatestyle
.loginCard{margin-top: 12px;max-width: 350px;width: 50vw;min-width: 266px;
}
/style编写登陆界面
src/views/AdminLogin.vue
script setup
import LoginCard from ../components/LoginCard.vue;
import { NSpace } from naive-ui;
/script
templaten-space stylewidth: 100%;height: 100%;aligncenterjustifycenterlogin-card/login-card/n-space
/template流转图
接下来是前端和后端握手的时刻我们将完善前后端接口实现建站日记2-确定需求中梳理的功能点。Rust部分也将在下一篇如闪电般归来。
