.net core + vue开发单页应用（二）

最新推荐文章于 2026-05-29 08:00:52 发布
原创 最新推荐文章于 2026-05-29 08:00:52 发布 · 8.2k 阅读 · 9 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#.net core #vue.js #单页应用
本文通过实战演示了如何使用Vue.js结合.NET Core搭建单页应用，涵盖了基础结构搭建、页面开发、模拟API创建及列表页面展示等内容。

上一篇中已将完成了基础结构的搭建，这一篇将开始正式开发。页面直接使用了一位小伙伴的源码，可以在https://github.com/taylorchen709/vue-admin下载

修改入口main.js

在入口函数中添加对element-ui,vue-router,vuex,vue-source等组件的引用

 
  1. import Vue from 'vue'
  2. import App from './App'
  3. import ElementUI from 'element-ui'
  4. import 'element-ui/lib/theme-default/index.css'
  5. import VueRouter from 'vue-router'
  6. import store from './vuex/store'
  7. import Vuex from 'vuex'
  8. import VueSource from 'vue-resource'
  9. import routes from './routes'
  10. import 'font-awesome/css/font-awesome.min.css'
  13. Vue.use(ElementUI)
  14. Vue.use(VueRouter)
  15. Vue.use(Vuex)
  16. Vue.use(VueSource)
  18. //创建路由实例
  19. const router = new VueRouter({
  20.     routes
  21. })
  22. router.beforeEach((to, from, next) => {
  24.     //这里进行了简单的登录验证
  25.     //访问login时直接清除user
  26.     if (to.path == '/login') {
  27.         sessionStorage.removeItem('user');
  28.     }
  30.     let user = JSON.parse(sessionStorage.getItem('user'));
  31.     if (!user && to.path != '/login') {
  32.         next({ path: '/login' })
  33.     } else {
  34.         next()
  35.     }
  36. })
  39. new Vue({
  40.     router,
  41.     store,
  42.     render: h => h(App)
  43. }).$mount('#app')

修改App.vue

 
  1. <template>
  2.     <div id="app">
  3.         <transition name="fade"
  4.                     mode="out-in">
  5.             <router-view></router-view>
  6.         </transition>
  7.     </div>
  8. </template>
  9. <script>
  10.     export default {
  11.         name: 'app',
  12.         components: {
  13.         }
  14.     }
  15. </script>

增加viewes文件夹，并增加模块视图

