C#加Vue MVC+Vue快速开发

最新推荐文章于 2024-04-16 07:26:14 发布
最新推荐文章于 2024-04-16 07:26:14 发布
阅读量1.2w 收藏 38
点赞数 1
分类专栏： Vue C# Asp.Net Mvc 文章标签： c# vue.js mvc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43942765/article/details/121938973
版权
C# 同时被 3 个专栏收录
69 篇文章 0 订阅
订阅专栏
Asp.Net Mvc
6 篇文章 0 订阅
订阅专栏
Vue
4 篇文章 0 订阅
订阅专栏

首先创建项目
在这里插入图片描述
在这里插入图片描述
创建后大概的样子
在这里插入图片描述
1.配置Startup.cs

1.添加服务器端缓存
2.使用服务器端缓存
3.修改启动项为Home控制器下的Home视图

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Supply_System
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddResponseCaching();//1.添加服务器端缓存
            services.AddControllersWithViews();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseResponseCaching();//2.使用服务器端缓存

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Home}/{id?}");//3.修改启动项为Home控制器下的Home视图
            });
        }
    }
}

2.在Models文件夹下添加两个实体类

1.SupplyDemandsViewModel
2.TypeViewModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Supply_System.Models
{
    public class SupplyDemandsViewModel
    {
        public int Id { get; set; }
        public string SupplyDemandTitle { get; set; }
        public string SupplyDemandDetail { get; set; }
        public string CreateTime { get; set; }
        public int CreateUserId { get; set; }
        public int TypeId { get; set; }
        public string TypeName { get; set; }
        public bool IsRecommend { get; set; }
        public bool IsDel { get; set; }
        public static List<SupplyDemandsViewModel> ListAll()
        {
            List<SupplyDemandsViewModel> supplyDemands = new List<SupplyDemandsViewModel>();
            for (int i = 0; i < 8; i++)
            {
                bool IsRecommend = false;
                if (i > 4)
                {
                    IsRecommend = true;
                }
                supplyDemands.Add(new SupplyDemandsViewModel
                {
                    Id = 1,
                    SupplyDemandTitle = "v-if",
                    SupplyDemandDetail = "",
                    CreateTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
                    CreateUserId = 1,
                    TypeId = 1,
                    TypeName = "Vue控件",
                    IsRecommend = IsRecommend,
                    IsDel = false
                });
            }
            for (int i = 0; i < 8; i++)
            {
                bool IsRecommend = false;
                if (i > 4)
                {
                    IsRecommend = true;
                }
                supplyDemands.Add(new SupplyDemandsViewModel
                {
                    Id = 1,
                    SupplyDemandTitle = "vm",
                    SupplyDemandDetail = "",
                    CreateTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
                    CreateUserId = 1,
                    TypeId = 2,
                    TypeName = "Vue语法",
                    IsRecommend = IsRecommend,
                    IsDel = false
                });
            }
            for (int i = 0; i < 8; i++)
            {
                bool IsRecommend = false;
                if (i > 4)
                {
                    IsRecommend = true;
                }
                supplyDemands.Add(new SupplyDemandsViewModel
                {
                    Id = 1,
                    SupplyDemandTitle = "商城",
                    SupplyDemandDetail = "",
                    CreateTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
                    CreateUserId = 1,
                    TypeId = 3,
                    TypeName = "Vue实战",
                    IsRecommend = IsRecommend,
                    IsDel = false
                });
            }
            return supplyDemands;
        }
    }
    
}


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Supply_System.Models
{
    public class TypeViewModel
    {
        public int Id { get; set; }
        public string TypeName { get; set; }
        public string Url { get; set; }
        public static List<TypeViewModel> ListAll()
        {
            List<TypeViewModel> navViewNodels = new List<TypeViewModel>();
            navViewNodels.Add(new TypeViewModel
            {
                Id = 1,
                TypeName = "Vue控件",
                Url = ""
            });
            navViewNodels.Add(new TypeViewModel
            {
                Id = 2,
                TypeName = "Vue语法",
                Url = ""
            });
            navViewNodels.Add(new TypeViewModel
            {
                Id = 3,
                TypeName = "Vue实战",
                Url = ""
            });
            return navViewNodels;
        }
    }
}

3.修改HomeController控制器

