后台网站基于:VueCli 3.0 + ElementUI + Asp.Net Core WebApi + MongoDB 实现
前端:VueCli 3.0
安装Node.JS,npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。下载Node.JS
安装 Vue Cli 3.0
npm install -g @vue/cli
创建vuecli项目:这里你可以先创建一个默认项目
vue ui
安装Axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios文档
npm install axios --save-dev
安装Element UI 框架 (基于vue 的前端框架)element UI框架
npm i element-ui -S
具体架子:
代码已上传到github:如有需要可以参看 vuecli
后端:asp.net core webapi接口:
安装asp.net core 2.1 SDK 官方下载地址
架构如下:
具体说一下 WebApi接口层;
跨域问题:
public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddCors(options => options.AddPolicy("CorsSample", p => p.WithOrigins("http://api.xinyo.xin").AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials())); //注册MVC框架 services.AddMvc().AddJsonOptions(options => { options.SerializerSettings.ContractResolver = new DefaultContractResolver(); options.SerializerSettings.DateFormatString = "yyyy-MM-dd HH:mm:ss"; }); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app) { //添加MVC中间件 app.UseMvc(); app.UseStaticFiles(); app.UseCors("CorsSample"); }
[Route("api/[controller]/[action]")] [EnableCors("CorsSample")] [ApiController] public class BaseController : Controller { }
public class ConsumeController : BaseController { public IActionResult GetSearchList(int PageIndex, int PageSize,string Search) { ConsumeSearchCondition condition = new ConsumeSearchCondition { PageIndex = PageIndex, PageSize = PageSize, Search=Search, }; var list = Hubert.Service.Finance.ConsumeService.Instance.SearchList(condition); return Ok(list); } public IActionResult Add(Consume model) { var result = Hubert.Service.Finance.ConsumeService.Instance.Add(model); return Ok(result); } public IActionResult Edit(Consume model) { var result = Hubert.Service.Finance.ConsumeService.Instance.Edit(model); return Ok(result); } public IActionResult Delete(Guid Id) { var result = Hubert.Service.Finance.ConsumeService.Instance.Delete(Id); return Ok(result); } }
部署
前端直接 打包、将打包生成的dist文件部署到IIS上即可:
npm run build
后端则需要在服务器上安装如下:
MongoDB安装与配置:
参观资料:MongoDB安装与配置
喜欢就支持一下,希望对大家有帮助。