Vue | blog

最新推荐文章于 2024-08-23 08:13:39 发布

jensonliu

最新推荐文章于 2024-08-23 08:13:39 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_38765789/article/details/97369510

前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍了使用Vue-cli、Express、ElementUI、Django和Mysql开发博客系统的实践过程。涵盖了环境搭建、功能实现（如登录、博文管理、响应式布局）以及项目流程，包括Vue的路由配置、Django的后端处理、Express作为中间层的作用。文章还提到了在开发中遇到的问题，如登录状态管理、分页策略，并分享了GitHub源码链接，欢迎交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、开发环境：Vue-cli + Express + ElementUI + Django + Mysql

使用webpack搭建的Vue-cli脚手架，后台使用Django和Mysql，UI框架为ElementUi，最近学习了Node中的Express框架了，打算后续的后台请求和数据处理都使用express，之前的django后台也就不改了吧，当然用node来当作为vue和django的中间层也是可以的。

二、目前实现功能：

登陆
博文的编写、查看、搜索、评论、二级评论、管理
响应式布局
用户中心界面

三、项目流程

1.创建django项目,按照模块分为多个app, 并在根目录下利用webpack建立vue-cli项目

2.在django的主配置闻不见vueblog中设置一级路由(当然在这之前还得将app写入setting中)，并在各个模块中编写二级路由和相应的views映射处理

3.Express和Django都需要设置代理，一个8000端口，一个3000端口。上下使用两种写法。

4. 开始编写vue，先构建目录架构，common存放公共部分(头部、左边导航、富文本编辑器), blog存放博客相关页，user存放用户相关页，smallUi存放一些小Ui组件，js和css不必说，vuex用于管理某些数据状态，该项目中我使用vuex来配合cookie保存用户登陆信息，以及存放用户的登陆平台信息和位置信息等。

5. 编写路由表

编写一个home主页面挂载到根目录(挂载到App.vue中,App中就只用设置一个子路由入口<router-view>)，并将头部和左部导航挂载到home.vue中。而博文详情和编写页面不需要上左导航栏，因此不写到home的子路由中。

6.根页面home.vue ( app.vue中只挂载一个home )

7.页面效果

窄屏（移动端）：

8.新增express

这部分在我另一篇博客https://blog.youkuaiyun.com/qq_38765789/article/details/98977399有记录

9.下面记录一些开发过程中遇到的种种

(1) 一开始使用session来记录登陆信息，但是出现诸多问题，于是改用cookie + vuex来完成，同时在user数据表中设置一个isLogin字段来记录是否登陆。其中vuex也有需要注意的地方，在刷新子组件后根组件跟着刷新，这时vuex中的变量就会重新初始化，因此可以在根组件的钩子函数中重新获取并赋值。如果想要持久化的储存还是得用cookie或localStorage。

但是前端取出来的cookie数据格式很不友好，还需要自己处理成JSON等格式，现在发现用localStorage的话会更方便，localStorage封装起来也会更方便，自己也尝试封装了一个能完成基本功能的storage, 不过localStorage


var storage = {

	setItem : function(key,value){
		localStorage.setItem(key,JSON.stringify(value));
	},

	getItem: function(key){
		if(!key){
			return null;
		}
		return JSON.parse(localStorage.getItem(key));
	},


	getAll : function(){
		// localStorage是一个对象,遍历属性和值，添加到一个json数组中返回
		// [ {name:'jiapeng'} , {age:18}  ] 
		let result = []
		Object.entries(localStorage).forEach((entry)=>{
			let obj = {};
			obj[entry[0]]=entry[1];
			result.push(obj);
		})
		return result;
	},

	remove : function(key){
		localStorage.removeItem(key);
	},

	removeAll:function(){
		// 遍历localStorage的键
		Object.keys(localStorage).forEach(key=>{
			localStorage.removeItem(key);
		})
	}

}

(2) 分页，一开始使用的是后台分页，即根据当前页码请求后台数据，而后台根据页码利用limit语句取出相应数据，不过数据量较小的情况，也可以在前端直接分页，即前端先请求所有的数据，再根据当前页码把相应数据显示到模板中。

想了想，如果数据量大的话，也可以根据当前页码请求前几页和后几页的数据先缓存起来。

...........................未完待续

详细的代码在我的github中，我也是个前端小白，欢迎交流~

github地址 : https://github.com/liujiapeng/Vue-Blog