搭建前后端分离网站

后台网站基于：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=398940public 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

 

　　后端则需要在服务器上安装如下：

1. 安装Asp.Net Core SDK  下载地址
2. 安装AspNetCoreModule模块  下载地址
3. 发布Asp.Net Core WebApi；应用池改为无托管代码；

 

　　MongoDB安装与配置：

　　参观资料：MongoDB安装与配置

 

　　喜欢就支持一下，希望对大家有帮助。