login.vue

 
  1. <template>
  2.     <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
  3.         <h3 class="title">系统登录</h3>
  4.         <el-form-item prop="account">
  5.             <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
  6.         </el-form-item>
  7.         <el-form-item prop="checkPass">
  8.             <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
  9.         </el-form-item>
  10.         <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
  11.         <el-form-item style="width:100%;">
  12.             <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
  13.         </el-form-item>
  14.     </el-form>
  15. </template>
  17. <script>
  18.     export default {
  19.         data() {
  20.             return {
  21.                 logining: false,
  22.                 ruleForm2: {
  23.                     account: 'admin',
  24.                     checkPass: '123456'
  25.                 },
  26.                 rules2: {
  27.                     account: [
  28.                         { required: true, message: '请输入账号', trigger: 'blur' },
  29.                         //{ validator: validaePass }
  30.                     ],
  31.                     checkPass: [
  32.                         { required: true, message: '请输入密码', trigger: 'blur' },
  33.                         //{ validator: validaePass2 }
  34.                     ]
  35.                 },
  36.                 checked: true
  37.             };
  38.         },
  39.         methods: {
  40.             handleReset2() {
  41.                 this.$refs.ruleForm2.resetFields();
  42.             },
  43.             handleSubmit2(ev) {
  44.                 var _this = this;
  45.                 this.$refs.ruleForm2.validate((valid) => {
  46.                     if (valid) {
  47.                         this.logining = true;
  48.                         //NProgress.start();
  49.                         var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
  51.                         if (loginParams.username != 'admin') {
  52.                             this.$message({
  53.                                 message: '用户不存在',
  54.                                 type: 'error'
  55.                             });
  56.                             this.logining = false;
  57.                             return false;
  58.                         }
  59.                         if (loginParams.password != '123456') {
  60.                             this.$message({
  61.                                 message: '密码不正确',
  62.                                 type: 'error'
  63.                             });
  64.                             this.logining = false;
  65.                             return;
  66.                         }
  67.                         let user = {
  68.                             id: 1,
  69.                             username: 'admin',
  70.                             password: '123456',
  71.                             avatar: 'resources/img/user.png',
  72.                             name: '管理员'
  73.                         }
  74.                         sessionStorage.setItem('user', JSON.stringify(user));
  75.                         this.$router.push({ path: '/' });
  76.                     } else {
  77.                         return false;
  78.                     }
  79.                 });
  80.             }
  81.         }
  82.     }
  84. </script>
  86. <style  scoped>
  87.     .login-container {
  88.         /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  89.         -webkit-border-radius: 5px;
  90.         border-radius: 5px;
  91.         -moz-border-radius: 5px;
  92.         background-clip: padding-box;
  93.         margin: 180px auto;
  94.         width: 350px;
  95.         padding: 35px 35px 15px 35px;
  96.         background: #fff;
  97.         border: 1px solid #eaeaea;
  98.         box-shadow: 0 0 25px #cac6c6;
  99.     }
  100.     .title {
  101.         margin: 0px auto 40px auto;
  102.         text-align: center;
  103.         color: #505458;
  104.     }
  106.     .remember {
  107.         margin: 0px 0px 35px 0px;
  108.     }
  109. </style>

