Sails(v1) + Vue.js 完整攻略

Sails(v1) + Vue.js 完整攻略

一、Sails 架構簡易說明

新增sails  : 一句指令搞定

npm install sails -g

開啟新的專案

sails new test-project  開啟新的

依指示進行(選擇1:web App) , sails v1 改版 將vue.js 列為為前端工具

啟動專案

sails lift

當然~ 他的網頁架構非常的複雜，一時之間也很難說明，依主架構分如下

1.         Controller : 邏輯層:  依頁面名稱來放置位置

範例1: 有Page頁面的controller

module.exports = {   exits: {     success: {       viewTemplatePath: 'pages/dispatch/add-cases',     },     redirect: {       description: 'The requesting user is already logged in.',       responseType: 'redirect'     }   },   fn: async function (inputs, exits) {     return exits.success();   } };

ViewTemplatePath: 使用Pages 頁面，如果沒設定頁面時，通常是用來呼叫資料或存取資料用，例如WEB API

範例2: 傳入資料，並寫入資料

module.exports = {   inputs: {     title:{       required: true,       type: 'string',       description:"請說明任務名稱"      },      content:{       required: false,       type: 'string',       description:"請說明任務內容"      },      caseType:{       required: true,       type: 'number',       description:"任務選項"      },      dispatchTime:{       required: true,       type: 'string',       description:"任務日期"      }   },   exits: {     success: {       description: 'The message was sent successfully.'     }   },   fn: async function(inputs, exits) {     console.log(inputs);     await Cases.create(       {         title:inputs.title,         content:inputs.content,         caseType:inputs.caseType,         dispatchTime:inputs.dispatchTime       }      );      console.log(this.req);     return exits.success();   } };

Fn: 函式用inputs 接收頁面傳回的資料，Inputs的值型別，要事先宣告

物件型別，之後透過前端頁面傳入inputs欄位值，並將值存入資料表

直接新增/修改/刪除資料，參考以下官方文件: https://sailsjs.com/documentation/reference/waterline-orm/models

有更多關於資料的methods使用說明

2.         Model : 建立資料層 (建立資料表的欄位)

module.exports = {   attributes: {     title: {       type: 'string'     },     content: {       type: 'string'     },     caseType: {       type: 'number'     },     startDate: {       type: 'string'     },     endDate: {       type: 'string'     },     startLocation: {       type: 'string'     },     endLocation: {       type: 'string'     }   }, };

如同資料表，訂好資料模組存取的型態和名稱

3.         Vue.js

引用vue.JS , 讓原本的sails的頁面EJS (HTML和JavaScript) 分離

Assets/JS/pages/ dispatch/list-cases.js :

//在sails 中的寫法， 以parasails.registePage 宣告對應頁面名稱 parasails.registerPage("list-cases",{     data:{         lists:[],     },     beforeMount: function() {         // Attach raw data exposed by the server.         _.extend(this, window.SAILS_LOCALS);//讀取controller傳入參數       },       methods: {         edit(){             alert("你確定要修改嗎?");         },       } });

如果有從controller端傳回資料到View中，需要事先在beforeMount 將window.SAILS_LOCALS 加到this 物件中

Views/pages/dispatch/list-cases.ejs (畫面)

//id的值，呼應parasails.registePage，所以id名稱不能重複 <div id="list-cases" v-cloak>      <table class="table table-striped">         <thead>             <tr>                 <th scope="col">#</th>                 <th scope="col">標題</th>                 <th scope="col">內文</th>                 <th scope="col">日期</th>                 <th>功能</th>             </tr>         </thead>         <tbody> //list並未喧告在Vue.js, 資料是直接從sails的controller的值             <tr v-for="(item, index) in lists">                 <th scope="row">                     <div class="checkbox">                         <label><input type="checkbox" value=""></label>                     </div>                 </th>                 <td>{{item.title}}</td>                 <td>{{item.content}}</td>                 <td>{{item.dispatchTime}}</td>                 <td>                     <a href=# @click="edit"> <span style="font-size: 18px; color:coral;">                             <i class="far fa-edit"></i>                         </span>                     </a>                     &nbsp;                     <a href=#>                         <span style="font-size: 18px; color: Dodgerblue;">                             <i class="fas fa-trash"></i>                         </span>                     </a>                 </td>             </tr>         </tbody>     </table> </div> <%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %> //在畫面最下面，一定要加這一行

VUE.js要讀取到window.SAILS_LOCALS物件，而這是唯一從sails的controller讀取傳回參數的方法之一，官方說法，這樣才會安全性，如果有興趣的朋友可以再深入研究相關的話題。

Controller: 

module.exports = {     exits: {       success: {         responseType: 'view',         viewTemplatePath: 'pages/dispatch/list-cases',       },         redirect: {         description: 'The requesting user is already logged in.',         responseType: 'redirect'       }     },         fn: async function (inputs, exits) {       var lists = await Cases.find();//讀取所有Cases的所有資料列       return exits.success({lists: lists}); //傳回參數     }   };

設定mongoDB

Config /datastores.js

module.exports.datastores = {   default: {    adapter: 'sails-mongo',    url: 'mongodb://root@localhost/foo'   }, };

如果是本機端有mongoServer : mongodb://root@localhost/dbname  , 如果是遠端mongoDB Server 就要設遠端的連線。

Config/ Model.js

module.exports.models = {   schema: true,   migrate: 'alter',   attributes: {     createdAt: { type: 'number', autoCreatedAt: true, },     updatedAt: { type: 'number', autoUpdatedAt: true, },     id: {  type: 'string', columnName: '_id' },     //---------------------------------------     //  /\   Using MongoDB?     //  ||   Replace `id` above with this instead:     //     // ```     // id: { type: 'string', columnName: '_id' },     // ```     //     // Plus, don't forget to configure MongoDB as your default datastore:     // https://sailsjs.com/docs/tutorials/using-mongo-db     //--------------------------------------------------   },

mongoDB要_id取代原本的id項目

設定routing

module.exports.routes = {     'GET /dispatch/addCases': { action: 'dispatch/add-cases' },   'GET /dispatch/listCases':{ action: 'dispatch/list-cases' },   'POST  /api/v1/dispatch/saveCases':  { action: 'dispatch/save-cases' }, };

所有POST/GET 的網址都要在Config/routes.js 設定

設定Assets/JS/ Cloud.setup.js

Cloud.setup({   /* eslint-disable */   methods: {"saveCases": {"verb":"POST","url":"/api/v1/dispatch/saveCases","args":["title","content","caseType","dispatchTime","dispatchTime"]}   /* eslint-enable */ });

將參數結果送出某個controller (前端語法)，再由後端controller的inputs 變數接收下來，參數一定要一致，否則無法傳送到後端喔… 這很重要!!!!

儲存頁面

列表:

以上是簡單的介紹喔~