【vuejs】用vue写一个自己的博客管理系统（一）：前期准备

最新推荐文章于 2024-05-21 23:31:29 发布
最新推荐文章于 2024-05-21 23:31:29 发布
阅读量1k 收藏 4
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysq0317/article/details/91653101
版权

最开始，我用过wordpress搭建了自己的博客。
后来，我也用过gitpage+hexo搭建的一个小小的博客

虽然后面都没有用，只是偶尔登上去看看。
现在为了锻炼锻炼自己的水平，决定自己用vue+express搭建一个属于自己的博客管理系统。

配置环境。

  1. 安装node.js和npm。
    在官网选择适合自己电脑的安装包，然后一直next，直到安装完成。打开命令行，输入node -v就能看到node的版本，同理npm -v可以查看npm的版本，如果npm等级过低，直接npm install -g就行了。
  2. 使用淘宝镜像。
    因为npm官方镜像非常的慢，所以在这里，可以选择使用淘宝的镜像。
    $ npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org
    安装好以后，就可以使用cnpm安装其他的模块了。
  3. 安装vue-cli脚手架
    cnpm install vue-cli -g      //全局安装 vue-cli
    以上版本是2.x的版本，现在vue-cli脚手架已经升到了3.x，而3.x版本更为的简洁，所以我们可以安装3.x的版本。
    npm install @vue/cli -g
    安装完成之后，在命令行里输入vue -V查看一下版本，