home.vue

 
  1. <template>
  2.     <el-row class="container">
  3.         <el-col :span="24" class="header">
  4.             <el-col :span="10" :class="collapsed?'logo-collapse-width logo-collapsed':'logo-width logo'">
  5.                 {{collapsed?'':sysName}}
  6.                 <!--<img :src="logo" v-show="collapsed" />-->
  7.             </el-col>
  8.             <el-col :span="10">
  9.                 <div class="tools" @click.prevent="collapse">
  10.                     <i class="fa fa-align-justify"></i>
  11.                 </div>
  12.             </el-col>
  13.             <el-col :span="4" class="userinfo">
  14.                 <el-dropdown trigger="hover">
  15.                     <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
  16.                     <el-dropdown-menu slot="dropdown">
  17.                         <el-dropdown-item>我的消息</el-dropdown-item>
  18.                         <el-dropdown-item>设置</el-dropdown-item>
  19.                         <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
  20.                     </el-dropdown-menu>
  21.                 </el-dropdown>
  22.             </el-col>
  23.         </el-col>
  24.         <el-col :span="24" class="main">
  25.             <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
  26.                 <!--导航菜单-->
  27.                 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
  28.                          unique-opened router v-show="!collapsed">
  29.                     <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
  30.                         <el-submenu :index="index+''" v-if="!item.leaf">
  31.                             <template slot="title">
  32.                                 <i :class="item.iconCls"></i>{{item.name}}
  33.                             </template>
  34.                             <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
  35.                         </el-submenu>
  36.                         <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
  37.                     </template>
  38.                 </el-menu>
  39.                 <!--导航菜单-折叠后-->
  40.                 <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
  41.                     <li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
  42.                         <template v-if="!item.leaf">
  43.                             <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
  44.                             <ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
  45.                                 <li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
  46.                             </ul>
  47.                         </template>
  48.                         <template v-else>
  49.                     <li class="el-submenu">
  50.                         <div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
  51.                     </li>
  52. </template>
  53.                     </li>
  54.                 </ul>
  55.             </aside>
  56. <section class="content-container">
  57.     <div class="grid-content bg-purple-light">
  58.         <el-col :span="24" class="breadcrumb-container">
  59.             <!--<strong class="title">{{$route.name}}</strong>-->
  60.             <el-breadcrumb separator="/" class="breadcrumb-inner">
  61.                 <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
  62.                     {{ item.name }}
  63.                 </el-breadcrumb-item>
  64.             </el-breadcrumb>
  65.         </el-col>
  66.         <el-col :span="24" class="content-wrapper">
  67.             <transition name="fade" mode="out-in">
  68.                 <router-view></router-view>
  69.             </transition>
  70.         </el-col>
  71.     </div>
  72. </section>
  73.         </el-col>
  74.     </el-row>
  75. </template>
  77. <script>
  78.     export default {
  79.         data() {
  80.             return {
  81.                 sysName:'Simple',
  82.                 logo:'dist/resources/img/logo.png',
  83.                 collapsed:false,
  84.                 sysUserName: '',
  85.                 sysUserAvatar: '',
  86.                 form: {
  87.                     name: '',
  88.                     region: '',
  89.                     date1: '',
  90.                     date2: '',
  91.                     delivery: false,
  92.                     type: [],
  93.                     resource: '',
  94.                     desc: ''
  95.                 }
  96.             }
  97.         },
  98.         methods: {
  99.             onSubmit() {
  100.                 console.log('submit!');
  101.             },
  102.             handleopen() {
  103.                 //console.log('handleopen');
  104.             },
  105.             handleclose() {
  106.                 //console.log('handleclose');
  107.             },
  108.             handleselect: function (a, b) {
  109.             },
  110.             //退出登录
  111.             logout: function () {
  112.                 var _this = this;
  113.                 this.$confirm('确认退出吗?', '提示', {
  114.                     //type: 'warning'
  115.                 }).then(() => {
  116.                     sessionStorage.removeItem('user');
  117.                     _this.$router.push('/login');
  118.                 }).catch(() => {
  120.                 });
  123.             },
  124.             //折叠导航栏
  125.             collapse:function(){
  126.                 this.collapsed=!this.collapsed;
  127.             },
  128.             showMenu(i,status){
  129.                 this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
  130.             }
  131.         },
  132.         mounted() {
  133.             var user = sessionStorage.getItem('user');
  134.             if (user) {
  135.                 user = JSON.parse(user);
  136.                 this.sysUserName = user.name || '';
  137.                 this.sysUserAvatar = user.avatar || '';
  138.             }
  140.         }
  141.     }
  143. </script>
  145. <style scoped >
  146.     .container {
  147.         position: absolute;
  148.         top: 0px;
  149.         bottom: 0px;
  150.         width: 100%;
  151.     }
  153.         .container .header {
  154.             height: 60px;
  155.             line-height: 60px;
  156.             background: #20a0ff;
  157.             color: #fff;
  158.         }
  160.             .container .header .userinfo {
  161.                 text-align: right;
  162.                 padding-right: 35px;
  163.                 float: right;
  164.             }
  166.                 .container .header .userinfo .userinfo-inner {
  167.                     cursor: pointer;
  168.                     color: #fff;
  169.                 }
  171.                     .container .header .userinfo .userinfo-inner img {
  172.                         width: 40px;
  173.                         height: 40px;
  174.                         border-radius: 20px;
  175.                         margin: 10px 0px 10px 10px;
  176.                         float: right;
  177.                     }
  179.             .container .header .logo {
  180.                 height: 60px;
  181.                 font-size: 22px;
  182.                 padding-left: 20px;
  183.                 padding-right: 20px;
  184.                 border-color: rgba(238, 241, 146, 0.3);
  185.                 border-right-width: 1px;
  186.                 border-right-style: solid;
  187.             }
  189.                 .container .header .logo img {
  190.                     width: 40px;
  191.                     float: left;
  192.                     margin: 10px 10px 10px 18px;
  193.                 }
  195.                 .container .header .logo .txt {
  196.                     color: #fff;
  197.                 }
  199.             .container .header .logo-collapsed {
  200.                 padding: 0;
  201.                 font-size: 22px;
  202.                 padding-left: 0px;
  203.                 padding-top: 10px;
  204.                 border-color: rgba(238, 241, 146, 0.3);
  205.                 border-right-width: 1px;
  206.                 border-right-style: solid;
  207.             }
  209.                 .container .header .logo-collapsed img {
  210.                     width: 60px;
  211.                     float: left;
  212.                     margin: 0px;
  213.                 }
  215.                 .container .header .logo-collapsed .txt {
  216.                     color: #fff;
  217.                 }
  219.             .container .header .logo-width {
  220.                 width: 230px;
  221.             }
  223.             .container .header .logo-collapse-width {
  224.                 width: 60px;
  225.             }
  227.             .container .header .tools {
  228.                 padding: 0px 23px;
  229.                 width: 14px;
  230.                 height: 60px;
  231.                 line-height: 60px;
  232.                 cursor: pointer;
  233.             }
  235.         .container .main {
  236.             display: flex;
  237.             position: absolute;
  238.             top: 60px;
  239.             bottom: 0px;
  240.             overflow: hidden;
  241.         }
  243.             .container .main aside {
  244.                 flex: 0 0 230px;
  245.                 width: 230px;
  246.             }
  248.                 .container .main aside .el-menu {
  249.                     height: 100%;
  250.                 }
  252.                 .container .main aside .collapsed {
  253.                     width: 60px;
  254.                 }
  256.                     .container .main aside .collapsed .item {
  257.                         position: relative;
  258.                     }
  260.                     .container .main aside .collapsed .submenu {
  261.                         position: absolute;
  262.                         top: 0px;
  263.                         left: 60px;
  264.                         z-index: 99999;
  265.                         height: auto;
  266.                         display: none;
  267.                     }
  269.             .container .main .menu-collapsed {
  270.                 flex: 0 0 60px;
  271.                 width: 60px;
  272.             }
  274.             .container .main .menu-expanded {
  275.                 flex: 0 0 230px;
  276.                 width: 230px;
  277.             }
  279.             .container .main .content-container {
  280.                 flex: 1;
  281.                 overflow-y: scroll;
  282.                 padding: 20px;
  283.             }
  285.                 .container .main .content-container .breadcrumb-container .title {
  286.                     width: 200px;
  287.                     float: left;
  288.                     color: #475669;
  289.                 }
  291.                 .container .main .content-container .breadcrumb-container .breadcrumb-inner {
  292.                     float: left;
  293.                     padding-bottom: 10px;
  294.                 }
  296.                 .container .main .content-container .content-wrapper {
  297.                     background-color: #fff;
  298.                     box-sizing: border-box;
  299.                 }
  300. </style>

