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

最新推荐文章于 2024-07-25 11:05:20 发布
最新推荐文章于 2024-07-25 11:05:20 发布
阅读量7.7k 收藏 9
点赞数 4
分类专栏： .net core 文章标签： .net core vue.js 单页应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011822144/article/details/72764155
版权

上一篇中已将完成了基础结构的搭建，这一篇将开始正式开发。页面直接使用了一位小伙伴的源码，可以在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

wenjq0911
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Asp.net+Vue+EmelentUI的实现(一)框架搭建
学而时习之
05-06 3万+
vue对于web端的开发优势是很明显的，特别是单页应用，响应、数据等都很明显，而且开发效率也高，又有很多资料可查、有社区的支持。但vue对于开发较大的项目时，则会显得笨重，因为编译成了单页应用，非常臃肿，首次加载变的很慢。而且在使用VS来开发时，虽然VS可以创建vue的项目，但是基于node.js来编译的，不好操作，而且经常出现卡死现象，于是就考虑有没有其他的方式来应用vue。 vue本质上是一...
管理系统系列--Asp.Net Core + Dapper + Vue + IView 前后端分离通用权限管理系统、.zip
02-25
《Asp.Net Core + Dapper + Vue + IView 前后端分离通用权限管理系统》 在当前的信息化时代，企业对于高效、安全且灵活的管理系统的诉求日益增强。本项目是一个采用前沿技术构建的通用权限管理系统，它利用Asp.Net ...
通过.netCore运行vue项目的解决方案
weixin_34364071的博客
02-17 746
背景 最近有个特殊的需求需要通过.netCore来启动vue项目，而不是通过npm run dev 来启动。 这里不写dotnetCore的壳子是怎么写的，我们只需要可以利用.netCore把项目启动起来就可以。 用起来就跟用vue-cli一样。（废话，我就是用vue-cli 2创建的项目） 用vue-cli3的朋友们需要稍加修改。 事前准备 .netCore 2.1 vue-cli 2.9.6...
.net core + vue开发单页应用（一）
热门推荐
我的学习笔记
05-26 2万+
背景 .net core 与 vue 的简介不再赘述，目前使用vue开发基本分为几种情况： 使用webpack进行纯前端开发传统的web应用中使用vue，主要使用vue的对象模型绑定 对于使用传统的web+vue进行单页面应用开的几乎没有找到例子，因此决定自己动手尝试，让自己在实际的应用中学习vue，并将自己的学习过程记录下来。个人认为，这种开发方式更适用于此类的猿： 不会
Vue.js结合ASP.NET Core构建用户登录与权限验证系统
包子的博客
06-12 857
在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。
asp.net core+vue+signalr示例
begeneral的专栏
04-22 2183
asp.net core版本：5.0 Vue版本：2.5.2 本文是入门教程，主要讲解如何利用SignalR从客户端调用服务器的函数，以及从服务器调用客户端的函数。 首先看一下服务端代码： 添加SignalR服务： public void ConfigureServices(IServiceCollection services) { services.AddControllers(); services.AddSignalR();
.Net Core+Vue.js+ElementUI 实现前后端分离
weixin_30571465的博客
05-31 831
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用：Vue.js、Element-UI、axios 后端采用：.Net Core Mvc 本项目是基于Vue.js的多页应用，由于是后端开发对不擅长Node.js开发并且希望使用传统的方式进行权限管控及生产发布，所以.Net Core Mvc 承担了所有的页面路由管控及页面级权限控制，Vue.j...
asp.net core webapi + vue部署
novaliang的专栏
10-26 1697
asp.net core webapi + vue 部署
开源干货！.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
sinolover的专栏
01-07 1755
DncZeus 前言 关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写； "Zeus"--中文译为宙斯，是古希腊神话中的众神之王，奥林匹斯十二主神之首，统治宇宙万物的至高无上的主神（在古希腊神话中主神专指宙斯），人们常用“众神和人类的父亲”、“神王”来称呼他，是希腊神话诸神中最伟大的神。 DncZeus的愿景就是做一个.NET C...
一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus
技术杂谈，聚焦优质文章、开源项目、实用工具和学习、工作、面试心得分享。博客园推荐博客、阿里云专家博主，擅长于C#、.NET、.NET Core、Golang、TypeScript、Vue、Uni App、Angular开发。
01-29 3128
今天给大家推荐一个基于.NET 7 + Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架：DncZeus。DncZeus是一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 + Entity Framework Core 构建，UI 则是目前流行的基于 Vue.js 的 iView。项目实现了前后端的动态权限管理和控制以及基于 JWT 的用户令牌认证机制，让前后端的交互更流畅。
DncZeus - 基于.NET 7 + Vue.js 的前后端分离的管理系统框架
zls365365的博客
05-08 92
欢迎来到 Dotnet 工具箱！在这里，你可以发现各种令人惊喜的开源项目！DncZeusDncZeus 是一个基于.NET 7 + Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架。后端使用.NET 7 + EF Core构建，UI则是目前流行的基于Vue.js的iView(iview-admin)。项目实现了前后端的动态权限管理和控制以及基...
Vue.js与 ASP.NET Core 服务端渲染功能整合
11-29
这个包使得在ASP.NET Core应用中使用单页应用（SPA）框架，如Vue.js，变得更加容易。 项目结构如下： 1. `VueApp`文件夹包含了Vue.js应用的所有组成部分，包括组件、Vuex状态管理库、以及几个特定于服务端渲染的...
基于ASP.NET Core 3.1+Vue.js 的前后端分离的通用后台管理系统框架源码+sln+说明.zip
06-01
EasyCode并不是一个完整的业务系统，但她提供完成业务系统的绝大多数开发场景，让每一位.NET 开发者都能基于EasyCode快速开发出交互、体验以及功能具佳的.NET Core 单页应用程序(SPA)。 【备注】 该项目代码主要针对...
使用node+vue.js实现SPA应用
10-22
在当前的Web开发领域，单页应用程序（Single-Page Application，简称SPA）已经成为构建交互式Web应用的首选方案，尤其对于内容丰富的应用和带有实时聊天功能的场景，SPA的优势更为明显。SPA可以在用户交互过程中无需...
ASP.NET-Core-2-and-Vue.js:Packt发布的ASP.NET Core 2和Vue.js
05-28
本书将引导您使用ASP.NET Core Web API和Vue.js单页应用程序（SPA）前端从头到尾开发电子商务应用程序。 本书涵盖以下激动人心的功能： 设置用于构建客户端和服务器端代码的现代开发环境 使用Vue CLI搭建前端应用...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 884
本文介绍了电子签名、图片合成、及预览功能
unplugin-vue-components 的作用是什么
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 376
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
mpu6050陀螺仪使用方法开发教程文档.docx
最新发布
07-30
mpu6050陀螺仪使用方法
一个基于.net core+vue+element ui开发的oa系统
08-02
OA系统是一种办公自动化的管理系统，具备组织、协调和监控员工日常工作的能力，并能提供一系列的办公功能和工作流程支持。基于.NET Core、Vue和Element UI开发的OA系统具有以下优点和特点。 首先，使用.NET Core作为后端框架，能够实现跨平台的部署和运行，不仅在Windows平台下可以运行，还可以在Linux和MacOS等其他操作系统上运行，提高了系统的灵活性和选择性。 其次，采用Vue作为前端框架，可以实现前后端分离开发，提高开发效率和代码的可维护性。Vue具有简单易学、灵活性强的特点，能够与Koa、Axios等框架无缝集成，实现前端页面的高效渲染和数据交互。 再次，使用Element UI作为前端组件库，可以快速搭建美观、易用的用户界面，提供丰富的UI组件和交互效果，大大减少了前端开发的工作量。Element UI还提供了自定义主题的功能，满足不同用户对界面风格的需求。 此外，基于.NET Core的OA系统还具备多种强大的功能和特性，如身份认证和授权、数据持久化、缓存管理、日志记录等。它还支持RESTful API架构，方便与其他系统进行对接和集成。 总之，基于.NET Core、Vue和Element UI开发的OA系统具备跨平台、高效、易用、美观等特点，能够满足现代办公环境中的自动化管理需求，并为企业提供高效的办公协作平台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值