.NET MVC + vue 前后端不分离--基本配置

啊我是第一次接触前后不分离的vue项目,记录一下遇到的困难。

一、vue要怎么放进 .NET 项目里面?

1.安装webpack(如果文件后缀用.vue的话)
npm install webpack -g(全局的安装)
webpack -v #查看是否安装成功

2.解决方案右键,点击管理解决方案的Nuget程序包,然后搜索vue
解决方案右键,点击管理解决方案的Nuget程序包
引用方式:<script src="~/Scripts/vue.min.js"></script>

二、在 .net Mvc中组件及函数的写法

1.最外层只能有一个div,必须有一个唯一的id(不知道class可不可以)同vue的写法;
2.

var vm = new Vue({
       el: '#onlineorder',
       下面就和vue一样,balabala~});
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【资源说明】 1、基于springboot+vue前后端分离的小型电商系统源码+项目说明.zip 2、该资源包括项目的全部源码,下载可以直接使用! 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于springboot+vue前后端分离的小型电商系统源码+项目说明.zip # lite_shop微商铺 基于springboot + vue前后端分离的完整小型电商系统 ## 项目介绍 lite_shop是一套小型电商系统,该项目为B2C模式电商系统,包括前台商城系统和后台管理系统,基于springboot + vue打造。后台管理系统包含会员管理、商品管理、订单管理、运营管理、系统管理、统计报表、后台用户管理、权限管理、系统设置等模块。前台管理系统包含首页、商品推荐、商品搜索、专题推荐、用户下单、支付等一套完整电商流程。 ![11644241501_.pic.jpg](https://s2.loli.net/2022/02/07/KQeqcARCNtpTB65.jpg) ![21644241502_.pic.jpg](https://s2.loli.net/2022/02/07/8lxZvDRi2HJW4PC.jpg) ![后台截图1.png](https://i.loli.net/2020/09/20/YPAkIb32zMHXvFr.png) ![后台截图2.png](https://i.loli.net/2020/09/20/IRp7HblznxMUvoB.png) 前台商城系统 敬请期待...... ## 项目架构 ![lite_shop架构.jpg](https://i.loli.net/2020/09/20/73PWtHj2cUqh1XL.png) ## 技术栈 后端技术 | 技术 | 说明 | 版本 | | :--------------------: | :----------------- | :----: | | SpringBoot | web容器+MVC框架 | 2.3.0 | | SpringSecurity | 身份认证与授权 | 5.2.4 | | Mybati-Plus | orm框架 | 3.2.0 | | mybatis-plus-generator | 持久层代码生成器 | 3.2.0 | | Redis | 分布式缓存 | 4.0.10 | | MySQL | 数据库 | 5.7.28 | | jjwt | JWT支持 | 0.9.0 | | 七牛云 | 对象存储 | 7.2.0 | | hutool | 工具包 | 5.3.8 | | elasticsearch | 分布式全文搜索引擎 | 7.6.2 | | RabbitMQ | 消息队列 | 3.9.0 | 前端技术 | 技术 | 说明 | 版本 | | :----------------: | :---------------: | :----: | | Vue | 前端框架 | 2.6.10 | | Vue-router | 前端路由框架 | 3.1.2 | | Vuex | 全局状态管理框架 | 3.1.1 | | Axios | 前端HTTP框架 | 0.19.0 | | Ant Design of Vue | 后台管理UI框架 | 1.6.2 | | Vant | 前台商城VUE组件库 | 2.0 | ## 功能介绍 #### 管理后台: ###### 会员管理: - 会员列表 - 收货地址 - 会员收藏 - 会员足迹 - 意见反馈 ###### 商品管理: -
springboot和vue是现代web开发中最常用的后端和前端框架之一。前后端分离是一种架构模式,将前端和后端的开发分离,通过接口来进行数据传输和交互。 在线教育系统作为一个实战项目,可以基于springboot和vue来开发。首先,我们可以使用springboot来构建后端的RESTful API,处理用户请求、数据持久化等功能。通过使用springboot的优秀特性,可以快速搭建项目的基础框架,并集成常用的开发组件,如Spring MVC、Spring Data JPA等。 而在前端方面,可以使用vue来开发用户界面。vue是一个轻量级的JavaScript框架,可以帮助我们构建交互式的用户界面。通过vue的组件化开发和数据绑定机制,可以提高前端开发效率,并实现良好的用户体验。 在实现前后端分离的时候,可以通过定义RESTful API接口来进行数据的传输和交互。后端使用springboot提供的@RestController注解来处理HTTP请求,并返回JSON格式的数据。前端通过vue的axios库来进行异步请求和交互,获取后端提供的数据并展示在页面上。 在线教育系统常见的功能包括用户登录、课程管理、视频播放等。用户登录可以通过JWT来实现身份认证和授权。课程管理可以包括课程的发布、编辑、删除等功能,通过操作数据库来实现数据的增删改查。视频播放可以通过集成第三方视频播放器,如video.js来实现。 总结来说,使用springboot和vue进行前后端分离的在线教育系统的实战项目,可以通过定义RESTful API接口、使用axios进行数据交互和展示、集成第三方插件实现各种功能。通过这种方式,可以提高项目的开发效率、降低耦合性,并实现良好的用户体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值