此时编译运行可以看到下面的页面，由于还没有开发子页面，所以只显示主页和菜单： 

添加模拟的后端API

这里模拟用户管理的功能。为.net开发，具体的开发流程不在赘述。 
UserInfo.cs

 
  1. public class UserInfo
  2. {
  3.     public string uuid { get; set; }
  4.     public string login_name { get; set; }
  5.     public string real_name { get; set; }
  6.     public string email { get; set; }
  7.     public string birthday { get; set; }
  8.     public int age { get; set; }
  9. }

UserInfoRepository.cs

 
  1. public class UserInfoRepository
  2. {
  3.     static List<UserInfo> db_users = new List<UserInfo>() {
  5.     };
  7.     public static IList<UserInfo> LoadAll() {
  8.         return db_users;
  9.     }
  10.     public static string Insert(UserInfo u)
  11.     {
  12.         u.uuid = Guid.NewGuid().ToString();
  13.         db_users.Add(u);
  14.         return u.uuid;
  15.     }
  16.     public static string Update(UserInfo u)
  17.     {
  18.         db_users.Remove(db_users.Where(m => m.uuid.Equals(u.uuid)).FirstOrDefault());
  19.         db_users.Add(u);
  20.         return u.uuid;
  21.     }
  22.     public static UserInfo Get(string uuid) {
  23.         return db_users.Where(m=>m.uuid.Equals(uuid)).FirstOrDefault();
  24.     }
  25.     public static void Delete(string uuid)
  26.     {
  27.         var u = db_users.Where(m => m.uuid.Equals(uuid)).FirstOrDefault();
  28.         db_users.Remove(u);
  29.     }
  31. }

