vue实战开发三（博客页面总览）
文章目录
- 前言
- 项目结构
- 首页
- 编辑器
- 个人空间
- 总结
前言
经过差不多五天的时间对前端进行开发，现在总算是把基本的客户端的前端页面做得差不多了，关于后端页面的话，嫖一个后端模板就好了，主要还是客户端的这一块要做好。这个也是本人第一做前后端的项目，可能多有不足，请多多指教~ 先来说说目前white hole 大致的功能的吧，关于这个项目的话其实在国庆的时候我是用Django 用 MVT的模式开发了一个的，当然后面由于各种原因没进行下去，一方面是没时间，另一方面是前端不好做，前后端耦合太紧密了导致我开发的时候逐渐偏离了方向。也就是说我觉得太烂了，不太想继续维护。后面本来说要试着用SpringBoot重新搞一下（当时还是想用原来的前端代码的只是改一改thymeleaf作为模板语法的，但是这个还是当时没空，没做）后来也是索性学一下vue（其实也只是花了一两天学了一下，而且距离做这个项目还是在差不多半个多月前学的）这次总体上开发还是先做了前端，毕竟后端其实原来的一些流程还是清楚的，大致有哪些接口呀之类的。当然这次的话由于是先开发的前端所以整体上我觉得还是可以的，但是由于时间比较紧迫，所以本次并没有办法完全实现我先前提出的设想。没办法确实能力有限，时间有限，没有办法一次性做到位，只能后面慢慢更新了。（毕竟我想重新做这个也只是为了交个大二上的期末作业）
项目结构
那么接下来挑几个来聊聊
首页
这个其实就是那四个组件加一个文章显示的列表（这里暂时是写死的，后面和服务器打交道可以获取文章，前端自行截取一段摘要）
可以看看首页代码
<template>
<div class="home">
<el-row id="artList" type="flex" justify="space-around">
<el-col :span="16">
<el-row class="art-item">
<el-card shadow="hover">
<h5><router-link to="/article" tag="span" class="art-title">查看全文router-link>h5>
<el-row class="art-info d-flex align-items-center justify-content-start">
<div class="art-time"><i class="el-icon-time">i>：2021-11-21div>
<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
<el-tag size="mini">swagger2el-tag>
div>
el-row>
<el-row class="art-body">
<div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg">div>
<div class="side-abstract">
<div class="art-abstract">
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库, 提供矢量图标下载、在快照 在小程序中使用阿里文字图标在小程序中使用阿里文字图标库前在小程序中使用阿里文字图标库前库前端开发的便捷工具 - AndrewNeo - CSDN博客
div>
<div class="art-more">
<router-link to="/article" tag="span">
<el-button plain>{
{$t('home.readMore')}}el-button>
router-link>
div>
div>
el-row>
el-card>
<img class="star" src="../assets/star.png" />
el-row>
<el-row class="art-item">
<el-card shadow="hover">
<h5><router-link to="/article" tag="span" class="art-title">查看全文router-link>h5>
<el-row class="art-info d-flex align-items-center justify-content-start">
<div class="art-time"><i class="el-icon-time">i>：2021-11-21div>
<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
<el-tag size="mini">swagger2el-tag>
div>
el-row>
<el-row class="art-body">
<div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg">div>
<div class="side-abstract">
<div class="art-abstract">
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库, 提供矢量图标下载、在快照 在小程序中使用阿里文字图标在小程序中使用阿里文字图标库前在小程序中使用阿里文字图标库前库前端开发的便捷工具 - AndrewNeo - CSDN博客
div>
<div class="art-more">
<router-link to="/article" tag="span">
<el-button plain>{
{$t('home.readMore')}}el-button>
router-link>
div>
div>
el-row>
el-card>
<img class="star" src="../assets/star.png" />
el-row>
<el-row class="art-item">
<el-card shadow="hover">
<h5><router-link to="/article" tag="span" class="art-title">查看全文router-link>h5>
<el-row class="art-info d-flex align-items-center justify-content-start">
<div class="art-time"><i class="el-icon-time">i>：2021-11-21div>
<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
<el-tag size="mini">swagger2el-tag>
div>
el-row>
<el-row class="art-body">
<div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg">div>
<div class="side-abstract">
<div class="art-abstract">
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库, 提供矢量图标下载、在快照 在小程序中使用阿里文字图标在小程序中使用阿里文字图标库前在小程序中使用阿里文字图标库前库前端开发的便捷工具 - AndrewNeo - CSDN博客
div>
<div class="art-more">
<router-link to="/article" tag="span">
<el-button plain>{
{$t('home.readMore')}}el-button>
router-link>
div>
div>
el-row>
el-card>
<img class="star" src="../assets/star.png" />
el-row>
<el-row class="art-item">
<el-card shadow="hover">
<h5><router-link to="/article" tag="span" class="art-title">查看全文router-link>h5>
<el-row class="art-info d-flex align-items-center justify-content-start">
<div class="art-time"><i class="el-icon-time">i>：2021-11-21div>
<div class="d-flex align-items-center"><img class="tag" src="../assets/tag.png" />：
<el-tag size="mini">swagger2el-tag>
div>
el-row>
<el-row class="art-body">
<div class="side-img hidden-sm-and-down"><img class="art-banner" src="../assets/vue.jpg">div>
<div class="side-abstract">
<div class="art-abstract">
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库, 提供矢量图标下载、在快照 在小程序中使用阿里文字图标在小程序中使用阿里文字图标库前在小程序中使用阿里文字图标库前库前端开发的便捷工具 - AndrewNeo - CSDN博客
div>
<div class="art-more">
<router-link to="/article" tag="span">
<el-button plain>{
{$t('home.readMore')}}el-button>
router-link>
div>
div>
el-row>
el-card>
<img class="star" src="../assets/star.png" />
el-row>
<div class="block pagination">
<el-pagination
style="margin-left: 30%;"
background
layout="prev, pager, next"
:total="50">
el-pagination>
div>
el-col>
<el-col :span="6" class="hidden-sm-and-down" id="side">
<div class="item">
<tag>tag>
div>
<div class="item">
<friend>friend>
div>
el-col>
el-row>
div>
template>
<script>
import friend from '../components/friend'
import tag from '../components/tag'
export default {
name: 'home',
components: {
friend,
tag
}
}
script>
<style scoped>
#side .item {
margin-bottom: 30px;
}
.art-item {
margin-bottom: 30px;
position: relative;
}
.art-item .star {
width: 60px;
height: 60px;
position: absolute;
top: 0;
right: 0;
}
img.tag {
width: 16px;
height: 16px;
}
.art-title {
border-left: 3px solid #F56C6C;
padding-left: 5px;
cursor: pointer;
}
.art-title:hover {
padding-left: 10px;
color: #409EFF;
}
.art-time {
margin-right: 20px;
}
.art-body {
display: flex;
padding: 10px 0;
}
.side-img {
height: 150px;
width: 270px;
overflow: hidden;
margin-right: 10px;
}
img.art-banner {
width: 100%;
height: 100%;
transition: all 0.6s;
}
img.art-banner:hover {
transform: scale(1.4);
}
.side-abstract {
flex: 1;
display: flex;
flex-direction: column;
}
.art-abstract {
flex: 1;
color: #aaa;
}
.art-more {
height: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.art-more .view {
color: #aaa;
}
h5{
font-size: 18px;
}
.pagination {
background-color: #F9F9F9;
}
style>
编辑器
这个其实就是一个插件集成
<template>
<div style="width: 100%;position: relative">
<div>
<input type="text" name="blogname" placeholder="请输入文章标题" required>
<button type="submit" id="submit" @click="submit">发布文章button>
div>
<br>
<mavon-editor
v-model="content"
ref="md"
@change="change"
style="min-height: 800px;width: 100%"
/>
div>
template>
<script>
import {
mavonEditor } from 'mavon-editor' //引入mavon-editor组件
import 'mavon-editor/dist/css/index.css' //引入组件的样式
export default {
// 注册
name: 'WirterMarkdown',
components: {
mavonEditor,
},
beforeRouteEnter: (to, from, next) => {
console.log("准备进入个人信息页");
let islogin = sessionStorage.getItem("isLogin")
if(!islogin){
next({
path:'/login'});
}
next();
},
data() {
return {
content:'', // 输入的markdown
html:'', // 及时转的html
}
},
methods: {
// 所有操作都会被解析重新渲染
change(value, render){
//value为编辑器中的实际内容，即markdown的内容，render为被解析成的html的内容
this.html = render;
},
// 提交
submit(){
//点击提交后既可以获取html内容，又可以获得markdown的内容，之后存入到服务端就可以了
console.log(this.content);
console.log(this.html);
}
},
mounted() {
}
}
script>
<style scoped>
#center {
margin-top: 5%;
width: 96%;
height: 96%;
border: 1px;
}
img {
margin: auto;
margin-left: 30%;
height: 40%;
width: 40%;
position: relative;
top: 10%;
}
input {
width: 85%;
height: 30px;
border-width: 2px;
border-radius: 5px;
border-color: #00c4ff;
border-bottom-color: #2C7EEA;
color: #586e75;
font-size: 15px;
}
button {
width: 10%;
height: 35px;
border-width: 0px;
margin-left: 3%;
border-radius: 10px;
background: #1E90FF;
cursor: pointer;
outline: none;
font-family: Microsoft YaHei;
color: white;
font-size: 17px;
}
button:hover {
background-color: #1E90FF;
box-shadow: 0 4px 0 powderblue;
}
style>
但是这个怎么说呢后端没起来目前只能拿来看看。
个人空间
这个其实还是比较复杂的，分成了几个模块
主要是这几个页面之间的处理，比如那个信息显示和你修改信息的处理。当然也不复杂这里用来一个全局变量
总结
总体上差不多可以把后端架起来了，这个玩意我稍后几天改一改就上传，让这个通用一点，后面你实现一下后端就能跑是吧，用springboot或者换django result 再或者iris就能跑。那么接下来就先这样，明天试着把springboot搭建一下，先把用户登录注册给做了。