camstar portal使用webapi,vue elementui前后端分离开发

 更改在网站的App_Code下的AppStart.cs文件

 

添加引用

using System.Collections.Generic;

using System.Net.Http;

using System.Net.Http.Formatting;

using System.Net.Http.Headers;

using System.Text;

using System.Web;

using System.Web.Http;

using System.Web.Http.WebHost;

using System.Web.Routing;

using System.Web.SessionState;

using Newtonsoft.Json.Serialization;

添加内容

public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            config.MapHttpAttributeRoutes();

            config.Filters.Add(new MesActionFilter());

            RouteTable.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "api/{controller}/{action}/{id}",

                defaults: new { id = RouteParameter.Optional }

            ).RouteHandler = new SessionControllerRouteHandler();

            config.Services.Replace(typeof(IContentNegotiator), new JsonContentNegotiator(new JsonMediaTypeFormatter()));

        }

    }

    internal class SessionControllerRouteHandler :  HttpControllerRouteHandler

    {

        protected override IHttpHandler GetHttpHandler(RequestContext requestContext)

        {

            return new SessionRouteHandler(requestContext.RouteData);

        }

    }

    public class SessionRouteHandler : HttpControllerHandler, IRequiresSessionState

    {

        public SessionRouteHandler(RouteData routeData) : base(routeData)

        {

        }

    }

    /// <summary>

    ///  在全局设置中，使用自定义的只返回Json Result。只让api接口中替换xml，返回json。这种方法的性能是最高的！

    /// </summary>

    public class JsonContentNegotiator : IContentNegotiator

    {

        private readonly JsonMediaTypeFormatter _jsonFormatter;

        public JsonContentNegotiator(JsonMediaTypeFormatter formatter)

        {

            _jsonFormatter = formatter;

        }

        public ContentNegotiationResult Negotiate(Type type, HttpRequestMessage request, IEnumerable<MediaTypeFormatter> formatters)

        {

            // 对 JSON 数据使用混合大小写。驼峰式,但是是javascript 首字母小写形式.小驼峰命名法。

            //config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new  CamelCasePropertyNamesContractResolver();

            // 对 JSON 数据使用混合大小写。跟属性名同样的大小.输出

            _jsonFormatter.SerializerSettings.ContractResolver = new UnderlineSplitContractResolver(); //小写命名法。

            _jsonFormatter.SerializerSettings.DateFormatString = "yyyy-MM-dd HH:mm:ss";//解决json时间带T的问题

            _jsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;//解决json格式化缩进问题

            _jsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;//解决json序列化时的循环引用问题

            var result = new ContentNegotiationResult(_jsonFormatter, new MediaTypeHeaderValue("application/json"));

            return result;

        }

    }

    /// <summary>

    /// Json.NET 利用ContractResolver解决命名不一致问题

    /// 解决问题：通过无论是序列化还是反序列化都达到了效果，即：ProjectName -> project_name 和 project_name -> ProjectName

    /// </summary>

    public class UnderlineSplitContractResolver : DefaultContractResolver

    {

        protected override string ResolvePropertyName(string propertyName)

        {

            //return CamelCaseToUnderlineSplit(propertyName);//下划线分割命名法

            return propertyName.ToLower();//小写命名法

        }

        private string CamelCaseToUnderlineSplit(string name)

        {

            StringBuilder builder = new StringBuilder();

            for (int i = 0; i < name.Length; i++)

            {

                var ch = name[i];

                if (char.IsUpper(ch) && i > 0)

                {

                    var prev = name[i - 1];

                    if (prev != '_')

                    {

                        if (char.IsUpper(prev))

                        {

                            if (i < name.Length - 1)

                            {

                                var next = name[i + 1];

                                if (char.IsLower(next))

                                {

                                    builder.Append('_');

                                }

                            }

                        }

                        else

                        {

                            builder.Append('_');

                        }

                    }

                }

                builder.Append(char.ToLower(ch));

            }

            return builder.ToString();

        }

 

    }

修改Global.asaxc的Application_Start方法，添加代码

GlobalConfiguration.Configure(WebApiConfig.Register);

 

添加文件夹

 

 在网站跟目录下添加html文件夹来存放页面

 

添加vue和elementui脚本

Scripts/polyfill.min.js  --IE兼容性脚本

Scripts/vue.min.js      --vue

Scripts/element-ui.js  --elementui

Scripts/axios.min.js   --ajax 调用api脚本

Themes/element-ui.css   --添加elementui样式

Themes/fonts/element-icons.ttf  --字体

Themes/fonts/element-icons.woff  --字体

添加页面（页面以aspx为后缀，因为菜单只能识别这个后缀名）

vue模板

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="UTF-8">

    <title></title>

    <link href="../Themes/element-ui.css" rel="stylesheet" />

    <style>

        html,

        body,

        #app {

            height: 100%;

            width: 100%;

        }

    </style>

</head>

 

<body>

    <div id="app" style="overflow:auto">

       <!--页面内容-->

    </div>

    <script src="../Scripts/polyfill.min.js"></script>

    <script src="../Scripts/vue.min.js"></script>

    <script src="../Scripts/element-ui.js"></script>

    <script src="../Scripts/axios.min.js"></script>

 

    <script>

        var app = new Vue({

            el: '#app',

            data: function () {

                //数据

                return {

                 

                   

                }

            },

            methods: {

                //控件方法

            },

            watch:{

                //侦听属性

 

            },

            computed: {

                //计算属性

 

            },

            mounted: function () {

                //界面加载完成后触发

        

            }

        })

    </script>

</body>

 

</html>