搭建前后端分離網站

后台網站基於：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

 

　　后端則需要在服務器上安裝如下：

1. 安裝Asp.Net Core SDK  下載地址
2. 安裝AspNetCoreModule模塊  下載地址
3. 發布Asp.Net Core WebApi；應用池改為無托管代碼；

 

　　MongoDB安裝與配置：

　　參觀資料：MongoDB安裝與配置

 

　　喜歡就支持一下，希望對大家有幫助。