Design

Design
asp.net mvc

2018年6月25日 星期一

懶得用DB 那就建個.json資料 來webapi CRUD吧

有時候懶得搞DB 這時候我們就可以本地建個JSON檔或是XML檔來當做資料庫
當然我不推崇這種方法 因為這會有很多問題 一方面效能 一方面資安 等等各種問題

那至於該怎做呢 方便我們前端呼叫做存取 這邊用webapi 當作範例
這邊依照飲料做為範例 先定義我們的Model格式吧





public class Type
    {
        public string Size { get; set; }
        public int Price { get; set; }
    }

    public class Drink
    {
        public int Drinkid { get; set; }
        public string DrinkName { get; set; }
        public List type { get; set; }
        public string Remarks { get; set; }
    }

    public class Blend
    {
        public string blendName { get; set; }
        public int Price { get; set; }
    }

    public class StoreModel
    {
        public int id { get; set; }
        public string StoreName { get; set; }
        public string Url { get; set; }
        public List Drink { get; set; }
        public List blend { get; set; }
        public string StoreRemarks { get; set; }
    }

再來就是簡單的CRUD 這邊自行看看吧 這邊都是邏輯都很簡單都是一照我們ID去找我們的資料再來重新復寫我們的資料

 public class StoreController : ApiController
    {

        [AllowAnonymous]
        [HttpPost]
        public List GetStore()
        {
            var mappedPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Store/Store.json");

            return JsonConvert.DeserializeObject>(File.ReadAllText(mappedPath));

        }

        [AllowAnonymous]
        [HttpPost]
        public StoreModel GetStorebyID(int id)
        {
            var mappedPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Store/Store.json");
            using (StreamReader r = new StreamReader(mappedPath))
            {
                string json = r.ReadToEnd();
                return JsonConvert.DeserializeObject>(json).Find(x => x.id == id);
            }
        }


        [AllowAnonymous]
        [HttpPost]
        public bool DeleteById(int id)
        {
            try
            {
                var mappedPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Store/Store.json");
                var json = JsonConvert.DeserializeObject>(File.ReadAllText(mappedPath)).Find(x => x.id != id);
                var list = new List();
                list.Add(json);
                File.WriteAllText(mappedPath, JsonConvert.SerializeObject(list));
                return true;
            }
            catch (Exception e)
            {
                return false;
            }
        }

        [AllowAnonymous]
        [HttpPost]
        public bool Add(StoreModel StoreModel)
        {
            try
            {
                var mappedPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Store/Store.json");
                var json = JsonConvert.DeserializeObject>(File.ReadAllText(mappedPath));
                json.Add(StoreModel);
                File.WriteAllText(mappedPath, JsonConvert.SerializeObject(json));
                return true;
            }
            catch (Exception e)
            {
                return false;
            }
        }

    }

這邊就簡單做個紀錄

2018年6月23日 星期六

vscode 起手vue cli

最近剛有新筆電 開始想寫些side project 經過一陣子的磨練發現自己寫工具的能力大大提升
心想那何不增加自己的github stat,剛好把這些過程稍微紀錄一下生篇文章給需要的人
vscode 算現在最潮的editor, vue 也從library漸漸發展成framework 那就開始吧

首先先安裝vscode吧
https://code.visualstudio.com/

再來安裝我們的nodejs
https://nodejs.org/en/
左邊LTS算是穩定版  右邊算是現在的版本
我們就選擇穩定版吧  這個看個人需求


再來就可以開始安裝我們的vue cli了
vue cli 可以幫助我們在開發vue上快速建立起我們的環境及基本的設定
相關文件可以參考
https://cli.vuejs.org/guide/


首先開啟我們的vscode 在我們的終端機開輸入我們以下語法
 
npm install -g @vue/cli



安裝完後我們就可以透過vue cli的建立起我們的專案

vue init webpack my-project



然後就會要你輸入一些東西 專案名阿 什麼的

幫方便的是他連webpack都自動幫你封裝好了
至於webapck有時間再來詳細說明
我們精美的範例就出來的



接下來我們把專案run起來吧
cd到我們的專案 然後輸入 npm run dev  就可以看到我們8080 port就有我們的vue基本畫面接下來就可以開心開發我們的vue 網頁了
 cd my-project
npm run dev


這是vue cli 最基本中的基本用法  , 未來在來分享些架構上的東西
有任何問題可以在底下留言