UserController.cs

 
  1. [Route("api/[controller]")]
  2. public class UsersController : Controller
  3. {
  4.     [HttpGet]
  5.     public string Get()
  6.     {
  7.         return JsonConvert.SerializeObject(UserInfoRepository.LoadAll());
  8.     }
  10.     [HttpGet("{uuid}")]
  11.     public string Get(string uuid)
  12.     {
  13.         return JsonConvert.SerializeObject(UserInfoRepository.Get(uuid));
  14.     }
  16.     [HttpGet("p/")]
  17.     public string Get(string name, int page = 1, int pagesize = 20)
  18.     {
  19.         long count = 0;
  20.         var list = UserInfoRepository.LoadAll();
  21.         count = list.Count;
  22.         var obj = new
  23.         {
  24.             total = count,
  25.             list = list.Where(m => m.real_name.Equals(name)).Skip((page - 1) * pagesize).Take(pagesize)
  26.         };
  27.         return JsonConvert.SerializeObject(obj);
  28.     }
  30.     [HttpPost]
  31.     public void Post([FromBody]UserInfo user)
  32.     {
  33.         UserInfoRepository.Insert(user);
  34.     }
  36.     [HttpPut]
  37.     public void Put([FromBody]UserInfo user)
  38.     {
  39.         UserInfoRepository.Update(user);
  40.     }
  42.     [HttpDelete("{uuid}")]
  43.     public void Delete(string uuid)
  44.     {
  45.         UserInfoRepository.Delete(uuid);
  46.     }
  47. }

添加列表页面

