搭建前后端分离网站

后台网站基于：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安装与配置

 

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