最低0.47元/天 解锁文章
萌村村花杨小花
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【vuejs】用vue写一个自己的博客管理系统（五）：文章管理
杨小花的一日一记
04-15 1826
文章管理主要分为以下三个模块 新建文章 文章列表 分类管理 1. 新建文章 一篇文章，有标题，有作者，有内容，有时间。可能也会有介绍，有图片，有标签或者分类。 标题 文章标题和介绍都使用element中的input，其中还限制了字数。此时，长度加上maxlength和minlength分别代表的字符的最多和最少。show-word-limit则是显示当前字数多少的属性。 <el-inpu...
DeAdmin:一个用VueJS + AdminLTE实现的后台管理系统
03-11
DeAdmin是一个使用VueJS框架和AdminLTE模板构建的高效、灵活的后台管理系统。VueJS是目前非常流行的前端JavaScript库，以其轻量级、高性能和易用性而受到开发者喜爱。而AdminLTE是一款基于Bootstrap的后台管理界面...
基于Vue的个人博客系统设计与实现
05-27
基于Vue的个人博客系统设计与实现 包含原型图设计文件、素材、数据库文件 技术：Vue+Mysql+express（前后端分离模式） 环境：node
基于Vue+SpirngBoot的博客管理平台的设计与实现(论文+源码)_kaic
最新发布
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
05-21 672
因此，博客管理平台的背景是博客的普及和发展，其目的在于为博客管理者提供一个方便、高效的管理工具，促进博客的发展和创新。首先响应式数据绑定能使视图层与模型层保持同步，当数据发生变化时，视图会自动更新，其次组件化开发将页面拆分为多个组件，每个组件都有自己的状态和行为，便于管理和复用，再者模板语法支持常见的指令和表达式，提高了开发效率，然后虚拟DOM技术实现快速渲染视图，并最小化浏览器的重排和重绘操作，提升了性能，最后组件生命周期的不同阶段提供了一系列钩子函数，可以在不同阶段执行相应的操作。
Vue实例demo——简易博客系统
fengzhen8023
10-26 6113
一、实例demo简介 这是使用Vue实现的一个简易博客系统，功能包括：写博客，博客总览以及点击查看博客。项目虽然不大，但是包括的知识点确实不少，主要的知识点有：Vue路由的设置以及路由传参、Vue自定义指令、Vue自定义过滤器、使用Vue连接数据库等。 我在项目中使用的是第三方云数据库—— leancloud 。所以如果你对项目中使用Vue操作数据库的代码不熟悉的话，可以到官网进行详细的了解。而且...
SpringBoot+Security+Vue前后端分离开发权限管理系统
04-10
适用人群所有的IT从业者，尤其适合快速掌握新技术，快速增长工作经验人群，对教育公平，教育公益，教育爱心公益人士课程概述该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目，采用分布式，多模块，前后端分离开发。包括图形展示、权限管理、用户管理等功能。【后端技术】技术说明Spring Boot2MVC框架 开发的一站式解决方案Spring Security5 认证和授权框架MyBatisPlus3.3.1 基于 MyBatis 框架的快速研发框架MyBatisCode工具生成 MyBatis 相关代码Jackson提供了处理 JSON 数据的工具Lombok简化对象封装工具 Druid   数据库连接池 【前端技术】Vue       互联网最火的前端框架Vue Router路由框架Vuex全局状态管理框架Axios前端 HTTP 框架Element UI前端 UI 框架Vue Element Admin前端模板Antv  蚂蚁金服可视化技术，阿里巴巴可视化技术，天猫，淘宝，支付宝，花呗均使用AntV【开发工具】IntelliJ IDEA开发 IDESQLyog数据库连接客户端PostmanHTTP 请求工具【开发环境】工具版本JDK1.8MySQL5.7
基于Vue和微服务框架博客网站系统设计与实现
毕业作品网站
09-16 937
本次设计使用的是JavaWeb开发中主流的微服务架构方式，微服务一定会涉及分布式，一般提到微服务大多在系统逻辑与物理结构设计上，而分布式则涉及到的都是一些机器或者实现技术，阅读本章可以理解整个博客用到的理论及其技术。博客是互联网的一种分享类型的技术产物，但是如何留着用户才是重要的，并不都是所有的功能都会涉及到“高并发”，博客的功能多样性会增强用户的体验，让用户对博客的使用产生依赖性，利用从众心态合理地开发增值功能。
案例：后台管理系统（VUE路由案例）素材.zip
05-08
本案例的“后台管理系统”是基于Vue.js实现的一个具体应用，主要涉及了Vue路由（Vue Router）的实践。Vue Router是Vue生态中的官方路由库，它允许我们管理应用的导航和页面间通信，对于构建复杂、多视图的后台管理...
一个Vuejs20开发内容管理系统
08-10
本项目“一个Vuejs20开发内容管理系统”旨在利用Vue.js 2.0的强大功能，打造一套功能完备、易于扩展的内容管理平台。 首先，我们需要理解Vue.js的核心概念。Vue.js通过声明式的数据绑定将视图与数据模型紧密联系在...
vue-DBM:vuejs数据库管理器数据管理系统-前端
03-11
DBM是一个数据源管理系统，包含数据源管理，开放授权两个模块，数据源管理指关系型数据的一键导入，按需筛选，指定转换等功能，开放授权指数据拥有者给用户开放数据的增，删，改，查等操作权限。部署或使用此系统...
一个前端基于Vuejs后端基于Nodejs的博客内容管理系统
08-10
在本文中，我们将深入探讨一个基于Vue.js前端和Node.js后端的博客内容管理系统。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Node.js则是一个强大的后端JavaScript运行环境，两者结合可以构建出高效、响应式...
博客管理系统|基于SpringBoot+Vue+ElementUI个人博客系统的设计与实现
BS009的博客
07-22 1872
博客，又叫网络日志，是一个通常由个人管理，不定期发布新的文章的网站。博客上的文章通常根据发布的时间，用倒序的方式由新到旧排列。许多博客专注在特定的课题上提供评论和新闻，其他的被作为个人日记。一个典型的博客结合了文字、图像、其他博客或者网站的链接、以及其他相关的主题为主的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，博客是社会媒体网络的一部分。
SpringBoot+Vue 博客系统（十一）：博客后台管理
YangCunle的博客
06-06 976
签名：但行好事，莫问前程。 文章目录一、首页二、用户管理1、列表数据分页展示2、请求后台分页数据3、添加用户4、修改用户信息5、删除用户三、博客标签四、博客管理五、留言管理七、链接管理八、关于作者总结 超级管理员登录账号进入后台管理页面，可以从管理后台对博客系统进行管理，其中包括：用户管理，博客管理，编辑添加博客，以及标签、留言、链接以及作者信息的管理，后台管理数据，给前台展示。 一、首页 首页展示日历 二、用户管理 <template> <div> <
基于SpringBoot和Vue实现的个人博客网站快速搭建(已开源)
Sunshine_Mr_Sun的博客
07-13 1897
JDK = 1.8 MySQL >= 5.7Maven >= 3.0Redis >= 6.0 IntelliJ IDEA Xshell MySQL图形化操 分别将前后端项目打包(jar、dist) 将dist丢到nginx里，并配置nginx 修改Dockerfile以及docker-compose.yml文件 执行docker build -t myblog:1.0 . docker images docker-compose up cd 路径/topicUI npm install --registr
基于Springboot+Vue前后端分离的个人博客管理系统的设计与实现+毕业论文（15000字）（包运行调试）
初尘屿风的博客
04-02 870
个人博客是人们在网络上展现自己个性的一种方式。自从互联网走进千家万户，大受人们喜爱。大家都喜欢通过网络来获取各种各样的信息。而在网络上，你也可以畅所欲言，而个人博客也是其中一种。在个人博客上，你可以发表自己的心路旅程，发表自己的工作经验，发表技术博客等等。博客最开始的时候是论坛下的一个子系统。最早参与博客的都是一些信息技术的一些专家和学者，讨论的都是专业技能。直到发现了博客的商业价值，一些开放了自发式的博客，大家也都发现了博客分享和讨论的趣味。越来越多的人参与进来，博客也越来越风靡盛行。
基于SpringBoot+Vue的个人博客系统（源码+文档+部署+讲解）
qq_33638415的博客
01-29 2009
本系统为博主而设计制作个人博客系统，旨在实现个人博客智能化、现代化管理。本个人博客管理自动化系统的开发和研制的最终目的是将个人博客的运作模式从手工记录数据转变为网络信息查询管理，从而为现代管理人员的使用提供更多的便利和条件。使个人博客系统数字化、智能化，是提高工作效率的重要举措。
Vue Leancloud 博客系统：一款现代化的个人博客搭建方案
gitblog_00028的博客
03-27 340
Vue Leancloud 博客系统：一款现代化的个人博客搭建方案 项目地址:https://gitcode.com/jiangjiu/vue-leancloud-blog Vue Leancloud Blog 是一个基于 Vue.js 和 Leancloud 的轻量级博客框架，旨在帮助开发者快速、便捷地构建自己的个人博客系统。它将 Vue.js 的高效和 Leancloud 的云数据库服务相结合...
基于Flask+Vue+AntDesign搭建的博客管理系统
一米阳光的博客
04-24 162
一款 Python 语言基于Flask、Vue3.x、AntDesign、MySQL等框架精心打造的一款高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的图片上传组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义后端服务模板和前端模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本的同时提高了开发
写一个springboot+vue框架的学生信息管理系统，使用java语言
05-29
好的，我可以为您提供一个简单的学生信息管理系统的示例，使用Spring Boot和Vuejs前端框架。以下是实现步骤： 1. 创建Spring Boot项目 使用Spring Initializr创建一个新的Spring Boot项目。在“Dependencies”选项卡中添加以下依赖项： - Spring Web - Spring Data JPA - H2 Database - Lombok 2. 创建实体类 创建一个名为“Student”的实体类，该类包含以下属性：id、姓名、年龄、性别和成绩。 ```java @Entity @Data @NoArgsConstructor @AllArgsConstructor public class Student { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; private String gender; private Double score; } ``` 3. 创建JPA Repository 创建一个名为“StudentRepository”的JPA存储库，用于与数据库交互。 ```java @Repository public interface StudentRepository extends JpaRepository<Student, Long> { } ``` 4. 创建REST控制器 创建一个名为“StudentController”的REST控制器，用于处理来自前端的HTTP请求。 ```java @RestController @RequestMapping("/api/students") @AllArgsConstructor public class StudentController { private final StudentRepository studentRepository; @GetMapping public List<Student> getAllStudents() { return studentRepository.findAll(); } @PostMapping public void addStudent(@RequestBody Student student) { studentRepository.save(student); } @PutMapping("/{id}") public void updateStudent(@PathVariable Long id, @RequestBody Student student) { Student existingStudent = studentRepository.findById(id).orElseThrow(() -> new EntityNotFoundException("Student not found")); existingStudent.setName(student.getName()); existingStudent.setAge(student.getAge()); existingStudent.setGender(student.getGender()); existingStudent.setScore(student.getScore()); studentRepository.save(existingStudent); } @DeleteMapping("/{id}") public void deleteStudent(@PathVariable Long id) { studentRepository.deleteById(id); } } ``` 5. 创建Vuejs前端 创建一个名为“StudentList.vue”的Vuejs组件，用于显示学生列表和添加/编辑/删除学生。 ```vue <template> <div> <h1>学生信息管理系统</h1> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="student in students" :key="student.id"> <td>{{ student.id }}</td> <td>{{ student.name }}</td> <td>{{ student.age }}</td> <td>{{ student.gender }}</td> <td>{{ student.score }}</td> <td> <button @click="editStudent(student)">编辑</button> <button @click="deleteStudent(student)">删除</button> </td> </tr> </tbody> </table> <div> <h2>{{ isNewStudent ? '添加学生' : '编辑学生' }}</h2> <form @submit.prevent="submitForm"> <label>姓名:</label> <input type="text" v-model="form.name" required> <br> <label>年龄:</label> <input type="number" v-model="form.age" required> <br> <label>性别:</label> <select v-model="form.gender" required> <option value="男">男</option> <option value="女">女</option> </select> <br> <label>成绩:</label> <input type="number" v-model="form.score" required> <br> <button type="submit">{{ isNewStudent ? '添加' : '保存' }}</button> <button type="button" @click="cancelForm">取消</button> </form> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { students: [], form: { name: '', age: '', gender: '', score: '' }, isNewStudent: true } }, mounted() { this.fetchStudents(); }, methods: { fetchStudents() { axios.get('/api/students') .then(response => { this.students = response.data; }) .catch(error => { console.log(error); }); }, editStudent(student) { this.form = Object.assign({}, student); this.isNewStudent = false; }, deleteStudent(student) { axios.delete(`/api/students/${student.id}`) .then(response => { this.students = this.students.filter(s => s.id !== student.id); }) .catch(error => { console.log(error); }); }, submitForm() { if (this.isNewStudent) { axios.post('/api/students', this.form) .then(response => { this.students.push(response.data); this.form = { name: '', age: '', gender: '', score: '' }; }) .catch(error => { console.log(error); }); } else { axios.put(`/api/students/${this.form.id}`, this.form) .then(response => { const index = this.students.findIndex(s => s.id === this.form.id); this.students.splice(index, 1, response.data); this.form = { name: '', age: '', gender: '', score: '' }; this.isNewStudent = true; }) .catch(error => { console.log(error); }); } }, cancelForm() { this.form = { name: '', age: '', gender: '', score: '' }; this.isNewStudent = true; } } } </script> ``` 6. 运行应用程序 启动Spring Boot应用程序并访问http://localhost:8080/。您应该能够看到一个包含学生列表的页面，您可以添加，编辑和删除学生。 以上就是一个简单的学生信息管理系统的示例，使用Spring Boot和Vuejs前端框架。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌村村花杨小花

谢谢大佬！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值