添加内容包括，users.vue页面、路由以及将登录后的默认页面修改为users 
users.vue

 
  1. <template>
  2.     <section>
  3.         <!--工具条-->
  4.         <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5.             <el-form :inline="true" :model="filters">
  6.                 <el-form-item>
  7.                     <el-input v-model="filters.name" placeholder="姓名"></el-input>
  8.                 </el-form-item>
  9.                 <el-form-item>
  10.                     <el-button type="primary" v-on:click="search">查询</el-button>
  11.                 </el-form-item>
  12.                 <el-form-item>
  13.                     <el-button type="success" v-on:click="add">添加</el-button>
  14.                 </el-form-item>
  15.             </el-form>
  16.         </el-col>
  17.         <!--列表-->
  18.         <el-table :data="infos" highlight-current-row v-loading="listLoading" style="width: 100%;">
  19.             <el-table-column type="selection" width="55">
  20.             </el-table-column>
  21.             <el-table-column type="index" width="60">
  22.             </el-table-column>
  23.             <el-table-column prop="login_name" label="登录名" sortable>
  24.             </el-table-column>
  25.             <el-table-column prop="real_name" label="真实姓名" sortable>
  26.             </el-table-column>
  27.             <el-table-column prop="email" label="邮箱" sortable>
  28.             </el-table-column>
  29.             <el-table-column prop="birthday" label="生日" sortable>
  30.             </el-table-column>
  31.             <el-table-column prop="age" label="年龄" sortable>
  32.             </el-table-column>
  33.             <el-table-column label="操作" width="150">
  34.                 <template scope="scope">
  35.                     <el-button type="warning" size="small" @click="edit(scope.$index, scope.row)">编辑</el-button>
  36.                     <el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
  37.                 </template>
  38.             </el-table-column>
  39.         </el-table>
  41.         <el-col :span="24" class="toolbar">
  42.             <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:left;"></el-pagination>
  43.         </el-col>
  44.     </section>
  45. </template>
  46. <script>
  47.     import ElCol from "element-ui/packages/col/src/col";
  48.     export default {
  49.         components: {ElCol}, data(){
  50.             return {
  51.                 filters:{
  52.                     name:'',
  53.                 },
  54.                 infos:[],
  55.                 listLoading: false,
  56.                 page:1,
  57.                 total:0
  58.             };
  59.         },
  60.         methods:{
  61.                 search:function(){
  62.                     var _self =this;
  63.                     _self.listLoading=true;
  64.                     this.$http.get('/api/users/s',{
  65.                         params:{
  66.                             name:_self.filters.name,
  67.                             page:_self.page,
  68.                             pagesize:10
  69.                         }
  70.                     }).then((response)=>{
  71.                         _self.infos=response.data.list;
  72.                         _self.total=response.data.total;
  73.                         _self.listLoading=false;
  74.                     },(response)=>{
  76.                     }).catch((response)=>{});
  78.                 },
  79.                 add:function(){
  80.                     this.$router.push('/useradd')
  81.                 },
  82.                 edit:function(index,row){
  83.                     this.$router.push(
  84.                         { path: '/useradd', query: { uuid: row.uuid }}
  85.                     )
  86.                 },
  87.                 del:function(index,row){
  88.                     var _self =this;
  89.                     this.$confirm('确定删除吗?', '提示', {
  90.                         confirmButtonText: '确定',
  91.                         cancelButtonText: '取消',
  92.                         type: 'warning'
  93.                     }).then(() => {
  94.                         _self.$http.delete('/api/users/'+row.Uuid).then((res)=>{
  95.                             _self.search();
  96.                             _self.$message({
  97.                                 type: 'success',
  98.                                 message: '删除成功!'
  99.                             });
  100.                         },(res)=>{
  101.                             _self.$message({
  102.                                 type: 'srror',
  103.                                 message: '删除失败!'
  104.                             });
  105.                         }).catch();
  109.                     });
  112.                 },
  113.                 handleCurrentChange:function(p){
  114.                     this.page = p;
  115.                     this.search();
  116.                 }
  117.         },
  118.         mounted() {
  119.             this.search();
  120.         }
  121.     }
  122. </script>

添加路由，在系统管理的children下添加users

 
  1. {
  2.     path: '/',
  3.     component: Home,
  4.     name: '系统管理',
  5.     iconCls: 'el-icon-setting',//图标样式class
  6.     children: [
  7.         {path: '/users', component: Users, name: '用户管理' }
  8.     ]
  9. }

同样的方式增加用户添加和编辑页面，完成用户管理小模块。

总结

我们完成了在.net core下基于vue开发单页应用，这种方法实际上是利用webpack的打包功能，编译时将应用打包好，.net应用的cshtml页面再引用已打包的js文件。方案缺陷之一为：每次修改页面都需要重新build，不能同使用Node开发时实时预览页面，在实际的项目中可能并不会使用这种方式，仅供折腾。下面附上源码地址： 
https://github.com/wenjq0911/simple.git

源博客地址使用的leanote，地址在此  http://blog.leanote.com/post/wenjq0911@gmail.com