1.添加浏览器端缓存
2.加载栏目数据
3.加载栏目对应的内容数据

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Supply_System.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace Supply_System.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }
        [ResponseCache(Duration = 600)]/*1.浏览器端缓存*/
        public IActionResult Home()
        {
            return View();
        }
        [ResponseCache(Duration = 600)]
        public IActionResult GetNavs()/*2.加载栏目数据*/
        {
            return new JsonResult(TypeViewModel.ListAll());
        }
        [ResponseCache(Duration = 600)]
        public IActionResult GetSuppys ()/*3.加载栏目对应的内容数据*/
        {
            return new JsonResult(SupplyDemandsViewModel.ListAll());
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

4.修改_Layout.cshtml视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Supply_System</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/lib/Vue/vue.min.js"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div id="navs" class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Home">主页</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item" v-for="nav in navs">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">{{nav.typeName}}</a>
                        </li>
                        @*<li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Vue控件</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Vue语法</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Vue实战</a>
                        </li>*@
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - Supply_System - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>
<script>
    var vm = new Vue({
        el: "#navs",
        data: {
            navs:[]
        },
        mounted() {
            this.getNavs();
        },
        methods: {
            getNavs() {
                var that = this;
                $.get("/Home/GetNavs", {}, function (res) {
                    that.navs = res;
                    console.log(res)
                })
            }
        }
    });
</script>

5.修改Home.cshtml视图

@{
    ViewData["Title"] = "Home Page";
}
<script src="~/lib/Vue/vue.min.js"></script>
<style>
    ul {
        list-style: none;
        margin: 10px;
        float: left;
    }

        ul li {
            font-size: 18px;
        }
    /*    ul li {
        float: left;
    }*/
</style>
<div id="HomePage">
    <div style="margin-left:50px;">
        <p>请输入关键字</p>
        <input type="text" v-model="searchText" placeholder="请输入需要搜索的关键字" />
        @*<button @@click="search()">搜索</button>*@@*click前面添加两个@@符号是因为C#定义一个@会转换为后端语言*@
        <button v-on:click="search()">搜索</button>
    </div>
    <div v-show="showSearch==false">
        <ul>
            <li><h3>推荐信息</h3></li>
            <li v-for="supply in getSupplyByRecommend">{{supply.supplyDemandTitle}}</li>
        </ul>
    </div>
    <div v-show="showSearch==false" v-for="type in types">
        <ul>
            <li><h3>{{type.typeName}}</h3></li>
            @*字段首字母要小写*@
            <li v-for="supply in getSupplysByTypeId(type.id)">{{supply.supplyDemandTitle}}</li>

        </ul>
    </div>
    <div v-show="showSearch==true">
        <p style="margin-left:50px;">搜索内容</p><button v-on:click="backAll()">返回</button>
        <ul v-if="searchRes.length > 0">
            <li v-for="supply in searchRes">
                {{supply.supplyDemandTitle}}
            </li>
        </ul>
        <div v-else>
            您搜索的内容尚不存在
        </div>
    </div>

    @*<div>
            <ul>
                <li>Vue控件</li>
                <li>v-if</li>
                <li>v-show</li>
                <li>v-text</li>
                <li>v-model</li>
                <li>v-for</li>
                <li>v-bind</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>Vue语法</li>
                <li>vm</li>
                <li>data</li>
                <li>methods</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>Vue实战</li>
                <li>商城</li>
                <li>官网</li>
                <li>后台管理</li>
            </ul>
        </div>*@
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    var vmHome = new Vue({
        el: "#HomePage",
        data: {//定义变量
            types: [],
            supplys: [],
            searchText: null,
            searchRes: [],
            showSearch: false
        },
        mounted() {
            this.getNavs();
            this.getSupplys();
        },
        methods: {
            getNavs() {
                var that = this;
                $.get("/Home/GetNavs", {}, function (res) {
                    that.types = res;
                    console.log(res)
                })
            },
            getSupplys() {
                var that = this;
                $.get("/Home/GetSuppys", {}, function (res) {
                    that.supplys = res;
                    console.log(res)
                })
            }
            //,
            //getSupplysByTypeId(typeId) {
            //    return this.supplys.filter(m => m.typeId == typeId);
            //}
            , search() {
                console.log(this.searchText);
                if (this.searchText == null) {
                    alert("您尚未输入内容！");
                } else {
                    this.searchRes = this.supplys.filter(m => m.supplyDemandTitle.includes(this.searchText));
                    this.showSearch = true;
                }
                
            },
            backAll() {
                this.showSearch = false;
                this.searchText = null;
            }
        },
        computed: {/*computed下定义的是属性，不能直接定义方法，但是可以在其属性下定义方法*/
            getSupplyByRecommend(){
                return this.supplys.filter(m=>m.isRecommend==true);
            },
            getSupplysByTypeId() {
                //无法像methods中那样直接定义方法，该处的getSupplysByTypeId()是一个属性，所以也不能传参，但是可以在该属性下定义一个方法
                return function (typeId) {
                    return this.supplys.filter(m => m.typeId == typeId);
                }
            }
        }
    })
</script>

在这里插入图片描述
在这里插入图片描述

媳妇买了只狗，没事干就拿着人民币让狗闻。老公感觉很奇怪，就问：”老婆，你这是干吗，让狗去给你大马路上捡钱？“媳妇神秘地一笑：”以后你就知道了！“几星期后，老公的私房钱不见了。

太阳的后裔
关注
  • 1
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【基于C#+vue项目源码】快速开发框架Vue.NetCore
08-02
Vue + C#.NetCore前后端分离，不一样的快速开发框架(提供Vue2/Vue3版本) 框架核心 快速开发(基础功能全部由代码生成器生成) 支持前端、后台自定义业务代码扩展,后台提供了大量常用扩展与通用类 前端、后台提供了近300个扩展方法与属性,开发人员可在此功能上编写扩展自定义业务代码 代码生成(代码生成器可直接生成主/从表前后端业务代码,有30多种属性可在线配置生成的代码) 前端table自动转换key/value 前端表单select/checkbox自动绑定数据源,不需要写任何代码 如果能上手框架，可以体会到不用996,更不用掉头发的感觉^_^ 框架适用范围 前后端分离项目 后台：VS2019、vs2022 、.NetCore3.1 、.Net6、EFCore3.1/6.0、JWT、Dapper、SignalR、Quartz.Net、Autofac、SqlServer/MySql/PGSql/Oracle、Redis 前端：VsCode、Vue2/vue3（需要安装nodejs)、vuex、axios、promise、element ui、element plus
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的是codeFirst 4.实现了分页的功能。 5.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，花了很长时间做的，麻烦给打5分好评，非常感谢。
C#基于SSE传递消息给Vue前端实现即时单向通讯
学以致用 知行合一
04-16 725
通常前端调用后端的API，调用到了，等待执行完，拿到返回的数据，进行渲染，流程就完事了。如果想要即时怎么办？如果你想问什么场景非要即时通讯，那可就很多了，比如在线聊天、实时数据推送、视频会议等等。本人这里是要实现的流程是，Vue调用C#的API，然后API内新线程调用python执行任务，然后API就给前端返回执行开始的消息，Vue和API就结束了。但是python执行的是十分耗时的任务，需要不断的把中间节点的消息输出到前端，是这样子一个场景。
C# MVC 结合 VUE3 的进阶使用
weixin_41989626的博客
12-20 3369
C# MVC 是一种常用的服务器端技术，而VUE3是一种流行的客户端JavaScript框架。结合两者可以实现强大的前后端分离的应用程序。本文将介绍如何使用C# MVC 结合 VUE3 进行开发，并提供相关代码示例。
c# mvc项目 前端vue前后端分离开发过程总结
gyl332915141的博客
03-31 4271
c# mvc项目 前端vue前后端分离开发过程总结 1.vs创建新项目选择ASP.NET Web 应用程序（.NET Framework） 选择mvc项目 2.修改配置（解决跨域问题） 在web.config中添加 system.webServer 代码如下 <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-
vue与C#实现自定义表单审批流程构建-前端
acheng
07-29 5356
做信息化项目相信绝大部分人都接触过单据审批流程的需求，例如发起一个采购申请，需要几个节点审核，部门负责人审核，采购审核，财务审核等等。审批人也需要可自定义，以及可能会出现审批条件分支的情况，这时我们的审批流程就需要完全可定义才能满足...
关于C#的vol.vue框架使用
CureGuy的博客
11-04 2815
关于C#的vol.vue框架使用，如同之前玩的Java和vue框架的那样学习。
winform使用CefSharp嵌入VUE网页并交互
qq_34533703的博客
12-13 2250
winform使用CefSharp嵌入VUE网页并交互
Vue+ElementUI+C#前后端分离：监控长耗时任务的实践
吾家有猫名探花的博客
12-03 1149
在现代的Web应用开发中，前后端的协同工作已经成为提升用户体验和应用性能的关键。特别是在处理一些耗时的后端任务时，如何优雅地管理这些任务，不仅影响着用户的等待时间，也直接关联到系统的稳定性和可靠性。本文将通过一个实际案例，介绍如何在Vue+ElementUI的前端环境和C#.NET Core的后端环境中实现一个高效的解决方案。我们将探讨如何设计一个异步的任务处理机制，允许前端发起下载任务，然后不必等待后端任务完成就能立即得到响应，同时能够实时监控任务的进度，并在任务完成后通知用户进行下载。
c#基于.netcore6.0+vue3.0+elementUI3.0实现的教务管理系统源码.zip
05-19
c#基于.netcore6.0+vue3.0+elementUI3.0实现的教务管理系统源码.zip
C# + Vue 项目源码举例解析.docx
05-31
# C# + Vue 项目源码举例解析 本文将介绍一个基于 C# 和 Vue 的项目源码示例，帮助读者更好地理解如何进行 C# 和 Vue 的开发。 ## 项目介绍 该项目是一个简单的任务管理系统，使用了 C# 和 Vue 进行开发。其中，C# 负责后端开发，Vue 负责前端开发。该项目主要包括以下功能： - 用户登录和注册 - 任务的增删改查 - 任务分配和提醒 ## 技术栈 该项目使用了以下技术栈： - 后端开发使用 C# 和 [ASP.NET](http://asp.net/) Core Web API - 数据库采用 Microsoft SQL Server - 前端开发使用 Vue、Element UI 和 Axios ## 项目结构 该项目的结构如下： ``` Project │ README.md │ .gitignore │ └───Backend │ │ TaskManagementSystem.sln │ │ │ └───TaskManagementSystem │ │ appsettings.json │
csharp与vbnet的区别
10-22
列举了诸多csharp和vb.net的区别，可以对.net平台的开发语言有更进一步的了解
asp.net的MVC4 DEMO示例
06-05
基于aspnet的mvc4的一款示例程序，简单明了，非常适合新手
Mvc+vue增删查改Demo.7z
08-30
MVC与Vue结合实现数据增删查改的小Demo，学习相关技术时顺便做的，数据端未采用数据库，便于下载后直接运行。仅供参考。
ASP.NET.CORE 5.0 MVC + Postgresql + VUE + AXIOS + ELEMENT-UI 实战示例.docx
08-01
ASP.NET Core 5.0 MVC 是微软开发的一个用于构建高性能 web 应用的框架，它提供了模型-视图-控制器（MVC）架构，使得开发者能够更清晰地组织应用程序的业务逻辑、用户界面和数据访问层。在这个实战示例中，我们将...
基于C#的SQLServer与Vue集成设计源码
最新发布
05-23
基于C#的SQLServer与Vue集成设计源码项目包含438个文件，其中包括161个DLL文件、73个CS文件、57个Cache文件、38个JSON文件、32个PDB文件、15个Editorconfig文件、14个SO文件、8个Props文件和8个Targets文件。...
Vue-MVC-Example.rar
05-06
Vue-MVC-Example c#
Vue+C# MVC API前后端分离跨域设置
qq_28996795的博客
05-11 1875
1. C#后端代码 Ps：添加一个过滤器(或者配置Web.config) using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Blog.Filter { public class HttpHeadAttribute: ActionFilterAttribute { public override
springboot vue+mybatis-plus快速开发框架
09-09
Spring Boot是一个用于快速开发基于Java的应用程序的框架，它提供了一个简化的开发流程和可靠的开发环境。Vue.js是一个用于构建用户界面的JavaScript框架，它可以与Spring Boot结合使用来提供前端功能。MyBatis-Plus是一个基于MyBatis的增强工具，它简化了数据访问层的开发。 将Spring Boot、Vue.js和MyBatis-Plus结合使用可以快速构建一个全栈应用程序。你可以使用Spring Boot搭建后端服务，MyBatis-Plus来简化数据库操作，Vue.js来构建前端界面。这种组合可以帮助你高效地进行开发，并且提供了良好的扩展性和可维护性。 在使用这个组合框架时，你可以使用Spring Boot的自动配置功能来简化项目的配置，并且可以使用MyBatis-Plus提供的代码生成器来快速生成数据访问层的代码。同时，Vue.js可以帮助你构建交互式的前端界面，并通过与后端API进行通信来获取数据。 总结来说，Spring Boot、Vue.js和MyBatis-Plus组合可以帮助你快速搭建一个全栈应用程序，并提供了高效的开发体验和可维护性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值