[记录四] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之web前端页面完结和路由的编写 【Java】Math.round(),Math.ceil(),Math.floor()的区别 一起学习Spark——Action算子 贵阳发挥大数据优势提升政务服务效率 夯实大数据根基 助推河南智慧城市建设 拉夏贝尔将更名"依新股份",为数智化转型新增物联网技术服务 为了运行十年前的代码,程序员们甚至翻出了一台 1977 年的 Apple II Mybatis 注解 铺平你的架构师之路!十年技术专家敬献Java架构完美设计笔记 绝了!网上传疯了的1000多道的“Java面试突击”赶紧收藏! 2020年史诗级‘面试宝典’横空而出,金九银十就靠“它”涨薪了 操作系统概论【六】- - I/O设备管理 GDI+ Image类加载图片时异常问题处理与分析 算法日记:Day1~泛型模板和STL语法入门 华为/小红书2021批笔试题解 初级前端工程师笔试技巧总结,祝你顺利拿高分 Java程序员月薪20k的涨薪秘籍,没点绝活敢跳槽吗? SSM框架~2020最新整合配置模板教程 新网站链接提交入口攻略 矩阵开关&多路耦合器性能参数解读 知微书评:《算法霸权》与大数据时代的正义 我把文章发给饿了么做算法的程序员,他看完是这么说的 2020慧海湾物联网大会在江苏无锡高新区举办 米读发布平台大数据,注册用户已接近2亿 因大赛入职、因认同共鸣,“马栏山杯”赛道冠军美女程序员入列“芒果战队” 热烈庆祝 语祯物联荣膺上海市物联网行业协会会员 2020年大数据企业投资价值百强榜出炉:平安科技等企业上榜 成立 17 年未盈利,这家硅谷大数据公司凭什么让投资人愿意掏腰包? 大数据告诉你真相!地产三巨头仅万科扩编,有房企半年减员超2.3万 *ST拉夏(603157.SH)拟变更公司名称 经营范围新增“物联网技术服务”等 相机尺寸:越小越出色 【 实测可用 】Windows10 + Python3.8.5 + openhardwaremonitor 获取硬件状态 内幕消息!听说腾讯即将推出能听会说、懂情感的“数字助手”! 贵阳:大数据助力“新零售”业态迅速崛起 程序员:代码全部替换成中文,你能接受吗? 新华网携手苏州日报共建物联网智能融媒体预计年底亮相 2020年慧海湾物联网大会在无锡高新区举行 英飞凌与阿里云联合发布安全芯片 专注保障物联网设备安全上云 工作十年了,没什么朋友是怎么回事? 西交利物浦大学_CST专业_为自学而生 二叉树遍历的浅显解释纯干货 【C++21天养成计划】字符串——快速上手STL string类(Day15) 嘴上老喊辞职的人总也不走,如何看待这种现象? 任正非:华为的岗位没有年龄限制;腾讯微博将于9月28日停止运营;微软关闭Visual Studio Online|极客头条 Python与Java:您应该学习哪种语言,有什么区别 R和Python:数据科学动态二重奏 机器学习小组组成了Python数据API标准联盟 揭秘鲜为人知的Python功能 Python API入门 Python作为一门热门的编程语言 3月份以来其就业前景有所下降
您的位置:首页 >程序人生 >

[记录四] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之web前端页面完结和路由的编写

导语:

暑假在家闲着无事,就琢磨着做一个web博客练练手,现在已经做完了,把过程分享出来给大家看看,分享一下学习经验。这是第二篇,主要讲node,webpack和vue-cli环境的搭建,使用vue全家桶,完成构建静态页面,写好路由。

微信搜索 【web小馆】,回复 ”全栈博客项目“,即可获取 项目源码和后续的实战文章教程。

本文的目录

一,前端组件的完结1,顶部功能栏目2,顶部导航栏3,文章详情页面detail二,路由的编写

一,前端组件的完结

1,顶部功能栏目

在这里插入图片描述

