基于Asp.Net Core + Vue.js 项目实战

简介一个用于练手的前后端分离的小Demo，基于Asp.Net Core + Vue.js 实现的一个小日记功能！项目效果登录注册页面页面首页个人日记管理页面其中日记都做了分页功能，默认设置为5页！单篇日记查看添加编辑页面采用了 wangEditor 富文本编辑器，不过暂时没有加入上传图片和视频的功能！简单的用户功能结尾整体项目用户认证的实现是通过JWT的...

CSND-青石

14714人浏览 · 2020-03-11 11:37:54

CSND-青石 · 2020-03-11 11:37:54 发布

简介

前一段时间开始学习.NetCore，于是想着做一个简单项目出来练手。后端是Asp.Net Core实现对日记的增删改查接口和用户修改信息上传头像的接口，比较简单。前端采用 Vue.js ，通过Element-UI来实现对界面的布局美化和表单的验证功能，其中token存储于 Local Storage中。

最新后端介绍：最新后端重构项目地址

项目效果

登录注册页面

登录成功接口则会返回用户基本信息，vue存储这些信息方便全局展示。
登陆图片

注册页面

页面首页

首页为所有用户的公开日记，创建日记的时候默认开启公布，可在管理日记中修改日记状态来对他人隐藏日记。
页面首页

个人日记管理页面

其中日记都做了分页功能，默认设置为5个一页！
日记管理

单篇日记查看

日记查看

添加编辑页面

采用了 wangEditor 富文本编辑器，不过暂时没有加入上传图片和视频的功能！
在这里插入图片描述

简单的用户功能

用户功能
用户头像文件只能选择一jpg/png文件，且只能选择一个文件。
在这里插入图片描述

在这里插入图片描述

结尾

整体项目用户认证的实现是通过JWT的方式
前端项目中采用vuex的方式来管理用户登陆状态
前端中是通过设置了代理的方式来访问后端接口

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^