vue+elementui+netcore混合开发
1、VueController.cs
using Bogus;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace WebApplication1.Controllers
{
public class VueController : Controller
{
// GET: Vue
public ActionResult Index()
{
return View();
} public ActionResult Table()
{ return View();
} public ActionResult GetTable()
{
var userGenerator = new Faker<User>()
.RuleFor(x => x.Id, x => x.IndexFaker + )
.RuleFor(x => x.Gender, x => x.Person.Gender)
.RuleFor(x => x.FirstName, (x, u) => x.Name.FirstName(u.Gender))
.RuleFor(x => x.LastName, (x, u) => x.Name.LastName(u.Gender))
.RuleFor(x => x.Email, (x, u) => x.Internet.Email(u.FirstName, u.LastName))
.RuleFor(x => x.BirthDate, x => x.Person.DateOfBirth)
.RuleFor(x => x.Company, x => x.Person.Company.Name)
.RuleFor(x => x.Phone, x => x.Person.Phone)
.RuleFor(x => x.Website, x => x.Person.Website); return Json(userGenerator.GenerateForever().Take(),JsonRequestBehavior.AllowGet);
}
} public class User
{
public int Id { get; set; }
public Bogus.DataSets.Name.Gender Gender { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public DateTime BirthDate { get; set; }
public string Company { get; set; }
public string Phone { get; set; }
public string Website { get; set; }
}
}
2、_VueLayout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
@Styles.Render("~/Content/ElementUI/element-ui.css")
@Scripts.Render("~/Scripts/vue.js")
@Scripts.Render("~/Scripts/ElementUI/element-ui.js")
@Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
</head>
<body>
<div id="app">
@RenderBody()
</div>
@RenderSection("scripts", required: false)
</body>
</html>
3、Table.cshtml
@{
Layout = "~/Views/Shared/_VueLayout.cshtml";
}
<el-table :data="tableData"
style="width: 100%">
<el-table-column prop="Id"
label="编号"
width="">
</el-table-column>
<el-table-column prop="Gender"
label="性别"
width="">
</el-table-column>
<el-table-column prop="FirstName"
label="姓名"
width="">
<template slot-scope="scope">
{{scope.row.FirstName + " " + scope.row.LastName}}
</template>
</el-table-column>
<el-table-column prop="Email"
label="邮箱"
width="">
</el-table-column>
<el-table-column prop="BirthDate"
label="生日"
width="">
</el-table-column>
<el-table-column prop="Company"
label="公司">
</el-table-column>
<el-table-column prop="Phone"
label="电话">
</el-table-column>
<el-table-column prop="Website"
label="主页">
</el-table-column>
</el-table>
@section scripts
{
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vue = new Vue({
el: '#app',
methods: {
initData: function () {
var that = this;
jQuery.ajax({
type: 'Get',
url: "/vue/gettable",
datatype: "json",
success: function (data) {
for (var i = ; i < data.length; i++) {
that.tableData.push(data[i]);
}
console.log(vum.datas);
}
});
}
},
data() {
return {
tableData: []
}
},
created: function () {
this.initData();
}
});
</script>
}
4、效果
vue前后端分离参考：https://www.sohu.com/a/251434422_468635
vue+elementui+netcore混合开发的更多相关文章
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- vue与原生混合开发
前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓.iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚 ...
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
- spring boot + vue + element-ui全栈开发入门——前端编辑数据对话框
需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话 ...
- spring boot + vue + element-ui全栈开发入门——集成element-ui
一.IDE开发工具 常用的开发工具有webstorm和sublime. 我个人喜好用Atom+插件的形式 打开Atom,在file --> settings --> packages中收 ...
- spring boot + vue + element-ui全栈开发入门——主页面开发
目的 开发一个后台管理的前端,顶部是标题,左侧是菜单导航栏,中间是要显示的内容.而内容可以是各种图表,也可以是数据列表. 一.准备工作 1..修改App.vue文件 代码如下: <templat ...
- Vue/Element-ui 安装搭建开发环境（一）
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...
随机推荐
- mysql--事务详解
事务的四大特性: # 原子性(atomicity) 一个事务必须被视为一个不可分割的最小工作单元,整个事务中的所有操作要么全部提交成功,要么全部失败回滚,对于一个事务来说,不可能只执行其中的一部分操作 ...
- 利用Runtime对Ivar实例变量进行共用的归档和解档方式
一.介绍 在OC中每一个对象持有的变量都是实例变量,实例变量包括成员变量和属性变量,在runtime中用Ivar表示对象的实例变量.其实,runtime源码中可以看到,Ivar也是一个结构体(基本上在 ...
- 开发SSO单点登录需要注意的问题
一.单点登录系统开发需要注意的问题 1.单点登录系统需要支持jsonp请求? 单点登录系统主要是向其他系统提供用户身份验证服务,因此需要提供对外接口,而外部系统通过接口访问时,必然涉 ...
- 自动编写Python程序的神器,Python 之父都发声力挺！
就在不久前,kite——那个能够自己编写python代码的AI,Python 之父 Guido van Rossum 使用之后,也发出了「really love」感叹,向大家墙裂推荐了这一高效工具 ...
- 03-模板(过滤器，代码复用，表单，CSRF)
模块代码复用 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有相同的模板代码内容,但是内容中部分值不一样 多个模板中具有完全相同的 html 代码块内容 像遇到这种 ...
- File文件的创建，删除 createNewFile() delete()
package seday03; import java.io.File;import java.io.IOException; /*** 使用File新建一个test1.txt文件* @author ...
- 并发编程-epoll模型的探索与实践
前言 我们知道nginx的效率非常高,能处理上万级的并发,其之所以高效离不开epoll的支持, epoll是什么呢?,epoll是IO模型中的一种,属于多路复用IO模型; 到这里你应该想到了,sele ...
- JavaWeb之Fliter & Listener
Fliter & Listener Listener 监听器 作用 监听某一事件的发生.状态的改变. 监听器内部实现机制 接口回调 接口回调 A在执行循环,当循环到5的时候, 通知B. 事先先 ...
- Wireshark使用技巧：提取VOIP通话中的音频流
"Wireshark的RTP流分析功能实战." 在VOIP协议的分析过程中,常常会遇到一些标准协议承载的语音传输,如以SIP.H.323为控制协商协议,RTP为语音数据协议的VOI ...
- Costco
1 会员制,并不是Costco成功的关键原因 Costco最早开始推行会员制的时候,其实遭遇了巨大的失败. 人们当时是不接受,也不理解会员制度的,没有多少人来办会员,Costco差点就死掉了. 那Co ...