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

简介

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

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

项目效果

登录注册页面

登录成功接口则会返回用户基本信息,vue存储这些信息方便全局展示。
基于Asp.Net Core + Vue.js 项目实战_第1张图片

基于Asp.Net Core + Vue.js 项目实战_第2张图片

页面首页

首页为所有用户的公开日记,创建日记的时候默认开启公布,可在管理日记中修改日记状态来对他人隐藏日记。
基于Asp.Net Core + Vue.js 项目实战_第3张图片

个人日记管理页面

其中日记都做了分页功能,默认设置为5个一页!
基于Asp.Net Core + Vue.js 项目实战_第4张图片

单篇日记查看

基于Asp.Net Core + Vue.js 项目实战_第5张图片

添加编辑页面

采用了 wangEditor 富文本编辑器,不过暂时没有加入上传图片和视频的功能!
基于Asp.Net Core + Vue.js 项目实战_第6张图片

简单的用户功能

基于Asp.Net Core + Vue.js 项目实战_第7张图片
用户头像文件只能选择一jpg/png文件,且只能选择一个文件。
基于Asp.Net Core + Vue.js 项目实战_第8张图片

基于Asp.Net Core + Vue.js 项目实战_第9张图片

结尾

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

你可能感兴趣的:(C#学习)