<template><div class="top"><div class="img_div"><img src="../../assets/logomin.jpg" class="img"><div class="text">轻松学算法</div></div><div class="tool"><div class="sign" @click="login" ref="sign" v-if="!islogin">登陆</div><div class="out" @click="logout" ref="out" v-if="islogin">退出</div><div class="more" @click="more">更多信息</div></div></div></template><script>export default {methods: {more() {this.$emit("more")},login() {this.$emit("login")},logout() {this.$emit("logout")}},computed: {islogin(){return this.$store.getters.getIsLogin}},}</script><style scoped>.top{height: 50px;width: 100%;display: flex;background-color: #69d78a;position: fixed;top: 0;z-index: 1000;}.img_div{width: 180px;display: flex;margin: 5px 10px 5px 10px;}.img{height: 40px;width: 40px;border-radius: 20px;}.text{font-size: 14px;margin: 10px 0px 0px 20px;color: white;}.tool{display: flex;margin: 12px 10px 7px 50px;margin-left:auto;}.sign{margin-right: 10px;border: 1px white solid;padding: 4px 10px 5px 10px;border-radius: 15px;font-size: 14px;color: white;}.out{margin-right: 10px;border: 1px white solid;padding: 4px 10px 5px 10px;border-radius: 15px;font-size: 14px;color: white;}.more{border: 1px white solid;border-radius: 15px;padding: 4px 10px 5px 10px;font-size: 14px;color: white;}</style>

2,顶部导航栏

在这里插入图片描述

<template><div class="top-nav"><div class="img_div" ><van-icon name="arrow-left" size="24" @click="back" color="#ffffff"/><div class="text" v-html="text"></div></div></div></template><script>export default {props: {text: {type: String,default: ""}},methods: {back() {this.$emit("back")},like() {this.$emit("like")}},computed: {islogin(){return this.$store.getters.getIsLogin}},}</script><style scoped>.top-nav{height: 50px;width: 100%;display: flex;background-color: #69d78a;position: fixed;top: 0;z-index: 1000;}.img_div{width: 180px;display: flex;margin: 13px 10px 5px 10px;}.text{font-size: 14px;margin: 2px 0px 0px 20px;color: white;}.tool{display: flex;margin: 12px 10px 7px 50px;margin-left:auto;}</style>

3,文章详情页面detail

在这里插入图片描述

<template><div class="article-new"><topnav @back= "back" :text= "text"></topnav><scroll:probe-type="probeType":listen-scroll="listenScroll" ref="articleContentList"class="article-new-content"><div><div class="basicmessage" v-if= "showbasic"><div class="title">[两万字]面试官:听说你很懂集合源码,接我二十道问题</div><div class="imformation"><div class="time">2020-06-28</div><div class="viewnum">浏览量:{{hits}}</div></div><div class="author"><div class="imgdiv"><imgsrc="../../assets/logo.png" class="img"></div><div class="authorimformation"><div class="authorname">小米粥</div><div class="experience">码龄:3年</div></div></div></div><div class="sklentondiv" v-if= "!showbasic"><van-skeleton title :row="3" class="mysklenton"/><!-- <van-skeleton title avatar class="mysklentonavatar"/> --></div><div class="hr"></div><div v-html="compiledMarkdown" class="macked" v-if= "showmacked"></div><div class="sklentondiv" v-if= "!showmacked"><van-skeleton title :row="3" class="mysklenton"/><!-- <van-skeleton title avatar class="mysklentonavatar"/> --></div><div class="hrweight"></div><commentarea v-if= "showcommentarea" :list= "commentcontent"></commentarea><div class="sklentondiv" v-if= "!showcommentarea"><van-skeleton title :row="3" class="mysklenton"/><!-- <van-skeleton title avatar class="mysklentonavatar"/> --></div><div class="hrweight"></div></div></scroll><comment @commentsubmit= "commentsubmit" @like= "like" @good= "good" :infogood= "infogood" :infolike= "infolike":goodnum= "goods" :likenum= "likes"></comment></div></template><script>import comment from "@/base/comment/comment"import commentarea from "@/base/commentarea/commentarea"import topnav from "@/components/top-nav/top-nav"import { commentItem } from "@/common/js/comment"import { createTime } from "@/common/js/time"import { Icon, Skeleton } from "vant";import marked from "marked"import hljs from "highlight.js";import javascript from "highlight.js/lib/languages/javascript";import "highlight.js/styles/vs2015.css"import { getdetail, getcomments, postcomments, addhit, addgood, addlike, sublike, subgood } from "@/api/article"import scroll from "@/base/scroll/scroll"import Vue from "vue";Vue.use(Skeleton);export default {data() {return {articleContent: "",articleTitle: "",text: "最新文章",showbasic: false,showmacked: false,showcommentarea: false,commentcontent: [],articleid: 0,hits: 0,likes: 0,goods: 0,infogood: false,//点赞登陆的时候就已经拿到全部的id了,还没做infolike: false //收藏}},methods: {back() {this.$router.back()},getlogin() {if (!this.$store.getters.getIsLogin) {//检验登陆console.log("未登录")return 0} else {return 1}},_getdetail(id) {getdetail(id).then(res => {if (res.data.errno == 0) {console.log(res)this.articleContent = res.data.data.contentthis.showbasic = truethis.showmacked = truethis.showcommentarea = truethis.articleTitle = res.data.data.titlethis.hits = res.data.data.hitsthis.likes = res.data.data.likesthis.goods = res.data.data.goodsaddhit(id, this.hits).then(res => {if (res.data.errno == 0) {console.log(res)}})if (!this.getlogin()) {//检验登陆return} let mygood = this.$store.getters.getCurrentUser.goods.split(",")if (mygood.indexOf(this.$route.params.id)> -1) {this.infogood = true}let mylike = this.$store.getters.getCurrentUser.likes.split(",")if (mylike.indexOf(this.$route.params.id)> -1) {this.infolike = true}}})},_getcomments(id) {getcomments(id).then(res => {if (res.data.errno == 0) {this.articleid = res.data.data.idlet mysqlcomment = JSON.parse(res.data.data.content)for (let i in mysqlcomment) {this.commentcontent.push(mysqlcomment[i])}}})},commentsubmit(content) {if (!this.getlogin()) {//检验登陆return}if (content == "") {console.log("不能评论为空")return}let userinfo = this.$store.getters.getCurrentUser //登陆后用户的信息const nowtime = Date.now() //获取当前时间戳let item = commentItem(userinfo.avatar, userinfo.username, content, createTime(nowtime)) //comment(avatar, username, content, time)this.commentcontent.push(item)//评论console.log(this.commentcontent)//打印已经评论的总评论let dataStr=JSON.stringify(this.commentcontent) //转化为json字符串,准备上传到数据库let data = new FormData()data.append("comments", dataStr)data.append("id", this.articleid)postcomments(data).then(res => {console.log(res)})},like() {if (!this.getlogin()) {//检验登陆return} if (!this.infolike) {let idstr = ""console.log(this.$store.getters.getCurrentUser.likes)if (this.$store.getters.getCurrentUser.likes == "") {idstr = this.$store.getters.getCurrentUser.likes + `${this.$route.params.id}`} else {idstr = this.$store.getters.getCurrentUser.likes + `,${this.$route.params.id}`}addlike(this.$route.params.id, idstr, this.likes).then(res => {console.log(res)let info = this.$store.getters.getCurrentUserinfo.likes = idstrthis.$store.commit("updateUserStatus",info);this.likes += 1this.infolike = true})} else {let mylike = this.$store.getters.getCurrentUser.likes.split(",")mylike.splice(mylike.indexOf(this.$route.params.id))let idstr = ""for (let i in mylike) {if (mylike.length - 1> i){idstr += `${mylike[i]},`} else {idstr += `${mylike[i]}`}}sublike(this.$route.params.id, idstr, this.likes).then(res => {console.log(res)let info = this.$store.getters.getCurrentUserinfo.likes = idstrthis.$store.commit("updateUserStatus",info);this.likes -= 1this.infolike = false})}},good() {if (!this.getlogin()) {//检验登陆return} if (!this.infogood) {let idstr = ""if (this.$store.getters.getCurrentUser.goods == "") {idstr = this.$store.getters.getCurrentUser.goods + `${this.$route.params.id}`} else {idstr = this.$store.getters.getCurrentUser.goods + `,${this.$route.params.id}`}addgood(this.$route.params.id, idstr, this.goods).then(res => {console.log(res)let info = this.$store.getters.getCurrentUserinfo.goods = idstrthis.$store.commit("updateUserStatus",info);this.goods += 1this.infogood = true})} else {let mygood = this.$store.getters.getCurrentUser.goods.split(",")mygood.splice(mygood.indexOf(this.$route.params.id))let idstr = ""for (let i in mygood) {if (mygood.length - 1> i){idstr += `${mygood[i]},`} else {idstr += `${mygood[i]}`}}subgood(this.$route.params.id, idstr, this.goods).then(res => {console.log(res)let info = this.$store.getters.getCurrentUserinfo.goods = idstrthis.$store.commit("updateUserStatus",info);this.goods -= 1this.infogood = false})}}},created() {this.listenScroll = truethis.probeType = 3},mounted() {marked.setOptions({renderer: new marked.Renderer(),highlight: function (str, lang) {// 此处判断是否有添加代码语言if (lang && hljs.getLanguage(lang)) {try {// 得到经过highlight.js之后的html代码const preCode = hljs.highlight(lang, str, true).value// 以换行进行分割const lines = preCode.split(/\n/)// 添加自定义行号let html = lines.map((item, index) => {if (index < 9) {return `<li> ${index + 1}| <span class="line-num" data-line="${index + 1}"></span>${item}</li>`} else if (9 <= index < 99) {return `<li>${index + 1}| <span class="line-num" data-line="${index + 1}"></span>${item}</li>`} else {return `<li>${index + 1}| <span class="line-num" data-line="${index + 1}"></span>${item}</li>`}}).join("")html = "<ol>" + html + "</ol>"// 添加代码语言if (lines.length) {html += "<b class="name">" + lang + "</b>"}return "<pre class="hljs myhljs"><code>" +html +"</code></pre>"} catch (__) {}}// 未添加代码语言,此处与上面同理const preCode = md.utils.escapeHtml(str)const lines = preCode.split(/\n/).slice(0, -1)let html = lines.map((item, index) => {return "<li><span class="line-num" data-line="" + (index + 1) + ""></span>" + item + "</li>"}).join("")html = "<ol>" + html + "</ol>"return "<pre class="hljs"><code>" +html +"</code></pre>"},pedantic: false,gfm: true,tables: true,breaks: false,sanitize: false,smartLists: true,smartypants: false,xhtml: false}); this._getdetail(this.$route.params.id) this._getcomments(this.$route.params.id)},computed: {compiledMarkdown: function() {return marked(this.articleContent, {});//第一个参数是你的markdown文本 第二个参数是选项},str: function() {let arr = this.$route.path.split("/")console.log(arr)let str = `当前路径为:${arr[1]}>${arr[2]}`return str},},components: {scroll,topnav,comment,commentarea}}</script><style scoped></style>

使用了mark去解析.md,并且使用highlight.js把代码部分进行高亮化处理,使得代码阅读变得更加舒服。

二,路由的编写

import Vue from "vue"import Router from "vue-router"import home from "@/components/home/home"import article from "@/components/article/article"import me from "@/components/me/me"import article_group from "@/components/article_group/article_group"import article_detail from "@/components/article_detail/article_detail"import article_new from "@/components/article_new/article_new"import like from "@/components/like/like"import imformation from "@/components/imformation/imformation"Vue.use(Router)export default new Router({mode: "history",routes: [{path: "/",redirect: "/home"},{path: "/home",name: "home",component: home,children: [{path: ":id",component: article_new,}]},{path: "/article",name: "article",component: article,children: [{path: ":id",component: article_group,children: [{path: ":id",component: article_detail}]}]},{path: "/me",name: "me",component: me,children: [{path: "like",component: like,children: [{path: ":id",component: article_detail}]},{path: "imformation",component: imformation}]}]})

前端主要是三个主界面,以及一些子组件的构成,运用children子路由,去写好整个应用的路由关系。并且使用路由传参,让子路由拿到信息去调用api接口。

在这里插入图片描述

你们的赞就是对我最大的鼓励。谢谢~

微信搜索【web小馆】,回复全栈博客项目,即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言,潜移默化的提升你的计算机基础知识和前端技术。小米粥,一个专注的web全栈工程师,我们下期再见!

在这里插入图片描述
node后台

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。