基于.Net Core和Vue.js的快速业务模块化前后端分离开发框架源码
09-27
该源码是一个基于.Net Core和Vue.js的快速业务模块化前后端分离开发框架，包含923个文件，涵盖了685个C#代码文件、66个项目文件、54个Vue组件文件、49个JavaScript文件、27个JSON配置文件、18个属性文件、7个PNG图片文件、3个JPG图片文件、3个PowerShell脚本文件和2个PDF文档。NetModular框架专为高效构建模块化业务系统设计，适用于需要快速开发前后端分离应用的场景。
Vue.NetCore-master_volvue_vue.netcore_vue.netcore_vol_volnetcore
10-03
vue 前台， .net core后端，测试开发
.NET 7 + Vue 权限管理系统 小白快速上手
DotNet技术匠
08-14 1254
DncZeus 是一个基于 .NET 7 和 Vue.js 的前后端分离的通用后台管理系统框架。后端使用 .NET 7 和 Entity Framework Core 构建，前端则采用了流行的 iView UI 框架配合 Vue.js。
终极指南：Laguna XS.2本地部署全攻略——从Ollama到vLLM的5种高效方案
最新发布
gitblog_00333的博客
05-29 356
Laguna XS.2是一款专为本地机器设计的330亿参数混合专家模型（Mixture-of-Experts），每次推理仅激活30亿参数，非常适合代理式编码和长文本处理任务。本文将详细介绍5种高效本地部署方案，帮助你快速在个人设备上体验这款强大的AI模型。 ## 🚀 为什么选择Laguna XS.2？ Laguna XS.2采用滑动窗口注意力（Sliding Window Attention
vue3 .netcore-mvc应用
码农的专栏
07-20 1570
在这里我要解释一下，我为什么要这样做呢？主要是为了.cshtml文件也支持elementplus智能提示。一、使用HBuilderX新建vue3项目VueNetCombine。三、编辑Index.cshtml文件，我们点击右下角的语言，选择vue。二、在src目录中新建.netcoremvc项目VueNet。......
ASP.NET MVC+Vue.js实现联系人管理
diaobiao8107的博客
06-12 1361
接触了一天vue.js，简单浏览了一本关于vue的电子书，就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序。 先看一下这个联系人管理的小程序的界面，也就是我们大概要实现什么样的功能。 上面截图可以看出，这是一个很简单的表格管理功能。我们先分析一下，上述有哪些功能需要实现： 1、默认先加载出所有的联系人信息，有信息的行后面的操作那一栏，显示“修改”、“...
一个基于.Net+Vue开发的开源权限工作流系统
成长的足迹
10-29 2347
今天给大家推荐一个开源权限工作流系统，一个快速开发框架。
.NET 程序员如何学习Vue
dotNET跨平台
09-01 1319
之所以取这个标题，是因为本文来自内部培训的整理，培训的对象是公司的 .NET 程序员，.NET 程序员学习 Vue 是为了在项目中做二次开发时能够更好地跟产品对接。Vue...
ASP.NET Core Vue CLI 中间件使用教程
gitblog_00124的博客
10-10 1009
ASP.NET Core Vue CLI 中间件使用教程 1. 项目介绍 aspnetcore-vueclimiddleware 是一个开源项目，旨在为 ASP.NET Core 提供 Vue CLI 和 Quasar CLI 的支持。该项目允许开发者在 ASP.NET Core 应用程序中轻松集成 Vue CLI 或 Quasar CLI 生成的单页应用程序（SPA）。通过使用这个中间件，开发者...
Vue+net Core Web Api项目开发的学习心得
xgg2002的博客
10-17 1836
本次开发项目使用Vue完成前端页面，.net Core Web Api三层架构完成后端接口。
.net core + vue开发单页应用（一）
热门推荐
我的学习笔记
05-26 2万+
背景 .net core 与 vue 的简介不再赘述，目前使用vue开发基本分为几种情况： 使用webpack进行纯前端开发传统的web应用中使用vue，主要使用vue的对象模型绑定 对于使用传统的web+vue进行单页面应用开的几乎没有找到例子，因此决定自己动手尝试，让自己在实际的应用中学习vue，并将自己的学习过程记录下来。个人认为，这种开发方式更适用于此类的猿： 不会
探索SO-SignalR：VueJS与ASP.NET Core的完美融合
gitblog_00035的博客
08-30 1009
探索SO-SignalR：VueJS与ASP.NET Core的完美融合 在当今高速发展的Web开发领域，实时通信已成为提升用户体验的关键。今天，我们要介绍一个令人兴奋的开源项目——SO-SignalR，这是一次VueJS前端与ASP.NET Core后端结合的精彩尝试，旨在构建类似Stack Overflow的问答平台，并通过SignalR实现即时通讯功能。 项目介绍 SO-SignalR是基...
net core Vue  ElementUI（1） 前端主框架，左侧导航
awei0130的博客
05-17 1万+
.net core vue elementui MVC模式（传统web开发模式）目录 1、Libman 客户端管理库先下载安装ElementUi vs2017在项目右键—>添加—>添加客户端库 下载安装Vue 安装后Libman 配置文件 2、项目views文件夹除了Home文件夹Index.cshtml，其他全部删掉，从elementUI官网选择...
Vue.js结合ASP.NET Core构建用户登录与权限验证系统
包子的博客
06-12 2134
在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。
使用.NET Core和Vue搭建WebSocket聊天室
素履独行 | 元培的个人博客
08-27 1万+
  Hi，大家好，我是Payne，欢迎大家关注我的博客，我的博客地址是：https://qinyuanpei.github.io。今天这篇博客，我们来说说WebSocket。各位可能会疑惑，为什么我会突然间对WebSocket感兴趣，这是因为最近接触到了部分“实时”的业务场景，譬如：用户希望在远程视频通话过程中，实时地监控接入方的通话状态，实时地将接入方的响应时间、通话时长以及接通率等信息推送到后...
