学习总结基于VUE+ASP.NET Core mvc+EFCore+Axios.js+ehcart.js开发一个web应用
Vue是一个用于构建用户界面（基于数据渲染出用户看到的页面）的渐进式（循序渐进）框架。分为（声明式渲染，基于js包、组建系统、客户端路由、大规模状态管理和构建工具）
Vue的使用方法分为：1.Vue核心包开发：局部模块改造；2.Vue核心包+Vue插件 工程化开发：整站开发
1.开始之前准备下述包
在program.cs中添加
builder.Services.AddRazorPages().AddRazorRuntimeCompilation();//作用是调试的时候只需刷新界面就可以了
2.后台准备连接数据库的程序（DBContext）
public class CLContext:DbContext { public DbSet<ConsumptionList> DB_CL { get; set; } public CLContext(DbContextOptions<CLContext> options) : base(options) { } }
注意：在programs.cs中要添加连接字符串
builder.Services.AddDbContextPool<CLContext>(p => { p.UseMySql(builder.Configuration.GetConnectionString("MySQLConnect"), new MySqlServerVersion(new Version("5.7"))); });
3.前端设计
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/js/axios.js"></script> <script src="~/js/echarts.js"></script> <script src="~/js/vue.js"></script> </head> <body> <div id="app"> <div> <form> <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称"/> <input v-model.trim="price" type="text" class="form-control" placeholder="消费价格" /> <button class="btn btn-primary">添加账单</button> </form> </div> <table class="table"> <thead> <tr> <th>编号</th> <th>消费名称</th> <th>消费价格</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list" : key="item.id"> <td>{{index+1}}</td> <td>{{item.name}}</td> <td :class="{red:item.price>200}">{{item.price.toFixed(2)}}</td> <td><a >删除</a></td> </tr> </tbody> <tfoot> <tr> <td colspan="4">消费总计:{{totalPrice}}</td> </tr> </tfoot> </table> <div id="main" style="width: 600px;height:400px;"></div> </div> <script> const app=new Vue({ el:'#app', data:{ list:[ ], name:'', price:'' }, computed:{ //计算属性 totalPrice() { return this.list.reduce((sum,item)=>sum+item.price,0) } }, methods: { async GetList() { await axios.get('Vue/GetConsumeList').then(response => { this.list = response.data; this.myChart.setOption({ series:[ { data: this.list.map(item => ({ value: item.price, name: item.name }) ] }) }).catch(error => { console.log(error) }) }, async Del(ID){ await axios.get('Vue/DeleteConsume', { params: { id:ID }.then(response => { }).catch(error => { console.log(error) }) }) }, async Add() { await axios.post('AddConsume', { name:this.name, price:this.price, creator:'xxx' }).then(response => { console.log(response.data) }).catch(error => { }) this.GetList() } }, created() { this.GetList() }, mounted() { // 基于准备好的dom，初始化echarts实例 this.myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: { text: '消费账单列表', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '消费账单', type: 'pie', radius: '50%', data: [ ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 this.myChart.setOption(option); } }) </script> </body> </html>
4.控制器接口
using Microsoft.AspNetCore.Mvc; using Vue1.Models; using Vue1.ViewModel; namespace Vue1.Controllers { public class VueController : Controller { private readonly CLContext _context; public VueController(CLContext context) { _context = context; } public IActionResult Index() { return View(); } public IActionResult GetConsumeList() { var result=_context.DB_CL.ToList(); return Ok(result); } /// <summary> /// 添加数据 /// post接收json请求必须加FromBody /// </summary> /// <param name="model"></param> public void AddConsume([FromBody]ConsumptionList model) { if(!string.IsNullOrEmpty(model.Name)) { _context.DB_CL.Add(new ConsumptionList { Name = model.Name,Price=model.Price, Creator=model.Creator}); _context.SaveChanges(); } } /// <summary> /// 删除 /// </summary> /// <param name="id"></param> public void DeleteConsume(int id) { if (id != 0) { var entity=_context.DB_CL.FirstOrDefault(e=>e.ID==id); if(entity!=null) { _context.DB_CL.Remove(entity); _context.SaveChanges(); } } } } }