ASP.NET Core 和 VueJS（二）
龙哥盟
10-11 496
简而言之，API 版本就是您希望处理 API 随时间变化的方式。我们大多数后端开发人员专注于构建和部署 web 服务，因为这是我们的工作。它们通常是我们必须在一个典型项目中实现的书面任务。但有时我们会忘记，我们必须在未来 5 到 10 年里支持 web 服务，或者取代我们的开发人员会这样做。一旦部署了 web 服务，并且开发人员已经根据 API 进行了编码，就会有用户依赖于我们构建的 API。例如，具有特定版本的移动应用将期望 web 服务的端点永远不变。
使用ASP.NET Core MVC的Vue.Js
寒冰屋的专栏
06-13 1万+
目录 内容主题 VUE.JS简介 DOT NET Core 下载和安装Visual Studio 2017 ASP.NET Core Spa模板 基础知识和设置 Node.js 节点包管理（NPM） Bower, Yarn Web-pack,Grunt或Gulp Gulp/Grunt Web-Pack与Gulp / Grunt Type-Script Babel 安装...
Net和Vue的结合
net511的专栏
08-24 1361
要将Net与Vue集成在一起，最简单的方法是使用Net Web API来作为后端，然后使用Vue作为前端。Net是一种用于构建Web应用程序和服务的技术框架，而Vue则是一种用于构建用户界面的渐进式JavaScript框架。是一个非常复杂的构成，全栈工程师的价值是非常大的，创业公司不可能像大公司一样，各方面的人才都有。为此，鄙人不才，把多年来的工作成果，整理成一个通用的后台框架。Net与Vue是两个广受欢迎的技术框架，它们各自解决了不同的问题。所以需要一个多面手，各种活都能一肩挑，独挡多面的万金油。
.net core + vue 搭建前后端分离的框架
战族狼魂的博客
08-01 3021
确保你的开发环境中已安装了最新版本的.NET Core SDK。你可以从获取最新版本。： 在命令行或者通过Visual Studio等集成开发环境，创建一个新的.NET Core Web API项目。： 如果需要特定的功能（例如身份验证、数据库访问等），可以添加相应的NuGet包。： 在生成的.NET Core项目中编写你的后端API，定义控制器和服务，连接数据库等。
.NET与Vue快速搭建项目：低代码便捷开发教程
qq_45640056的博客
12-27 1778
在这个例子中，我们将.NET项目作为后端API，Vue.js作为前端界面。通过结合.NET和Vue.js，并使用低代码方法，我们可以迅速搭建一个完整的项目。这种技术栈不仅提高了开发效率，也为团队协作提供了更好的支持。希望这个教程能帮助你快速入门，并激发你在低代码开发方面的探索。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值